@charset "utf-8";

.sec-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.7rem; }
.sec-top h3 { font-size: var(--fs-32); font-weight: 600; line-height: 1.4; }
.more-btn { display: inline-flex; align-items: center; gap: 1rem; font-size: var(--fs-16); font-weight: 700; }
.more-btn .ico-plus { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 3.6rem; height: 3.6rem; border-radius: 50%; color: #fff; background: var(--key-color); font-style: normal; transition: .3s ease; }
.more-btn .ico-plus::before { content: ""; display: block; width: 10px; height: 3px; background: #fff; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); transition: .3s ease; }
.more-btn .ico-plus::after { content: ""; display: block; width: 3px; height: 10px; background: #fff; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); transition: .3s ease; }
.more-btn:hover .ico-plus::before { transform: translate(-50%, -50%) rotate(180deg); }
.more-btn:hover .ico-plus::after { transform: translate(-50%, -50%) rotate(180deg); }


/* Main Visual */
.main-visual { position: relative; }
.main-visual .main-visual-bg { position: absolute; inset:0; background: url("/resources/img/main/visual.jpg") no-repeat center/cover; }
.main-visual .inner { z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; height: 100%; padding: 7.6rem 0 6.6rem; }
.main-search-box { display: flex; align-items: center; width: 100%; max-width: 72rem; height: 7rem; border-radius: 6rem; background: #fff; overflow: hidden; }
.main-search-box input { width: calc(100% - 11rem); height: 100%; padding: 0 3.6rem; border: 0; font-size: var(--fs-16); font-weight: 600; }
.main-search-box input:focus { outline: none; }
.main-search-box :where(button, a) { display: flex; align-items: center; justify-content: center; width: 11rem; height: 100%; background: #6FBA2C; color: #fff; font-size: var(--fs-18); font-weight: 700; border-radius: 11rem; }
.main-hashtags { display: flex; align-items: center; gap: 2.5rem; margin-top: 1.2rem; }
.main-hashtags li a { font-size: var(--fs-16); color: #fff; font-weight: 700; line-height: 1.6; }

.recent-update-wrap { position: relative; }
.recent-update { width: 100%; }
.recent-update > h3 { margin-bottom: 2rem; font-size: var(--fs-20); color: #fff; font-weight: 800; }
.recent-update .swiper-container li > a { display: flex; align-items: center; gap: 2.8rem; padding: 2.4rem 2.8rem; border-radius: 2.4rem; background: #fff; }
.recent-update .swiper-container li .thumb { width: 15rem; aspect-ratio: 150/212; flex-shrink: 0; }
.recent-update .swiper-container li .thumb img { width: 100%; height: 100%; object-fit: cover; }
.recent-update .swiper-container li .text { flex: 1; min-width: 0; height: fit-content; }
.recent-update .swiper-container li .badge { display: inline-block; padding: .4rem 1.6rem; border-radius: 5rem; border: 1px solid #0068b7; color: #0068b7; font-size: 14px; font-weight: 700; line-height: 1.6; }
.recent-update .swiper-container li .tit { display: -webkit-box; word-wrap: break-word; -webkit-line-clamp: 2; -webkit-box-orient: vertical; text-overflow: ellipsis; overflow: hidden; margin-top: 1rem; font-size: var(--fs-24); font-weight: 700; line-height: 1.4; }
.recent-update .swiper-container li .desc { margin-top: 1.8rem; font-size: var(--fs-16); color: #666; line-height: 1.4; }

.recent-update .swiper-arrow { width: calc(100% + 10rem); position: absolute; left: 50%; top:50%; transform: translate(-50%, -50%); display: flex; justify-content: space-between; pointer-events: none; }
.recent-update .swiper-arrow > div { pointer-events: auto; border-radius: 50%; background: rgba(255, 255, 255, 0.3) url('/resources/img/common/ico_swiper.svg') no-repeat center/7px; border:1px solid rgba(255, 255, 255, 0.3); }

@media screen and (max-width:1500px){
    .recent-update-wrap { width: calc(100% - 10rem); margin:0 auto; }
    .recent-update > h3 { width: calc(100% - 10rem); margin:0 auto 2rem; }
}
@media screen and (max-width:768px){
    .main-visual .inner { padding: 7.6rem 24px 6rem; }
    .recent-update { margin-top: 3rem; }
    .recent-update-wrap { width: 100%; }
    .recent-update > h3  { width: 100%; }
    .recent-update .swiper-arrow { width: 9rem; left:auto; right:0; top:-1rem; transform: translateY(-100%); }
}
@media screen and (max-width:500px){
    .recent-update .swiper-container li .thumb { width: 55%; }
    .recent-update .swiper-container li > a { flex-direction: column; }
}

/* Publications */
.publications-section { position: relative; padding: 7rem 0 5rem; }
.publications-section::before { content: ""; position: absolute; right: 0; bottom: 0; width: 48.3rem; aspect-ratio: 483/349; background: url('/resources/img/common/ico_jpi.svg') no-repeat center/cover; }
.publications-section .board-tab-buttons { margin-bottom: 3rem; }
.board-tab-buttons ul { display: flex; flex-wrap: wrap; gap: .5rem; }
.board-tab-buttons button { height: 4.5rem; padding: 0 3rem; border-radius: 5rem; border: 1px solid #ccc; color: #ccc; font-size: var(--fs-16); font-weight: 700; line-height: 1.6; }
.board-tab-buttons button.active { border-color: var(--key-color); background: var(--key-color); color: #fff; }
.publications-section .publications-wrap { position: relative; }
.publications-section .swiper-container li a { display: block; }
.publications-section .swiper-container li .img { aspect-ratio: 322/410; padding: 4rem; border: 1px solid #ccc; background: #fff; box-shadow: 0 0.5rem 1.3rem rgba(0, 0, 0, 0.08); border-radius: 1.6rem; transition: .3s ease; }
.publications-section .swiper-container li .img img { width: 100%; height: 100%; object-fit: cover; }
.publications-section .swiper-container li .text { margin-top: 2.5rem; transition: .3s ease; }
.publications-section .swiper-container li .text .badge { display: inline-block; margin-bottom: 1rem; padding: .5rem 2rem; border-radius: 5rem; border: 1px solid var(--key-color); color: var(--key-color); font-size: var(--fs-16); font-weight: 700; line-height: 1.6; transition: .3s ease; }
.publications-section .swiper-container li .text .tit { display: -webkit-box; word-wrap: break-word; -webkit-line-clamp: 2; -webkit-box-orient: vertical; text-overflow: ellipsis; overflow: hidden; font-size: var(--fs-20); font-weight: 700; line-height: 1.4; }
.publications-section .swiper-container li .text .txt { display: none; }
    .publications-section .swiper-container li.hover-yellow:hover .img { border:1px solid var(--yellow-color); }
    .publications-section .swiper-container li.hover-yellow:hover .text { color: var(--yellow-color); }
    .publications-section .swiper-container li.hover-yellow .text .badge { border-color: var(--yellow-color); color: var(--yellow-color); }
    .publications-section .swiper-container li.hover-blue:hover .img { border:1px solid var(--blue-color); }
    .publications-section .swiper-container li.hover-blue:hover .text { color: var(--blue-color); }
    .publications-section .swiper-container li.hover-blue .text .badge { border-color: var(--blue-color); color: var(--blue-color); }
    .publications-section .swiper-container li.hover-green:hover .img { border:1px solid var(--green-color); }
    .publications-section .swiper-container li.hover-green:hover .text { color: var(--green-color); }
    .publications-section .swiper-container li.hover-green .text .badge { border-color: var(--green-color); color: var(--green-color); }
.publications-section .swiper-arrow { width: calc(100% + 20rem); position: absolute; left: 50%; top:50%; transform: translate(-50%, -50%); display: flex; justify-content: space-between; pointer-events: none; }
.publications-section .swiper-arrow > div { width: 7rem; height: 7rem; pointer-events: auto; border-radius: 50%; background: #F2F3F7 url('/resources/img/common/ico_swiper_b.svg') no-repeat center/7px; }

@media screen and (max-width:1500px){
    .publications-section .publications-wrap { width: calc(100% - 12rem); margin:0 auto; }
    .publications-section .swiper-arrow { width: calc(100% + 12rem); }
    .publications-section .swiper-arrow > div { width: 5rem; height: 5rem; }
    .publications-section .swiper-container li .img { padding: 3rem; }
    .publications-section::before { width: 24rem; opacity: 0.7; }
}
@media screen and (max-width:1024px){
    .publications-section .swiper-container li .img { padding: 2.4rem; }
    .publications-section::before { width: 20rem; }
}

/* Conference */
.conference-section { z-index: 1; position: relative; padding: 5rem 0 7rem; }
.conference-section::before { z-index: -1; content: ""; position: absolute; left: 0; top: -24%; width: 62.3rem; aspect-ratio: 623/723; background: url('/resources/img/main/conference_bg.png') no-repeat center/cover;  }
.conference-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7.8rem; margin-top: 0.3rem; }
.conference-featured { display: block; }
.conference-featured .thumb { aspect-ratio: 675/360; border-radius: .8rem; overflow: hidden; }
.conference-featured .thumb img { width: 100%; height: 100%; object-fit: cover; }
.conference-featured .txt { margin-top: 1.7rem; }
.conference-featured .tit { margin-bottom: 1.5rem; font-size: var(--fs-24); font-weight: 700; line-height: 1.6; }
.conference-featured .meta { display: flex; gap: 1.1rem; color: #666; font-size: var(--fs-16); line-height: 1.4; }
.conference-featured .meta b { color: #333; font-weight: 600; }
.conference-list { display: flex; flex-direction: column; gap: 3rem; }
.conference-list li a { display: flex; align-items: flex-start; justify-content: space-between; gap: 2rem; }
.conference-list .text { width: calc(100% - 19.5rem); }
.conference-list .tit { margin-bottom: .6rem; font-size: var(--fs-20); font-weight: 700; line-height: 1.6; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }
.conference-list .desc { color: #666; font-size: var(--fs-16); line-height: 1.4; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }
.conference-list .thumb { width: 18.8rem; aspect-ratio: 188/100; border-radius: .8rem; overflow: hidden; }
.conference-list .thumb img { width: 100%; height: 100%; object-fit: cover; }

@media screen and (max-width:1300px){
    .conference-section::before { width: 33%; top:0; transform: translateY(-15%); }
}
@media screen and (max-width:1024px){
    .conference-grid { gap: 5rem; }
    .conference-list .thumb { width: 15rem; }
}
@media screen and (max-width:768px){
    .conference-grid { display: flex; flex-direction: column; gap: 4rem; }
    .conference-list li a { gap:1rem; }
}


/* Board Area */
.board-section { padding: 7rem 0; background: #eff4fc; }
.board-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10rem; }
.board-top { display: flex; align-items: center; justify-content: space-between; min-height:4.5rem; margin-bottom: 3rem; }
.board-top h3 { font-size: var(--fs-26); font-weight: 800; line-height: 1.4; }
.small-tabs { display: flex; gap: .6rem; }
.small-tabs li button { min-width: 11rem; height: 4.5rem; padding: 0 2rem; border: 1px solid #ccc; border-radius: 5rem; color: #ccc; background: white; font-size: var(--fs-16); font-weight: 700; }
.small-tabs li.active button { color: #fff; border-color: var(--key-color); background: var(--key-color); }

.notice-list { display: flex; flex-direction: column; gap:2.4rem; padding: 3rem 4.2rem; border-radius: 2.6rem; background: #fff; }
.notice-list .notice-main { display: flex; gap: 2.7rem; align-items: center; }
.notice-list .notice-main .date-box { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 10rem; height: 10rem; border: 1px solid var(--blue-color); border-radius: 2.6rem; color: var(--blue-color); }
.notice-list .notice-main .date-box strong { font-size: 3.2rem; font-weight: 800; line-height: 1; }
.notice-list .notice-main .date-box span { margin-top: .6rem; font-size: 1.4rem; line-height: 1.2; }
.notice-list .notice-main .txt { flex: 1; }
.notice-list .notice-main .tit { font-size: var(--fs-24); font-weight: 700; line-height: 1.4; }
.notice-list ul li a { position: relative; display: flex; justify-content: space-between; gap: 1.2rem; padding-left: 1.4rem; margin-top: .8rem; color: #565656; font-size: var(--fs-16); line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.notice-list ul li a::before { content: ""; position: absolute; top: .7rem; left: 0; width: .3rem; height: .3rem; border-radius: 50%; background: #333; }
.notice-list ul li span { line-height: 1.4; }
.notice-list ul li .tit { text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }
.notice-list ul li .date { color: #afafaf; white-space: nowrap; flex-shrink: 0; }

.news-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4.4rem; }
.news-cards li a { display: block; }
.news-cards .thumb { height: 16rem; border-radius: .8rem; overflow: hidden; }
.news-cards .thumb img { width: 100%; height: 100%; object-fit: cover; }
.news-cards .tit { margin-top: 2rem; font-size: var(--fs-18); font-weight: 700; line-height: 1.4; }
.news-cards .date { display: block; margin-top: 1.2rem; color: #666; font-size: var(--fs-16); line-height: 1.4; }

@media screen and (max-width:1500px){
    .board-grid { gap: 8rem; }
}
@media screen and (max-width:1024px){
    .board-grid { gap: 5rem; }
}
@media screen and (max-width:768px){
    .board-grid { display: flex; flex-direction: column; gap: 4rem; }
    .news-cards { gap:2rem; }
}
@media screen and (max-width:480px){
    .notice-list { padding: 2rem; }
    .notice-list .notice-main { flex-direction: column; align-items: start; gap:1rem; }
    .notice-list .notice-main .date-box { width: 8rem; height: 8rem; }
    .notice-list .notice-main .date-box span { margin-top: 0; }
    
    .board-top { flex-wrap:wrap; gap:1rem; }
}

/* Jeju Forum */
.jeju-forum-banner { padding: 7rem 0; }
.banner-inner { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 5.5rem 2rem 7rem; border-radius: 3rem; overflow: hidden; text-align: center; color: #fff; }
.banner-inner::before { content: ""; position: absolute; inset: 0; background: url("/resources/img/main/forum_bg.jpg") no-repeat center/cover; }
.banner-inner > * { z-index: 1; position: relative; }
.banner-inner .kicker { margin-bottom: 1rem; font-size: var(--fs-24); font-weight: 800; line-height: 1.5; }
.banner-inner h3 { font-size: var(--fs-42); font-weight: 800; line-height: 1.25; }
.banner-inner .btns { width: 100%; display: flex; justify-content: center; gap: 1rem; margin-top: 3rem; }
.banner-inner .btns a { display: inline-flex; align-items: center; justify-content: center; min-width: 23.7rem; height: 6.2rem; padding: 0 2rem; border-radius: 6.2rem; font-size: var(--fs-18); font-weight: 800; background: var(--yellow-color); color: #fff; }

@media screen and (max-width:768px){
    .banner-inner .btns a { width: 34%; min-width: auto; }
}
@media screen and (max-width:480px){
    .banner-inner { padding: 6rem 2rem 7rem; }
    .banner-inner .btns { flex-direction: column; gap:1rem; }
    .banner-inner .btns a { width: 100%; min-width: auto; }
}


/* Subscribe */
.subscribe-section { padding: 0 0 7rem; text-align: center; }
.subscribe-section h3 { font-size: var(--fs-26); font-weight: 800; line-height: 1.4; }
.subscribe-section p { margin-top: .8rem; font-size: var(--fs-18); line-height: 1.4; }
.subscribe-form { display: flex; max-width: 66rem; margin: 3rem auto 0; gap:1rem; justify-content: center; height: 6rem; }
.subscribe-form input { width: 100%; height: 100%; padding: 0 3rem; border: 2px solid var(--key-color); border-radius: 6rem; font-size: 14px; }
.subscribe-form button { flex-shrink: 0; display: flex; align-items: center; gap:.8rem; justify-content: center; width: 17.6rem; height: 100%; border-radius: 6rem; background: var(--key-color); color: #fff; font-size: var(--fs-18); font-weight: 800; margin-left: -.5rem; }
.subscribe-form button::before { content: ''; width: 2rem; aspect-ratio: 20/23; background: url('/resources/img/common/ico_alert.svg') no-repeat center/cover; }
.subscribe-section .notice { display: inline-block; margin-top: 1.8rem; font-size: 14px; color: #747474; line-height: 1.4; }

@media screen and (max-width:480px){
    .subscribe-form { height: auto; flex-direction: column; gap:0.5rem; }
    .subscribe-form input { width: 100%; height: 6rem; }
    .subscribe-form button { width: 100%; height: 6rem; }
}


/* [필수] 인덱스 팝업 */
.divpop { position: fixed; background: #fff; border: 1px solid #eee; z-index: 9999; }
.divpop .close_box { padding: 5px; color: #000; border-top: 1px solid #eee; }
.divpop .close_box label { font-size: 12px; }
.divpop .close_box .close { float: right; padding-top: 3px; cursor: pointer; font-size: 14px; color: #999; }

@media screen and (max-width: 1200px){ 
    .divpop { left: 0px !important;} 
}
@media screen and (max-width: 768px){ 
    .divpop { width: 100% !important; height: auto !important; top: 0px !important; left: 0px !important; } 
}