@charset "utf-8";

.sect1 .top{gap: 35px;}
.sect1 .sub-tit{color: #5B5B5B; font-size: 36px;}
.sect1 .tit{font-size: 88px; font-weight: 600; margin-top: 18px;}
.sect1 .raxi-video{max-width: 690px;width: 100%;border-radius: 100px 30px 100px 30px;margin-top: 30px;}
.sect1 .cont{color: #292929; font-size: 24px; line-height: 1.7; margin-top: 100px;}

.sect2{padding-top: 184px; position: relative;}
.sect2 .inner{position: relative; z-index: 1;}
.sect2::before{content: '';position: absolute;right: -30%;top: 0;width: 1061px;height: 1085px;border-radius: 1085px;background: radial-gradient(50% 50% at 50% 50%, rgba(172, 147, 233, 0.14) 0%, rgba(106, 190, 207, 0.00) 100%);}
.sect2::after{content: '';position: absolute;left: -20px;bottom: -200px;width: 540px;height: 540px;border-radius: 540px;background: radial-gradient(50% 50% at 50% 50%, rgba(106, 190, 207, 0.18) 0%, rgba(106, 190, 207, 0.00) 100%);}
.section-top{text-align: center; position: relative;}
.section-top::before{content: ''; position: absolute; top: -90px; left: 50%; transform: translateX(-50%); width: 80px; height: 80px; background: url(../../../assets/images/sub/tech-circle.png) no-repeat 50% / cover;}
.section-top .tit{font-size: 50px; margin-bottom: 30px;}
.section-top .tit span {background: linear-gradient(91deg, #187082 , rgba(61, 63, 169, 0.60));background-clip: text;-webkit-background-clip: text;-webkit-text-fill-color: transparent;font-size: 50px;font-weight: 600;font-size: inherit;} 
.section-top .cont{font-size: 20px; line-height: 1.8; color: #292929;}
.sect2_2 .sub-tit{text-align: center; font-size: 30px; font-weight: 600; margin-top: 60px; margin-bottom: 40px;}

.sect3{padding-top: 200px; padding-bottom: 164px; background: url("../../../assets/images/sub/raxi-sect03_bg.png") no-repeat 50% / cover;}
.sect3 .top{align-items: end;position: relative;z-index: 1; gap: 30px;}
.sect3 .top .tit{color: #187082; font-size: 46px; font-family: 'NanumBarunGothicL'; line-height: 1.3; }
.sect3 .top .cont{color:  #292929; font-size: 20px; font-weight: 400; line-height: 1.8; margin-bottom: 5px;}
.location-tit{display: flex;align-items: end;color: #424242;font-size: 32px;font-weight: 700;}
.location-tit i{width: 36px; height: 48px; background: url(../../../assets/images/ico/ico-car2.svg) no-repeat 50% / cover; margin-right: 10px;}
.location-tit span{color: #888; font-size: 16px; font-weight: 400; margin-left: 20px;margin-bottom: 5px;}
.location-top{display: flex; justify-content: space-between;}
.location-slide__r{margin-top: 20px;}
.location-slide__r img{width: 184px;}
.tag-wrap{display: flex; gap: 10px; margin-bottom: 24px;}
.tag-wrap .tag { display: inline-flex; padding: 8px 20px; align-items: center; border-radius: 20px; background: rgba(36, 138, 159, 0.16); color: #248A9F; font-size: 16px; font-weight: 600; } 
.map-container {gap: 50px; margin-top: 120px;display: flex;justify-content: space-between;} 
.map-img { max-width: 758px; width: 100%; height: 0; padding-bottom: 38.4%; position: relative; background: url('../../../assets/images/sub/raxi-map.png') no-repeat center; background-size: cover; } 
.location-btn {width: 32px;height: 32px;background: url(../../../assets/images/ico/ico-location.svg) no-repeat 50% / cover;position: absolute;cursor: pointer; z-index: 2;} 
.location-btn::after{content: '';position: absolute;top: -25px;width: 34px;height: 42px;background: url(../../../assets/images/ico/ico-location_active.svg) no-repeat 50% / cover;opacity: 0;visibility: hidden;}
.location-btn.active::after{opacity: 1; visibility: visible;}
.location-txt {display: none;} 
.location-box {width: 100%;padding: 40px;border-radius: 20px;border: 1px solid rgba(228, 228, 228, 0.50);background: linear-gradient(122deg, rgba(249, 253, 255, 0.80) 0.47%, rgba(250, 249, 255, 0.80) 99.53%);} 
.location-box + .location-box{margin-top: 20px;}
.location.active .location-txt::before{display: block;}
.location-txt::before{display: none;content: '';position: absolute;left: calc(100% - 5px);top: 75px;width: 201px;height: 93px;background: url(../../images/main/loca-line.svg) no-repeat 50% / cover;z-index: 1;}
.location-txt .tit {display: flex;align-items: center;font-size: 20px;font-weight: 600;color: #000;}
.location-txt .txt {font-size: 16px;line-height: 1.7;color: #424242;margin-top: 16px;word-break: keep-all; margin-top: 12px;}
.location-txt .date{margin-top: 20px;padding-top: 10px;border-top: 1px solid #e4e4e4;font-size: 14px;text-align: right;color: #757575;}
.type-mo{display: none;}
.location-btn[data-location="daegu"]{right: 24.54%;top: 32%;}
.location-btn[data-location="gangneung"]{right: 23.54%;top: 25%;}
.location-btn[data-location="gangneung"].active {top: 22%;}
.location-btn[data-location="sejong"]{right: 30.54%;top: 30%;}
.location-btn[data-location="hwaseong"]{right: 35.54%;top: 35%;}
.location-btn[data-location="hoengseong"]{right: 30.54%;top: 40%;}
.location-cont{width: 658px;}
.location-slide__top{height: 50px; margin-bottom: 16px;}
.location-slide__top .swiper-control{margin-top: 0;gap: 20px;}

.sect4{padding-top: 80px;position: relative;}
.sect4::after { content: ''; position: absolute; bottom: -19%; right: -12%; z-index: -1; width: 766px; height: 596px; transform: rotate(90deg); border-radius: 766px; background: radial-gradient(50% 50% at 50% 50%, rgba(106, 190, 207, 0.18) 0%, rgba(106, 190, 207, 0.00) 100%); } 
.sect4-cont{margin-top: 60px;}
.sect4-list{display: flex;gap: 200px;}
.sect4-list + .sect4-list{margin-top: 50px;}
.sect4-list .list-tag{padding: 8px 20px;border-radius: 20px;text-align: center;font-weight: 600;display: inline-flex;}
.sect4-list .list-tit{margin-top: 10px;color: #424242;font-size: 32px;font-weight: 600;line-height: 1.4;position: relative;}
.sect4-list .list-tit::after{content: '';position: absolute;top: 50%;left: calc(100% + 40px);width: calc(100% - 40px);border-bottom: 2px solid #e4e4e4;}
.sect4-list .list-box {position: relative; border-radius: 20px; flex: 1;height: 140px;display: flex;align-items: center;justify-content: center; flex-direction: column; font-size: 26px;font-weight: 600;line-height: 1.5;text-align: center;}
.sect4-list .list-box p{font-size: 18px; font-weight: 400; margin-top: 10px;}
.sect4-list .list-box::after{content: ''; position: absolute; left: 100%; width: 30px; height: 2px;}
.sect4-list .list-box:last-child::after{display: none;}
.sect4-list__l {width: 156px;flex: none;position: relative;}
.sect4-list__r{display: flex;flex: 1;gap: 30px;margin-top: 20px;}
.sect4-list.list01 .list-tag{background: rgba(159, 36, 36, 0.16); color: #9F2424;}
.sect4-list.list01 .list-box{background: linear-gradient(122deg, #FFF6F6 0.47%, #FAF9FF 99.53%); color: #9A1111;}
.sect4-list.list01 .list-box::after{background: rgba(154, 17, 17, 0.08);}
.sect4-list.list02 .list-tag{background: rgba(36, 138, 159, 0.16); color: #248A9F;}
.sect4-list.list02 .list-box{background: linear-gradient(122deg, #F2FBF5 0.47%, #FFF9F3 99.53%); color: #256C5E;}
.sect4-list.list02 .list-box::after{background: rgba(37, 108, 94, 0.08);}
.sect4-list.list03 .list-tag{background: rgba(34, 94, 206, 0.16); color: #225ECE;}
.sect4-list.list03 .list-box{background: linear-gradient(122deg, #F9FDFF 0.47%, #FAF9FF 99.53%); color: #223D83;}
.sect4-list.list03 .list-box::after{background: rgba(34, 61, 131, 0.08);}
.sect4-list.list04 .list-tag{background: rgba(159, 108, 36, 0.16); color: #9F6C24;}
.sect4-list.list04 .list-box{background: linear-gradient(122deg, #FFF9F5 0.47%, #FFFCF2 99.53%); color: #833C22;}
.sect4-list.list04 .list-box::after{background: rgba(131, 60, 34, 0.08);}


.mobility-layout.grid {display: grid;grid-template-columns: 35.77% 34.488% 26.93%;gap: 22px;justify-content: center;list-style: none;padding: 0;margin: 0 auto;} 
.mobility-layout.grid li{height: 246px;}
.mobility-layout li { overflow: hidden; border-radius: 20px;} 
.mobility-layout img {width: 100%;height: 100%;object-fit: cover;display: block;} 
.mobility-layout.grid02 { display: grid; grid-template-columns: 558px 538px 420px; gap: 20px; justify-content: center; list-style: none; padding: 0; margin: 0 auto; } 
.mobility-layout.flex {display: flex;gap: 20px;justify-content: space-between;align-items: flex-start;flex-wrap: wrap;} 
.mobility-layout.layout02 {margin-top: 20px;} 
.mobility-layout .list04 {width: calc((558 / 962) * 100%);height: 216px;} 
.mobility-layout .list05 {width: calc((382 / 962) * 100%);height: 216px;} 
.mobility-layout .list06 {width: calc(50% - 10px);height: 272px;} 
.mobility-layout .list07 {width: calc(50% - 10px);height: 272px;} 
.mobility-layout.flex .l{flex: 1;}
.mobility-layout.flex .r{width: 36.93%;}
.mobility-layout.flex .r ul { list-style: none; padding: 0; margin: 0; } 
.mobility-layout.flex .r li {height: 510px;} 
.mobility-layout .list04.pc-ver.pad-ver {display: block;}

/* en */
.en .tag-wrap .tag{font-size: 14px;}

/* th */
.th .tag-wrap .tag{font-size: 14px;}

@media screen and (max-width: 1500px) {
    .mobility-layout.layout02{flex-direction: column; margin-top: 16px;}
    .mobility-layout.flex .r{width: 100%;}
}


@media screen and (max-width: 1280px) {
    .map-cont {width: 45%;}
    .location-top{flex-wrap: wrap;}
    .location-cont {width: 100%;}
    .map-container {gap: 20px;}
    .mobility-layout.grid {grid-template-columns: 36% 33% 26%;}
}

@media (max-width: 1024px) {
    .sect1 .top{flex-direction: column;}
    .sect1 .raxi-video{max-width: 100%; margin-top: 0;}
    .sect1 .sub-tit {font-size: 30px;}
    .sect1 .tit {font-size: 70px;}
    .sect1 .cont {font-size: 20px; margin-top: 50px;}

    .sect2::after {left: -20%;}

    .sect3 .top{flex-direction: column; align-items: center; text-align: center;}
    .map-container {flex-direction: column; align-items: center; gap: 50px;}
    .map-img {margin: 0 auto;height: 600px;padding-bottom: 0;}
    .sect3 .top .cont {word-break: keep-all;} 
    .sect3 .top .cont  br{display: none;}
    .map-cont {width: 100%;}
    .sect4-list{/* flex-direction: column; *//* gap: 10px; */gap: 15vw;}
    .sect4-list__l {width: auto;display: flex;flex-direction: column;align-items: baseline;}
    .sect4-list__l::after {left: 100%; width: 144px;}
    .sect4-list__r {width: 100%;}
    .sect4-list .list-box {font-size: 18px;padding: 10px;flex: 1;width: 25%;word-break: keep-all;}
    .sect4-list + .sect4-list{margin-top: 60px;}
    .sect4-list .list-tit::after {width: 10vw;left: calc(100% + 2vw);}
    .sect4-list .list-tit {display: inline-block;font-size: 23px;width: 120px;}
    .sect3 .top .tit br.pc-ver{display: block;}
    .sect4-list .list-box p {font-size: 16px;}
    .sect4-cont .pc-ver{display: block;}

    .mobility-layout .list04 {width: calc(50% - 11px);}
    .mobility-layout .list05 {width: calc(50% - 11px);}
    .mobility-layout.flex .r li {height: 276px;}
}

@media (max-width: 768px) {

    .sect1 .sub-tit { font-size: 20px; } 
    .sect1 .tit { font-size: 44px; margin-top: 12px; } 
    .sect1 .cont { margin-top: 30px; font-size: 16px; } 
    .sect1 .top { gap: 30px; } 
    .sect1 .raxi-video { border-radius: 60px 10px 60px 10px; } 
    
    .sect2 {padding-top: 120px;padding-bottom: 120px;} 
    .sect2::before {width: 389px;height: 398px; } 
    .sect2::after {width: 214px;height: 214px;left: -20px;bottom: 0;} 
    .section-top::before { width: 48px; height: 48px; top: -60px; } 
    .section-top .tit { font-size: 30px; } 
    .section-top .cont { font-size: 16px; } 
    .sect2_2 .sub-tit {font-size: 20px;margin-top: 34px;margin-bottom: 26px;line-height: 1.6;} 
    
    .sect3 {padding-top: 8px;padding-bottom: 80px;background-image: url(../../../assets/images/sub/raxi-sect03-bg_m.png);background-position: top right;position: relative;} 
    .sect3 .top { align-items: baseline; gap: 20px; } 
    .sect3 .top .tit { font-size: 30px; text-align: left; } 
    .sect3 .top .tit br.pc-ver{display: none;}
    .sect3 .top .cont { font-size: 16px; text-align: left; } 
    .map-container { margin-top: 40px; width: 100%; align-items: baseline; } 
    .map-img { height: 0; padding-bottom: 79.375%; } 
    .location-btn {width: 24px;height: 24px;} 
    .location-btn::after {width: 24px;height: 30px; top: -18px;} 
    .location-btn[data-location="daegu"] {top: 37%;right: 22.54%; } 
    .location-btn[data-location="hoengseong"] { right: 31.54%; top: 45%; } 
    .location-btn[data-location="gangneung"] {right: 19.54%;top: 21%; } 
    .location-btn[data-location="hwaseong"] {right: 36.54%;top: 34%; } 
    .location-btn[data-location="sejong"] {right: 30.54%;top: 25%; } 
    .location-cont { width: 100%; } 
    .map-cont { width: 100%; } 
    .location-tit {font-size: 20px;} 
    .location-tit i { width: 24px; height: 28px; } 
    .location-tit span {font-size: 14px;margin-left: 8px;} 
    .location-slide__top .swiper-control { gap: 12px; } 
    .location-box { padding: 30px 20px; } 
    .tag-wrap .tag { font-size: 14px; } 
    .location-txt .tit { font-size: 18px; } 
    .location-slide__r { display: none; } 
    .location-txt .txt { font-size: 14px; } 
    .sect3::after {content: '';position: absolute;bottom: 0;left: 0;width: 100%;height: 100px;background: linear-gradient(180deg, rgba(255, 255, 255, 0.00) 0%, #FFF 100%); } 

    .sect4{padding-top: 60px;}
    .sect4-list .list-tag { font-size: 14px; } 
    .sect4-list .list-tit {font-size: 28px;width: 100%; } 
    .sect4-list .list-tit::after {left: auto;right: 0; } 
    .sect4-list__r {flex-direction: column;gap: 16px; } 
    .sect4-list .list-box::after {display: none; } 
    .sect4-list .list-box {height: auto;padding: 24px 40px; } 

    .sect4::after {width: 493.068px;height: 253.019px;bottom: -100px;right: -61%; } 
    .sect4-cont .pc-ver{display: none;}
    .sect4-cont img{width: 100%;}

    .mobility-layout.grid,
    .mobility-layout.grid02 {grid-template-columns: 1fr;  gap: 16px;}
    .mobility-layout.grid li { height: 180px; } 
    .mobility-layout.flex .l ul { gap: 16px; } 
    .mobility-layout .list04,
    .mobility-layout .list05,
    .mobility-layout .list06,
    .mobility-layout .list07 { width: 100%; height: 180px; } 
    .mobility-layout.layout02{gap: 16px;}
    .mobility-layout.flex .r li { height: 180px; } 
    .mobility-layout .list04.pc-ver.pad-ver {display: none;}
}