/* @charset "utf-8"; visual_sect */
.visual_sect { width: 100%; position: relative; } 
.visual_sect .banner { background-image: url("/image/banner/banner01.png"); background-repeat: no-repeat; background-position: center center; width:100%; height:84rem; background-size: cover; } 
.visual_sect .xo-box {
    width: 100%;
    height: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 32px;
}

/* 공통 텍스트 스타일 */
.visual_sect .xo-text {
    font-size: 240px;
    font-family: Pretendard;
    font-weight: 700;
    line-height: 240px;
    opacity: 0.8;

    /* 그라데이션 텍스트 핵심 */
    background: linear-gradient(to right, rgba(255,255,255,1), rgba(255,255,255,0));
    -webkit-background-clip: text;
    color: transparent;
}

/* 구분선 */
.visual_sect .line {
    width: 400px;
    height: 0;
    outline: 2px rgba(255, 255, 255, 0.20) solid;
    outline-offset: -1px;
}

.visual_sect .txt { width: calc(100% - 8rem); max-width: 144rem; color: #fff; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } 
.visual_sect .txt .main_title { font-size: 7.2rem; font-weight: 600; } 
.visual_sect .txt .desc_txt { font-size: 4.2rem; font-weight: 500; margin-top: 2.4rem; } 

@media all and (max-width:768px){
 .visual_sect .banner { background-image: url("/image/banner/banner01.png"); background-repeat: no-repeat; background-position: center right; width:100%; height:72rem; background-size: cover; } 
.visual_sect .xo-box{gap:0px;}
 .visual_sect .txt { width: calc(100% - 4rem); top: 4rem; transform: translate(-50%, 0); } 
 .visual_sect .txt .main_title { font-size: 4.4rem; } 
 .visual_sect .txt .desc_txt { font-size: 2rem; } 
 }

@media all and (max-width:500px){
 .visual_sect .banner { height:42rem; } 
 }
.visual_sect .xo-box{justify-content:center;}
.visual_sect .xo-text{font-size: 150px;}
.visual_sect .line{width:50px;}
.visual_sect .desc_txt{text-align:center;}

/* sect02 */
.sect02 { padding:16rem 4rem 12rem; } 
.sect02 .guide { display:flex; width: 100%; max-width: 144rem; flex-direction: row; gap: 16rem; align-items: center; } 
.sect02 .sect_title { text-align:left; } 
.sect02 .sect_title .desc_txt { margin-top: 2.4rem; } 
.sect02 .circle-diagram-container { width: 100%; display: flex; align-items: center; justify-content: center; margin: 4rem; } 
.sect02 .circle-diagram { position: relative; width: 50rem; height: 50rem; display: inline-block; position: relative; border: 1px dashed var(--mode-gray-300, #D5D5DE); padding: 10rem; border-radius: 50%; } 
.sect02 .circle-diagram .pd_03 { width: 29.6rem; height: 29.6rem; display: inline-block; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: radial-gradient(50% 50% at 50% 50%, rgba(51, 146, 255, 0.60) 0%, rgba(51, 146, 255, 0.12) 100%); border-radius: 50%; padding: 3.2rem; } 
.sect02 .circle-diagram .pd_02 { width: 23.2rem; height: 23.2rem; display: inline-block; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: rgba(51, 146, 255, 0.20); border-radius: 50%; padding: 3.2rem; } 
.sect02 .circle-diagram .pd_01 { display: inline-block; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: #FFF; box-shadow: 0px 0px 49.657px 0px rgba(51, 146, 255, 0.24); border-radius: 50%; padding: 2.4rem; } 
.sect02 .center img { width: 12rem; height: 12rem; text-align: center; max-width: fit-content; } 
.sect02 .item { position: absolute; top: 50%; left: 50%; width: 14rem; height: 14rem; border-radius: 50%; background-color: white; text-align: center; font-size: 14px; padding: 10px; line-height: 1.3; transform: rotate(calc(60deg * var(--i))) translate(24rem) rotate(calc(-60deg * var(--i))) translate(-50%, -50%); box-shadow: 0px 4px 24px 0px rgba(51, 146, 255, 0.12); display: flex; align-items: center; justify-content: center; font-size: 1.8rem; color: #3392FF; font-weight: 600; } 


@media all and (max-width:768px){
 .sect02 { padding:8rem 2rem 6rem; background-size:9.1rem; } 
 .sect02 .guide { padding:0; flex-direction: column; gap: 4.8rem; } 
 .sect02 .sect_title { text-align:center; } 
 .sect02 .circle-diagram-container { max-width: 50rem; transform: scale(0.8); } 
 .sect02 .circle-diagram { max-width: 50rem; } 
 }

@media all and (max-width:500px){
 .sect02 .circle-diagram-container { transform: scale(0.6); height: 30rem; } 
 .sect02 .circle-diagram { aspect-ratio: 1 / 1; } 
 }

/* sect03 */
.sect03 { padding:12rem 4rem; } 
.sect03 .guide { display:flex; align-items:center; justify-content:space-between; flex-direction: column; gap:8rem; } 
.sect03 .sect_title { text-align: center; } 
.sect03 .diagram_container { display: grid; grid-template-areas:
 "top-left top-right" "bottom-left bottom-right"; grid-template-columns: 1fr 1fr; align-items: center; justify-items: center; position: relative; column-gap: 32rem; row-gap: 3.2rem; width: 100%; } 
.sect03 .card { width: 100%; display: flex; padding: 4rem 6rem; align-items: center; gap: 6rem; border-radius: 2.4rem; border: 1px solid var(--mode-gray-100, #F1F1F7); background: rgba(255, 255, 255, 0.80); box-shadow: 0px 4px 40px 0px rgba(0, 0, 0, 0.04); height: -webkit-fill-available; } 
.sect03 .center-icon { position: absolute; z-index: -1; } 
.sect03 .center-icon .pd_02 { border-radius: 50%; background: rgba(255, 170, 41, 0.12); padding: 8rem; } 
.sect03 .center-icon .pd_01 { border-radius: 50%; background: rgba(255, 170, 41, 0.40); padding: 8rem; } 
.sect03 .center-icon img { width: 20rem; } 
.sect03 .top-left { grid-area: top-left; } 
.sect03 .top-right { grid-area: top-right; } 
.sect03 .bottom-left { grid-area: bottom-left; } 
.sect03 .bottom-right { grid-area: bottom-right; } 
.sect03 .card .content { width: 100%; } 
.sect03 .card img { width: 13.5rem; } 
.sect03 .card h3 { font-size: 2.4rem; text-align: left; } 
.sect03 .card ul { font-size: 1.8rem; color: #71727d; margin-top: 1.2rem; } 
.sect03 .card ul li { display: flex; text-align: left; align-items: flex-start; } 
.sect03 .card ul li:not(:first-child) { margin-top: 0.4rem; } 
.sect03 .card ul li::before { content: ''; display: inline-block; width: 0.4rem; height: 0.4rem; background: #9697A3; border-radius: 50%; margin: 1.2rem 0.8rem 1.2rem 0; } 

@media all and (max-width:768px){
 .sect03 { padding:6rem 2rem; } 
 .sect03 .guide { flex-direction:column; align-items:center; gap:4.8rem; text-align:center; } 
 .sect03 .diagram_container { column-gap: 3.2rem; row-gap: 3.2rem; } 
 .sect03 .center-icon .pd_02 { padding: 6rem; } 
 .sect03 .center-icon .pd_01 { padding: 6rem; } 
 .sect03 .center-icon img { width: 12rem; } 
 .sect03 .card { padding: 3.2rem; flex-direction: column; gap: 2rem; backdrop-filter: blur(4px); } 
 .sect03 .card img { width: 8rem; } 
 .sect03 .top-right, .sect03 .bottom-right { flex-direction: column-reverse; } 
 }

@media all and (max-width:500px){
 .sect03 .card { flex-direction: row; } 
 .sect03 .diagram_container { display: flex; flex-direction: column; column-gap: 2rem; row-gap: 2rem; padding-top: 22rem; } 
 .sect03 .center-icon { top: 0; } 
 }

/* sect04 */
.sect04 { padding:12rem 4rem 16rem; } 
.sect04 .guide { display:flex; align-items:center; justify-content:space-between; flex-direction: column; gap:8rem; } 
.sect04 .sect_title { text-align: center; } 

@media all and (max-width:768px){
 .sect04 { padding:6rem 2rem 8rem; } 
 .sect04 .guide { gap: 4.8rem; } s } 

 @media all and (max-width:500px){
 .sect04 .card-container ul li { flex-direction: column-reverse; gap:1.2rem; padding: 2.4rem; } 
 .sect04 .card-container ul li span { text-align: center; } 
 }

/* sect05 */
.sect05 .main_title { text-align: center; } 

@media all and (max-width:768px){
 .sect05 { padding: 8rem 0; } 
 }

/* sect06 */
.sect06 { padding: 16rem 4rem; } 
.sect06 .guide { display: flex; align-items: center; gap: 12rem; } 
.sect06 .app_icon_container { display: grid; grid-template-columns: repeat(5, 11.2rem); gap: 4rem; flex-shrink: 0; } 
.sect06 .app_icon_container img:nth-child(9), img:nth-child(11), img:nth-child(13), img:nth-child(14) { filter: drop-shadow(0 0.4rem 0.8rem rgba(0, 0, 0, 0.12)); } 

@media all and (max-width:768px){
 .sect06 { padding: 8rem 2rem; } 
 .sect06 .guide { gap:4.8rem; flex-direction: column-reverse; } 
 .sect06 .app_icon_container { grid-template-columns: repeat(5, 9.6rem); gap: 2.4rem; } 
 .sect06 .sect_title { text-align: center; } 
 }

@media all and (max-width:500px){
 .sect06 .app_icon_container { grid-template-columns: repeat(5, 6.4rem); gap: 2rem; } 
 }

 /* sect07 */ 
.sect07 .sect_title .main_title { text-align: center; } 
.sect07 .swiper-slide .txt .tit { font-weight: 400; } 
.sect07 .swiper-slide.awards .txt { width: 30%; } 
.sect07 .swiper-slide.awards .img { display: flex; gap: 2rem; } 

@media all and (max-width:768px){
 .sect07 { padding: 8rem 2rem; } 
 .sect07 .swiper-slide.awards .txt { width: 100%; } 
 }

 /* sect08 */
.sect08 { padding: 16rem 0; } 
.sect08 .guide { max-width: none; } 
.sect08 .partners_logos { display: flex; flex-direction: column; gap: 8rem; overflow: hidden; margin-top: 8rem; } 
.sect08 .logo_row { display: flex; gap: 8rem; white-space: nowrap; animation: scroll 30s linear infinite; } 
.sect08 .sect_title .main_title { text-align: center; } 
.sect08 .logo-swiper .swiper-wrapper { gap: 8rem; transition-timing-function: linear !important; } 
.sect08 .logo-swiper .swiper-wrapper .swiper-slide { width: fit-content; height: 8rem; } 
.sect08 .logo-swiper .swiper-wrapper .swiper-slide img { width: fit-content; height: 100%; } 

@media all and (max-width:768px){
 .sect08 { padding: 8rem 0; } 
 .sect08 .partners_logos { gap: 4.8rem; } 
 .sect08 .logo-swiper .swiper-wrapper { gap: 6rem; } 
 .sect08 .logo-swiper .swiper-wrapper .swiper-slide { width: fit-content; height: 6rem; } 
 }

/* 이벤트 팝업 */
.modal_wrap.event_pop .modal_pop { border-radius:2rem; overflow:hidden; width:60rem; } 
.modal_wrap.event_pop .modal_pop .btn_wrap { height:6.4rem; background-color:#f1f1f7; display:flex; align-items:center; justify-content:space-between; padding:0 2.4rem; } 
.modal_wrap.event_pop .modal_pop .btn_wrap .close_btn { font-size:1.6rem; font-weight:600; color:#71727d; position:relative; } 
.modal_wrap.event_pop .modal_pop .btn_wrap .close_btn:after { content:''; display:block; position:absolute; inset:-2rem; } 

@media all and (max-width:768px){
 .modal_wrap.event_pop .modal_pop { width:calc(100vw - 5.6rem); } 
 .modal_wrap.event_pop .modal_pop .btn_wrap { height:5.6rem; padding:0 1.6rem; } 
 }