@import url('https://cdn.jsdelivr.net/gh/fonts-archive/Paperlogy/Paperlogy.css');

@font-face {
    font-family: 'yg-jalnan';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_four@1.2/JalnanOTF00.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

/*slide*/
#slide {width: 100%; height: 550px; overflow: hidden;}

.swiper, .swiper-wrapper, .swiper-slide {z-index: 1 !important;}

.swiper-button-next::after, .swiper-button-prev::after {color: #fff;}
.swiper-button-prev {left: 30px !important; right: auto !important;}
.swiper-button-next {right: 30px !important; left: auto !important;}

.autoplay-progress {position: absolute; right: 16px; bottom: 16px; z-index: 10; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; font-weight: bold; color: #fff;}
.autoplay-progress svg {--progress: 0; position: absolute; left: 0; top: 0px; z-index: 10; width: 100%; height: 100%; stroke-width: 4px; stroke: #fff; fill: none; stroke-dashoffset: calc(125.6px * (1 - var(--progress))); stroke-dasharray: 125.6; transform: rotate(-90deg);}

.slide_inner {width: 100%; max-width: 1280px; position: relative; margin: 0 auto;}

.slide01 {background: #f4e7d0 url('../../images/thema/main/visual/slide01_bg.jpg') center/cover no-repeat; background-size: auto 100%;}
.slide02 {background: #1098df url('../../images/thema/main/visual/slide02_bg.jpg') center/cover no-repeat; background-size: auto 100%;}

.slide01 .slide_content {width: 100%; position: relative; top: 50%; left: 80%; transform: translate(-56%, 62%); text-align: left; font-family: 'Paperlogy', sans-serif;}
.slide01 .slide_inner h2, .slide01 .slide_inner h3 {font-size: 44px; font-weight: 800;}
.slide01 .slide_inner h2 {color: #dd7d00;}
.slide01 .slide_inner h3 {color: #885e11;}
.slide01 .slide_inner p {font-size: 24px; font-weight: 400; color: #000; line-height: 1.3; margin-top: 30px;}

.slide02 .slide_inner {position: absolute; top: 54%; left: 50%; transform: translate(-50%, -50%); font-family: 'Paperlogy', sans-serif; color: #fff;}
.slide02 .slide_inner h2 {font-family: 'yg-jalnan', sans-serif; text-shadow: 0 6px 3px rgba(32, 92, 170, 0.78); line-height: 1.2;}
.slide02 .slide_inner .slide02_title01 {font-size: 54px;}
.slide02 .slide_inner .slide02_title02 {font-size: 72px;}
.slide02 .slide_inner .slide02_title02 span {font-style: italic;}
.slide02 .slide_inner .slide02_target {width: 450px; padding: 0 10px; margin: 20px 0;font-family: 'Paperlogy', sans-serif; background: #e95283;}
.slide02 .slide_inner .slide02_target h3 {font-size: 24px; font-weight: 500;}
.slide02 .slide_inner p {font-family: 'Paperlogy', sans-serif; font-size: 24px; font-weight: 400; line-height: 1.3; margin-top: 30px;}

.slide02 .slide02_person {width: 700px; display:flex; font-size: 22px; font-weight: 600; background: rgba(255, 255, 255, 0.9); color: #16587a; border-radius: 16px; flex-wrap: wrap; line-height: 1.2; padding: 20px;}
.slide02 .slide02_person li {margin-right:10px; letter-spacing: -1px; padding-right: 10px;}
.slide02 .slide02_person li:first-child {margin-bottom: 10px;}

.slide02 .slide_inner h4 {font-size: 20px; font-weight: 400; margin-top: 10px;}

.slide02_circle {position: absolute; top: 50%; right: 0; transform: translate(10%, -30%); display :flex;}

.slide02_img {width: 290px; height: 175px; position: absolute; top: 0; right: -8%; transform: translate(-50%); z-index: 1;}

.slide02_circle .circle_item {position: relative; width: 280px; height: 280px; border: 15px solid rgba(255,180,0, .9); box-shadow: 0 0 5px rgba(32, 92, 170, 1); border-radius: 50%;}
.slide02_circle .circle_item + .circle_item {margin-left: -15px;}

.slide02_circle .circle_inner {width: 100%; position: absolute; top: 30px; left: 50%; transform: translateX(-50%); color: #fff; text-align: center; display: flex; flex-direction: column; justify-content: flex-start;}
.slide02_circle .circle_inner h2 {font-size: 24px; font-family: 'Paperlogy', sans-serif; text-shadow: 0 0 3px rgba(120,86,6, 0.78); letter-spacing: -1px;}
.slide02_circle .circle_inner .info_text::after {content: ''; display: block; width: 25px; height: 1px; background: #fff; margin: 16px auto;}
.slide02_circle .circle_inner h3 {font-family: 'yg-jalnan', sans-serif; font-size: 30px; color: #fff000; text-shadow: 0 0 10px rgba(32, 92, 170, 1); line-height: 1.2;}

.slide02_circle .circle_inner h2 span {color: #fff000; font-weight: 700;}
.slide02_circle .circle_inner ul {margin-top: 10px;}
.slide02_circle .circle_inner ul li {font-size: 20px; line-height: 1.3;}

/*공통*/
section .inner {padding: 70px 0;}

.sec1_title {display: flex; justify-content: space-between; margin-bottom: 30px;}
.sec1_title .view_more {width: 40px; height: 40px; border-radius: 50%; background: #eee; border: none; position: relative; transition: ease .3s;}
.sec1_title .view_more::before, .sec1_title .view_more::after {content: ''; position: absolute; background: #999; width: 16px; height: 2px; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.sec1_title .view_more::after {transform: translate(-50%, -50%) rotate(90deg);}
.sec1_title .view_more:hover {background: #666;}
.sec1_title .view_more:hover::before, .sec1_title .view_more:hover::after {background: #fff;}

.main_board_wrap {width: 100%; display: flex; gap: 30px; justify-content: space-between; align-items: stretch;}

.promo_news, .notice {flex: 1; display: flex; justify-content: space-between; flex-direction: column; min-width: 0;}

/*홍보&보도*/
.promo_news_box {display: flex; flex-wrap: wrap; gap: 20px; }
.promo_news_item {width: calc(50% - 10px); height: 320px; border: 1px solid #ccc; border-radius: 20px; overflow:hidden; text-align: left;}

.promo_news_item a {display: flex; flex-direction: column; min-width: 0; align-items: flex-start; width: 100%; margin: 0; padding: 0;}
#main_board .promo_news_item .board_description {font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.promo_news_item .board_meta {padding-bottom: 0; margin-bottom: 0;}

.board_content {padding: 20px; min-width: 0; width: 100%; box-sizing: border-box;}
#main_board .board_title {display: block; width: 100%; font-size: 18px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}

.promo_news_no_data {border: 1px solid #ccc; border-radius: 20px; height: 320px; padding: 45px 35px; }

/*공지사항*/
.notice_box {width: 100%; height: 320px; border: 1px solid #ccc; border-radius: 20px; padding: 35px;}
.notice_list {width: 100%;}
.notice_item {display: flex; align-items: center; gap: 20px; height: 50px;}

.notice_badge {flex-shrink: 0; background: #fcb97d; color: #fff; border-radius: 16px; padding: 3px 15px; font-size: 16px; font-weight: 500; white-space: nowrap;}

.notice_title {flex: 1;min-width: 0; color: #333; text-decoration: none; font-weight: 300; font-size: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block;}
.notice_item .board_date {font-size: 18px; color: #888;}

/*2025.06.18. 유튜브*/
#main_youtube {background: #fafafa;}
.youtube_box {display: flex; justify-content: space-between; gap: 100px;}
.youtube_box .youtube_title h2 {display: flex; align-items: center; font-size: 40px; font-weight: 800;}
.youtube_box .youtube_title p {font-size: 18px; text-align: justify; letter-spacing: -1px;}
.youtube_box a {width: 200px; height: 40px; justify-content: space-between; padding: 4px 15px; margin-top: 40px; border-radius: 50px; border: 1px solid #444; font-size: 16px; font-weight: 700; transition: ease .3s; color: #444;}
.youtube_box a:hover {background: #FF0033; border: 1px solid #FF0033; color: #fff;}
.youtube_wrap {width: 100%; max-width: 1280px; aspect-ratio: 16 / 9; background: #ccc;}

.youtube_box p {font-size: 18px; text-align: center; margin-top: 20px;}

.ri-arrow-right-circle-line {color: #444; font-size: 20px; font-weight: 300; padding-top: 2px;}
.youtube_box a:hover .ri-arrow-right-circle-line {color: #fff;}

/*금복 채널*/
#main_channel {background: linear-gradient(to right, #fef0e4 0%, #f6f7e4 100%);}

.channel_wrap {display: flex; gap: 60px; align-items: flex-start; justify-content: space-between;}

.channel_info h2 {font-size: 38px; line-height: 1.2;}
.channel_info h2 strong {font-weight: 800; color: #333;}
.channel_info h2 span {font-weight: 800; color: #FFB347;}

.sns_list {margin-top: 20px; display: flex; flex-direction: column; gap: 20px;}

.sns_tab {display: flex; justify-content: space-between; width: 90%; align-items: center;  padding: 10px 20px; border-radius: 30px; background: #fff; color: #666; font-weight: 500; font-size: 18px; box-shadow: 0 0 6px rgba(197, 182, 156, .37); cursor: pointer; transition: background 0.3s, color 0.3s;}
.sns_list li.active .sns_tab {background: #F8AA5B; color: #fff;}
.sns_tab .arrow {display: inline-block; width: 9px; height: 9px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); margin-left: 10px; transition: border-color 0.3s;}

.channel_cards {display: flex; gap: 30px; flex: 1; justify-content: flex-end;}
.channel_cards { display: none; }
.channel_cards.active { display: flex; }

.card_item {width: 305px; border-radius: 20px; background: #fff; overflow: hidden; box-shadow: 0 0 15px rgba(232, 232, 232, 1); padding: 20px;}
.card_item a {flex-direction: column;}

.card_thumb {aspect-ratio: 1 / 1; width: 100%; border-radius: 15px; overflow: hidden; background-color: #f5f5f5;}
.card_thumb img {width: 100%; height: 100%; object-fit: cover; display: block;}

.card_text {height: 50px; margin-top: 20px; font-size: 18px; color: #333; line-height: 1.4;}

.youtube_video {flex: 1;}
.youtube_video a {flex-direction:column; background: #fff; border-radius: 20px; height: 280px; padding: 20px; font-size: 18px; overflow: hidden;}
.youtube_thumb {aspect-ratio: 16 / 9; width: 100%; border-radius: 15px; overflow: hidden; background-color: #f5f5f5;}
.youtube_thumb img {width: 100%; height: 100%; object-fit: cover; display: block;}
.youtube_text {height: 60px; margin-top: 20px;}

@media screen and (max-width: 1240px) {
    .slide01 {background: url('../../images/thema/main/visual/slide01_bg_mobile01.jpg') center/cover no-repeat;}
    .slide01 {background: url('../../images/thema/main/visual/slide02_bg_mobile01.jpg') center/cover no-repeat;}

    .slide01 .slide_content {width: 120vw; transform: translate(-37%, 106%);}
    .slide01 .slide_inner h2, .slide01 .slide_inner h3 {font-size: 32px;}
    .slide01 .slide_inner p {font-size: 22px;}
    
    .slide02 .slide_inner {left: 54%;}
    .slide02_right {width: 110vw;}
    .slide02 .slide_inner .slide02_title01 {font-size: 44px;}
    .slide02 .slide_inner p {font-size: 20px; line-height: 1.8;}
    .slide02 .slide02_person {width: 50vw; font-size: 18px;}
    .slide02_circle {top: 60%; right: 10%;}
    .slide02_circle .circle_item {width: 240px; height: 240px;}
    .slide02_circle .circle_inner h2 {font-size: 20px;}
    .slide02_circle .circle_inner h3 {font-size: 24px;}
    .slide02_circle .circle_inner ul li {font-size: 16px;}
    
    #main_youtube {padding: 70px 0;}
    .inner.youtube_box {padding: 0 20px;}
    
}
@media screen and (max-width: 1100px) {
    .slide01 .slide_content {width: 90vw; transform: translate(-50%, 106%)}
    .slide01 .slide_inner h2, .slide01 .slide_inner h3 {font-size: 28px;}
    .slide01 .slide_inner p {font-size: 20px;}
}
@media screen and (max-width: 1024px) {

    #slide {margin-top: 90px;}

    #main_channel {height: auto;}
    #main_channel .channel_wrap {flex-direction: column; gap: 20px;}

    .slide02 .slide_inner {left: 52%;}
    .slide02_right {width: 90vw;}
    .slide02 .slide_inner .slide02_title01 {font-size: 38px;}
    .slide02 .slide_inner p {font-size: 18px; line-height: 1.6;}
    .slide02 .slide02_person {width: 44vw; font-size: 14px;}
    .slide02_circle {right: 8%;}
    .slide02_circle .circle_item {width: 200px; height: 200px; border: 10px solid rgba(255,180,0, .9);}
    .slide02_circle .circle_inner {top: 15px;}
    .slide02_circle .circle_inner h2 {font-size: 18px;}
    .slide02_circle .circle_inner h3 {font-size: 20px;}

    .channel_info {width: 100%; text-align: center;}

    .sns_list {width: 100%; flex-direction: row; justify-content: space-between; align-items: center; gap: 10px; margin: 15px auto 0; padding: 0 20px;}
    .sns_list li {width: 100%; text-align: center;}
    .sns_tab {width: 100%;}

    .channel_cards {align-items: center; padding: 20px;}

    .channel_cards .card_item, .channel_cards .youtube_video {width: 100%; margin-bottom: 20px;}

    .card_item {width: 33%;}

    .card_thumb, .youtube_thumb {width: 100%; background-size: cover; background-position: center;}

    .card_text, .youtube_text {margin: 15px 0; text-align: justify; font-size: 16px;}

    .youtube_video a {height: 250px;}
}

@media screen and (max-width: 768px) {
    #slide {height: 700px;}
    .slide01 {background: url('../../images/thema/main/visual/slide01_bg_mobile02.jpg') center/cover no-repeat;}
    .slide02 {background: url('../../images/thema/main/visual/slide02_bg_mobile02.jpg') center/cover no-repeat;}

    .slide01 .slide_content {padding-top: 100px; left: 5%; transform: none;}
    .slide01 .slide_inner h2, .slide01 .slide_inner h3 {font-size: 24px;}

    .slide02 .slide_inner {top: 40%;}
    .slide02_right {width: 60vw;}
    .slide02 .slide_inner .slide02_title01 {font-size: 36px;}
    .slide02 .slide_inner .slide02_title02 {font-size: 64px;}
    .slide02 .slide_inner p {margin-top: 20px; text-shadow: 0 6px 3px rgba(32, 92, 170, 0.78)}
    .slide02 .slide_inner h4 {font-size: 16px;}
    .slide02 .slide02_person {width: 95vw;}
    .slide02_circle {right: 27%; top: 50%; transform: translateY(100%)}
    .slide02_circle .circle_inner h3 {font-size: 26px;}

    .slide02_img {width: 230px; height: auto; top: 20%;}

    .main_board_wrap {flex-direction: column; padding: 0 20px;}
    
    .youtube_box {flex-direction: column; gap: 50px !important;}
   
   	.youtube_box .youtube_title {display: flex; justify-content:center; align-items: center; flex-direction: column; text-align: center; width: 100%;}
   	.youtube_box .youtube_title h2 {margin: 0 auto;}
	.youtube_box .youtube_title p {font-size: 16px; text-align: center;}
	
	.youtube_box a {margin-top: 20px;}

    .promo_news_box {flex-direction: column; }
    .promo_news_item{width: 100%; height: auto;}
    
    .notice_badge {display: none;}
    .board_date {font-size: 14px;}

    .channel_cards {gap: 15px;}
    .card_thumb, .youtube_thumb {width: 100%;}
}
@media screen and (max-width: 560px) {
    #slide {height: 500px;}

    .slide01 .slide_content {padding-top: 50px;}
    .slide01 .slide_inner p {font-size: 16px; line-height: 1.8; margin-top: 10px;}

    .slide02 .slide_inner {top: 40%;}
    .slide02_right {width: 80vw;}
    .slide02 .slide_inner .slide02_title01 {font-size: 24px;}
    .slide02 .slide_inner .slide02_title02 {font-size: 24px;}
    .slide02 .slide_inner p {margin-top: 16px; font-size: 16px;}
    .slide02 .slide_inner .slide02_target {width: 350px;}
    .slide02 .slide_inner .slide02_target h3 { font-size: 18px;}
    .slide02 .slide_inner h4 {font-size: 12px;}
    .slide02 .slide02_person {width: 95vw; font-size: 12px; padding: 10px;}
    .slide02 .slide02_person li {padding-right: 0;}
    .slide02_circle {right: 20%; transform: translateY(80%);}
    .slide02_circle .circle_inner h3 {font-size: 26px;}
    .slide02_img {display: none;}
    .slide02_circle .circle_item {width: 160px; height: 160px; border: 5px solid rgba(255,180,0, .9);}
    .slide02_circle .circle_inner {top: 25px;}
    .slide02_circle .circle_inner h2 {font-size: 16px;}
    .slide02_circle .circle_inner h3 {font-size: 18px;}
    .slide02_circle .circle_inner ul li {font-size: 12px;}

    .sns_list li .sns_tab {letter-spacing: -2px; padding: 6px 15px;}
    .channel_cards {flex-direction: column;}
    
    
}

@media screen and (max-width: 370px) {
    .slide01 .slide_inner h2, .slide01 .slide_inner h3 {font-size: 18px;}
    .slide01 .slide_inner p {font-size: 14px;}

    .slide02 .slide_inner {top: 33%;}
    .slide02_right {width: 90vw;}
    .slide02 .slide_inner p {top: 37%;}
    .slide02 .slide_inner .slide02_title01 {font-size: 18px;}
    .slide02 .slide_inner .slide02_title02 {font-size: 18px;}
    .slide02 .slide_inner p {font-size: 14px;}
    
    .slide02_circle {right: 9%; transform: translateY(100%);}

    .sns_list li .sns_tab {width: 100px; font-size: 14px;}
}