@charset "utf-8";

:root{
	--swiper-theme-color: #fff;
	--swiper-pagination-bottom: 30px;
}

@keyframes fadeInLeft2 {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(-10%,0,0);
        transform: translate3d(-10%,0,0)
    }

    to {
        opacity: 1;
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }
}

/* ========== 메인 슬라이드 ========== */
.main_swiper{aspect-ratio: 5/2; width: 100%; max-height: 680px;}
.main_swiper .swiper-slide{position: relative; display: flex; align-items: center;}
.main_swiper .swiper-slide > img{display: block; right: 0; bottom: 0; height: 100%; position: absolute; z-index: -1;}
.main_swiper .swiper-slide.swiper-slide-active{z-index: 10;}

/* 메인 슬라이드 텍스트 */
.slide_text{font-size: 1.2rem; z-index: 1;}
.slide_text .deco, .slide_text .deco > img{display: block;}
.slide_text .deco > img{max-height: 1em;}
.slide_text .slide_tit{font-size: 3em; line-height: 1.1; margin-bottom: 20px;}

.swiper-slide-active .slide_tit .deco{animation: fadeInLeft2 0.6s ease;}
.swiper-slide-active .slide_tit .tit{animation: fadeInLeft2 0.8s ease;}
.swiper-slide-active .slide_text .text{animation: fadeInLeft2 1s ease;}


.slide_text .bold{font-weight: 700;}
.slide_text .text{line-height: 1.6;}
.slide_text .text > p + p{margin-top: 10px; color: var(--sub-text-color);}
.slide_text .sub_tit{font-weight: 500; font-size: 1.3em;}
.slide_text .btn_more{margin: 20px 0;}


/* ========== 공지사항 ========== */
#main_notice{display: flex;}
#main_notice .f_left{display: flex; width: 25%; align-items: center; background-color: var(--dark-bg); color: #fff; padding: 20px 50px; padding-left: var(--padding);}
#main_notice .f_left > .tit{position: relative; width: fit-content; font-size: 1.6rem; font-weight: 600; font-family: 'SUITE', sans-serif;}
#main_notice .f_left > .tit::before{position: absolute; top: 50%; left: -1em; transform: translateY(-50%); width: 10px; height: 10px; background-color: var(--main-color); border-radius: 50%; content: ""; display: block; animation: blinkColor 2s infinite;}


