@charset "utf-8";

/*
@작업자			:김유진
@작업완료일		:2024.12.30
@최종수정일		:2024.12.30

@작업자			:이경혜
@최종수정일		:2025.01.23
*/

.main:before{content:'';display:block;position:absolute;top:0;left:0;width:100%;height:100%;background:url('../img/main/end_bg.png')no-repeat;background-size:cover;background-position:center;z-index:-1}
.main{display:flex;justify-content:center;align-items:center;position:relative;min-height:100vh;padding:60px 0}
.main_header{position:relative;margin-bottom:30px}
.main_header h1{position:relative; margin-bottom:0;font-family:'Hakgy';font-size:8.5rem;text-align:center;color:#222;line-height:95px}
.main_header h1 > span{display:block;width:410px;height:86px;margin:0 0 35px calc(50% - 450px);padding:12px 0 0 25px;background:url('../img/main/main_tit.svg');font-family:'Hakgy';font-size:4rem;text-align:left; letter-spacing:0.065em;}
.main_header h1 > p{position:absolute; top:-20px; left:calc(50% - 510px); display:block; font-size:2.2rem; color:#333; line-height:40px;  text-align:left}
.main_header h1 > strong{display:block; color:#ee6813}
.main_header p{color:#999;text-align:center;line-height:30px}
.main_header p span{display:block;font-size:2.4rem;color:#333;font-weight:600}
.main_header .support{display:flex;align-items:center;gap:13px;position:absolute;top:60px;left:calc(50% - 20px)}

/* 종료 안내 섹션 */
.closure_notice{margin-bottom:60px}
.notice_box{position:relative;max-width:860px;margin:0 auto;padding:55px;background:linear-gradient(135deg, rgba(248,249,250,0.4) 0%, rgba(233,236,239,0.3) 100%);border:1px solid rgba(222,226,230,0.85);border-radius:0 25px;box-shadow:0 8px 25px rgba(0,0,0,0.08);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);letter-spacing:-0.045em}
.notice_box h2{font-size:3.6rem;font-family:'Hakgy';color:#ff5a3d;font-weight:900;text-align:center;margin-bottom:10px;letter-spacing:-0.045em}
.notice_content{text-align:center}
.notice_text{font-size:2rem;color:#5f616b;line-height:1.8;margin-bottom:21px;letter-spacing:-0.045em}
.notice_date{font-size:2.2rem;color:#333;line-height:1.5;margin-bottom:17px;font-weight:500;letter-spacing:-0.045em}
.notice_date strong{color:#d32f2f;font-weight:700;font-size:2.4rem}
.notice_info{font-size:1.7rem;color:#5f616b;line-height:1.6;margin-top:25px;letter-spacing:-0.045em}
.notice_info .service_date{display:block;margin-top:8px;font-size:1.7rem;color:#888}
.notice_info .sbiz_link{color:#015198;text-decoration:underline;font-weight:500;letter-spacing:0em}
.notice_info .sbiz_link:hover{color:#003d7a;text-decoration:underline}
.notice_btn_wrap{margin-top:30px;text-align:center}
.notice_btn{display:inline-block;padding:16px 40px;background:#ee6813;color:#fff;font-size:1.8rem;font-weight:600;border-radius:50px;text-decoration:none;transition:all .3s;letter-spacing:-0.02em}
.notice_btn:hover{background:#d85a0f;transform:translateY(-2px);box-shadow:0 4px 12px rgba(238,104,19,0.3)}
.mobile_br{display:none}

.menu_list{display:flex;gap:50px;margin:0 auto 60px}
.menu_list li{position:relative;width:25%;height:300px}
.menu_list li a.disabled_link{opacity:0.6;cursor:not-allowed;pointer-events:none}
.menu_list li:not(:last-child):after{content:'';display:block;position:absolute;left:calc(100% + 12px);bottom:50%;width:25px;height:5px;background:url('../img/main/main_list.svg')no-repeat}
.menu_list li a:before{content:'';display:block;position:absolute;top:calc(100% - 100px);left:calc(100% - 116px);z-index:-1;width:244px;height:244px;border-radius:50%;background:#0395ff;transition:all .8s}
.menu_list li:nth-child(2) a:before{background:#ffae00}
.menu_list li:nth-child(3) a:before{background:#80b712}
.menu_list li:nth-child(4) a:before{background:#e79ad0}
.menu_list li a{display:block;overflow:hidden;position:relative;z-index:1;width:100%;height:100%;padding:37px 48px;border-radius:50px;background:#fff;box-shadow:0 0 15px rgba(0,0,0,.1);transition:all .2s}
.menu_list li a:after{content:'';display:block;position:absolute;right:27px;bottom:37px;width:30px;height:17px;background:url('../img/main/main_more.png')no-repeat;transition:all .4s}
.menu_list li a strong:before{content:'';display:block;width:70px;height:60px;margin-bottom:14px;background:url('../img/main/main_list04.png')no-repeat left center}
.menu_list li:nth-child(2) a strong:before{background-image:url(../img/main/main_list01.png)}
.menu_list li:nth-child(3) a strong:before{background-image:url(../img/main/main_list02.png)}
.menu_list li:nth-child(4) a strong:before{background-image:url(../img/main/main_list03.png)}
.menu_list li a strong{display:block;margin-bottom:16px;font-size:2.8rem;color:#000;font-weight:600;line-height:38px;transition:all .4s}
.menu_list li a p{font-size:1.8rem;line-height:26px;transition:all .4s}

.menu_list li:hover a{border-radius:80px}
.menu_list li:hover a:before{top:0;left:0;transform:scale(4.5)}
.menu_list li:hover a:after{right:47px}
.menu_list li:hover a strong{color:#fff}
.menu_list li:hover a p{color:#fff}


.footer{display:flex; justify-content:center; align-items:center; margin:0 auto; gap:9px; width:80%;}
.footer li{width:calc(100% / 6);}
.footer li a{display:block; width:100%;padding: 8px 0;border-radius:8px;background:#555;font-size:1.6rem;text-align:center;color:#fff}
.footer li a:hover{background:#005197}
.footer li a.btn_personal{color:#fff000}

@media (max-width: 1920px){
}
@media (max-width: 1366px){
    .main_header h1{font-size:7.5rem;line-height:85px}
    .main_header h1 > span{margin:0 0 34px calc(50% - 390px);padding:16px 0 0 25px}
	.main_header h1 > p{top:-20px; left:calc(50% - 370px); font-size:2.2rem;}
    .main_header .support{left:calc(50% + 40px)}

    .notice_box{padding:40px 50px}
    .notice_box h2{font-size:3.08rem;margin-bottom:10px}
    .notice_text{font-size:1.8rem;margin-bottom:17px}
    .notice_date{font-size:2rem;margin-bottom:15px}
    .notice_date strong{font-size:2.2rem}
    .notice_info{font-size:1.6rem;margin-top:21px}

    .menu_list{flex-wrap:wrap;width:100%;gap:20px;}
    .menu_list li{width:calc(25% - 15px)}
    .menu_list li:not(:last-child):after{display:none}
    .menu_list li:nth-child(odd):after{display:none}
}
@media (max-width: 1024px){
    .main:before{width:100%;height:100%;background-size:cover}
    .main{background:none}
    .main_header{margin-bottom:75px}
    .main_header h1{font-size:6rem;line-height:65px; margin-bottom:0}
    .main_header h1 > span{width:290px; height:52px; padding-top:1px; margin:0 0 20px calc(50% - 300px); background:url('../img/main/main_tit_m.svg'); background-repeat:no-repeat; background-size:100%; font-size:3rem; letter-spacing:0}
	.main_header h1 > p{top:-25px; left:calc(50% - 330px); font-size:1.7rem; line-height:40px;}
    .main_header .support{left:calc(50% + 10px); top:32px;}

    .closure_notice{margin-bottom:50px}
    .notice_box{padding:35px 40px;border-radius:0 20px}
    .notice_box h2{font-size:2.64rem;margin-bottom:10px}
    .notice_text{font-size:1.7rem;margin-bottom:15px}
    .notice_date{font-size:1.9rem;margin-bottom:13px}
    .notice_date strong{font-size:2.1rem}
    .notice_info{font-size:1.5rem;margin-top:21px}
    .notice_info .service_date{font-size:1.5rem}
    .notice_btn_wrap{margin-top:28px}
    .notice_btn{padding:15px 38px;font-size:1.7rem}

	.menu_list li a{padding:30px; border-radius:30px;}
	.menu_list li a strong{margin-bottom:10px;font-size:2.4rem;line-height:30px;}
	.menu_list li a p{font-size:1.6rem;line-height:20px;}

	.menu_list li:hover a{border-radius:30px}

	.footer{width:100%; gap:5px;}
	.footer li a{width:100%; font-size:1.4rem; padding:6px 0;}
}
@media (max-width: 768px){
    .main:before{display:none}
    .main{padding:30px 0 40px}
    .main_header{display:flex; flex-direction:column; margin-bottom:20px}
    .main_header h1{font-size:4rem;line-height:40px}
	.main_header h1 > strong{display:inline;color:#ee6813}
    .main_header h1 > span{height:auto; width:auto; padding:0; margin:0; text-align:center; font-size:3rem; background:none; letter-spacing:-0.05em;}
	.main_header h1 > p{position:relative; top:0; left:0; text-align:center; margin:0 0 5px 0; font-size:1.8rem; line-height:1;}
    .main_header .support{justify-content:center;order:1;position:unset}
    .main_header p{margin-bottom:10px}
    .main_header p span{font-size:2rem}
	.main_header p em{display:none;}

    .closure_notice{margin-bottom:40px}
    .notice_box{padding:30px 25px;border-radius:20px}
    .notice_box h2{font-size:2.42rem;margin-bottom:10px}
    .notice_text{font-size:1.6rem;margin-bottom:13px;line-height:1.6}
    .notice_date{font-size:1.8rem;margin-bottom:10px;line-height:1.6}
    .notice_date strong{font-size:2rem}
    .notice_info{font-size:1.4rem;margin-top:17px;line-height:1.6}
    .notice_info .service_date{font-size:1.4rem;margin-top:6px}
    .notice_btn_wrap{margin-top:25px}
    .notice_btn{padding:14px 35px;font-size:1.6rem}
    .mobile_br{display:block}

    .menu_list{gap:20px; width:100%;margin:0 auto 40px}
    .menu_list li{height: 250px; width:calc(50% - 10px)}

    .footer{flex-wrap: wrap; gap:5px 10px;}
    .footer li{width:calc(50% - 10px);}
}
@media (max-width: 480px){
	.main{padding:20px 0 20px}

    .main_header{margin-bottom:10px;}
    .main_header h1{font-size:3rem; line-height:3rem; margin-bottom:0;}
    .main_header h1 > span{font-size:2.4rem; margin:3px 0; padding:0;}
	.main_header h1 > p{margin:0; font-size:1.6rem;}
    .main_header > p{margin-bottom:2px}
	.main_header p span{font-size:1.8rem}
	.main_header .support{gap:0;}
	.main_header .support img{max-width:80%}

    .closure_notice{margin-bottom:30px}
    .notice_box{padding:25px 20px;border-radius:0 15px}
    .notice_box h2{font-size:2.09rem;margin-bottom:10px;line-height:1.4}
    .notice_text{font-size:1.5rem;margin-bottom:10px;line-height:1.5}
    .notice_date{font-size:1.6rem;margin-bottom:8px;line-height:1.5}
    .notice_date strong{font-size:1.8rem}
    .notice_info{font-size:1.3rem;margin-top:15px;line-height:1.5}
    .notice_info .service_date{font-size:1.3rem;margin-top:5px}
    .notice_btn_wrap{margin-top:20px}
    .notice_btn{padding:12px 30px;font-size:1.4rem}
    .mobile_br{display:block}

	.menu_list{gap:10px; width:100%;margin:15px auto}
	.menu_list li{height:170px; width:calc(50% - 5px)}
	.menu_list li a{padding:20px; border-radius:20px;}
	.menu_list li a strong{font-size:1.8rem; margin-bottom:0;}
	.menu_list li a strong:before{content:'';display:block;width:40px;height:30px; margin-bottom:10px; background-size:80%;}
	.menu_list li a p{font-size:1.1rem; line-height:20px;}
	.menu_list li a p br{display:none}

	.menu_list li a:before{top:calc(100% - 55px); left:calc(100% - 100px);}
	.menu_list li a:after{right:10px; bottom:15px;}

	.footer{gap:5px 10px;}
	.footer li{flex:1 1 40%}
}