@charset "utf-8";

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

/* 공통 레이아웃 스타일 */
#u_skip a{position:absolute;left:0;top:-100px;z-index:1000;width:250px;height:30px;background:var(--color-primary);color:#fff;line-height:30px;text-align:center}
#u_skip a:focus,#u_skip a:hover,#u_skip a:active{top:0}

.container{overflow:hidden;position:relative;min-height:100vh;padding-bottom:200px;background:url('https://sui127320-sui127320.ktcdn.co.kr/img/content/bg_content01.svg')repeat-x 0 calc(100% + 14px)}
.container:after{content:'';display:none;position:absolute;bottom:4px;left:50%;z-index:1;width:1512px;height:160px;background:url('https://sui127320-sui127320.ktcdn.co.kr/img/content/bg_content00.svg')no-repeat;transform:translateX(-50%);/* animation: moveImage 10s linear infinite */}
.bg_move span{display:block;position:absolute;background:no-repeat}
.bg_move{width:100vw}
.bg_move span.truck{bottom:22px;left:calc((100% - 1400px) / 2 - 56px);z-index:1;width:143px;height:114px;background-image:url('https://sui127320-sui127320.ktcdn.co.kr/img/content/img_truck.svg');/* animation: moveBg 17s linear infinite */}
.bg_move .motorcycle{bottom:5px;left:calc((100% - 1400px) / 2 + 975px);z-index:1;width:150px;height:142px;background:url('https://sui127320-sui127320.ktcdn.co.kr/img/content/img_motorcycle.svg');/* animation: moveBg 15s linear infinite */}
.bg_move .bicycle{bottom:20px;left:calc((100% - 1400px) / 2 + 1326px);width:130px;height:144px;background:url('https://sui127320-sui127320.ktcdn.co.kr/img/content/img_bicycle.svg');/* animation: moveBg 20s linear infinite */}

@media (max-width: 1024px){
    .bg_move span.truck{bottom:-12px; background-size:80%; background-repeat:no-repeat}
	.bg_move .motorcycle{bottom:-20px; background-size:80%; background-repeat:no-repeat}
	.bg_move .bicycle{bottom:0; background-size:80%; background-repeat:no-repeat}
}

@media (max-width: 480px){
    .bg_move span.truck{bottom:-40px; background-size:60%;}
	.bg_move .motorcycle{bottom:-50px; background-size:60%;}
	.bg_move .bicycle{bottom:-30px; background-size:60%;}
}

/* @keyframes moveBg {
    0% {
      left: 100vw;
    }
    100% {
      left: -100vw;
    }
  } */

