@charset "UTF-8";

/* 메인 상단 */
/* 이미지 오버레이 */
.content .content_head {
  position: relative; /* absolute 기준 */
}

.content .content_head .head_inner{position:relative;max-width:1040px;margin:0 auto;}

.content .content_head .bg01 {
  position: absolute;
  bottom: 120px;    /* 위쪽 여백 */
  left: calc(50% - 520px - 60px);  /* 왼쪽으로 살짝 나가게 */
  width: 430px; /* 이미지 크기 조절 */
  animation: floatY 4s ease-in-out infinite;
  z-index: 2;
}

.content .content_head .bg02 {
  position: absolute;
  bottom: 420px; /* 아래쪽 여백 */
  right: calc(50% - 520px - 360px); /* 오른쪽으로 살짝 나가게 */
  width: 330px;
  animation: floatY 4s ease-in-out infinite;
  z-index: 2;
}

@keyframes floatY {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(-15px); }
}

.content .content_head .bg03 {position:absolute; top:0; z-index:-1; width:100%; display:block;}
.content .content_head {width:100%; max-width:none; margin:0; background:linear-gradient(to top, #041539, #01102F); overflow:hidden; z-index:0;}
.content .content_head .title_wrap {gap: 0;}
.content .content_head p.tit {padding:5px 24px; margin-bottom:32px; font-weight:400; border-radius:50px; border:1px solid #36CDFF; color:#36CDFF;}
.content .content_head img {width:100%; margin-bottom:20px; position:relative; z-index:1;}
.content .content_head p.des {font-size: 20px; line-height: 160%; color:#8199C0;}
.content .content_head .btn_wrap img {max-width: 207px; width: 100%; margin: 0;}
.content .content_head .btn_wrap a {padding: 0;}
.content .content_head .btn_wrap .main_btn {max-width:375px; padding: 20px 70px 20px 80px; background-color: #1AA7FF; border-radius: 20px;}
.content .content_head .btn_wrap .main_btn:hover {background-color: #169cef;}
.content .content_head .btn_wrap {margin:60px 0 0;}

.content .content_head .visual_wrap {max-width: 1040px; width: 100%; padding: 0; margin: 82px auto 0; display: flex; flex-direction: column; justify-content: center; align-items: center; overflow: hidden; background-color: #fff; border: 1px solid #73C6FF; border-radius: 32px;}
.content .content_head .visual_wrap img {max-width: 1040px; width: auto; margin: 0; border-bottom: 1px solid #73C6FF; }
.content .content_head .visual_wrap .visual_text {padding: 32px 0 40px; }
.content .content_head .visual_wrap .visual_text dl {display: flex; flex-direction: row; align-items: flex-start; gap:20px; margin:14px 0;}
.content .content_head .visual_wrap .visual_text dt {padding: 5px 20px 6px; font-size: 20px; color: #fff; background-color: #23C4FF; border-radius: 30px;}
.content .content_head .visual_wrap .visual_text dd {font-size: 20px; color: #333; line-height: 160%; padding-top: 4px; text-align:left;}
.content .content_head .visual_wrap .visual_text .desc {font-size: 18px; font-weight: 300; color:#9f9f9f;}

/* 바디영역 공통 */
.content h3 {margin-bottom:52px; color:#fff;}
.content .point {color:#4CAEFF;}
.content h4 {margin-bottom:8px; font-size:36px; font-weight:700; letter-spacing:-1.8px; line-height:160%; color:#fff;}
.content h5 {margin-bottom:8px; font-size:28px; font-weight:300; letter-spacing:-1.8px; line-height:160%; color:#fff;}
.content h5 b {font-weight:700;}

/* 혜택 */
.content .area_benefit {width:100%; padding:100px 0 0; background-color:#1B1B1B; display: flex; flex-direction: column; align-items: center;}
.content .area_benefit .card_horizental {width:100%; max-width:1200px; display:flex; flex-direction:column; align-items:flex-start; gap:24px; flex-wrap:wrap;}
.content .area_benefit .card_horizental .card {width: 100%; padding: 56px 90px; background-color: #2B2B2D; border-radius: 20px; display: flex; flex-direction: row; align-items: center; justify-content: space-between;}
.content .area_benefit .card_horizental .card img {max-width: 256px; width: auto;}
.content .area_benefit .card_horizental .card .text_wrap .label { display: block; margin-bottom: 24px; padding: 6px 20px; width: fit-content; font-size: 18px; font-weight: 500; color: #fff; background-color: #3AB3FF; border-radius: 32px;}
.content .area_benefit .card_horizental .card .text_wrap p {margin-bottom: 4px; font-size: 20px; font-weight: 400; letter-spacing: -1.8px; color: #AAAAAA;}
.content .area_benefit .card_horizental .card .text_wrap a {margin-bottom:4px; font-size: 20px;  letter-spacing: -1.8px; display: block; margin-top: 26px; color: #4CAEFF; }
.content .area_benefit .notice_wrap {text-align:left;}
.content .area_benefit .notice_wrap .tit {font-size:18px; color:#fff; font-weight:600;}
.content .area_benefit .notice_wrap p {font-size:14px; color:#aaa;}


/* 서비스 전환 */
.content .area_trans {width:100%; padding:100px 0 150px; background-color:#1B1B1B; display: flex; flex-direction: column; align-items: center; }
.content .area_trans .card_vertical {position: relative; width: 100%; max-width: 1200px; display: flex; flex-direction: row; align-items: flex-start; justify-content: center; gap: 24px; flex-wrap: wrap;}
.content .area_trans .card_vertical .label01 {position: absolute; max-width: 118px; height: auto; left: 60px; top: -20px;}
.content .area_trans .card_vertical .label02 {position: absolute; max-width: 118px; height: auto; right: 420px; top: -20px;}
.content .area_trans .card_vertical .card {max-width:588px; width:100%; display:flex; flex-direction:column; align-items:center; background-color:#2B2B2D; border-radius:24px;}
.content .area_trans .card_vertical .card h4 {margin-top:50px;}
.content .area_trans .card_vertical .card img {margin-top:20px;}
.content .area_trans .card_vertical .card img.pc {display:block;}
.content .area_trans .card_vertical .card img.mo {display:none;}

/* 유의사항 */
.content .area_notice {width: 100%; margin: 0; gap: 24px; display: flex; flex-direction: column; align-items: center; background-color:#1D2D54; color:#fff;}
.content .area_notice .info_cont {max-width: 1040px; width: 100%; display: flex; flex-direction: column; align-items: flex-start; margin: 90px 0; }  
.content .area_notice .info_cont p {font-size: 24px; font-weight: 600; margin-bottom: 16px;}
.content .area_notice .info_cont li {margin: 4px; font-size: 19px; color: #8199C0;}

/* 서비스 소개 */
.content .area_service {width: 100%; margin: 0; padding: 160px auto 160px; display: flex; flex-direction: column; align-items: center; background-color: #FAFAFC;}
.content .area_service img  {max-width: 1200px; width: 100%; margin-bottom: 140px;}
.content .area_service h3 {margin-bottom: 18px; margin-top: 160px; color:#333;}
.content .area_service p {margin-bottom: 52px; font-size: 20px; font-weight: 400; line-height: 160%; text-align: center; color: #999;}

/* 특장점 */
.content .area_feature {width:100%; max-width:1200px; margin:100px auto 210px; padding:0 20px; display: flex; flex-direction: column; align-items: center;}
.content .area_feature h3 {margin-bottom: 18px; color:#333;}
.content .area_feature p {margin-bottom: 52px; font-size: 20px; font-weight: 400; line-height: 160%; text-align: center; color: #999;}
.content .area_feature .image_wrap {width: 100%; max-width: 1200px; display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 24px; flex-wrap: nowrap;}
.content .area_feature .image_wrap img {max-width: 385px; width: 100%;}

@media (max-width: 1240px) {
    .content .content_head .bg01 {display: none;}
    .content .content_head .bg02 {display: none;}
    .content .content_head .visual_wrap img {width: 100%;}
    .content .area_trans .card_vertical .label01 , .content .area_trans .card_vertical .label02 {display: none;} 
    .content .area_trans .card_vertical .card img.pc {display:none !important;}
    .content .area_trans .card_vertical .card img.mo {display:block !important;}
    .content .area_trans .card_vertical .card .text_wrap h4 {margin: auto; text-align: center;}

    .content .area_benefit {display:none;}
    .content .area_trans {display:none;}
}

@media (max-width: 999px) {
    .btn_wrap a {width:100%;}
    .content h3 {margin-bottom:22px;}
    .content h4 {font-size:24px; text-align: inherit;}
    .content h5 {font-size:20px; text-align: center;}

    .content .content_head .bg03 {display:none;}
    .content .content_head .btn_wrap .main_btn {padding:20px 50px; border-radius:13px; align-items:center;}
    .content .content_head .visual_wrap .visual_text {padding: 16px 40px 24px;}
    .content .content_head .visual_wrap .visual_text dl {flex-direction:column; align-items:center; gap:6px; margin:24px 0;}
    .content .content_head .visual_wrap .visual_text dt {font-size:16px; padding:4px 16px;}
    .content .content_head .visual_wrap .visual_text dd {text-align:center; font-size:18px;}

    .content .content_head p.tit {display:none;}
    .content .content_head p.des {font-size:16px;}
    .content .content_head .visual_wrap {margin:60px auto 0;}

    .content .area_benefit .card_horizental .card {flex-direction: column; align-items: flex-start; padding: 40px; gap: 24px;}
    .content .area_benefit .card_horizental .card .text_wrap {width: 100%; text-align: center;}
    .content .area_benefit .card_horizental .card .text_wrap p {font-size:16px;}
    .content .area_benefit .card_horizental .card .text_wrap .label {margin: 0 auto 24px; padding:4px 16px; font-size:16px;}
    .content .area_benefit .card_horizental .card img {margin: auto;}
    .content .area_benefit .notice_wrap .tit {font-size:14px;}
    .content .area_benefit .notice_wrap p {font-size:12px;}

    .content .area_feature {margin:50px auto 0;}
    .content .area_feature .image_wrap {flex-direction: column;}
    .content .area_trans .card_vertical .card {padding: 32px 32px 0 32px;}
    .content .area_trans .card_vertical .card img {margin-top: 24px;}

    .content .area_notice .info_cont {margin: 0;}
    .content .area_notice .info_cont p {font-size:20px;}
    .content .area_notice .info_cont li {font-size:16px;}

    .content .area_service h3 {margin-top: 40px ;}
    .content .area_service img {margin-bottom: 40px;}
    .content .area_service p {font-size:16px;}

    .content_foot .btn_wrap {margin-bottom:30px;}
    .function .title_wrap {margin:40px 0;}
}