#main_notice .f_right{flex: 1;}
.notice_swiper {height: 100px;}
.notice_swiper a{display: flex; align-items: center; height: 100%; gap: 20px; padding: 0 20px; padding-right: var(--padding); border-bottom: var(--border-opacity); box-sizing: border-box; font-size: 1.1rem;}
.notice_swiper .text{flex: 1; display: -webkit-box; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: 1; -webkit-box-orient: vertical; font-weight: 500;}
.notice_swiper .text > .label{margin-right: 0.5em;}
.notice_swiper .date{font-size: 0.9em; color: #666;}


/* ========== 메인 공통 ========== */
.main_section{padding-top: 100px; padding-bottom: 120px;}
.main_section .icon_grid{display: flex; gap: 20px; margin-top: 40px;}
.main_section .icon_grid > li{flex: 1;}


/* ========== 메인 서비스 ========== */
#main_service{background-color: var(--gray-bg);}



/* ========== 메인 파트너 ========== */
#main_partner{position: relative; z-index: 1; padding-bottom: 60px;}
#main_partner::before, #main_partner::after{position: absolute; content:""; display: block; width: 20vw; aspect-ratio: 1/1; background-repeat: no-repeat; background-size: contain; z-index: -1;}
#main_partner::before{left: 2%; bottom: 50px; background-image: url('../img/main/partner_bg_1.png');}
#main_partner::after{right: 4%; top: 50px; background-image: url('../img/main/partner_bg_2.png');}

.logo_grid{display: grid; grid-template-columns: repeat(6,1fr); gap: 10px;}
.logo_grid + .btn_detail{margin-top: 60px;}

/* 로고 박스 */
.item_logo{aspect-ratio: 2/1; background-color: rgba(255,255,255,0.8); backdrop-filter: blur(4px); border-radius: 20px; box-shadow: var(--small-shadow); border: var(--border-opacity); text-align: center;}
.item_logo > a{display: flex; height: 100%; padding: 10px; align-items: center; justify-content: center;}
.item_logo > a > img{max-width: 80%; transition-duration: 200ms;}
.item_logo > a:hover > img{width: 76%; opacity: 0.4;}



/* ========== 메인 플랜 ========== */
#main_plan{position: relative; z-index: 1;}
#main_plan::before{position: absolute; content:""; display: block; width: 15vw; aspect-ratio: 1/1; z-index: -1; right: 17%; top: 220px; background: url('../img/main/plan_bg_1.png') no-repeat center / contain;}
.plan_swiper{margin-top: 60px;}

.plan_item{height: auto; height: -webkit-fill-available; padding: 10px; box-sizing: border-box;}
.plan_item .top{font-size: 1.1rem;}
.plan_item > a > div{padding: 40px;}


.bar_pagination{position: initial; display: flex; width: 40% !important; max-width: 360px; margin: 60px auto 0 auto;  gap: 10px;}
.bar_pagination .swiper-pagination-bullet{flex: 1; height: 5px; border-radius: 4px; background-color: var(--gray-bg); opacity: initial; margin: 0 !important; transition-duration: 100ms;}
.bar_pagination .swiper-pagination-bullet-active{background-color: var(--dark-bg); }



/* ========== 메인 고객센터 ========== */
#main_cs{padding-top: 0;}
.cs_box{display: grid; grid-template-columns: repeat(2,1fr); gap: 30px;}
.cs_box > div{border-radius: 30px; font-size: 1.1rem; overflow: hidden;}
.cs_box > div.wow{animation-delay: 0;}


/* 인터넷신문 체험 */
.cs_box .cs_experience{grid-row: span 2;}
.cs_experience > a{position: relative; display: flex; height: 100%; flex-direction: column; justify-content: center; align-content: center; flex-wrap: wrap; text-align: center; padding: 60px 40px;  color: #fff; z-index: 0;}
.cs_experience > a::before, .cs_experience > a::after{position: absolute; left: 0; right: 0; bottom: 0; top: 0; content:""; display: block; transition-duration: 600ms;}
.cs_experience > a::before{z-index: -2; background: url('../img/remote_bg.jpg') no-repeat center / cover;}
.cs_experience > a::after{z-index: -1; background: #000; opacity: 0.3;}
.cs_experience > a:hover::before{transform: scale(1.1);}
.cs_experience > a:hover::after{opacity: 0.4;}
.cs_experience .tit{font-size: 2.4rem; line-height: 1.4; font-family: 'SUITE', sans-serif; font-weight: 700; margin-bottom: 30px; text-shadow: 2px 2px 4px rgba(0,0,0,0.3);}
.cs_experience .btn_detail{color: #fff;}
.cs_experience > a:hover .btn_detail::before{width: 100%;}

/* 고객센터 + 업무시간 외 장애접수 */
.cs_color{aspect-ratio: 5/2;}
.cs_center{background-color: var(--gray-bg); color: inherit;}
.cs_center .dl{color: var(--sub-text-color);}

/* ========== 메인 FAQ ========== */
#main_faq{position: relative; background-color: var(--dark-bg); color: #fff; overflow: hidden; z-index: 1;}
#main_faq::before {position: absolute; display: block; content: ""; left: 50%; top: 35%; z-index: -1; transform: translateX(-50%); width: 50%; aspect-ratio: 1/1; border-radius: 50%; filter: blur(100px); background: var(--sub-color-2); background: linear-gradient(180deg, var(--main-color) 0%, var(--dark-bg) 20%); animation: moveGradient 3s linear infinite; opacity: 0.8; }
#main_faq::after { display: block; content: ""; position: absolute; left: 50%; top: 35%; z-index: -1; transform: translateX(-50%); width: 70%; aspect-ratio: 1/1; border-radius: 50%; background: var(--dark-bg); }

#main_faq .en_tit{color: var(--main-color);}
#main_faq .tit_box .tit, #main_faq .btn_detail{color: #fff;}
#main_faq .btn_detail:hover::before{background-color: var(--main-color);}

#main_faq .icon_grid a{transition-duration: 100ms;}
#main_faq .icon_grid a:hover{opacity: 0.5;}





/* ============================= */
@media screen and (max-width: 1700px){
	#main_notice .f_left{justify-content: center;}
}

@media screen and (max-width: 1500px){
	.slide_text{font-size: 1rem;}
	.main_swiper .swiper-slide > img{right: -5%;}

	
	/* 체험 + 고객센터 */
	#main_cs{padding-bottom: 0;}
	.cs_box{width: 100%; max-width: initial; gap: 0;}
	.cs_box > div{border-radius: 0; aspect-ratio: initial;}
	.cs_experience .tit{font-size: 2rem;}
}

/* ======== 데스크탑 ~ 테블릿 ======== */
@media screen and (max-width: 1280px){
	/* 메인 여백 */
	.main_section{padding-top: 80px; padding-bottom: 100px;}
	#main_partner{padding-bottom: 20px;}

	/* 메인 슬라이드 */
	.slide_text .slide_tit{font-size: 2.6em; margin-bottom: 10px;}
	.slide_text .btn_more{margin: 15px 0 0 0;}
	.main_swiper .swiper-button-prev, .main_swiper .swiper-button-next{display: none;}

	/* 공지사항 */
	#main_notice .f_left{display: none;}
	.notice_swiper{height: 6rem;}
	
	/* 메인 아이콘 그리드 */
	.main_section .icon_grid{display: grid; grid-template-columns: repeat(2,1fr); gap: 10px;}


	/* 파트너 */
	.logo_grid{grid-template-columns: repeat(5,1fr); gap: 10px;}
	.item_logo{border-radius: 16px;}

	/* 메인 서비스 신청 */
	.plan_swiper{width: 100%; max-width: initial; margin-top: 20px;}

	.plan_item > a{border: var(--border-opacity) !important; border-width: 2px !important;}
	.plan_item > a:hover::before{display: none;}
	.plan_item > a:hover{border: var(--border-opacity) !important; border-width: 2px !important;}
	.plan_swiper .swiper-slide-active > a{border-color: var(--main-color) !important;}
	.plan_swiper .swiper-slide-active .tit{color: var(--sub-color-2);}
	.plan_swiper .swiper-slide-active .btn_more{background-color: var(--main-color);}
	.plan_item .top, .plan_features, .cs_box > div{font-size: 1rem;}

}


@media screen and (max-width: 1024px){
	.main_swiper{aspect-ratio: 4/3; max-height: 560px; min-height: 400px;}

	.main_swiper .swiper-slide{display: initial;}
	.main_swiper .swiper-slide > img{right: -15%; width: 90%; height: auto; max-width: 810px;}
	.slide_text{width: 90%; margin-top: 40px;}

	.notice_swiper a{font-size: 1rem;}

	.main_section .icon_grid, .logo_grid + .btn_detail{margin-top: 40px;}
	.plan_item > a > div{padding: 30px;}


	/* 체험 + 고객센터 */
	.cs_experience > a{padding: 80px 20px 70px 20px;}
	.cs_box > div {animation: initial;}
	.cs_box .cs_experience{grid-row: initial; grid-column: span 2;}
	.cs_experience .tit{font-size: 1.6rem; margin-bottom: 10px;}
	.cs_color{aspect-ratio: initial;}
}




/* ======== 모바일 ======== */
@media screen and (max-width: 768px){
	.main_section{padding-top: 60px; padding-bottom: 80px;}
    .main_section .icon_grid {grid-template-columns: repeat(1, 1fr);}
	.notice_swiper .date{display: none;}
	.notice_swiper .text > .label{border-color: var(--main-color); background-color: var(--main-color); color: #fff;}

	.logo_grid{grid-template-columns: repeat(4,1fr); gap: 8px;}
	.item_logo{border-radius: 10px;}

	.cs_box{display: block;}
	.cs_experience > a{padding-top: 60px; padding-bottom: 50px;}

	.bar_pagination .swiper-pagination-bullet{height: 3px;}

	#main_faq::before, #main_faq::after{display: none;}	
}

@media screen and (max-width: 480px){
	.slide_text{margin-top: 30px;}

	.logo_grid{grid-template-columns: repeat(3,1fr);}

}