@charset "UTF-8";
/* ZAP-X 메인 화면 */

:root{
  --transition-custom02: all 0.2s ease-in-out;
  --transition-custom03: all 0.3s ease-in-out;
  --transition-custom08: all 0.8s ease-in-out;
  --transition-custom10: all 1.0s ease-in-out;
  --zx-purple: #a64288;
  --zx-orange: #e47412;
}

/* header : 메인도 흰 바탕 */
.main #header {position:relative; z-index:100; background:#fff;}

/* common */
.tx_ellip1 {word-break: break-all; display: -webkit-box; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: 1; -webkit-box-orient: vertical;}
.tx_ellip2 {word-break: break-all; display: -webkit-box; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
.tx_ellip3 {word-break: break-all; display: -webkit-box; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: 3; -webkit-box-orient: vertical;}

.main .in_cover > .in_w { max-width:1400px;}
.main .contents { }
.main article { position:relative; width:100%; }
.main section { position:relative;}
.main .skip {position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip:rect(0 0 0 0);}

.main_tit .tx {font-size:1.125rem; font-weight: 500; color:#222; letter-spacing: -0.025em;}
.main_tit .t {margin-top:1.25rem; font-size:3.125rem; font-weight: 700; color:#111; line-height: 1.3; letter-spacing: -0.04em;}
.main_tit.center {text-align: center;}
@media (max-width:1339px) {
  .main_tit .t {margin-top:0.75rem; font-size:2.5rem;}
}
@media (max-width:768px) {
  .main_tit .tx {font-size:1rem;}
  .main_tit .t {font-size:1.875rem;}
}
@media (max-width:460px) {
  .main_tit .t {font-size:1.625rem;}
}


/*** main visual ***/
.main_vis {position:relative; margin:0 2.125rem; background:#000; overflow: hidden;}
.main_vis .swiper-slide {position:relative; overflow: hidden;}
.main_vis .swiper-slide .img img {display: block; width:100%; height:45.125rem; object-fit: cover;}
.main_vis .swiper-slide .img img.mo {display: none;}
.main_vis_tit {position:absolute; left:0; top:0; width:100%; height:100%; box-sizing: border-box;}
.main_vis_tit > .in_w {height:100%;}
.main_vis_tit .t_w {padding-top:6.8125rem; color:#fff;}
.main_vis_tit .tx {font-size:1.5625rem; font-weight: 700; letter-spacing: -0.025em;}
.main_vis_tit .t {margin-top:1.375rem; font-size:3.75rem; font-weight: 700; line-height: 1.25; letter-spacing: -0.04em;}
.main_vis_tit .x {margin-top:2.625rem; font-size:1.25rem; font-weight: 500; line-height: 1.6; letter-spacing: -0.025em;}
.main_vis_tit .t .ln {display: block; overflow: hidden; padding-bottom:0.08em; margin-bottom:-0.08em;}
.main_vis_tit .t .ln > span {display: block;}

/* 배너 글자 : 보이는 슬라이드가 될 때마다 작은 문구 → 제목 한 줄씩 → 설명 순서로 올라온다
   (넘어가는 슬라이드는 효과만 빠지고 글자는 그대로 보이다가 슬라이드와 함께 사라진다) */
@keyframes zxVisUp {
  0% {opacity: 0; transform: translateY(1.5rem);}
  100% {opacity: 1; transform: none;}
}
@keyframes zxVisLine {
  0% {transform: translateY(105%);}
  100% {transform: none;}
}
.main_vis .swiper-slide-active .main_vis_tit .tx {animation: zxVisUp 0.7s ease-out 0.2s both;}
.main_vis .swiper-slide-active .main_vis_tit .t .ln > span {animation: zxVisLine 0.8s cubic-bezier(0.22, 0.61, 0.36, 1) both;}
.main_vis .swiper-slide-active .main_vis_tit .t .ln:nth-child(1) > span {animation-delay: 0.4s;}
.main_vis .swiper-slide-active .main_vis_tit .t .ln:nth-child(2) > span {animation-delay: 0.52s;}
.main_vis .swiper-slide-active .main_vis_tit .t .ln:nth-child(3) > span {animation-delay: 0.64s;}
.main_vis .swiper-slide-active .main_vis_tit .t .ln:nth-child(n+4) > span {animation-delay: 0.76s;}
.main_vis .swiper-slide-active .main_vis_tit .x {animation: zxVisUp 0.8s ease-out 0.95s both;}
@media (prefers-reduced-motion: reduce) {
  .main_disease_list > li,
  .main_disease_list > li > .tit,
  .main_disease_list > li > .tit .t,
  .main_disease_list > li > .cnt,
  .main_disease_list > li > .cnt > .cnt_in {transition: none;}
  .main_vis .swiper-slide-active .main_vis_tit .tx,
  .main_vis .swiper-slide-active .main_vis_tit .t .ln > span,
  .main_vis .swiper-slide-active .main_vis_tit .x {animation: none;}
}

.main_vis_ctrl_w {position:absolute; left:0; top:0; z-index:5; width:100%; height:100%; pointer-events: none; box-sizing: border-box;}
.main_vis_ctrl_w > .in_w {height:100%;}
.main_vis_ctrl {position:absolute; left:0; top:34.6875rem; display: flex; align-items: center; pointer-events: auto;}
.main_vis_ctrl a {display: block; width:1.125rem; height:1.25rem; background-repeat: no-repeat; background-position: 50% 50%;}
.main_vis_ctrl .btn_prev {background-image: url(../images/main/main_icon_arw_prev.png);}
.main_vis_ctrl .btn_next {background-image: url(../images/main/main_icon_arw_next.png);}
.main_vis_ctrl .btn_autoPlay {position:relative; margin:0 0.5rem; width:0.75rem;}
.main_vis_ctrl .btn_autoPlay:before,
.main_vis_ctrl .btn_autoPlay:after {content:''; display: block; position:absolute; top:0.1875rem; width:0.25rem; height:0.9375rem; background:#fff;}
.main_vis_ctrl .btn_autoPlay:before {left:0;}
.main_vis_ctrl .btn_autoPlay:after {right:0;}
.main_vis_ctrl .btn_autoPlay.btn_play:before {left:0.125rem; width:0; height:0; background:none; border-style: solid; border-width:0.5rem 0 0.5rem 0.75rem; border-color:transparent transparent transparent #fff;}
.main_vis_ctrl .btn_autoPlay.btn_play:after {display: none;}
.main_vis_ctrl .swiper-pagination {position:static; width:auto; margin-left:2.375rem; font-size:1.125rem; font-weight: 700; color:#fff; letter-spacing: 0.3em;}
.main_vis_ctrl .prog {position:relative; margin-left:1.25rem; width:0.875rem; height:0.875rem; border:2px solid rgba(228,116,18,0.35); border-radius:50%;}
.main_vis_ctrl .prog em {position:absolute; left:-2px; top:-2px; width:100%; height:100%; border:2px solid var(--zx-orange); border-radius:50%; clip-path: inset(0 100% 0 0);}
.main_vis_ctrl .prog.on em {animation: zxVisProg 5s linear forwards;}
@keyframes zxVisProg {
  0% {clip-path: inset(0 100% 0 0);}
  100% {clip-path: inset(0 0 0 0);}
}

.main_vis_quick {position:absolute; right:0; top:8.875rem; width:21.4375rem; pointer-events: auto;}
.main_vis_quick > li {display: flex; flex-direction: column; justify-content: center; height:12.0625rem; padding:0 2.1875rem; background:#fff; box-sizing: border-box;}
.main_vis_quick > li + li {margin-top:1.0625rem;}
.main_vis_quick > li.box1 {background:var(--zx-purple);}
.main_vis_quick .t {font-size:1.6875rem; font-weight: 700; color:#222; letter-spacing: -0.025em;}
.main_vis_quick .box1 .t {color:#fff;}
.main_vis_quick .btn {display: flex; align-items: center; margin-top:1.8125rem; height:3rem; padding:0 1.5rem 0 1.25rem; font-size:0.875rem; font-weight: 500; color:#333; text-transform: none; background:#f1f1f1 url(../images/main/main_icon_arw_quick.png) no-repeat right 1.1rem center; border-radius:0.3125rem; box-sizing: border-box; transition: var(--transition-custom03);}
.main_vis_quick .box1 .btn {color:var(--zx-purple); background-color:#fff;}
.main_vis_quick .btn .b_t {position:relative; padding-left:0.75rem;}
.main_vis_quick .btn .b_t:before {content:''; display: block; position:absolute; left:0; top:50%; margin-top:-0.125rem; width:0.25rem; height:0.25rem; background:currentColor; border-radius:50%;}
.main_vis_quick .btn:hover,
.main_vis_quick .btn:focus {background-position: right 0.8rem center;}

@media (max-width:1500px) {
  .main_vis_tit .t {font-size:3.25rem;}
  .main_vis_quick {width:18rem;}
  .main_vis_quick > li {height:10.5rem; padding:0 1.75rem;}
  .main_vis_quick .t {font-size:1.5rem;}
  .main_vis_quick .btn {margin-top:1.25rem;}
}
@media (max-width:1339px) {
  .main_vis {margin:0 1.25rem;}
  .main_vis .swiper-slide .img img {height:40rem;}
  .main_vis_tit .t_w {padding-top:5rem;}
  .main_vis_tit .tx {font-size:1.375rem;}
  .main_vis_tit .t {font-size:2.75rem;}
  .main_vis_tit .x {margin-top:1.75rem; font-size:1.125rem;}
  .main_vis_ctrl {top:31rem;}
  .main_vis_quick {top:7rem;}
}
@media (max-width:1024px) {
  .main_vis {margin:0;}
  .main_vis .swiper-slide .img img {height:36rem;}
  .main_vis_tit .t_w {padding-top:4rem;}
  .main_vis_tit .t {font-size:2.5rem;}
  .main_vis_ctrl_w {position:relative; height:auto; background:#fff;}
  .main_vis_ctrl_w > .in_w {position:relative; padding-top:4rem;}
  .main_vis_ctrl {position:absolute; top:-4.5rem; bottom:auto;}
  .main_vis_quick {position:static; display: flex; width:auto;}
  .main_vis_quick > li {flex:1; height:auto; padding:1.5rem 1.25rem;}
  .main_vis_quick > li + li {margin-top:0;}
  .main_vis_quick > li.box2 {background:#f6f6f6;}
  .main_vis_quick .t {font-size:1.375rem;}
  .main_vis_quick .box2 .btn {background-color:#fff;}
}
@media (max-width:960px) {
  .main_vis .swiper-slide .img img.pc {display: none;}
  .main_vis .swiper-slide .img img.mo {display: block;}
}
@media (max-width:768px) {
  .main_vis .swiper-slide .img img {height:30rem;}
  .main_vis_tit .t_w {padding-top:2.75rem;}
  .main_vis_tit .tx {font-size:1.125rem;}
  .main_vis_tit .t {margin-top:0.75rem; font-size:2rem;}
  .main_vis_tit .x {margin-top:1.25rem; font-size:1rem;}
  .main_vis_tit .x br {display: none;}
  .main_vis_ctrl {top:-3.5rem;}
  .main_vis_ctrl .swiper-pagination {margin-left:1.5rem; font-size:1rem;}
}
@media (max-width:640px) {
  .main_vis_ctrl_w > .in_w {padding-top:2.5rem;}
}
@media (max-width:460px) {
  .main_vis .swiper-slide .img img {height:27rem;}
  .main_vis_tit .t {font-size:1.75rem;}
  .main_vis_quick > li {padding:1.25rem 1rem;}
  .main_vis_quick .t {font-size:1.1875rem;}
  .main_vis_quick .btn {margin-top:0.875rem; height:2.625rem; padding:0 1.75rem 0 0.75rem; font-size:0.8125rem; background-position: right 0.625rem center;}
}


/*** 주요 치료 질환 ***/
.sec_disease {margin-top:5.3125rem;}
.main .main_disease {padding:0;}
.main .main_disease > .in_w {display: flex; width:auto; max-width:none; margin:0 2.125rem; padding:0;}
.main_disease .img {flex:none; align-self: flex-start; width:50.05%; height:42.3125rem; overflow: hidden;}
.main_disease .img img {display: block; width:100%; height:100%; object-fit: cover;}
.main_disease_list {flex:1; min-width:0; display: flex; flex-direction: column; height:42.3125rem;}
.main_disease_list > li {position:relative; flex:0 0 auto; border-bottom:1px solid #e5e5e5; overflow: hidden; transition: flex-grow 0.6s cubic-bezier(0.65, 0, 0.35, 1), background-color 0.5s ease, border-color 0.5s ease;}
.main_disease_list > li > .tit {position:relative; z-index:1; display: flex; align-items: center; width:100%; height:3.4375rem; padding:0 5.625rem 0 3.75rem; text-align: left; background:none; border:none; cursor: pointer; box-sizing: border-box; transition: height 0.6s cubic-bezier(0.65, 0, 0.35, 1);}
.main_disease_list > li > .tit .num {flex:none; width:2.1875rem; font-size:1rem; color:var(--zx-purple); transition: width 0.5s ease, opacity 0.3s ease;}
.main_disease_list > li > .tit .t {font-size:1.125rem; font-weight: 700; color:#222; letter-spacing: -0.025em; white-space: nowrap; transition: font-size 0.6s cubic-bezier(0.65, 0, 0.35, 1), color 0.2s ease;}
.main_disease_list > li:not(.on) > .tit:hover .t,
.main_disease_list > li:not(.on) > .tit:focus .t {color:var(--zx-purple);}
.main_disease_list > li > .tit .ico {position:absolute; right:1.75rem; top:50%; width:1.25rem; height:1.25rem; margin-top:-0.625rem; background:url(../images/main/main_icon_plus.png) no-repeat 50% 50%;}
.main_disease_list > li > .cnt {position:relative; z-index:1; display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.6s cubic-bezier(0.65, 0, 0.35, 1);}
.main_disease_list > li > .cnt > .cnt_in {min-height:0; overflow: hidden; padding:0 5.625rem 0 3.75rem; opacity: 0; transition: opacity 0.35s ease, padding 0.6s cubic-bezier(0.65, 0, 0.35, 1);}
.main_disease_list > li:after {content:''; display: block; position:absolute; right:1.25rem; bottom:0; width:15.0625rem; height:13.5rem; background:url(../images/main/main_icon_brain.png) no-repeat 100% 100%; background-size:contain; opacity: 0; transition: opacity 0.5s ease; pointer-events: none;}
.main_disease_list > li.on {flex-grow:1; background-color:#f3f3f3; border-bottom-color:transparent;}
.main_disease_list > li.on:after {opacity: 1;}
.main_disease_list > li.on > .tit {height:5.625rem; align-items: flex-end;}
.main_disease_list > li.on > .tit .num {width:0; opacity: 0;}
.main_disease_list > li.on > .tit .t {font-size:2.1875rem;}
.main_disease_list > li.on > .tit .ico {top:2.5rem; margin-top:0; background-image:url(../images/main/main_icon_minus.png);}
.main_disease_list > li.on > .cnt {grid-template-rows: 1fr;}
.main_disease_list > li.on > .cnt > .cnt_in {padding-top:1.25rem; padding-bottom:2.5rem; opacity: 1; transition-delay: 0.12s, 0s;}
.main_disease_list .cnt .label {display: inline-block; padding:0 1.5rem; height:2.5625rem; line-height: 2.5625rem; font-size:0.9375rem; font-weight: 700; color:#fff; background:var(--zx-orange); border-radius:0.3125rem;}
.main_disease_list .cnt .x {margin-top:3.125rem; font-size:1.125rem; color:#222; line-height: 1.7; letter-spacing: -0.025em; word-break: keep-all;}
.main_disease_list .cnt .more {display: inline-block; margin-top:1.25rem; padding-bottom:0.125rem; font-size:1rem; font-weight: 500; color:var(--zx-purple); border-bottom:1px solid var(--zx-purple);}
@media (max-width:1500px) {
  .main_disease_list .cnt .x {margin-top:2.25rem;}
}
@media (max-width:1339px) {
  .sec_disease {margin-top:4rem;}
  .main .main_disease > .in_w {margin:0 1.25rem;}
  .main_disease_list > li > .tit {padding-left:2.25rem; padding-right:4rem;}
  .main_disease_list > li.on > .tit {height:4.875rem;}
  .main_disease_list > li.on > .tit .t {font-size:1.875rem;}
  .main_disease_list > li.on > .tit .ico {top:2rem;}
  .main_disease_list > li > .cnt > .cnt_in {padding-left:2.25rem; padding-right:4rem;}
  .main_disease_list .cnt .x {margin-top:2rem;}
  .main_disease_list .cnt .x br {display: none;}
}
@media (max-width:1024px) {
  .main .main_disease > .in_w {flex-direction: column; margin:0;}
  .main_disease_list {height:auto;}
  .main_disease_list > li.on {border-bottom-color:#e5e5e5;}
  .main_disease .img {display: none;}
}
@media (max-width:640px) {
  .sec_disease {margin-top:2.5rem;}
  .main_disease_list > li > .tit {padding-left:5vw; padding-right:3.5rem;}
  .main_disease_list > li > .tit .ico {right:5vw;}
  .main_disease_list > li:after {width:8rem; height:7.2rem;}
  .main_disease_list > li.on > .tit {height:4.125rem;}
  .main_disease_list > li.on > .tit .t {font-size:1.5rem;}
  .main_disease_list > li.on > .tit .ico {top:1.5rem;}
  .main_disease_list > li > .cnt > .cnt_in {padding-left:5vw; padding-right:5vw;}
  .main_disease_list > li.on > .cnt > .cnt_in {padding-top:0.875rem; padding-bottom:2rem;}
  .main_disease_list .cnt .label {height:2.125rem; line-height: 2.125rem; padding:0 1rem; font-size:0.875rem;}
  .main_disease_list .cnt .x {margin-top:1.25rem; font-size:1rem;}
}


/*** 주요 장점 ***/
.sec_adv {margin-top:7.5rem;}
.main_adv_w {margin:2.25rem 2.125rem 0; background:#000 url(../images/main/main_bg0201.jpg) no-repeat 50% 50%; background-size:cover; overflow: hidden;}
.sec_adv .main_tit {opacity: 0; transform: translateY(2rem); transition: opacity 0.8s ease, transform 0.8s ease;}
.sec_adv.wp .main_tit {opacity: 1; transform: none;}
.main_adv_list {display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));}
.main_adv_list > li {position:relative; border-right:1px solid rgba(255,255,255,0.25); border-bottom:1px solid rgba(255,255,255,0.25); box-sizing: border-box; opacity: 0; transform: translateY(3rem); transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);}
.sec_adv.wp .main_adv_list > li {opacity: 1; transform: none;}
.sec_adv.wp .main_adv_list > li:nth-child(1) {transition-delay: 0.15s;}
.sec_adv.wp .main_adv_list > li:nth-child(2) {transition-delay: 0.25s;}
.sec_adv.wp .main_adv_list > li:nth-child(3) {transition-delay: 0.35s;}
.sec_adv.wp .main_adv_list > li:nth-child(4) {transition-delay: 0.45s;}
.sec_adv.wp .main_adv_list > li:nth-child(5) {transition-delay: 0.55s;}
.sec_adv.wp .main_adv_list > li:nth-child(6) {transition-delay: 0.65s;}
.main_adv_list > li:nth-child(3n) {border-right:none;}
.main_adv_list > li:nth-child(n+4) {border-bottom:none;}
.main_adv_list .box {position:relative; display: flex; flex-direction: column; align-items: center; justify-content: center; height:20.375rem; padding:0 2.5rem; text-align: center; color:#fff; border:0.25rem solid transparent; box-sizing: border-box; outline-offset:-4px; overflow: hidden; transition: background-color 0.5s ease, border-color 0.5s ease, color 0.4s ease;}
.main_adv_list .box:before {content:''; display: block; position:absolute; left:0; top:0; right:0; bottom:0; background:url(../images/main/main_deco0201.png) no-repeat 50% 50%; background-size:contain; opacity: 0; transform: scale(1.2) translateX(-2rem); transition: opacity 0.6s ease, transform 0.9s ease;}
.main_adv_list .box > * {position:relative;}
.main_adv_list > li:not(.on) .box:hover {background-color:rgba(255,255,255,0.06);}
.main_adv_list .t {font-size:1.875rem; font-weight: 700; letter-spacing: -0.025em; transition: transform 0.5s ease;}
.main_adv_list .en {margin-top:0.875rem; font-size:1rem; font-weight: 300; color:rgba(255,255,255,0.7); transition: color 0.4s ease, transform 0.5s ease;}
.main_adv_list .x {max-height:0; margin-top:0; font-size:1.125rem; font-weight: 500; color:#222; line-height: 1.65; letter-spacing: -0.025em; word-break: keep-all; opacity: 0; overflow: hidden; transform: translateY(1rem); transition: max-height 0.5s ease, margin-top 0.5s ease, opacity 0.4s ease, transform 0.5s ease;}
.main_adv_list > li.on .box {color:#222; background-color:#fff; border-color:#9c4782;}
.main_adv_list > li.on .box:before {opacity: 1; transform: none;}
.main_adv_list > li.on .en {color:var(--zx-purple);}
.main_adv_list > li.on .x {max-height:10rem; margin-top:2.125rem; opacity: 1; transform: none; transition-delay: 0.1s;}
@media (max-width:1339px) {
  .sec_adv {margin-top:5rem;}
  .main_adv_w {margin:1.75rem 1.25rem 0;}
  .main_adv_list .box {height:17rem; padding:0 1.5rem;}
  .main_adv_list .t {font-size:1.625rem;}
  .main_adv_list .x {font-size:1rem;}
  .main_adv_list > li.on .x {margin-top:1.25rem;}
}
@media (max-width:1024px) {
  .main_adv_w {margin:1.75rem 0 0;}
  .main_adv_list {grid-template-columns: repeat(2, minmax(0, 1fr));}
  .main_adv_list > li:nth-child(3n) {border-right:1px solid rgba(255,255,255,0.25);}
  .main_adv_list > li:nth-child(2n) {border-right:none;}
  .main_adv_list > li:nth-child(n+4) {border-bottom:1px solid rgba(255,255,255,0.25);}
  .main_adv_list > li:nth-child(n+5) {border-bottom:none;}
}
@media (max-width:640px) {
  .sec_adv {margin-top:3.75rem;}
  .main_adv_list {grid-template-columns: minmax(0, 1fr);}
  .main_adv_list > li,
  .main_adv_list > li:nth-child(3n) {border-right:none;}
  .main_adv_list > li:nth-child(n+5) {border-bottom:1px solid rgba(255,255,255,0.25);}
  .main_adv_list > li:last-child {border-bottom:none;}
  .main_adv_list .box {height:auto; min-height:8.5rem; padding:1.75rem 5vw;}
  .main_adv_list .t {font-size:1.375rem;}
  .main_adv_list .en {margin-top:0.5rem; font-size:0.875rem;}
  .main_adv_list .box,
  .main_adv_list .x {transition: none;}
  .main_adv_list .x {max-height:none; margin-top:0.875rem; font-size:0.9375rem; color:rgba(255,255,255,0.85); opacity: 1; transform: none;}
  .main_adv_list > li.on .box {color:#fff; background-color:transparent; border-color:transparent;}
  .main_adv_list > li.on .box:before {opacity: 0;}
  .main_adv_list > li.on .en {color:rgba(255,255,255,0.7);}
  .main_adv_list > li.on .x {margin-top:0.875rem;}
}


/*** 수술 단계 ***/
.main_step {margin:0 2.125rem; background:var(--zx-purple); overflow: hidden;}
.main_step > .in_w {display: flex; justify-content: space-between; height:59.5625rem;}
.main_step_l {flex:1; min-width:0; padding-top:6.25rem;}
.main_step .main_tit .tx,
.main_step .main_tit .t {color:#fff;}
.main_step_list {width:17.6875rem; margin-top:4.25rem;}
.main_step_list > li button {display: flex; align-items: center; gap:0.625rem; width:100%; height:3.625rem; padding:0; text-align: left; color:#fff; background:none; border:none; border-bottom:1px solid rgba(255,255,255,0.3); cursor: pointer;}
.main_step_list > li .num {flex:none; display: flex; align-items: center; justify-content: center; width:1.625rem; height:1.625rem; font-size:0.9375rem; border:1px solid #fff; border-radius:50%; box-sizing: border-box;}
.main_step_list > li .t {font-size:1.125rem; font-weight: 500; letter-spacing: -0.025em;}
.main_step_list > li.on button {border-bottom:3px solid #fff;}
.main_step_list > li.on .num {font-weight: 700; color:var(--zx-purple); background:#fff;}
.main_step_list > li.on .t {font-weight: 700;}

.main_step_r {position:relative; flex:none; width:48.875rem; padding-top:6.125rem;}
.main_step_r .line_tit {position:absolute; left:50%; top:6.125rem; z-index:2; display: flex; align-items: center; justify-content: center; width:13.25rem; height:3.875rem; margin-left:-6.625rem; font-size:1rem; font-weight: 700; color:#fff; background:var(--zx-purple); border:1px solid #fff; border-radius:999px; box-sizing: border-box;}
.main_step_r .line_w {position:relative; height:100%; margin-top:4.625rem; overflow: hidden;}
.main_step_r .line_w:before {content:''; display: block; position:absolute; left:50%; top:0; bottom:0; width:1px; margin-left:-0.5px; background:rgba(255,255,255,0.8);}
.main_step_line {position:relative; padding:3rem 0 6rem; transition: transform 0.6s ease;}
.main_step_line > li {position:relative; width:16.25rem;}
.main_step_line > li + li {margin-top:-3.5rem;}
.main_step_line > li:nth-child(odd) {margin-left:auto;}
.main_step_line > li .img {position:relative; height:11.25rem; background:#fff; box-sizing: border-box;}
.main_step_line > li .img img {display: block; width:100%; height:100%; object-fit: cover; filter: grayscale(1); transition: var(--transition-custom03);}
.main_step_line > li .img.none {display: flex; align-items: center; justify-content: center; background:#f2f2f2;}
.main_step_line > li .img.none span {font-size:0.875rem; color:#999;}
.main_step_line > li .t {margin-top:0.625rem; font-size:1.125rem; font-weight: 700; color:#fff; letter-spacing: -0.025em;}
.main_step_line > li .t .num {display: none;}
.main_step_line > li:before {content:''; display: block; position:absolute; top:3.625rem; width:8.1875rem; height:1px; background:rgba(255,255,255,0.6);}
.main_step_line > li:after {content:''; display: block; position:absolute; top:3.25rem; width:0.8125rem; height:0.8125rem; background:#fff; border-radius:50%;}
.main_step_line > li:nth-child(odd):before {right:100%;}
.main_step_line > li:nth-child(odd):after {right:calc(100% + 7.78rem);}
.main_step_line > li:nth-child(even):before {left:100%;}
.main_step_line > li:nth-child(even):after {left:calc(100% + 7.78rem);}
.main_step_line > li.on .img {border:3px solid #fd7200;}
.main_step_line > li.on .img img {filter: none;}
.main_step_line > li.on:before {height:3px; margin-top:-1px; background:#fd7200;}
.main_step_line > li.on:after {background:#fd7200; box-shadow:0 0 0 3px rgba(255,255,255,0.9);}
@media (max-width:1500px) {
  .main_step_r {width:42rem;}
  .main_step_line > li:before {width:4.6rem;}
  .main_step_line > li:nth-child(odd):after {right:calc(100% + 4.2rem);}
  .main_step_line > li:nth-child(even):after {left:calc(100% + 4.2rem);}
}
@media (max-width:1339px) {
  .main_step {margin:0 1.25rem;}
  .main_step_l {padding-top:4.5rem;}
  .main_step_r {width:36rem; padding-top:4.5rem;}
  .main_step_r .line_tit {top:4.5rem;}
  .main_step_line > li {width:14rem;}
  .main_step_line > li .img {height:9.75rem;}
  .main_step_line > li:before {width:3.99rem;}
  .main_step_line > li:nth-child(odd):after {right:calc(100% + 3.6rem);}
  .main_step_line > li:nth-child(even):after {left:calc(100% + 3.6rem);}
}
@media (max-width:1024px) {
  .main_step {margin:0;}
  .main_step > .in_w {flex-direction: column; height:auto; padding-bottom:3.75rem;}
  .main_step_l {width:auto; padding-top:3.75rem;}
  .main_step_list {display: none;}
  .main_step_r {width:auto; padding-top:2.5rem;}
  .main_step_r .line_tit {display: none;}
  .main_step_r .line_w {margin-top:0; overflow: visible;}
  .main_step_r .line_w:before {display: none;}
  .main_step_line {display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap:1.5rem 1rem; padding:0; transform: none !important;}
  .main_step_line > li,
  .main_step_line > li:nth-child(odd) {width:auto; margin:0;}
  .main_step_line > li + li {margin-top:0;}
  .main_step_line > li:before,
  .main_step_line > li:after {display: none;}
  .main_step_line > li .img {height:auto; aspect-ratio: 13 / 9; border:none;}
  .main_step_line > li.on .img {border:none;}
  .main_step_line > li .img img {filter: none;}
  .main_step_line > li .t {font-size:1rem; word-break: keep-all;}
  .main_step_line > li .t .num {display: inline;}
}
@media (max-width:640px) {
  .main_step_line {grid-template-columns: repeat(2, minmax(0, 1fr));}
  .main_step_line > li .t {font-size:0.9375rem;}
}


/*** NEWS & MEDIA ***/
.sec_news {padding:7.4375rem 0 7.1875rem;}
.main_news > .in_w {display: flex; justify-content: space-between; align-items: flex-end; gap:3.4375rem;}
.main_news_l {flex:none; width:35.1875rem;}
.main_news_box {position:relative; margin-top:2.25rem; height:17.625rem; border:1px solid #cdcdcd; box-sizing: border-box;}
.main_news_swiper {height:100%;}
.main_news .news_item {display: flex; flex-wrap: wrap; align-content: flex-start; height:100%; padding:3.0625rem 3.75rem 0; box-sizing: border-box;}
.main_news .news_item .date {flex:none; display: flex; flex-direction: column; align-items: center; justify-content: center; width:5.8125rem; height:5.8125rem; color:#fff; background:var(--zx-orange); border-radius:50%;}
.main_news .news_item .date .d {font-size:1.875rem; font-weight: 700; line-height: 1.1;}
.main_news .news_item .date .ym {font-size:0.8125rem;}
.main_news .news_item .t {flex:1; min-width:0; margin-left:1.5rem; padding-top:0.125rem; font-size:1.5625rem; font-weight: 700; color:#222; line-height: 1.3; letter-spacing: -0.025em;}
.main_news .news_item .x {width:100%; margin-top:2.375rem; padding-top:1.875rem; font-size:1.125rem; font-weight: 500; color:#888; border-top:1px solid #ddd;}
.main_news .news_item:hover .t,
.main_news .news_item:focus .t {text-decoration: underline;}
.main_news .btn_news {position:absolute; top:50%; z-index:2; width:1.1875rem; height:3.875rem; margin-top:-1.9375rem; background:#b2b2b2 no-repeat 50% 50%;}
.main_news .btn_news.btn_prev {left:0.625rem; background-image:url(../images/main/main_icon_news_prev.png);}
.main_news .btn_news.btn_next {right:0.625rem; background-image:url(../images/main/main_icon_news_next.png);}
.main_news .btn_news.swiper-button-disabled {opacity: 0.4; cursor: default;}
.main_news .news_empty {display: flex; align-items: center; justify-content: center; height:100%; font-size:1.125rem; color:#888;}
.main_news_r {flex:1; min-width:0; max-width:49.25rem;}
.main_video {position:relative; background:#000;}
.main_video video {display: block; width:100%; aspect-ratio: 788 / 442; object-fit: cover; background:#000;}
.main_video .btn_play {position:absolute; left:50%; top:50%; width:3.8125rem; height:3.8125rem; margin:-1.90625rem 0 0 -1.90625rem; padding:0; background:rgba(0,0,0,0.45); border:none; border-radius:50%; cursor: pointer; transition: var(--transition-custom03);}
.main_video .btn_play:before {content:''; display: block; position:absolute; left:50%; top:50%; margin:-0.625rem 0 0 -0.375rem; border-style: solid; border-width:0.625rem 0 0.625rem 1.125rem; border-color:transparent transparent transparent #fff;}
.main_video .btn_play:hover,
.main_video .btn_play:focus {background:var(--zx-purple);}
.main_video.play .btn_play {display: none;}
@media (max-width:1339px) {
  .sec_news {padding:5rem 0;}
  .main_news > .in_w {gap:2rem;}
  .main_news_l {width:28rem;}
  .main_news_box {margin-top:2.5rem; height:16rem;}
  .main_news .news_item {padding:2.5rem 2.5rem 0;}
  .main_news .news_item .t {font-size:1.3125rem;}
  .main_news .news_item .x {margin-top:1.5rem; padding-top:1.25rem; font-size:1rem;}
}
@media (max-width:1024px) {
  .main_news > .in_w {flex-direction: column; align-items: stretch;}
  .main_news_l {width:auto;}
  .main_news_r {max-width:none;}
}
@media (max-width:640px) {
  .sec_news {padding:3.75rem 0;}
  .main_news_box {height:auto; min-height:14rem;}
  .main_news .news_item {padding:1.875rem 2.25rem 1.875rem;}
  .main_news .news_item .date {width:4.375rem; height:4.375rem;}
  .main_news .news_item .date .d {font-size:1.375rem;}
  .main_news .news_item .date .ym {font-size:0.6875rem;}
  .main_news .news_item .t {margin-left:1rem; font-size:1.125rem;}
  .main_news .btn_news {width:1rem; height:3rem; margin-top:-1.5rem;}
  .main_news .btn_news.btn_prev {left:0.375rem;}
  .main_news .btn_news.btn_next {right:0.375rem;}
}

@media (prefers-reduced-motion: reduce) {
  .sec_adv .main_tit,
  .main_adv_list > li {opacity: 1; transform: none; transition: none;}
}