@charset "utf-8";
.inner { max-width: 1440px; }

/* Main Visual */
.main_visual { position: relative; height: 64rem; background: #EEEEEE; }
.main_visual .swiper-container { height: 100%; }
.main_visual .inner { height: 100%; }
.main_visual .inner:has(.visual_list) { position: absolute; inset: 0; }
.main_visual .visual_list { z-index: 5; position: absolute; width: 38rem; height: 100%; right:0; top:0; background: #00000030; padding: 2rem 5rem; }
.main_visual .visual_list ul { display: flex; flex-direction: column; justify-content: center; gap:1rem; height: 100%; }
.main_visual .visual_list li { position: relative; padding: 1rem 0; color:white; font-weight: 600; font-size: var(--font-size-22); border-bottom:1px solid transparent; opacity: 0.6; transition: .3s; cursor: pointer; }
.main_visual .visual_list li::before { content: ''; display: block; position: absolute; left:0; top:50%; transform: translateY(-50%); width: .8rem; height: 3px; transform: scale(0,1); transform-origin: left; background: white; transition: .3s; }
.main_visual .visual_list li.active { padding-left: 2rem; border-bottom-color: rgba(255, 255, 255, 0.50); opacity: 1; }
.main_visual .visual_list li.active::before { transform: scale(1); }

.main_visual .visual_content { display: flex; flex-direction: column; justify-content: space-between; height: 100%; padding: 10rem 0; color:white; }
.main_visual .visual_title h2 { position: relative; height: calc(var(--font-size-48) + 1rem); margin-bottom: 2rem; font-size: var(--font-size-48); font-weight: 600; line-height: 1; overflow: hidden; }
.main_visual .visual_title p { position: relative; height: calc(var(--font-size-24) + 1rem); font-size: var(--font-size-24); line-height: 1.4; overflow: hidden; }
.main_visual .visual_title span { position: absolute; inset: 0; transform: translateY(100%) rotate(-8deg); transition: 1.5s cubic-bezier(0.23, 1, 0.32, 1); }
.main_visual .visual_title h2 span { transition-delay: .1s; }
.main_visual .visual_title p:nth-child(2) span { transition-delay: .3s; }
.main_visual .visual_title p:nth-child(3) span { transition-delay: .5s; }
.main_visual .visual_content a { width: fit-content; display: flex; align-items: center; justify-content: center; gap:.8rem; padding: 1rem 3rem; height: 5rem; border:1px solid white; opacity: 0; transition: .6s; transform: translateX(50%); color:white; border-radius: 5rem; }
.main_visual .visual_content a i { filter:brightness(3); transition: .3s; }
.main_visual .visual_content a:hover { background: white; color:var(--main-black); }
.main_visual .visual_content a:hover i { filter: none; }
.main_visual .swiper-slide-active .visual_title span { transform: translateY(-.5rem); }
.main_visual .swiper-slide-active a { opacity: 1; transform: none; }

.main_visual .bg { position: absolute; inset: 0; }
.main_visual .visual-1 .bg { background: url('/resources/img/main/visual_1.jpg') no-repeat center/cover; }
.main_visual .visual-2 .bg { background: url('/resources/img/main/visual_2.jpg') no-repeat center/cover; }
.main_visual .visual-3 .bg { background: url('/resources/img/main/visual_3.jpg') no-repeat center/cover; }
.main_visual .visual-4 .bg { background: url('/resources/img/main/visual_4.jpg') no-repeat center/cover; }
.main_visual .visual-5 .bg { background: url('/resources/img/main/visual_5.jpg') no-repeat center/cover; }
.main_visual .visual-6 .bg { background: url('/resources/img/main/visual_6.jpg') no-repeat center/cover; }
.main_visual .visual-7 .bg { background: url('/resources/img/main/visual_7.jpg') no-repeat center/cover; }
.main_visual .visual-8 .bg { background: url('/resources/img/main/visual_8.jpg') no-repeat center/cover; }

.main_visual .swiper_util_inner { z-index: 5; position: absolute; inset: 0; max-width: 1760px; margin:0 auto; pointer-events: none; }
.main_visual .swiper_util_inner .swiper-pagination { position: absolute; left:50%; bottom:3.2rem; transform: translate(-50%, -50%); pointer-events: initial; }
.main_visual .swiper_util_inner .swiper-pagination-bullet { position: relative; width: 2.4rem; height: 2.4rem; background: transparent; transition: .3s; }
.main_visual .swiper_util_inner .swiper-pagination-bullet::before { content: ''; position: absolute; left:50%; top:50%; transform: translate(-50%,-50%); width: .8rem; height: .8rem; border-radius: 1rem; background: white; }
.main_visual .swiper_util_inner .swiper-button-prev { background-image: url('/resources/img/common/swiper_arw_w.svg'); pointer-events: initial; } 
.main_visual .swiper_util_inner .swiper-button-next { background-image: url('/resources/img/common/swiper_arw_w.svg'); pointer-events: initial; } 
.main_visual .swiper_util_inner .swiper-pagination-bullet-active { width: 3.2rem; }
.main_visual .swiper_util_inner .swiper-pagination-bullet-active::before { width: 100%; }


/* 게시판 */
.board_section { padding-top: 10rem; }
.board_section .inner { display: flex; gap:7.5rem; }
.board_section h3 { margin-top: 1rem; margin-bottom: 3.6rem; font-weight: 600; font-size: var(--font-size-22); }

.board_wrap { flex:1; }
.board_tab_buttons { display: flex; align-items: center; justify-content: space-between; margin-bottom: 2.2rem; border-bottom:1px solid var(--key-blue-light-color); }
.board_tab_buttons > a { display: flex; gap:.8rem; align-items: center; color: var(--sub-black); }
.board_tab_buttons ul { display: flex; }
.board_tab_buttons li button { width: 18rem; height: 5rem; padding-top: .8rem; margin-left:-1px; border-radius: 1.6rem 1.6rem 0 0; border: 1px solid #CCC; border-bottom:none; font-size: var(--font-size-18); font-weight: 600; color:#999999; background: white; cursor: pointer; }
.board_tab_buttons li button.active { position: relative; z-index: 1; border-color:var(--key-blue-light-color); color:var(--key-blue-light-color); }
.board_tab_buttons li button.active::after { content: ''; position: absolute; left:0; width: 100%; height: 1px; bottom:-1px; background: white; }

.board_wrap .board_tab { display: none; }
.board_wrap .board_tab.active { display: block; }
.board_list ul { display: grid; grid-template-columns: repeat(3, 1fr); gap:2.2rem; }
.board_list li { border: 1px solid #CCCCCC; background: #FAFAFA; border-radius: 1.6rem; transition: .3s; }
.board_list li a { display: flex; flex-direction: column; gap:1.7rem; justify-content: space-between; height: 100%; padding: 3.6rem 3rem; }
.board_list li .title { font-size: var(--font-size-18); font-weight: 800; line-height: 1.5;   overflow: hidden; text-overflow: ellipsis;  display: -webkit-box;  -webkit-line-clamp: 2;  -webkit-box-orient: vertical; transition: color .3s; }
.board_list li .date { font-size: var(--font-size-16); color:var(--sub-black); transition: color .3s; }

.board_list li:hover { border-color:var(--key-blue-light-color); }
.board_list li:hover :where(.title, .date) { color:var(--key-blue-light-color); }


/* QUICK MENU */
.board_section .quick_menu { width: 30.3rem; }
.board_section .quick_menu a { z-index: 1; display: flex; flex-direction: column; justify-content: space-between; padding: 3.8rem 2.8rem; margin-top: 2.2rem; height: 17rem; border-radius: 2rem; border: 1px solid transparent; transition: border .3s; }
.board_section .quick_menu a small { font-weight: 600; font-size: var(--font-size-16); line-height: 1; }
.board_section .quick_menu a::after { z-index: -1; content: ''; position: absolute; right:0; bottom:0; width: 13.8rem; aspect-ratio: 138/150; }
.board_section .quick_menu a p { margin-top: .4rem; font-weight: 600; font-size: var(--font-size-24); line-height: 1; }
.board_section .quick_menu a i { transition: .3s; }
.board_section .quick_menu a.library { position: relative; background: #E9F5E9; }
.board_section .quick_menu a.library small { color: var(--key-green-deep-color); }
.board_section .quick_menu a.library::after { background: url('/resources/img/main/main_2_library.png') no-repeat center/contain; }
.board_section .quick_menu a.inquiry { position: relative; background: #E8F0FE; }
.board_section .quick_menu a.inquiry small { color: var(--key-blue-light-color); }
.board_section .quick_menu a.inquiry::after { background: url('/resources/img/main/main_2_inquiry.png') no-repeat center/contain; }

.board_section .quick_menu a:hover i { margin-left: 1.5rem; }
.board_section .quick_menu a.library:hover { border:1px solid var(--key-green-light-color); }
.board_section .quick_menu a.inquiry:hover { border:1px solid var(--key-blue-light-color); }


/* 온라인 시스템 바로가기 */
.quick_section { margin-top: 5.5rem; }
.quick_section small { color:var(--key-blue-light-color); font-weight: 700; }
.quick_section h3 { margin-top: .4rem; font-weight: 600; font-size: var(--font-size-22); }
.quick_section .inner { display: flex; gap:7.8rem; align-items: center; }
.quick_section .quick_buttons { flex:1; display: flex; gap:2rem; color:white; }
.quick_section .quick_buttons a { flex:1; display: flex; align-items: center; gap:2.4rem; padding: 2rem 2.4rem; border-radius: 12rem; color:white }
.quick_section .quick_buttons a:nth-child(1) { background: var(--key-green-light-color); }
.quick_section .quick_buttons a:nth-child(2) { background: var(--key-blue-light-color); }
.quick_section .quick_buttons a:nth-child(3) { background: var(--key-blue-deep-color); }
.quick_section .quick_buttons a .icon { z-index: 1; position: relative; display: flex; align-items: center; justify-content: center; width: 8rem; aspect-ratio: 1/1; border-radius: 12rem; background: rgba(255, 255, 255, 0.15); transition: .3s; }
.quick_section .quick_buttons a .icon::before { z-index: -1; content: ''; position: absolute; right: 12%; bottom:12%; aspect-ratio: 1/1; width: 42%; background: radial-gradient(50% 50% at 50% 50%, #8FC64D 72%, rgba(143, 198, 77, 0.00) 100%); border-radius: 50%; opacity: 0; transform: scale(0.2); transition: .4s; }
.quick_section .quick_buttons dt { font-weight: 600; font-size: var(--font-size-24); }
.quick_section .quick_buttons dd { margin-top: .8rem; font-weight: 500; font-size: var(--font-size-18); }

.quick_section .quick_buttons a:hover .icon { background: white; }
.quick_section .quick_buttons a:hover .icon img { filter:invert(1); }
.quick_section .quick_buttons a:hover .icon::before { opacity: 1; transform: none; }


/* KRIEA 소개 */
.links_section { padding-top: 14.5rem; padding-bottom: 12rem; }
.links_section h3 { margin-bottom: 4rem; font-size: var(--font-size-32); font-weight: 700; }
.links_content { display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: 1fr auto; gap:2rem; }

.links_content .youtube_link { grid-row: 1/3; border-radius: 2rem; overflow: hidden; }
.links_content .youtube_link .iframe_wrap { aspect-ratio: 1335/747; border-radius: 2rem; overflow: hidden; }
.links_content .youtube_link img { width: 100%; height: 100%; object-fit: cover; }

.links_content .content_links { display: flex; gap:2rem; }
.links_content .content_links a { position: relative; flex:1; display: flex; flex-direction: column; justify-content: space-between; padding: 4rem; border-radius: 2rem; color:white; overflow: hidden; transition: .3s; }
.links_content .content_links a:nth-child(1) { background: url('/resources/img/main/main_4_bg1.jpg') no-repeat center/cover; }
.links_content .content_links a:nth-child(2) { background: url('/resources/img/main/main_4_bg2.jpg') no-repeat center/cover; }
.links_content .content_links a div p { font-size: var(--font-size-32); font-weight: 600; line-height: 1; transition: .3s; }
.links_content .content_links a div small { margin-top: .8rem; font-size: var(--font-size-18); line-height: 1; transition: .3s; }
.links_content .content_links a > p { text-align: right; transition: .3s; }

.links_content .content_links a:hover > p { letter-spacing: 1px; }


.public_links ul { display: flex; justify-content: center; gap:1rem; padding: 1rem; background:#F9F9F9; border-radius: 2rem; }
.public_links li { flex:1; }
.public_links a { display: flex; align-items: center; justify-content: center; flex-direction: column; gap:1rem; width: 100%; height: 100%; padding: 2rem; border-radius: 1.6rem; transition: .3s; text-align: center; }
.public_links a p { z-index: 1; font-weight: 600; font-size: var(--font-size-18); line-height: 1.3; }
.public_links .icon { z-index: 1; position: relative; }
.public_links .icon::before { content: ''; z-index: -1; position: absolute; left:0; bottom:0; width: 5.6rem; aspect-ratio: 1/1; border-radius: 50%; background: #DAE6F4; opacity: 0; transition: .3s; transform: translate(-40%,25%) scale(0.8); }

.public_links a:hover { background: #E8F0FE; }
.public_links a:hover .icon::before { transform: translate(-40%,25%) scale(1); opacity: 1; }


/* 최근 인증ㆍ평가 정보 */
.cert_section { padding: 12rem 0 10rem; background: #F9F9F9; overflow: hidden; }
.cert_section .title_wrap { display: flex; justify-content: space-between; margin-bottom: 2.2rem; }
.cert_section .swiper-button-wrap { display: flex; gap:.8rem; }
.cert_section .swiper-button-wrap > div { width: 4.8rem; height: auto; aspect-ratio: 1/1; border-radius: 50%; background: var(--key-blue-light-color) url('/resources/img/common/swiper_arw_w.svg') no-repeat center/contain; position: initial; transform: none; }
.cert_section .swiper-button-wrap > .swiper-button-prev { transform: scaleX(-1); }
.cert_section h3 { font-size: var(--font-size-32); font-weight: 700; }
.cert_section .swiper-slide { height: auto; }
.cert_section a { display: block; height: 100%; padding: 1rem 1rem 2rem; transition: .3s; border-radius: 2rem; cursor: default; }
.cert_section a .item_photo { border-radius: 2rem; aspect-ratio: 1/1; overflow: hidden; }
.cert_section a .item_photo img { width: 100%; height: 100%; object-fit: cover; }
.cert_section a dl { margin-top: 2rem; }
.cert_section a dt { font-weight: 600; font-size: var(--font-size-18); line-height: 1.3; color:var(--key-green-deep-color) }
.cert_section a dd { margin-top: .6rem; font-weight: 500; font-size: var(--font-size-20); line-height: 1.3;   overflow: hidden;  text-overflow: ellipsis;  display: -webkit-box;  -webkit-line-clamp: 2;  -webkit-box-orient: vertical; }
.cert_section .swiper-container { overflow: visible; }

/* .cert_section a:hover { background: #EEEEEE; } */


/* Logo Banners */
.partner_section { padding: 4rem 0; overflow: hidden; }
.partner_section .inner { display: flex; align-items: center; gap:2rem; }
.partner_section li { display: flex; align-items: center; justify-content: center; aspect-ratio: 20/8; padding: 1rem; background: #F9F9F9; border-radius: 1.2rem; overflow: hidden; }
.partner_section li img { width: 100%; max-width: fit-content; }
.partner_section .swiper-button-prev { flex-shrink: 0; width: 5rem; height: auto; aspect-ratio: 5/8; position: relative; top:auto; transform: scaleX(-1); }
.partner_section .swiper-button-next { flex-shrink: 0; width: 5rem; height: auto; aspect-ratio: 5/8; position: relative; top:auto; transform: none; }


@media screen and (max-width:1440px){
	.board_section .inner { gap:3rem }
	.board_list ul { gap:1.2rem; }
	.board_section .quick_menu a { margin-top: 1.2rem; }
	.board_tab_buttons li button { width: 16rem; }
	.board_list li a { padding: 3.6rem 2.6rem; }
	.quick_section .inner { gap:2rem; }
	.quick_section .quick_buttons { gap:1rem; }
	.quick_section .quick_buttons a { gap:1.2rem; }
}
@media screen and (max-width:1200px){
	.quick_section .inner { flex-direction: column; align-items: start; }
	.quick_section h3 br { display: none; }
	.quick_section .quick_buttons { width: 100%; }
	.public_links a { padding: 1rem; }
	.public_links .icon { width: 4.6rem; }
	.public_links .icon img { width: 100%; }
	.links_content .youtube_link { padding:2rem; background: #E8F0FE; border-radius: 2rem; }
	.links_content .content_links a { padding: 3rem; }
}
@media screen and (max-width:1024px){
	.board_section .inner { flex-wrap: wrap; }
	.board_wrap { flex:auto; width: 100%; }
	.board_section h3 { margin-bottom: 2rem; }
	.board_section .quick_menu { width: 100%; }
	.board_section .quick_menu > div { display: flex; gap:2rem; }
	.board_section .quick_menu > div > div { width: 100%; }
	.board_section .quick_menu > div > div a { margin-top: 0; }
	.quick_section .quick_buttons { flex-direction: column; }

	.links_content { grid-template-columns: 1fr; }
	.links_content .youtube_link { padding: 0; }
	.links_content .content_links a { gap:1rem; }
}
@media screen and (max-width:768px){
	.inner { width: 100%; padding: 0 24px; }

	.main_visual { height: 52rem; }
	.main_visual .visual_list { display: none; }
	.main_visual .visual_content { padding: 7rem 0; }
	.main_visual .visual_content a { background: white; color:var(--main-black); }
	.main_visual .visual_content a i { filter: none; }
	.main_visual .swiper_util_inner .swiper-pagination { bottom: 2rem; }
	.main_visual .bg { background-position-x: 41%; }

	.board_list ul { grid-template-columns: repeat(2, 1fr); }
	.board_section .quick_menu > div { gap:1.2rem; }
	.board_section .quick_menu a { padding: 2.8rem 2.8rem 3.4rem; }
	.board_section .quick_menu a::after { opacity: 0.3; }

	.board_wrap { position: relative; padding-bottom: 6rem; }
	.board_tab_buttons > a { position: absolute; left: 0; bottom: 0; width: 100%; height: 4.8rem; border:1px solid #ddd; border-radius: 1rem; justify-content: center; }
	.board_tab_buttons ul { width: 100%; }
	.board_tab_buttons li { width: 100%; }
	.board_tab_buttons li button { width: 100%; font-size: 15px; }

	.links_content { gap:1.2rem; }
	.links_content .content_links { gap:1.2rem; }
	.links_content .content_links a { padding: 2.4rem; }

	.cert_section { padding: 8rem 0 6rem; }
	.partner_section { padding: 2rem 0; }
	.partner_section .inner { padding: 0 4px; }
}
@media screen and (max-width:480px){
	.board_list ul { grid-template-columns: repeat(1, 1fr); }
	.partner_section .swiper-button-prev { width: 3rem; }
	.partner_section .swiper-button-next { width: 3rem; }
}