/* header */
.header{position: relative; min-height:250px; padding:30px 0; box-sizing:border-box}
.header_warp{height:70px; display:flex; align-items:flex-end; justify-content: space-between; margin-bottom:20px}
.header_tit{display:flex; align-items:flex-end;}
.header .logo{width:230px; height:69px;margin-right:15px;background:url('/img/img_title.svg')no-repeat;}
.header .logo a{display:block;width:100%;height:100%;padding:10px 0 0 20px; font-family:'Hakgy'; color:#222;}
.header .logo span{display:block; font-size:2.2rem; letter-spacing:0.03em;}
.header .logo strong{display:block; font-size:2.4rem; padding-top:8px; padding-left:30px; letter-spacing:0;}
.header .support{display:flex;align-items:center;gap:13px;margin-right:auto}
.header .support div{font-size:0; line-height:1;}
.header .gnb{display:flex;justify-content:center;gap:3px;margin-bottom:15px}
.header .gnb li a{display:block;padding:8px 20px;border:1px solid #ccc;border-radius:20px;font-size:1.4rem;text-align:center;color:#555; line-height:1;}
.header .gnb li a:hover{background:#fff}


/* title */
.head_sub_tit{position: relative; display:flex; align-items: center; justify-content: center; width:100%; padding:30px 20px; border-radius:60px;background:linear-gradient(90deg, #358E16 0%, #0060C1 100%);text-align:center;}
.head_sub_tit span{display:block; font-size:4rem; color:#fff; font-weight:600;line-height:40px;letter-spacing:0}
.sub_tit{display:none; position: absolute; overflow:hidden; width:1px; height:1px; margin:-1px; clip-path:polygon(0 0, 0 0, 0 0)}

/* 시간 표시 영역 */
.time_box {position:absolute; top:50%; right:20px; transform: translateY(-50%);  display:flex; align-items: center; justify-content: center;gap: 8px; padding:5px 5px 5px 20px; border-radius:60px; background-color:#fff}
.time_box .time_txt {font-size: 2rem; color: #222; font-weight: 500;}
.time_box .btn_box button {padding: 8px 20px; min-width:80px; height:auto; border-radius:60px; font-size:1.6rem;}


/* content */
.content{padding:60px;border-radius:30px;background:#fff;box-shadow:0 0 15px rgba(0,0,0,.15)}
.content .desc{margin-bottom:39px;font-size:3rem;color:#222;text-align:center;font-weight:600;line-height:24px}
.content .desc_sm{margin-bottom:39px;font-size:2.8rem;color:#222;text-align:center;font-weight:600;line-height:40px}
.content .desc_bullet{display:flex;justify-content:center;align-items:center;margin:-18px 0 28px;font-size:3rem;color:#222;font-weight:600;line-height:36px}
.content .desc_bullet:before{content:'';display:inline-block;flex-shrink:0;width:63px;height:82px;background:url('https://sui127320-sui127320.ktcdn.co.kr/img/content/desc.png')no-repeat left 18px}


@media (max-width: 1366px){
    /* header */
    /* .header{flex-direction:column;align-items:flex-start;height:auto;padding-top:30px} */
    /* .header .logo{margin-right:auto} */
    /* .header .support{order:-1;margin-bottom:0} */
    /* .header .gnb{justify-content:flex-end;width:100%;margin:-28px 0 0} */

    /* header */
    .head_sub_tit{padding:30px 10px;font-size:3rem}
    .head_sub_tit span{font-size:3rem;}
    .header .gnb li a{padding:8px 10px; font-size:1.2rem;}
    
    /* content */
    .content{padding:80px 40px 60px}
    .content .desc{font-size:2.6rem}
    .content .desc_bullet{margin:-18px 0 8px;font-size:2.6rem}
}
@media (max-width: 1024px){
    /* header */
    .header_warp{line-height:30px; flex-direction:column;align-items:flex-start;height:auto;}
    .header .logo strong{display:block; font-size:2.4rem; padding-top:8px; padding-left:0; letter-spacing:0.15em;}
    .header_tit{margin-bottom:15px}
    .header .gnb{margin-bottom:0;}

    .head_sub_tit{padding:10px;}
    .head_sub_tit span{font-size:2.4rem; letter-spacing:-0.08em;}

    .time_box {padding:3px 5px 3px 15px;}
    .time_box .time_txt {font-size: 1.6rem;}
    .time_box .btn_box button {padding: 5px 15px; min-width:70px; height:auto; border-radius:60px; font-size:1.6rem;}

    /* content */
    .content{padding:30px 25px; border-radius:20px;}
	.content .desc_sm{margin-bottom:30px; font-size:2.4rem; line-height:36px}
	.content .desc_sm br{display:none;}
}
@media (max-width: 768px){
    .header{height:auto; margin-bottom:20px}
    .header_warp{display:flex; align-items:start; flex-direction:column; margin-bottom:5px}
    .header .logo{width:100%; height:auto; margin-right:0; background:none;}
    .header .logo a{width:100%; padding:0;}
    .header .logo span{display:inline; font-size:2.4rem; letter-spacing:0;}
    .header .logo strong{display:inline; font-size:2.4rem; padding-top:0; padding-left:10px; letter-spacing:0;}
    .header .support{gap:5px;}

    .header .gnb{flex-wrap: wrap}
    .header .gnb li{flex-grow:1}
    .header .gnb li a{padding:8px; font-size: 1.2rem;}

    .head_sub_tit{flex-direction:column; padding:10px;}
    .head_sub_tit span{font-size:2rem; letter-spacing:-0.08em; line-height:30px;}

    .time_box {position: relative; top:0; left:0; right:0; transform: translateY(0);}


    /* content */
    .content .desc{margin-bottom:20px;font-size:1.8rem;line-height:28px}
	.content .desc_sm{margin-bottom:20px;font-size:1.8rem; line-height:28px}
    .content .desc_bullet{display:block;margin:0 0 10px 0;font-size:1.8rem;line-height:28px;text-align:center; }
    .content .desc_bullet:before{width:100%;margin:0 auto;background-position:calc(50% + 10px) 18px; display:none;}
}
@media (max-width: 480px){
    /* header */
    .header{position: relative; min-height:auto; padding:20px 0 10px 0; box-sizing:border-box}
	.header .support img{max-width:80%;}
    
    /* content */
    .content{padding:0;border:0;background:none;box-shadow:none}

	.md_hidden{position: absolute;overflow:hidden;width:1px;height:1px;margin:-1px;clip-path:polygon(0 0, 0 0, 0 0)}

    .bg_move{display:none}

	.container.cs_container{padding-bottom:20px; background:none}
}