/* header */
.header .gnb_wrap .make-xo { border-top: 2px solid transparent; border-bottom: 2px solid #121214; } 

/* sect01 */
.sect01 { padding: 12rem 4rem; } 
.sect01 .sect_title { text-align: center; } 
.sect01 .cont-wrap { display: flex; gap: 2.4rem; margin-top: 8rem; } 
.sect01 .left { width: calc(60% - 1.2rem); display: flex; flex-direction: column; gap: 2.4rem; } 
.sect01 .left .card { height: 24rem; } 
.sect01 .left .top { display: flex; gap: 2.4rem; } 
.sect01 .left .top .blue { width: calc(60% - 1.2rem); background: #3392FF; transition: all 0.4s; } 
.sect01 .left .top .green { width: calc(40% - 1.2rem); background: #00AF92; transition: all 0.4s; } 
.sect01 .left .bottom { display: flex; gap: 2.4rem; } 
.sect01 .left .bottom .mint { width: calc(40% - 1.2rem); background: #2CBAE0; transition: all 0.4s; } 
.sect01 .left .bottom .purple { width: calc(60% - 1.2rem); background: #7855E7; transition: all 0.4s; } 
.sect01 .left .top .blue:hover, .sect01 .left .bottom .purple:hover { width: calc(68% - 1.2rem); } 
.sect01 .left .top .green:hover, .sect01 .left .bottom .mint:hover { width: calc(48% - 1.2rem); } 
.sect01 .right { width: calc(40% - 1.2rem); transition: all 0.4s; } 
.sect01 .right .navy { height: 100%; background: #2965CC; } 
.sect01 .right:hover { width: calc(44% - 1.2rem); } 
.sect01 .card { display: flex; align-items: flex-end; justify-content: space-between; padding: 4rem; border-radius: 2.4rem; color: #fff; } 
.sect01 .card .txt { height: 100%; } 
.sect01 .card .txt h4 { font-size: 1.8rem; } 
.sect01 .card .txt h3 { font-size: 2rem; margin-top: 1.2rem; } 
.sect01 .card .txt h3 span { font-size: 4.8rem; font-weight: 500; margin-right: 0.4rem; } 
.sect01 .card .txt h2 { font-size: 4rem; margin-top: 2rem; font-weight: 600; } 
.sect01 .card .img { width: 100%; max-width: 12rem; } 
.sect01 .right .card .img { max-width: 16rem; } 

@media all and (max-width:768px){
 .sect01 { padding: 6rem 2rem; } 
 .sect01 .cont-wrap { margin-top: 4.8rem; flex-direction: column; } 
 .sect01 .left { width: 100%; } 
 .sect01 .right { width: 100%; } 
 .sect01 .card { flex-direction: column; height: fit-content !important; } 
 .sect01 .card .txt { width: 100%; } 
 .sect01 .card .txt h3 span { font-size: 4rem; } 
 .sect01 .card .txt h2 { font-size: 3.2rem; } 
 }

@media all and (max-width:500px){
 .sect01 .cont-wrap { gap: 1.6rem; } 
 .sect01 .card { padding: 3.2rem; } 
 .sect01 .card .txt h3 span { font-size: 3.2rem; } 
 .sect01 .left { gap: 1.6rem; } 
 .sect01 .left .top { gap: 1.6rem; } 
 .sect01 .left .bottom { gap: 1.6rem; } 
 .sect01 .left .card { width: calc(50% - 0.8rem) !important; } 
 }

/* sect02 */
.sect02 { padding: 12rem 4rem 16rem; } 
.sect02 .guide { display: flex; align-items: center; gap: 12rem; } 
.sect02 .circle-diagram-container { 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(255, 170, 41, 0.60) 0%, rgba(255, 170, 41, 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: radial-gradient(50% 50% at 50% 50%, rgba(255, 170, 41, 0.80) 0%, rgba(255, 170, 41, 0.32) 100%); border-radius: 50%; padding: 3.2rem; } 
.sect02 .circle-diagram .pd_01 { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; max-width: 16.8rem; max-height: 16.8rem; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: #FFF; border-radius: 50%; padding: 2.4rem; font-size: 2.4rem; font-weight: 600; } 
.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: 0 4.978px 24.89px 0 rgba(0, 0, 0, 0.08); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.4rem; font-size: 1.8rem; color: #121214; font-weight: 600; } 
.sect02 .item h4 { font-size: 2rem; } 
.sect02 .item p { color: #71727D; font-size: 1.8rem; font-weight: 500; } 

@media all and (max-width:768px){
 .sect02 { padding: 6rem 2rem 8rem; } 
 .sect02 .guide { flex-direction: column; gap: 4.8rem; } 
 .sect02 .sect_title { text-align: center; } 
 .sect02 .circle-diagram-container { max-width: 50rem; margin: 4rem; 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: 16rem 4rem; background: #f7f7fa; } 
.sect03 .sect_title { text-align: center; } 
.sect03 .cont-wrap { margin-top: 8rem; } 
.sect03 .card-list-wrap { flex-wrap: wrap; } 
.sect03 .card-list-wrap li { width: calc(50% - 3.2rem/2); flex-direction: row; padding: 4rem; gap: 3.2rem; align-items: flex-end; } 
.sect03 .card-list-wrap li .sub-tit { color: #3392FF; font-size: 1.8rem; display: flex; gap: 0.8rem; } 
.sect03 .card-list-wrap li .sub-tit span { display: flex; align-items: center; } 
.sect03 .card-list-wrap li .sub-tit span::after { content: ''; display: inline-block; width: 0.2rem; height: 1.6rem; background: #3392FF; margin-left: 0.8rem; } 
.sect03 .card-list-wrap li .txt .main-tit, .sect03 .card-list-wrap li .txt .desc { text-align: left; } 
.sect03 .card-list-wrap li .txt .main-tit { font-size: 2.4rem; } 
.sect03 .card-list-wrap li .txt .desc { margin-top: 2.4rem; } 

@media all and (max-width:768px){
 .sect03 { padding: 8rem 2rem; } 
 .sect03 .cont-wrap { margin-top: 4.8rem; } 
 .sect03 .card-list-wrap li { width: 100%; } 
 .sect03 .card-list-wrap li .sub-tit { flex-direction: column; } 
 }

/* sect04 */
 .sect04 { padding: 16rem 4rem 12rem; background: url(/image/images/makexo_sect04_bg.png) no-repeat center bottom; } 
 .sect04 .sect_title { text-align: center; } 
 .sect04 .certificate-swiper { max-width: 1600px; height: fit-content; margin: 8rem auto 0; overflow: hidden; } 
 .sect04 .certificate-swiper .swiper-wrapper { perspective: 4000px; align-items: center; padding: 2rem 0; } 
 .sect04 .certificate-swiper .swiper-slide { width: 16rem; height: fit-content; flex: 0 0 auto; transform-style: preserve-3d; transition: transform 0.5s ease, opacity 0.5s ease; } 
 .sect04 .certificate-swiper .swiper-slide img { width: 100%; border-radius: 1rem; display: block; } 

 /* 3D 효과 */
 .swiper-slide.is-center { transform: scale(1.1) rotateY(0deg); z-index: 3; } 
 .swiper-slide.is-prev { transform: scale(0.9) rotateY(25deg); z-index: 2; } 
 .swiper-slide.is-next { transform: scale(0.9) rotateY(-25deg); z-index: 2; } 

 @media (max-width: 768px){
 .sect04 { padding: 8rem 2rem 6rem; } 
 .swiper-slide { width: 30vw; } 
 .sect04 .certificate-swiper { overflow: visible; } 
 }

/* sect05 */
.sect05 { padding: 12rem 4rem; overflow: visible !important; } 
.sect05 .sect_title { text-align: center; } 
.sect05 .cont-wrap { margin-top: 8rem; } 
.sect05 .history-wrap { display:flex; margin:auto; position:relative; } 
.sect05 .timeline-left { width: calc(50% - 8rem); height:fit-content; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; position: sticky; top: 12rem; margin-right: 8rem; } 
.sect05 .timeline-line { position:absolute; left:50%; transform: translateX(-50%); top:2rem; bottom:0; width: 0.1rem; background:#D5D5DE; transform:translateX(-50%); } 
.sect05 .timeline-highlight { position:absolute; left:50%; transform: translateX(-50%); top:2rem; width: 0.1rem; background:#FFAA29; transform:translateX(-50%); height:0; transition:height 0.2s ease; } 
.sect05 .content { width:50%; display: flex; flex-direction: column; gap: 8rem; } 
.sect05 .content .section { margin-left: 8rem; } 
.sect05 .content .section h3 { font-size: 2.4rem; } 
.sect05 .content .section ul { display: flex; flex-direction: column; gap:1.2rem; margin-top: 2.4rem; font-size: 1.8rem; color: #71727D; font-weight: 500; } 
.sect05 .year { font-size:4rem; margin-bottom:20px; font-weight:bold; } 
.sect05 .year-image { width: 100%; max-width: 56rem; transition:opacity 0.3s ease; } 
.timeline-circle { position:absolute; left:50%; transform: translateX(-50%); width:1.2rem; height:1.2rem; background:#D5D5DE; border-radius:50%; transform:translate(-50%, -50%); transition:background 0.3s; z-index:2; margin-top: 1.8rem; } 
.timeline-circle.active { background:#FFAA29; } 
.timeline-circle.active::before { content: ''; width: 2.4rem; height: 2.4rem; border-radius: 50%; display: inline-block; border-radius: 12px; background: rgba(255, 164, 25, 0.20); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } 

@media all and (max-width:768px){
 .sect05 { padding: 6rem 0; } 
 .sect05 .cont-wrap { margin-top: 0; } 
 .sect05 .history-wrap { flex-direction: column; gap: 4rem; } 
 .sect05 .timeline-left { width: 100%; margin-right: 4rem; align-items: center; padding: 4.8rem 2rem 2rem; top: 0; background: #fff; z-index: 3; position: sticky; } 
 .sect05 .timeline-left::after { content: ''; width: 100%; height: 8rem; background: linear-gradient(180deg, #FFF 0%, rgba(255, 255, 255, 0.00) 100%); position: absolute; bottom: -8rem; left: 0; } 
 .sect05 .timeline-line { left: 4rem; } 
 .sect05 .timeline-highlight { left: 4rem; } 
 .sect05 .content { width: 100%; } 
 .timeline-circle { left: 4rem; } 
 .sect05 .content .section { margin-left: 6rem; } 
 }

/* sect06 */
.sect06 { padding: 12rem 4rem; } 
.sect06 .sect_title { text-align: center; } 
.sect06 .cont-wrap { margin-top: 8rem; } 
.sect06 .img-wrap { position: relative; } 
.sect06 .img-wrap img { border-radius: 1.2rem; overflow: hidden; height: 48rem; object-fit: cover; } 
.sect06 .img-wrap .map-wrap { overflow: hidden; position: absolute; top: 50%; right: 2.4rem; transform: translateY(-50%); padding: 4rem; background: rgba(255, 255, 255, 0.80); backdrop-filter: blur(10px); border-radius: 2rem; } 
.sect06 .img-wrap .map-wrap #map { height: 18rem; border-radius: 1.2rem; border: 1px solid #E6E6ED; overflow: hidden; } 
.sect06 .img-wrap .map-wrap .txt { margin-top: 2.8rem; } 
.sect06 .img-wrap .map-wrap h3 { font-size: 2.4rem; } 
.sect06 .img-wrap .map-wrap .desc { font-size: 1.8rem; color: #71727D; margin-top: 1.2rem; } 
.sect06 .img-wrap .map-wrap .button-wrap { display: flex; gap: 1.2rem; margin-top: 2rem; } 
.sect06 .img-wrap .map-wrap button { display: flex; height: 4.8rem; font-size: 1.8rem; border-radius: 10px; border: 1px solid #E6E6ED; background: #FFF; } 
.sect06 .img-wrap .map-wrap button a { padding: 1.2rem 2rem; } 

@media all and (max-width:768px){
 .sect06 { padding: 6rem 2rem; } 
 .sect06 .cont-wrap { margin-top: 4.8rem; } 
 .sect06 .img-wrap { display: flex; flex-direction: column; } 
 .sect06 .img-wrap img { height: auto; } 
 .sect06 .img-wrap .map-wrap { position: relative; top: 0; right: 0; transform: none; padding: 0; margin-top: 3.2rem; border-radius: 1.2rem; } 
 .sect06 .img-wrap .map-wrap #map { height: 24rem; } 
 .sect06 .img-wrap .map-wrap #map iframe { width: 100%; } 
 }

/* sect07 */
.sect07 { padding: 12rem 4rem 16rem; } 
.sect07 .sect_title { text-align: center; } 
.sect07 .cont-wrap { margin-top: 8rem; } 
.sect07 .cont-wrap .box { border-radius: 3.2rem; background: #EBF1FF; padding: 6rem; position: relative; } 
.sect07 .cont-wrap .box .main-contact .tit { display: flex; align-items: center; gap: 1.2rem; font-size: 2.4rem; } 
.sect07 .cont-wrap .box .main-contact .tit img { width: 4rem; } 
.sect07 .cont-wrap .box .main-contact .call-number { margin-top: 2rem; font-size: 4rem; font-weight: 700; } 
.sect07 .cont-wrap .box .main-contact .time { display: flex; align-items: center; gap: 0.8rem; font-size: 1.8rem; font-weight: 500; margin-top: 2rem; } 
.sect07 .cont-wrap .box .main-contact .time img { width: 2.4rem; } 
.sect07 .cont-wrap .box .sub-contact { display: flex; margin-top: 3.2rem; gap: 2.4rem; } 
.sect07 .cont-wrap .box .sub-contact li { width: 100%; border-radius: 2rem; background: #FFF; padding: 3.2rem; } 
.sect07 .cont-wrap .box .sub-contact h4 { font-size: 1.8rem; font-weight: 600; } 
.sect07 .cont-wrap .box .sub-contact p { font-size: 2.4rem; font-weight: 700; margin-top: 1.2rem; } 
.sect07 .cont-wrap .box .contact-img { width: 100%; max-width: 36rem; position: absolute; top: -8rem; right: 3.6rem; } 

@media all and (max-width:768px){
 .sect07 { padding: 6rem 2rem 8rem; } 
 .sect07 .cont-wrap { margin-top: 4.8rem; } 
 .sect07 .cont-wrap .box { padding: 4rem; } 
 .sect07 .cont-wrap .box .sub-contact { flex-direction: column; gap: 1.6rem; } 
 .sect07 .cont-wrap .box .contact-img { max-width: 20rem; top: -6rem; right: 0; } 
 .sect07 .cont-wrap .box .main-contact .tit { font-size: 2rem; } 
 .sect07 .cont-wrap .box .main-contact .call-number { font-size: 3.2rem; } 
 }

@media all and (max-width:500px){
 .sect07 .cont-wrap .box { padding: 3.2rem; } 
 .sect07 .cont-wrap .box .contact-img { max-width: 16rem; top: -6rem; right: 0; } 
 }