@charset "utf-8";
/* 이하 medi 레거시 — 신규 참조 금지 (실사용은 서브탑 .top_img* 와 게시판 세트뿐. 2026 서브 통합 블록은 파일 맨 아래) */


.container .cont_top_txt{margin-bottom: var(--cont_mt)}
.container .cont_top_txt p {color: var(--blue);font-size: 3rem;font-weight: 600;font-family: var(--NotoSerif); word-break: keep-all}

.cont_tit {font-size: var(--sub_cont_tit); font-weight: var(--sub_cont_tit_we); }
.cont_txt {font-size: var(--sub_cont_txt); line-height: 1.7; word-break: keep-all}
.cont_txt p { word-break: keep-all; }

.deps3_tit {font-size: var(--deps3_tit); font-weight: 600; word-break: keep-all;}
.deps4_tit {font-size: var(--deps4_tit); font-weight: 600; word-break: keep-all}

.cont_tit + .cont_txt {margin-top: 20px}
.sub_pb {padding-bottom:var(--sub_pb)}

.txt_cir {display: inline-block; width: var(--txt_cir); height: var(--txt_cir); margin-top:var(--txt_cir_top); margin-right: 1rem; flex-shrink: 0; border-radius: 50% ; background-color: #8899A6}


/*서브 탑 공용*/

.top_img {position: relative; padding: 0 2.5%;}
.top_img .img {position: relative;}
.top_img .img:before {content: "";position: absolute; width: 100%; height: 100%; left: 0; top: 0 ;background-color: var(--blue);opacity: 0.5; z-index: 2}
.top_img .img img{position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; object-position: center}

.top_img .sub_nav {display: flex; align-items: center; color: #fff;}
.top_img .sub_nav .svg {display: flex; margin: 0 25px; height: 1.6rem}
.top_img .sub_nav .svg svg {fill: #fff; height: 1.6rem}
.top_img .sub_nav .li {font-size: 1.6rem; font-weight: 500}
.top_img .sub_nav .li span {display: inline-block}
/*.top_img .sub_nav .li.deps1 span{min-width: 11.5rem}*/
/*.top_img .sub_nav .li.deps2 span{min-width: 16rem}*/
.top_img .sub_nav .li a {display: flex; align-items: center}
.top_img .sub_nav .li a svg {fill: #fff; font-size: 1.6rem}
.top_img .sub_nav .li .nice-select {font-size: 1.6rem; height: auto; padding-left: 0; padding-right: 2rem; border: none; font-weight: 500; line-height: 1.1; color: #fff; background-color: transparent}
.top_img .sub_nav .li .nice-select .list { border-radius: 0; margin-top: 0.5rem; background-color: var(--blue); padding: 10px 0}
.top_img .sub_nav .li .nice-select .list li {position: relative; padding: 6px 15px 6px 20px; min-height: 0; line-height: 1.4; font-size: 13px; color: #fff}
.top_img .sub_nav .li .nice-select .list li:before {content: ""; position: absolute; left: 1.25rem; top: 12px; width: 3px; height: 3px; border-radius: 50% ;background-color: #fff; opacity: 0 ;transition: all .3s}
.top_img .sub_nav .li .nice-select:after {content: "\f0d7"; width: auto; height: auto; border: none; margin-top: 0.1rem ;right: 0; top: 0; font-family: "Font Awesome 6 Pro"; font-size: 1.2rem; font-weight: 700; transform: rotate(0) ; transform-origin: center; color: #fff}
.top_img .sub_nav .li .nice-select.open:after {transform: rotate(180deg) ;}
.top_img .sub_nav .li .nice-select .list li.selected {font-weight: 700; color: #fff}

.top_img .sub_nav .li .nice-select .list li.selected:before, .top_img .sub_nav .option.focus:before, .top_img .sub_nav .option.selected.focus:before {opacity: 1 !important}
@media screen and (min-width: 1241px) { .top_img .sub_nav .option:hover:before {opacity: 1 !important} }

.top_img .sub_nav .option.focus, .top_img .sub_nav .option.selected.focus {background-color: transparent}
@media screen and (min-width: 1241px) { .top_img .sub_nav .option:hover {background-color: transparent} }

.top_img .tit {font-size: 5.5rem; font-weight: 600; margin-top: 20px; color: #fff}

.top_img.type2 {margin-bottom: var(--top_img_mg); font-size: 20px}
.top_img.type2 .img{padding-top: 27%}
.top_img.type2 .in {position: absolute; left: 50%; top: 60%; transform: translate(-50%,0); z-index: 3; padding: 0 60px}

.top_img.type3 {padding: 21rem 0 0; margin-bottom: var(--top_img_mg)}
.top_img.type3 .sub_nav .svg svg {fill: var(--blue)}
.top_img.type3 .sub_nav .li .nice-select:after,
.top_img.type3 .sub_nav .li .nice-select,
.top_img.type3 .sub_nav {color: var(--blue)}
.top_img.type3 .sub_nav .li a svg {fill: var(--blue)}
.top_img.type3 .tit {color: var(--blue)}
.top_img.type3 .move_text_box {margin-top: 3rem}


/* sub move_txt */
.move_text_box{transform: translateX(-2.5%); width: calc(100vw - var(--scroll-width))}
.move_text_box .text{font-size: 12rem}
.move_text_box .text p{line-height: 1.2em}
.move_text_box .text p + p {margin-left: 3rem}


.grid_box {display: grid; grid-template-columns: 22% 1fr; gap: 0 40px}

/*뱃지 모양*/
.cir_badge {display: inline-block; padding: 0 2rem; height: 3.1rem; flex-shrink: 0 ;line-height: 3.2rem ;font-size: 1.6rem; font-weight: 600;  background-color: var(--blue); color: #fff; border-radius: 50px}
.cir_badge.en {font-family: var(--serif); text-transform: capitalize; line-height: 2.9rem}
.cir_badge.en .num {font-family: var(--NotoSerif); font-size: 0.9em}
.cir_badge.sm {padding: 0 1em; font-size: max(1.3rem,10px); height: 2.4rem; line-height: 2.4rem}
.cir_badge.line {background-color: #fff; border: 1px solid var(--blue); color: var(--blue)}
/*.cir_badge.serif {font-family: var(--NotoSerif)}*/

/* 공용 탭 */
.top_tab + .com_tab_box {margin-top: 6rem}
.com_tab_box .wrap{display: flex; justify-content: center; margin-right: -10px;margin-bottom: -10px}
.com_tab_box.start .wrap {justify-content: flex-start}
.com_tab_box .btn {position: relative; height: 2.5em; line-height: calc(2.5em - 1px); padding: 0 1.1em; margin-right: 10px; margin-bottom: 10px; font-size: 1.8rem; font-weight: 500; border: 1px solid #BDBDBD; border-radius: 100px; color: #BDBDBD;}
.com_tab_box .btn:before {content: attr(data-nm); overflow: hidden; height: 0; visibility: hidden; font-weight: 700; display: block }
.com_tab_box .btn.active {border-color: var(--blue); color: var(--blue); font-weight: 700}

/*링크 탭*/
.top_tab {}
.top_tab .wrap {display: flex}

.top_tab button,
.top_tab a {display: block; position: relative; flex: 1 1; padding: 1em; text-align: center; border-bottom: 1px solid #EEEEEE; color: #BDBDBD; font-size: 2rem; font-weight: 700; transition: all .3s}
.top_tab button:before,
.top_tab a:before {content: ""; position: absolute; display: block; width: 0%; height: 2px; bottom: -0.5px; left: 50%; transform: translateX(-50%); background-color: var(--blue); transition: all .3s}
.top_tab button.active,
.top_tab a.active {color: var(--blue);}
.top_tab button.active:before,
.top_tab a.active:before {width: 100%}


/*통합검색*/
.allSch_sect { padding-top: 20rem; margin-top: var(var(--header_Height)); }

.allSch_sect h2 { font-size: 5.5rem; font-weight: 600; text-align: center; }
.allSch_sect .sch_box { display: flex; align-items: center; justify-content: center; margin-top: 10rem; }
.allSch_sect .sch_box .inp_box { display: flex; align-items: center; justify-content: center; width: 30%; min-width: 30rem; border-bottom: 1px solid var(--blue); }
.allSch_sect .sch_box .inp_box input { width: 100%; height: 6rem; padding: 0 1.5rem; font-size: 1.8rem; }
.allSch_sect .sch_box .inp_box .ico { flex-shrink: 0;}
.allSch_sect .sch_box .inp_box .ico svg {height: 2.5rem}

.allSch_sect .result_tit { font-size: var(--sub_cont_tit); font-weight: 600; text-align: center; margin-top: 15rem; }
.allSch_sect .result_wrap + .result_tit { margin-top: 20rem; }
.allSch_sect .result_wrap { margin-top: 5rem; }
.allSch_sect .result_wrap .total { font-weight: 600; font-size: 1.5rem; }
.allSch_sect .result_wrap .total span { color: #177FBB; }
.allSch_sect .result_wrap .result_li { margin-top: 1rem; border-top: 1px solid var(--blue); }
.allSch_sect .result_wrap .result_li li a { display: flex; align-items: center; justify-content: flex-start; padding: 2em 1em; border-bottom: 1px solid #BDBDBD; }
.allSch_sect .result_wrap .result_li li a .notice_tit { margin-right: 2rem; overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
.allSch_sect .result_wrap .result_li li .txt_wrap { display: flex; align-items: center; justify-content: flex-start; flex-shrink: 0}
.allSch_sect .result_wrap .result_li li .sch_txt { font-size: 1.7rem; font-weight: 600; }
.allSch_sect .result_wrap .result_li li .sch_txt.arr { margin: 0 0.8rem; }
.allSch_sect .result_wrap .result_li li .sch_txt.home,
.allSch_sect .result_wrap .result_li li .sch_txt.arr { width: 1.7rem; height: 1.7rem; }
.allSch_sect .result_wrap .result_li li .sch_txt svg { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.allSch_sect .result_wrap .result_li li .sch_txt.result { color: #177FBB; }


/* 시간 관련 컨텐츠  공용*/

.time_cont{}
.time_cont .cont_tit {}
.time_cont .right {display: flex; flex-wrap: wrap; flex: 1; margin-left: 5rem}
.time_cont .right .cont {position: relative; width: calc(33.333% - (40px / 3)); margin-right: 20px; padding: 4rem; background-color: #F4F6FA}
.time_cont .right .cont:nth-child(3n) {margin-right: 0px; }
.time_cont .right .cont:nth-child(n+4) {margin-top: 20px;}
.time_cont .right .cont .img {position: absolute; right: 4rem; top: 4rem; height: 3.7rem}
.time_cont .right .cont .img svg {overflow: visible; width: auto; height: 100%; opacity: 0.2}
.time_cont .right .cont .img img {height: 3.3rem}
.time_cont .right .cont .sub_tit {font-family: var(--NotoSerif); font-size: 1.6rem; font-weight: 600; color: #8899A6; max-width: 80%}
.time_cont .right .cont .tit {margin-top: 0.8em; font-size: 3rem; font-weight: 700;}
.time_cont .right .cont .txt {margin-top: 0.5em; font-size: 1.6rem;  color: #8899A6}
.time_cont .right .cont.naver {background-color: #fff; border: 1px solid #03C75A; transition: all .3s}
.time_cont .right .cont.naver .sub_tit {opacity: 0}
.time_cont .right .cont.naver .txt {display: flex; align-items: center}
.time_cont .right .cont.naver .txt svg {height: 1em; width: auto; margin-left: 10px; fill: #8899A6; transition: .3s}
.time_cont .right .cont.naver .img svg {opacity: 1}

@media screen and (min-width: 1241px) { .time_cont .right .cont.naver:hover { background-color: #e5f6ee; border-color: transparent} }

/*공용 타이틀 박스*/

.dev_tit_box {text-align: center; color: #173348}
.dev_tit_box .en_tit {margin-bottom: 10px; font-size: 1.6rem; font-family: var(--NotoSerif); font-weight: 600; color: #8899A6}
.dev_tit_box .tit {color: var(--blue); font-size: 4.8rem; font-family: var(--NotoSerif); font-weight: 600; word-break: keep-all}
.dev_tit_box .sub_tit {color: #8899A6; font-size: 2rem; font-family: var(--NotoSerif); font-weight: 600; }
.dev_tit_box .txt {font-size: 1.8rem; word-break: keep-all }
.dev_tit_box .tit + .sub_tit {margin-top: 3rem}
.dev_tit_box .tit + .txt {margin-top: 3rem;}

.dev_tit_box + .img_com_cont,
.dev_tit_box + .youtube_box,
.dev_tit_box + .img_box,
.dev_tit_box + .warning_txt,
.dev_tit_box + .img { margin-top: var(--cont_mt)}

.dev_tit_box + .img_box {display: flex}
.dev_tit_box + .img_box .cont {width: 50%}
.dev_tit_box + .img_box .cont + .cont {margin-left: 6rem}
.dev_tit_box + .img_box .cont .txt_box {margin-top: 1.5rem; text-align: center; }

.dev_tit_box + .img_box .img.distance {position: relative}
.dev_tit_box + .img_box .img.distance .txt {display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; position: absolute; top: 50%; left: 0%; transform: translateY(-50%); height: 73%; color: #bebe71; font-weight: 700;}
.dev_tit_box + .img_box .img.distance .txt p {padding: 1rem 2rem 1rem 1rem; background: linear-gradient(270deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.8689600840336135) 100%);}
.dev_tit_box + .img_box .img.distance .txt .white {color: #fff; opacity: 0.8}
.dev_tit_box + .img_box .cont + .cont .img.distance .txt {left: auto; right: 0%; align-items: flex-end}
.dev_tit_box + .img_box .cont + .cont .img.distance .txt p {padding: 1rem 1rem 1rem 2rem; background: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.8689600840336135) 100%);}

.dev_tit_box + .img + .line_list { margin-top: 6rem}


.line_list{display: grid; grid-template-columns: repeat(4, 1fr); gap: 0 1rem;}
.line_list.col5{display: grid; grid-template-columns: repeat(5, 1fr); gap: 0 1rem; margin-top: 6rem}
.line_list li{position: relative; padding: 0 10px ;text-align: center; }
.line_list li + li::before{content: ''; position: absolute; top: 0; left: -0.5rem; width: 1px; height: 100%; transform: translateX(-100%);background: #eee}
.line_list li p{ font-size: var(--sub_cont_tit_en); font-family: var(--serif); font-weight: 700; line-height: 1em}
.line_list li span{display: block; margin-top: 2rem; color: #8899A6; font-size: 1.6rem; word-break: keep-all}

.line_list.type2 li p {font-family: 'Pretendard', sans-serif; line-height: 1.5}
.line_list.type2 li .tit { margin-top: 1rem;font-size: var(--deps3_tit);  font-weight: 600}
.line_list.type2 li .sub_tit {font-size: 2rem;font-weight: 600; color: #8899A6; }


.grid_box .icon_right li{display: flex;align-items: flex-start; padding-bottom: 6rem; border-bottom: 1px solid #EEEEEE}
.grid_box .icon_right li + li {padding-top: 6rem}
.grid_box .icon_right .icon {display: flex; justify-content: center; width: 7.5rem;}
.grid_box .icon_right .icon svg {height: var(--icon_size); }

.grid_box .icon_right .txt_box {flex: 1; margin-left: 5rem}
.grid_box .icon_right .txt_box .txt {margin-top: 1rem; word-break: keep-all}


/*포인트 컨텐츠*/

.point_cont {}
.tit_box + .point_cont {margin-top: 10rem}
.point_cont > li + li {margin-top: 12rem}
.point_cont video {border: none; outline: unset; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; filter:contrast(101%); -webkit-filter:contrast(101%); background-color:transparent;}
.point_cont .left { font-weight: 700; font-size: 2.5rem; color: var(--blue); text-transform: capitalize; font-family: var(--serif); word-break: keep-all}
.point_cont .left.break {word-break:break-all }
.point_cont .left.type2 { font-size: var(--sub_cont_tit); font-weight: 700; font-family: 'Pretendard', sans-serif;}
.point_cont .left .num {font-family: var(--NotoSerif); font-size: 0.9em}
.point_cont .right {display: flex; align-items: flex-start}
.point_cont .right .txt_box {width: 50%;}
.point_cont .right .txt_box .deps3_tit {word-break: keep-all}
.point_cont .right .txt_box .deps3_tit small {font-size: max(1.3rem , 10px); color: #757575; font-weight: 400}
.point_cont .right .txt_box .txt br {display: none}
.point_cont .right .txt_box .txt br.block {display: block}
.point_cont .right .txt_box .desc { margin-bottom: 10px; font-size: 2rem; font-weight: 600; color: #8899A6; }
.point_cont .right .en {font-family: var(--NotoSerif)}
.point_cont .right.type2 .tit_box .txt,
.point_cont .right .txt_box .txt { line-height: 1.6em; word-break: keep-all}
.point_cont.type2 .cont .txt,
.point_cont .right .txt_box .txt + .txt,
.point_cont .right.type2 .txt_box .deps3_tit + .txt,
.point_cont .right.type2 .tit_box .tit + .txt,
.point_cont .right .txt_box .deps3_tit + .txt,
.point_cont .right .txt_box .tit + .txt {margin-top: 15px}
.point_cont .right .img_box + .txt_box { margin-top: var(--cont_mt)}
.point_cont .right .img {position: relative}
.point_cont .right .video {position: relative; padding-top: 56.2%}
.point_cont .right .video video {position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-position: center; object-fit: cover}
.point_cont .right .video:before {content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%) ;width: calc(100% + 1px); height: calc(100% + 1px); background-color: transparent; border: 3px solid #fff; pointer-events: none; box-sizing: border-box; z-index: 2}
/*.point_cont .right .video:after {content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.02)}*/
.point_cont .right .long_cir_box + .img_box ,
.point_cont .right .txt_box + .long_cir_box {margin-top: 6rem}


.point_cont .right .img {position: relative; overflow: hidden;}
.point_cont .right .img img {width: 100%}
/*.point_cont .right .txt_box + .img { padding-top: 28%}*/
/*.point_cont .right.type2 .img_box  .img {padding-top: 56%}*/
.point_cont .right .img.no_pd {padding-top: 0}
/*.point_cont .right .img video,*/
/*.point_cont .right .img img {position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-position: center; object-fit: cover}*/
.point_cont .right .img:before {content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.02); z-index: 1; pointer-events: none}
.point_cont .right .img:after {content: ""; position: absolute; left: 0; top: 0px; width: calc(100% + 0px); height: calc(100% + 0px); border: 2px solid #fff; box-sizing: border-box; z-index: 2; pointer-events: none}
.sect_bg .point_cont .right .img:after {border-color: #F4F6FA}
.point_cont .right.type2 .img_box .img_com_cont.type3 .img,
.point_cont .right.type2 .img_box .cont.w70 .img,
.point_cont .right.type2 .img_box .cont.w100 .img {padding-top: 0}


.point_cont .right .img.no_bg:before,
.point_cont .right.type2 .img_box .cont.w70 .img:before,
.point_cont .right.type2 .img_box .cont.w100 .img:before,
.point_cont .right.type2 .img_box .cont.w70 .img:after,
.point_cont .right.type2 .img_box .cont.w100 .img:after {content: none}

.point_cont .right .img.no_pd img ,
.point_cont .right.type2 .img_com_cont img,
.point_cont .right.type2 .img_cont .img img,
.point_cont .right.type2 .img_box .cont.w70 .img img,
.point_cont .right.type2 .img_box .cont.w100 .img img {position: static}

.point_cont .right .img.spl:before,
.point_cont .right .img_box.spl .img:before {content: none}


.point_cont .right .txt_box +.img {margin-left: 6rem; width: 50%}
.point_cont .right .txt_box +.img video,
.point_cont .right .txt_box +.img img {width: 100%}
.point_cont .right .txt_box +.img.spl {transform: translateY(-18%)}
.point_cont .right .txt_box .tag_txt {display: flex; margin-top: 2rem}
.point_cont .right .txt_box .tag_txt ol {display: flex; flex-wrap: wrap;  margin-bottom: -1rem; margin-right: -1rem;}
.point_cont .right .txt_box .tag_txt ol li {margin-right: 5px; margin-bottom: 5px; height: 2.4rem; line-height: 2.3rem; padding: 0 1.5rem; font-size: 1.5rem; font-weight: 500; border: 1px solid #E0E0E0; color: #BDBDBD; border-radius: 50px;}

.point_cont .right .sub_txt_box {margin-top: 6rem}
.point_cont .right .sub_txt_box .tit {font-size: var(--deps4_tit); font-weight: 600}
.point_cont .right .sub_txt_box .txt {margin-top: 1.5rem}

.point_cont .right .txt_box .sub_txt{display: flex; margin-top: 3rem; font-size: 1.6rem; font-weight: 300; color: #757575}
.point_cont .right .txt_box .sub_txt.no_flex {display: block}
.point_cont .right .txt_box .sub_txt span {margin-right: 5px; }

.point_cont .right .tag { margin-top: 3rem; color: #8899A6; }
.point_cont .right .tag span + span { display: inline-block; margin-left: 2rem; }

.point_cont .right .sm_cir_box {display: flex; flex-wrap: wrap; margin-top: 3rem}
.point_cont .right .sm_cir_box .cir {display: flex; align-items: center; justify-content: center; width: calc(33.333% + (2.5rem  * 2 / 3)); height: 9rem;flex-shrink: 0; mix-blend-mode: multiply; border-radius: 100px; background-color: #F4F6FA;}
.point_cont .right .sm_cir_box .cir + .cir {margin-left: -2.5rem}
.point_cont .right .sm_cir_box .cir .txt {text-align: center; line-height: 1.6}


.point_cont .right.type2 {display: block}
.point_cont .right.type2 .txt_box {width: 100%}
/*.point_cont .right.type2 .txt_box .txt br*/


.point_cont .right.type2 .img_box {display: flex; flex-wrap: wrap;}
.point_cont .right.type2 .img_box .cont {width: calc(50% - (2rem/2)); margin-right: 2rem}
.point_cont .right.type2 .img_box .cont.w100 {width: 100%; margin-right: 0; }
.point_cont .right.type2 .img_box .cont.w70 {width: 70%; margin-right: 0}
.point_cont .right.type2 .img_box .cont .img video {width: 100%}
.point_cont .right.type2 .img_box .cont:nth-child(2n) {margin-right: 0rem}
.point_cont .right.type2 .img_box.type3 .cont:nth-child(2n) {margin-right: 2rem}
.point_cont .right.type2 .img_box .cont:nth-child(n+3) {margin-top: 6rem}
.point_cont .right.type2 .img_box.type3 .cont:nth-child(n+3) {margin-top: 0}
.point_cont .right.type2 .img_box.type3 .cont:nth-child(n+4) { margin-top: 6rem }
.point_cont .right.type2 .img_box .cont .img + .img_txt {margin-top: 2rem}
.point_cont .right.type2 .img_box .cont .img_txt .tit {font-size: var(--deps4_tit); font-weight: 600; word-break: keep-all}
.point_cont .right.type2 .img_box .cont .img_txt .txt {margin-top: 1rem; word-break: keep-all}

.point_cont .right .img_box.type3 .cont {width: calc(33.3333% - (2rem)); margin-right: 2rem}

.point_cont .right.type2 .img_cont {display: flex }
.point_cont .right.type2 .img_cont .img {width:50%}
.point_cont .right.type2 .img_cont .img_txt {width: 50%; margin-left: 6rem}
.point_cont .right.type2 .img_cont .img_txt .txt {margin-top: 15px; line-height: 1.6em}

.point_cont .right.type2 .img_box .cont .bg_box { display: flex; align-items: center; justify-content: center; padding: 6.5rem 0; background-color: #F4F6FA; }
.point_cont .right.type2 .img_box .cont .bg_box .box { width: calc(100%/3 - 1rem); }
/*.point_cont .right.type2 .img_box .cont .bg_box .box + .box { margin-left: 2rem; }*/
.point_cont .right.type2 .img_box .cont .bg_box .box .img { width: 50%; margin: 0 auto; }
.point_cont .right.type2 .img_box .cont .bg_box .box .img:before { display: none; }
.point_cont .right.type2 .img_box .cont .bg_box .box .tit { margin-top: 4rem; font-size: var(--deps4_tit); font-weight: 600; text-align: center; }

.point_cont .right.type2 .cir_box {display: flex; flex-wrap: wrap}
.point_cont .right.type2 .cir_box .cir {display: flex; align-items: center; justify-content: center; width: calc(33.333% + (5.5rem  * 2 / 3)); height: 15rem;flex-shrink: 0; mix-blend-mode: multiply; border-radius: 100px; background-color: #F4F6FA;}
.point_cont .right.type2 .cir_box .cir + .cir {margin-left: -5.5rem}
.point_cont .right.type2 .cir_box .cir:nth-child(4) {margin-left: 0}
.point_cont .right.type2 .cir_box .cir:nth-child(n+4) {margin-top: 3rem}
.point_cont .right.type2 .cir_box .cir .txt {text-align: center; line-height: 1.6}


.point_cont .right.type2 .cir_chart {display: flex; }
.point_cont .right.type2 .cir_chart .cont {width: 33.333%; text-align: center}
.point_cont .right.type2 .cir_chart .cont .chart {position: relative;width: 60%; padding-top: 60%; margin: 0 auto}
.point_cont .right.type2 .cir_chart .cont .chart svg {position: absolute; left: 0; top: 0; width: 100%; height: 100%}
.point_cont .right.type2 .cir_chart .cont .chart svg.bg .svg-elem-1 {stroke-dashoffset: 0; stroke-dasharray: 102.0140609741211px; stroke: #dae2e9}
.point_cont .right.type2 .cir_chart .cont .chart circle {stroke: var(--blue)}
.point_cont .right.type2 .cir_chart .cont .chart .data {position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); font-size: var(--deps3_tit); font-weight: 600}

.point_cont .right.type2 .cir_chart .cont .chart svg.gauge .svg-elem-1  {
    stroke-dashoffset: 102.0140609741211px;-webkit-transition: stroke-dashoffset 1.5s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
    stroke-dasharray: 102.0140609741211px;transition: stroke-dashoffset 1.5s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
    transition-delay: calc(var(--cir-index)*0.15s)
}

.point_cont .right.type2 .cir_chart.active .cont:nth-child(1) .chart svg.gauge .svg-elem-1 {stroke-dashoffset: 3;}
.point_cont .right.type2 .cir_chart.active .cont:nth-child(2) .chart svg.gauge .svg-elem-1 {stroke-dashoffset: 5;}
.point_cont .right.type2 .cir_chart.active .cont:nth-child(3) .chart svg.gauge .svg-elem-1 {stroke-dashoffset: 8;}


.point_cont .right.type2 .cir_chart .cont .deps4_tit {margin-top: 3rem; padding: 0 1rem; word-break: keep-all}

.point_cont .right.type2 .txt_box + .img_box.type2.spl,
.point_cont .right.type2 .txt_box + .img_box,
.point_cont .right.type2 .txt_box + .img_com_cont,
.point_cont .right.type2 .sub_txt_box + .img_box,
.point_cont .right.type2 .txt_box + .cir_box,
.point_cont .right.type2 .txt_box + .cir_chart,
.point_cont .right.type2 .txt_box + .img_cont,
.point_cont .right.type2 .txt_box + .img_box.type2 {margin-top: 6rem}

.point_cont .right.type3 .img_box {margin-top: 6rem}

/*point_cont.type2*/
.point_cont.type2 .grid_box2 {display: grid;grid-template-columns: 17% 1fr;gap: 0 40px;}
.point_cont.type2 .grid_box2 + .grid_box2 { margin-top: 12rem}
.point_cont.type2 .cont .tit { font-size: var(--deps3_tit); font-weight: 600; word-break: keep-all; }
.point_cont.type2 .cont .txt {  line-height: 1.6; word-break: keep-all}
.point_cont.type2 .cont .txt br {display: none}
.point_cont.type2 .cont .desc { display: flex; margin-top: 1.5rem; font-size: 1.4rem; color: #9E9E9E; }
.point_cont.type2 .cont .desc span {margin-right: 3px; margin-top: -1px}
.point_cont.type2 .cont .img_wrap { display: flex; align-items: flex-start; justify-content: center; margin: 6rem auto 0; }
.point_cont.type2 .cont .img_wrap .img_box { width: calc(100%/3); }
.point_cont.type2 .cont .img_wrap.num2 .img_box { width: calc(100%/2); }
.point_cont.type2 .cont .img_wrap .img_box + .img_box { margin-left: 3rem; }
.point_cont.type2 .cont .img_wrap.num2 .img_box + .img_box { margin-left: 6rem}
/*.point_cont.type2 .cont .img_wrap .img_box .img { position: relative; width: 100%; padding-top: 67%; }*/
/*.point_cont.type2 .cont .img_wrap .img_box .img img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; }*/
.point_cont.type2 .cont .in_tit { margin-top: 2rem; font-size: var(--deps4_tit); font-weight: 600; }
.point_cont.type2 .cont .in_txt { margin-top: 1rem; line-height: 1.6; word-break: keep-all}
.point_cont.type2 .cont .in_txt br {display: none}

.point_cont.type2 .cont .txt_wrap { margin: var(--cont_mt) auto 0; }

.point_cont.type2 .cont .img_wrap.type2 { align-items: flex-start; justify-content: space-between; }
.point_cont.type2 .cont .img_wrap.type2 .txt_box { width: 30%; }
.point_cont.type2 .cont .img_wrap.type2 .txt_box .in_txt br {display: none}
.point_cont.type2 .cont .img_wrap.type2 .img_box { display: flex; align-items: flex-start; justify-content: flex-end; width: 60%; }
.point_cont.type2 .cont .img_wrap.type2 .img_box .img + .img { margin-left: 3rem; }


/*컨텐츠 하단 배너*/
.bot_banner{ margin-top: var(--sub_pb)}
.bot_banner.mt0 {margin-top: 0}
.bot_banner .banner{}
/*background: url(/inc/img/sub/bot_banner.jpg) no-repeat center / cover*/
.bot_banner .banner{position: relative; padding: 12rem 2rem 12rem;; text-align: center; }
.bot_banner .banner::before{content: '';position: absolute;top: 0;left: 0;width: 100%;height: 100%; background: linear-gradient(to right,  #24a6ce 0%,#0e7ea0 100%);}
.bot_banner .banner::after{content: '';position: absolute;top: 0;left: 0;width: 100%;height: 100%;  pointer-events: none}
.bot_banner .tit{position: relative; color: #fff; font-size: 4rem; font-weight: 600; word-break: keep-all;  line-height: 1.6}
.bot_banner .tit br {display: none}
.bot_banner .tit:before {content: ""; display: block ;width: 21rem; height: 2.3rem; margin: 0 auto 4rem ;background-image: url('/inc/img/common/logo.svg'); background-size: cover; background-position: center;}
.bot_banner .txt{display: block; position: relative; margin-top: 1.5rem; color: #fff; word-break: keep-all }
.bot_banner .review_btn {margin-top: 6rem}

/*상단 슬라이드*/
.system_slide{position: relative}
.system_slide .cont{display: grid; grid-template-columns: 1fr 1fr}
.system_slide .cont .txt_box{width: 70%; margin-top: 10rem}
.system_slide .cont .txt_box .head_tit {font-size: 2rem; margin-bottom: 5px; font-weight: 500;}
.system_slide .cont .txt_box .tit{font-size: 3.6rem; font-weight: 700}
.system_slide .cont .txt_box .txt{display: block; margin-top: 4rem; word-break: keep-all}
.system_slide .cont .img {position: relative; width: 100%; padding-top: 66.666%}
.system_slide .cont .img img {position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 100%; height: 100%; object-position: center; object-fit: contain}
.system_slide .paging{display: inline-flex; align-items: baseline; position: absolute; top: 0; left: 0; width: auto; font-size: 2.4rem}
.system_slide .paging span{opacity: 0.5; color: #8899A6; font-family: var(--NotoSerif); font-weight: 700; line-height: 1em}
.system_slide .paging span[class^="current"]{opacity: 1; color: var(--blue); font-size: 2em}
.system_slide .paging span.barSpace{margin: 0 0.25em}
.system_slide .swiper-scrollbar{ position: relative; left: 0; width: 100%; height: 4px; margin-top: 2rem ;background: #e0e0e0; border-radius: 0}
.system_slide .swiper-scrollbar-drag{height: 4px; background: #173348; border-radius: 0}
.system_slide .swiper_btn {display: flex; justify-content: space-between; margin-top: 8rem}
.system_slide .btn {position: relative;display: block; left: 0; top: 0; width: auto; height: auto; margin-top: 0; transform: none; color: #173348; font-family: var(--NotoSerif); font-weight: 700; font-size: 14px; transition: all .3s}
.system_slide .btn .txt {display: flex; align-items: center}
.system_slide .btn .txt span {text-transform: capitalize}
.system_slide .btn .img {position: relative; overflow: hidden; width: 100px; padding-top: 120%; border: 1px solid #EEEEEE; background-color: #fff}
.system_slide .btn .img img {position: absolute; width: 100%; height: 100%; left: 0; top: 20px; object-fit: cover; object-position: top}
.system_slide .swiper-button-next svg {margin-left: 3rem}
.system_slide .swiper-button-prev svg {margin-right: 3rem}
.system_slide .swiper-button-disabled {opacity: 0.2}
.system_slide .swiper_btn > div svg {fill: var(--blue); font-size: 1.6rem}

/*이미지 리스트 공용 타이틀이 크고 간격도 좀 넓은 리스트 */
.tit_box + .cont_img_list ,
.cont_tit_box + .cont_img_list { margin-top: 6rem}
.cont_img_list ul {display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 9rem 6rem}
.cont_img_list ul.type2 {grid-template-columns: 1fr 1fr ;}
.cont_img_list .img {position: relative}
.cont_img_list .img img {width: 100%}
.cont_img_list .img.bg:before {content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.02)}
.cont_img_list .txt_box {margin-top: 2rem}
.cont_img_list .txt_box.center {text-align: center}
.cont_img_list .txt_box .cir_badge {margin-bottom: 1.5rem;}
.cont_img_list .txt_box .txt {margin-top: 1.5rem; line-height: 1.7; word-break: keep-all}

.cont_img_list .graph_wrap { position: relative;  padding: 0 0 8rem; background-color: #fff;}
.cont_img_list .graph_wrap .graph_box {position: relative; display: flex; justify-content: space-around; align-items: flex-end; height: 35rem; width: 75%; margin: 0 auto; padding: 0 3% ;border-bottom: 1px solid #E0E0E0;}
.cont_img_list .graph_wrap .graph_txt {position: absolute; top: 30px; left: 50%; transform: translateX(-50%); width: 75% ;text-align: right; color: #BDBDBD; font-size: 1.4rem}
.cont_img_list .graph_wrap .graph {position: relative; display: flex; justify-content: center; align-items: flex-end}
.cont_img_list .graph_wrap .graph .num {position: absolute; top: -0.5rem; left: 50%; transform: translate(-50%,-100%);font-weight: 600; font-size: 1.3rem; text-align: center; line-height: 1.3}
.cont_img_list .graph_wrap .graph .bar {position: relative; width: 4rem; height: 0 ;background-color: rgba(23,51,72,0.2); border-top-left-radius: 5px; border-top-right-radius: 5px ;transition: height 1s ease-out }
.cont_img_list .graph_wrap .graph .bar + .bar {margin-left: 8px; background-color: rgba(23,51,72,1);}
.cont_img_list .graph_wrap .graph .year {position: absolute;bottom: -10px;left: 50%;transform: translate(-50%,100%); white-space: nowrap; font-size: 1.6rem; font-weight: 600}
.cont_img_list .graph_wrap .graph .grow_txt {position: absolute; top: -5rem; left: 50%; transform: translate(-50%,-150%); ;font-size: 1.5rem;  padding: 1rem 1.5rem; ; opacity: 0;
    background-color: var(--blue); color: #fff; font-weight: 600; text-align: center; white-space: nowrap; transition: opacity 1s ease-in-out , transform 1s ease-in-out}
.cont_img_list .graph_wrap .graph .grow_txt:before{content: "";display: block;  position: absolute ; left: 50%; bottom: 2px; transform:  translate(-50%,100%);
    width: 0; height: 0; border-top: 1.5rem solid var(--blue); border-left: 0.75rem solid transparent; border-right: 0.75rem solid transparent}

.cont_img_list .graph_wrap .graph.active .num{color: var(--blue); font-weight: 700}
.cont_img_list .graph_wrap .graph.active .bar {background-color: rgba(23,51,72,1);}
.cont_img_list .graph_wrap .graph.active .year {font-weight: 700}


.cont_img_list ul li:nth-child(2) .graph_wrap .graph_txt {text-align: left}
.cont_img_list ul li:nth-child(2) .graph_wrap .graph_txt dl {display: flex; align-items: center}
.cont_img_list ul li:nth-child(2) .graph_wrap .graph_txt dt {width: 1.2rem; height: 1.2rem; border-radius: 2px; margin-right: 5px; background-color: var(--blue); opacity: 0.2 ;}
.cont_img_list ul li:nth-child(2) .graph_wrap .graph_txt dd + dt {margin-left: 10px}
.cont_img_list ul li:nth-child(2) .graph_wrap .graph_txt dd + dt.co2 {opacity: 1}

.cont_img_list ul li:nth-child(1) .graph_wrap .graph_box.active .graph:nth-child(1) .bar {height: 20rem}
.cont_img_list ul li:nth-child(1) .graph_wrap .graph_box.active .graph:nth-child(2) .bar {height: 13.5rem; transition-delay: 0.2s}
.cont_img_list ul li:nth-child(1) .graph_wrap .graph_box.active .graph:nth-child(3) .bar {height: 11.5rem; transition-delay: 0.4s}
.cont_img_list ul li:nth-child(1) .graph_wrap .graph_box.active .graph:nth-child(4) .bar {height: 8.5rem; transition-delay: 0.6s}
.cont_img_list ul li:nth-child(1) .graph_wrap .graph_box.active .graph:nth-child(5) .bar {height: 5rem; transition-delay: 0.8s}

.cont_img_list ul li:nth-child(2) .graph_wrap .graph_box.active .graph:nth-child(1) .bar {height: 2rem}
.cont_img_list ul li:nth-child(2) .graph_wrap .graph_box.active .graph:nth-child(1) .bar + .bar {height: 4.5rem; transition-delay: 0.1s}
.cont_img_list ul li:nth-child(2) .graph_wrap .graph_box.active .graph:nth-child(2) .bar {height: 8rem; transition-delay: 0.2s}
.cont_img_list ul li:nth-child(2) .graph_wrap .graph_box.active .graph:nth-child(2) .bar + .bar  {height: 13rem; transition-delay: 0.3s}
.cont_img_list ul li:nth-child(2) .graph_wrap .graph_box.active .graph:nth-child(3) .bar {height: 16rem; transition-delay: 0.4s}
.cont_img_list ul li:nth-child(2) .graph_wrap .graph_box.active .graph:nth-child(3) .bar + .bar {height: 19rem; transition-delay: 0.5s}
.cont_img_list ul li:nth-child(2) .graph_wrap .graph_box.active .graph:nth-child(4) .bar {height: 20rem; transition-delay: 0.6s}
.cont_img_list ul li:nth-child(2) .graph_wrap .graph_box.active .graph:nth-child(4) .bar + .bar  {height: 25rem; transition-delay: 0.7s}

.cont_img_list .graph_wrap .graph_box.active .graph .grow_txt {opacity: 1; transform: translate(-50%,-100%); transition-delay: 0.9s }

.cont_img_list ul li:nth-child(2) .graph_wrap .graph_box.active .graph:nth-child(1) .grow_txt {transition-delay: 0.9s}
.cont_img_list ul li:nth-child(2) .graph_wrap .graph_box.active .graph:nth-child(2) .grow_txt {transition-delay: 1.1s}


/*이이지 리스트 공용 타이틀이 작고 간격이 좀 작은 리스트*/

.tit_box + .img_com_cont {margin-top: 6rem}
.img_com_cont.type3 {display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 60px 20px}
.img_com_cont.type2 {display: grid; grid-template-columns: 1fr 1fr; gap: 60px 20px}
.img_com_cont .top_point {margin-bottom: 10px; text-transform: capitalize; font-size: 2.5rem; font-weight: 700; font-family: var(--serif)}
.img_com_cont .top_point .num { font-family: var(--NotoSerif); font-size: 0.9em}
.img_com_cont .txt_box {margin-top: 2rem}
.img_com_cont .txt_box .cir_badge {margin-bottom: 1.5rem;}
.img_com_cont .txt_box .txt {margin-top: 1rem; word-break: keep-all}


/*원형 리스트 공용*/
.tit_box + .long_cir_box {margin-top: 6rem}
.long_cir_box {display: flex; flex-wrap: wrap}
.long_cir_box .cir {display: flex; align-items: center;padding: 3rem;background-color: #F5F6F8; border-radius: 50px;}
.long_cir_box .cir .txt {font-size: 1.8rem; word-break: keep-all}
.long_cir_box .cir .txt .num {display: inline-block; font-size: 2rem; font-weight: 600; margin-right: 20px;}

.long_cir_box.type1 .cir {width:100%; padding: 3rem; margin-right: 20px;}
.long_cir_box.type1 .cir:nth-child(n+2) {margin-top: 2rem}

.long_cir_box.type2 .cir {width: calc(50% - 20px); padding: 3rem 4rem; margin-right: 20px;}
.long_cir_box.type2 .cir:nth-child(2n) {margin-right: 0}
.long_cir_box.type2 .cir:nth-child(n+3) {margin-top: 20px}

/*아이콘 타입 공용*/

.icon_com_cont { display: flex; align-items: flex-start; justify-content: center; flex-wrap: wrap; margin-bottom: -10rem; margin-right: -2rem; }
.icon_com_cont.type3 li{ width: calc(100%/3 - 2rem); }
.icon_com_cont.type4 li{ width: calc(100%/4 - 2rem); }

.icon_com_cont li {text-align: center; margin-bottom: 10rem; margin-right: 2rem;}
.icon_com_cont li svg{height: var(--icon_size); max-width: calc(var(--icon_size) * 1.1); width: 100%}
.icon_com_cont li p{margin-top: 3rem; font-size: 2rem; font-weight: 700; text-align: center; word-break: keep-all}
.icon_com_cont li p small{display: block; margin-top: 0.2em ;font-size: max(12px,1.4rem)}

/* 인풋을 통한 시야 보는 컨텐츠 */
#compare-slider {width: 100%;position: relative;overflow: hidden;}
#before-image{ position:absolute; height:100%; width:50%; top:0; left:0; overflow:hidden; z-index:2; pointer-events: none; }
#compare-slider img {width: 100%;height: 100%;object-fit: cover;object-position: left;display: block;}
#resizer{ position: absolute; display: flex; align-items: center; z-index: 5; top: 0; left: 50%; height:100%; width: 2px; background: #fff; -ms-touch-action: pan-y; touch-action: pan-y; cursor: pointer; }
#resizer:after { content: ''; position:absolute; width: 5rem; height: 5rem; left: 50%; top: 50%; background: url('/inc/img/sub/compare-slider_arr.png')center/cover no-repeat ; display:flex; justify-content:center; align-items:center; color:white; border-radius:50%; border: none; transform: translate(-50%,-50%); }
.compare_txt {display: flex; margin-top: 2rem;}
.compare_txt .txt {width: 50%; font-size: var(--deps4_tit); font-weight: 600; text-align: center}
.compare_txt .txt span {display: block; font-size: 1.8rem; margin-top: 10px; font-weight: 400; word-break: keep-all}


/*특장점 컨텐츠*/
.strength_wrap { display: flex; align-items: center; justify-content: space-between; margin-top: 6rem; }
.strength_wrap .strength_li { width: 50%; margin-right: 5%; }
.strength_wrap .strength_li li {display: flex;align-items: flex-start; position: relative; width: 80%; padding: 2.6rem 1rem; border-top: 1px solid #EEEEEE; word-break: keep-all }
.strength_wrap .strength_li li:last-child {border-bottom: 1px solid #EEEEEE; }
.strength_wrap .strength_li li p{display: flex}
.strength_wrap .strength_li li p
    /*.strength_wrap .strength_li li:before { content: ''; position: absolute; left: -5px; top: 3.5rem; width: 0.5rem; height: 0.5rem; border-radius: 100%; background-color: #8899A6;}*/
.strength_wrap .strength_li li:last-of-type { border-bottom: 1px solid #EEEEEE; }
.strength_wrap .img { width: 50%; background-color: var(--blue); }
.strength_wrap .img img { width: 100%; height: 100%; object-fit: cover; opacity: 0.95; }


/*왼쪽 이미지 고정 오른쪽 텍스트 흘러가는 컨텐츠*/

.step_cont {display: flex; align-items: flex-start; }
.step_cont .left_cont {position: sticky; top: 20px; width: 50%; margin-right: 6rem;}
.step_cont .left_cont .img {position: relative; padding-top: 60%; width: 100%; margin-top: 6rem}
.step_cont .left_cont img {position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-position: center; object-fit: cover; opacity: 0; transition: 0.5s}
.step_cont .left_cont .img.basic img:nth-child(1) {opacity: 1}
.step_cont .left_cont .img.img2 img:nth-child(2) {opacity: 1}
.step_cont .left_cont .img.img3 img:nth-child(3) {opacity: 1}
.step_cont .left_cont .img.img4 img:nth-child(4) {opacity: 1}
.step_cont .left_cont .img.img5 img:nth-child(5) {opacity: 1}
.step_cont .right_cont {width: 50%;padding-top: 11.5rem}
.step_cont .right_cont.no_tit {padding-top: 6rem}
.step_cont .right_cont li {display: flex; padding-bottom: 6rem; border-bottom: 1px solid #EEEEEE}
.step_cont .right_cont li .cir_badge {font-family: var(--serif); text-transform: capitalize; line-height: 2.9rem}
.step_cont .right_cont li .cir_badge .num {font-family: var(--NotoSerif); font-size: 0.9em; font-weight: 500}
.step_cont .right_cont li .txt_box {margin-left: 3rem}
.step_cont .right_cont li .txt_box .txt {margin-top: 1rem; line-height: 1.6; word-break: keep-all}
.step_cont .right_cont li .txt_box .sub_txt {display: flex; margin-top: 10px; color: #9E9E9E; font-size: 1.6rem; word-break: keep-all}
.step_cont .right_cont li .txt_box .sub_txt span {margin-right: 4px}
.step_cont .right_cont li + li {padding: 6rem 0}

.step_cont .cont + .cont {margin-top: 20rem}
.step_cont .cont .tit_box {margin-bottom: 6rem}
.step_cont .cont .tit_box .deps3_tit {margin-top: 2rem}


/*sticky wrap*/

.sticky_wrap .top_sticky {position: sticky; top: 0; padding-bottom: 20px ;z-index: 6; background-color: #fff; transition: top .3s}
.down .sticky_wrap .step_cont .left_cont {top: calc(var(--top_sect_mt) + 7rem) ; }
.down .sticky_wrap .top_sticky {top: 0}
.sticky_wrap .top_sticky {top: var(--header_Height); }
.sticky_wrap .step_cont .left_cont {top: calc(var(--top_sect_mt) + 7rem + var(--header_Height)) ;  transition: top .3s}


/* 비디오 똑같은 거 게속 들어가서 공용으로 뺌.*/
.video_sect .tit_box {}
.video_sect .video {position: relative; background-color: #000}
.video_sect .video video {width: 100%; border: none; outline: unset; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; filter:contrast(101%); -webkit-filter:contrast(101%); background-color:transparent; opacity: 0.99}


/*스와이퍼 버튼 공용*/


.sub_swiper-scrollbar{ margin-top: 2rem ;background: #e0e0e0; border-radius: 0}
.sub_swiper-scrollbar .swiper-scrollbar-drag{height: 4px; background: #173348; border-radius: 0}


/*테이블 공통*/
.board_wrap > div { display: flex; align-items: center; justify-content: flex-start; text-align: center; }

.board_wrap.col4 > div p { width: calc(100%/4); word-break: keep-all }
.board_wrap.col3 > div p { width: calc(100%/3); word-break: keep-all }

.board_wrap .tit_wrap { padding: 3rem 0; }
.board_wrap .tit_wrap .tit { position: relative; font-size: var(--deps3_tit); font-weight: var(--sub_cont_tit_we); }
.board_wrap .tit_wrap .tit.point {  }
.board_wrap .tit_wrap .tit.point:before { content: ''; position: absolute; left: 50%; top: -10px; width: 0.8rem; height: 0.8rem; border-radius: 100%; background-color: #177FBB; transform: translate(-50%,-100%); }
.board_wrap .txt_wrap { padding: 2.5rem 0; }
.board_wrap .txt_wrap.bg { background-color: #F4F6FA; }
.board_wrap .txt_wrap .txt.th { font-weight: 600; }
.board_wrap .txt_wrap .txt.point { color: #177FBB; font-weight: 600; }

/*라벨 컨텐츠*/
.label_com_wrap { display: flex; align-items: flex-start; justify-content: center; }
.label_com_wrap .img {width: 85%}
.label_com_wrap .txt { margin-top: 3rem; font-size: var(--deps3_tit); font-weight: 600; }

/*서브 탭 컨텐츠*/
.in_tab_cont {  }
.in_tab_cont .top_tab { margin-top: 6rem; }


/*개인정보처리방침*/
.my_page,
.sub_terms {margin-top: 24rem}
.my_page .my_tit,
.sub_terms .tit { padding-bottom: 6rem; border-bottom: 1px solid var(--blue); font-size: var(--sub_cont_tit); font-weight: 700; text-align: center; }
.my_page .info_cont,
.sub_terms .txt_wrap { margin-top: 6rem; padding: 0 6rem; }

.sub_terms .sect + .sect { margin-top: 6rem; }
.sub_terms .sect .h3 { margin-bottom: 2rem; font-size: var(--deps4_tit); font-weight: 600; }
.sub_terms .sect .txt { font-size: 1.6rem; line-height: 1.8; }
.sub_terms .sect .txt + .txt { margin-top: 4rem; }
.sub_terms .sect .txt .in_txt { display: inline-block; text-indent: -1.6em; padding-left: 1.6em; }
.sub_terms .sect .txt ul { margin-left: 1em; margin-top: 5px; }
.sub_terms .sect .txt ul li { line-height: 1.9; }


/*서브 01-1 합리적인 선택*/
.sub01_1 .top_img {padding:0; height: 100vh; display: flex; align-items: center; justify-content: center}
.sub01_1 .top_img .img {overflow: hidden; position: relative; width: 60%; height: 15%;}
.sub01_1 .top_img .img img {width: 130%; height: 130%; top: 50%; left: 50%; transform: translate(-50%,-50%); object-position: center}
.sub01_1 .top_img .img:before {content: ""; position: absolute; left:-1px; top: -1px; width: 52%; height: 102%; opacity: 1; background-color: #F4F6FA; transition: 1s}
.sub01_1 .top_img .img:after {content: ""; position: absolute; right:-1px; top: -1px; width: 52%; height: 102%; opacity: 1; background-color: #F4F6FA; transition: 1s}
.sub01_1 .top_img .img.active:before {width: 0}
.sub01_1 .top_img .img.active:after {width: 0}
.sub01_1 .top_img .img .bg {content: "";position: absolute;width: 100%;height: 100%;left: 0;top: 0;background-color: var(--blue); opacity: 0.92;z-index: 2;}
.sub01_1 .top_img .top_cont {position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 100%; height: 100%; margin-top: 0 !important; display: flex; align-items: center; justify-content: center; z-index: 3}
.sub01_1 .top_img .top_cont svg .st1{ transition: stroke .3s}
.sub01_1 .top_img .top_cont .in {}
.sub01_1 .top_img .top_cont {margin-top: 32rem}
.sub01_1 .top_img .top_cont .svg_tit {position: relative; display: flex; justify-content: center; transition: transform .5s}
.sub01_1 .top_img .top_cont .svg_tit .tit {position: absolute; left: 50%; top: 50%; width: 100%; transform: translate(-50%,-50%); margin-top: 0; font-family: var(--NotoSerif); font-size: 3rem; font-weight: 600; color: var(--blue); text-align: center; transition: color .3s}
.sub01_1 .top_img .top_cont .tit_box {margin-top: 3rem; text-align: center; transition: transform .5s }
.sub01_1 .top_img .top_cont .tit_box .tit { font-size: 12rem;  color: var(--blue); transition: color .3s}
.sub01_1 .top_img .top_cont .tit_box .txt {margin-top: 3rem; font-size: 2.4rem; line-height: 1.7;  color: var(--blue);  transition: color .3s; word-break: keep-all; }
.sub01_1 .top_img .top_cont .svg_tit svg {height: auto; opacity: 0.3; width: 80%}

.sub01_1 .top_img .top_cont.active .svg_tit svg .st1 {stroke: #fff !important}
.sub01_1 .top_img .top_cont.active .svg_tit .tit,
.sub01_1 .top_img .top_cont.active .tit_box .txt,
.sub01_1 .top_img .top_cont.active .tit_box .tit{color: #fff}

.sub01_1 .top_img .top_cont.active .svg_tit,
.sub01_1 .top_img .top_cont.active .tit_box {transform: translateY(0) !important;}

.sub01_1 .top_img .top_cont .svg_tit svg .svg-elem-1 {stroke-dashoffset: 859.8775634765625px;stroke-dasharray: 859.8775634765625px;-webkit-transition: stroke-dashoffset 1.25s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;transition: stroke-dashoffset 1.25s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;}
.sub01_1 .top_img .top_cont .svg_tit svg.active .svg-elem-1 {stroke-dashoffset: 0;}
.sub01_1 .top_img .top_cont .svg_tit svg .svg-elem-2 {stroke-dashoffset: 556.568115234375px;stroke-dasharray: 556.568115234375px;-webkit-transition: stroke-dashoffset 1.25s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;transition: stroke-dashoffset 1.25s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;}
.sub01_1 .top_img .top_cont .svg_tit svg.active .svg-elem-2 {stroke-dashoffset: 0;}
.sub01_1 .top_img .top_cont .svg_tit svg .svg-elem-3 {stroke-dashoffset: 1248.52978515625px;stroke-dasharray: 1248.52978515625px;-webkit-transition: stroke-dashoffset 1.25s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;transition: stroke-dashoffset 1.25s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;}
.sub01_1 .top_img .top_cont .svg_tit svg.active .svg-elem-3 {stroke-dashoffset: 0;}
.sub01_1 .top_img .top_cont .svg_tit svg .svg-elem-4 {stroke-dashoffset: 920.71728515625px;stroke-dasharray: 920.71728515625px;-webkit-transition: stroke-dashoffset 1.25s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;transition: stroke-dashoffset 1.25s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;}
.sub01_1 .top_img .top_cont .svg_tit svg.active .svg-elem-4 {stroke-dashoffset: 0;}
.sub01_1 .top_img .top_cont .svg_tit svg .svg-elem-5 {stroke-dashoffset: 1064.4951171875px;stroke-dasharray: 1064.4951171875px;-webkit-transition: stroke-dashoffset 1.25s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;transition: stroke-dashoffset 1.25s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;}
.sub01_1 .top_img .top_cont .svg_tit svg.active .svg-elem-5 {stroke-dashoffset: 0;}
.sub01_1 .top_img .top_cont .svg_tit svg .svg-elem-6 {stroke-dashoffset: 1007.53759765625px;stroke-dasharray: 1007.53759765625px;-webkit-transition: stroke-dashoffset 1.25s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;transition: stroke-dashoffset 1.25s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;}
.sub01_1 .top_img .top_cont .svg_tit svg.active .svg-elem-6 {stroke-dashoffset: 0;}
.sub01_1 .top_img .top_cont .svg_tit svg .svg-elem-7 {stroke-dashoffset: 1049.105224609375px;stroke-dasharray: 1049.105224609375px;-webkit-transition: stroke-dashoffset 1.25s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;transition: stroke-dashoffset 1.25s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;}
.sub01_1 .top_img .top_cont .svg_tit svg.active .svg-elem-7 {stroke-dashoffset: 0;}
.sub01_1 .top_img .top_cont .svg_tit svg .svg-elem-8 {stroke-dashoffset: 1049.09033203125px;stroke-dasharray: 1049.09033203125px;-webkit-transition: stroke-dashoffset 1.25s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;transition: stroke-dashoffset 1.25s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;}
.sub01_1 .top_img .top_cont .svg_tit svg.active .svg-elem-8 {stroke-dashoffset: 0;}
.sub01_1 .top_img .top_cont .svg_tit svg .svg-elem-9 {stroke-dashoffset: 1049.096923828125px;stroke-dasharray: 1049.096923828125px;-webkit-transition: stroke-dashoffset 1.25s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;transition: stroke-dashoffset 1.25s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;}
.sub01_1 .top_img .top_cont .svg_tit svg.active .svg-elem-9 {stroke-dashoffset: 0;}

.sub01_1 .page_bg {background-color: #F4F6FA}

.sub01_1 .sect2 {margin-top: calc(var(--sect_mt) - 40px); }
.sub01_1 .sect2 ol {margin-top: 12rem;}
.sub01_1 .sect2 ol li {display: flex; flex-direction: column}
.sub01_1 .sect2 ol li:nth-child(1) {width: 75%}
.sub01_1 .sect2 ol li:nth-child(2) {width: 35%; margin-left: auto; margin-top: -2rem}
.sub01_1 .sect2 ol li:nth-child(3) {width: 50%; padding-left: 10rem; margin-top: -20rem}
.sub01_1 .sect2 ol li .img {position: relative; z-index: 10}
.sub01_1 .sect2 ol li .img:before {content: ""; position: absolute; left: -1px; top: -1px; width: calc(100% + 2px); height: calc(100% + 2px) ;background-color: #F4F6FA; transition: 1s ease-in-out}
.sub01_1 .sect2 ol li .img.active:before {width: 0%}
.sub01_1 .sect2 ol li .img img {width: 100%}
.sub01_1 .sect2 ol li .txt_box {margin-top: 3rem; width: 100%}
.sub01_1 .sect2 ol li .txt_box .tit {position: relative; font-size: 5.6rem; font-weight: 700; font-family: var(--serif); color: var(--blue)}
.sub01_1 .sect2 ol li .txt_box .tit .back {position: absolute;left: 0;top: 0;display: block;width: 100%;height: 100%;background-color: rgba(244,246,250,0.9);z-index: 5; transition: 0.7s ease-in}
.sub01_1 .sect2 ol li .txt_box .txt {position: relative; margin-top: 0.5rem; font-size: 1.9rem; font-weight: 600; color: var(--blue); word-break: keep-all}
.sub01_1 .sect2 ol li .txt_box .txt .back {position: absolute;left: 0;top: 0;display: block;width: 100%;height: 100%;background-color: rgba(244,246,250,0.9);z-index: 5; transition: 0.7s ease-in; transition-delay: 0.2s}
.sub01_1 .sect2 ol li .txt_box.active .back {height: 0%}

.sub01_1 .sect3 {margin-top: 20rem}
.sub01_1 .sect3 .icon_box {display: flex; margin-top: 12rem}
.sub01_1 .sect3 .icon_box .cont {width: 33.333%;}
.sub01_1 .sect3 .icon_box .cont .img {height: var(--icon_size)}
.sub01_1 .sect3 .icon_box .cont .img img{height: 100%}
.sub01_1 .sect3 .icon_box .cont .img svg {height: var(--icon_size); width: auto; }
.sub01_1 .sect3 .icon_box .cont .txt_box {margin-top: 7rem}
.sub01_1 .sect3 .icon_box .cont .txt_box .tit {font-size: 2.4rem; font-weight: 700}
.sub01_1 .sect3 .icon_box .cont .txt_box .txt {font-size: 1.8rem; margin-top: 1.5rem; word-break: keep-all}

.sub01_1 .sect4 {position: relative; padding-top: 32rem; overflow: hidden}
.sub01_1 .sect4:before {content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 85%; background-color: #F4F6FA}
.sub01_1 .sect4 .bot_bg {position: absolute; left: 0; bottom: 0; width: 100%; height: 15%;}
.sub01_1 .sect4 .bot_bg .in {height: 100%; }
.sub01_1 .sect4 .bot_bg .in .left {position: absolute; left: 18px; bottom: 0; width: calc(50% - 18px); height: 100%; background-color: #fff; transition: 1.5s ease-in-out}
.sub01_1 .sect4 .bot_bg .in .right {position: absolute; right: 18px; bottom: 0; width: calc(50% - 18px); height: 100%; background-color: #fff;  transition: 1.5s ease-in-out}
.sub01_1 .sect4 .tit_box {text-align: center; color: var(--blue)}
.sub01_1 .sect4 .tit_box .tit {font-size: 6.4rem; font-weight: 600; font-family: var(--NotoSerif);}
.sub01_1 .sect4 .tit_box .txt { margin-top: 4rem; font-size: 1.8rem; line-height: 1.7; word-break: keep-all}
.sub01_1 .sect4 .img {position: relative; margin-top: 12rem}
.sub01_1 .sect4 .img:before {content: ""; position: absolute; left: -1px; top: 0; width: calc(50% + 2px) ; height: 100%; background-color: #F4F6FA; transition: 1.5s ease-in-out}
.sub01_1 .sect4 .img:after {content: ""; position: absolute; right: -1px; top: 0; width: calc(50% + 2px); height: 100%; background-color: #F4F6FA; transition: 1.5s ease-in-out}
.sub01_1 .sect4 .img video {width: 100%}
.sub01_1 .sect4 .img .cir {position: absolute; width: 23rem; right: 0; top: 0; z-index: 2; transform: translate(50%,-50%)}
.sub01_1 .sect4 .img .cir img { animation: spin 12s infinite; animation-timing-function: linear; transform-origin: center; }

.sub01_1 .sect4.active .bot_bg .in .left,
.sub01_1 .sect4.active .bot_bg .in .right,
.sub01_1 .sect4.active .img:before,
.sub01_1 .sect4.active .img:after {width: 0}


@keyframes spin {
    0% { transform: rotate(0); }
    100% { transform: rotate(-360deg); }
}

.sub01_1 .sect5 {margin-top: 12rem;}

.sub01_1 .sect5 .left {flex-shrink: 0;  font-size: 5.6rem; font-weight: 700; font-family: var(--serif); color: var(--blue)}
.sub01_1 .sect5 .right {flex-shrink: 1; padding-top: 1.5rem}
.sub01_1 .sect5 .right .top_txt {font-size: 1.8rem; word-break: keep-all }
.sub01_1 .sect5 .history .box { max-height: 50rem; overflow-y: auto; padding-left: 15px;  margin-top: 6rem;}
.sub01_1 .sect5 .history .box::-webkit-scrollbar {-webkit-appearance: none;}
.sub01_1 .sect5 .history .box::-webkit-scrollbar:vertical {width: 4px;}
.sub01_1 .sect5 .history .box::-webkit-scrollbar:horizontal {height: 5px;}
.sub01_1 .sect5 .history .box::-webkit-scrollbar-thumb {background-color: rgba(0, 0, 0, .2);border-radius: 5px;}
.sub01_1 .sect5 .history .box::-webkit-scrollbar-track {border-radius: 10px;background-color: rgba(0, 0, 0, .1);}

.sub01_1 .sect5 .history ul {position: relative;}
.sub01_1 .sect5 .history ul:before {content: ""; position: absolute; left: 0; top: 5px; transform: translateX(-100%); width: 1px; height: 0%; background-color: #E0E0E0; transition: 3s ; transition-delay: 1.5s}
.sub01_1 .sect5 .history li {display: flex; align-items: flex-start ;position: relative;}
.sub01_1 .sect5 .history li:first-child:before {content: ''; position: absolute; left: 0; top: 0; width: 2px; height: 10px; transform: translate(-50%,0%) ;background-color: #fff; }
.sub01_1 .sect5 .history li:last-child:before {content: ''; position: absolute; left: 0; bottom: 0; width: 2px; height: 88%; transform: translate(-50%,0%) ;background-color: #fff; }

.sub01_1 .sect5 .history li + li {margin-top: 5rem}
.sub01_1 .sect5 .history li .num {position: relative; padding-left: 3rem; font-size: 2rem; font-weight: 700; color: #173348; opacity: 0; transform: translateX(50px);  transition: 1s; }
.sub01_1 .sect5 .history li .num:before {content: ""; position: absolute; left: 0px; top: 50%; transform: translate(-60%,-50%); width: 6px; height: 6px; border-radius: 50%; background-color: #BDBDBD; opacity: 0; transition: all .5s}

.sub01_1 .sect5 .history li.active .num:before {width:10px; height: 10px; background-color: #173348; z-index: 2}
.sub01_1 .sect5 .history li.active .num:after {content: ""; position: absolute; left: -0; top: 50%; transform: translate(-55%,-50%); width: 20px; height: 20px; border-radius: 50%; background-color: #8899A6; z-index: 1; opacity: 0; transition: all .5s}
.sub01_1 .sect5 .history li .txt_box {margin-left: 7rem; opacity: 0; transform: translateX(50px); transition: 1s; transition-delay: 0.5s; word-break: keep-all}
.sub01_1 .sect5 .history li .txt_box p {font-size: 1.8rem;}
.sub01_1 .sect5 .history li .txt_box p + p {margin-top: 0.3em}

.sub01_1 .sect5 .history li:nth-child(1) .txt_box,
.sub01_1 .sect5 .history li:nth-child(1) .num{transition-delay: 0.5s}

.sub01_1 .sect5 .history li:nth-child(2) .txt_box,
.sub01_1 .sect5 .history li:nth-child(2) .num{transition-delay: 0.65s}

.sub01_1 .sect5 .history li:nth-child(3) .txt_box,
.sub01_1 .sect5 .history li:nth-child(3) .num{transition-delay: 0.8s}

.sub01_1 .sect5 .history li:nth-child(4) .txt_box,
.sub01_1 .sect5 .history li:nth-child(4) .num{transition-delay: 0.95s}

.sub01_1 .sect5 .history li:nth-child(5) .txt_box,
.sub01_1 .sect5 .history li:nth-child(5) .num{transition-delay: 1.1s}

.sub01_1 .sect5 .history li:nth-child(1) .num:after,
.sub01_1 .sect5 .history li:nth-child(1) .num:before {transition-delay: 1.65s}
.sub01_1 .sect5 .history li:nth-child(2) .num:before {transition-delay: 1.8s}
.sub01_1 .sect5 .history li:nth-child(3) .num:before {transition-delay: 1.95s}
.sub01_1 .sect5 .history li:nth-child(4) .num:before {transition-delay: 2.2s}
.sub01_1 .sect5 .history li:nth-child(5) .num:before {transition-delay: 2.35s}


.sub01_1 .sect5 .history ul.active:before {height: 100%}
.sub01_1 .sect5 .history ul.active li .num {transform: unset; opacity: 1}
.sub01_1 .sect5 .history ul.active li .txt_box {transform: unset; opacity: 1}

.sub01_1 .sect5 .history ul.active li .num:after {opacity: 0.5}
.sub01_1 .sect5 .history ul.active li .num:before {opacity: 1}


.sub01_1 .sect5 .ci{ margin-top: 20rem}
.sub01_1 .sect5 .ci .down_wrap{margin-top: 4rem;}
.sub01_1 .sect5 .ci .down_wrap .btn{display: inline-flex; align-items: center; justify-content: center; width: 11.875em; padding: 0.8em 0; border: 1px solid  var(--blue); color: var(--blue); font-size: 1.6rem; font-weight: 500; border-radius: 50px; line-height: 1rem; transition: all .3s}
.sub01_1 .sect5 .ci .down_wrap .btn + .btn{margin-left: 0.5rem}
.sub01_1 .sect5 .ci .down_wrap .btn svg{fill: var(--blue); width: auto; margin-left: 10px; transition: all .3s}

.sub01_1 .sect5 .ci .logo_box{display: grid; grid-template-columns: 1fr 1fr; gap: 0 2rem; margin-top: 6rem}
.sub01_1 .sect5 .ci .logo_box .cont{display: flex; flex-direction: column; align-items: center; justify-content: space-evenly; padding: 6rem 0; border: 1px solid #eee}
.sub01_1 .sect5 .ci .logo_box .cont .img{}
.sub01_1 .sect5 .ci .logo_box .cont .txt{margin-top: 6rem}
.sub01_1 .sect5 .ci .color{margin-top: 12rem}
.sub01_1 .sect5 .ci .color .txt{font-size: 1.8rem; word-break: keep-all}
.sub01_1 .sect5 .ci .color .color_box{display: grid; grid-template-columns: 1fr 2fr; grid-row-end: auto; gap: 0 2rem; margin-top: 6rem}
.sub01_1 .sect5 .ci .color .color_box .main_color_cont{grid-row: 1/3;}
.sub01_1 .sect5 .ci .color .color_box .sub_color_cont{display: grid; grid-template-columns: 1fr 1fr 1fr}
.sub01_1 .sect5 .ci .color .color_box .tit{grid-row: 4; margin-top: 1rem; font-size: 2rem; font-weight: 700}
.sub01_1 .sect5 .ci .color .color_box dl{display: grid; grid-template-columns: auto 1fr; gap: 0 1.8rem; padding: 3rem; color: #fff;}
.sub01_1 .sect5 .ci .color .color_box dl dt{font-size: 1.4rem; font-weight: 600}
.sub01_1 .sect5 .ci .color .color_box dl dd{opacity: 0.8; font-size: 1.4rem;}

.sub01_1_tit_box .en_tit {margin-bottom: 1rem; font-size: 1.8rem; font-weight: 700; color: #8899A6; }
.sub01_1_tit_box .tit {font-size: 4.4rem; font-weight: 700; line-height: 1.4; word-break: keep-all}
.sub01_1_tit_box .txt { margin-top: 2rem; font-size: 1.8rem; word-break: keep-all; }


/* 전문의료진 */
.sub01_2{}
.sub01_2 .sect1{}
.sub01_2 .staff_list{}
.sub01_2 .swiper-container{}
.sub01_2  .swiper-wrapper { box-sizing: border-box}
.sub01_2  .swiper-slide {height: auto}
.sub01_2 .staff_list{padding-top: 10rem; background-color: #f4f6fa}
.sub01_2 .staff_list .paging{display: inline-flex; align-items: baseline; position: absolute; top: 0; left: 0; width: auto; font-size: 2.4rem}
.sub01_2 .staff_list .paging span{opacity: 0.5; color: #8899A6; font-family: var(--NotoSerif); font-weight: 700; line-height: 1em}
.sub01_2 .staff_list .paging span[class^="current"]{opacity: 1; color: var(--blue); font-size: 2em}
.sub01_2 .staff_list .paging span.barSpace{margin: 0 0.25em}
.sub01_2 .staff_list .cont{display: grid; grid-template-columns: 1.8fr 1.6fr; height: 100%}
.sub01_2 .staff_list .cont .staff_txt {display: flex; }
.sub01_2 .staff_list .staff_nm{padding-top: 10rem; width: 40%}
.sub01_2 .staff_list .staff_nm span{color: #8899A6; font-size: 2rem}
.sub01_2 .staff_list .staff_nm p{ font-size: 3.6rem; font-weight: 700}

.sub01_2 .staff_list .staff_career {padding-bottom: 10rem; margin-left: 20px}
.sub01_2 .staff_list .staff_career ul{ font-size: 1.8rem}
.sub01_2 .staff_list .staff_career ul + ul{margin-top: 3rem}
.sub01_2 .staff_list .staff_career ul li{position: relative; padding-left: 1.8rem}
.sub01_2 .staff_list .staff_career ul li + li {margin-top: 4px}
.sub01_2 .staff_list .staff_career ul li::before{content: ''; position: absolute; width: 6px; height: 6px; background-image:url("/inc/img/sub/minus.svg"); background-size: cover; background-position: center;top: 0.9rem; left: 0}
.sub01_2 .staff_list .staff_img{display: flex; align-items: flex-end; justify-content: center}
.sub01_2 .staff_list .staff_img img {width: 100%;}


.sub01_2 .swiper_btn {margin-top: -100px}
.sub01_2 .swiper_btn .btn .txt {margin-top: 25px}
.sub01_2 .btn .img {position: relative; overflow: hidden; width: 100px; padding-top: 120%; border: 1px solid #EEEEEE; background-color: #fff}
.sub01_2 .btn .img img {position: absolute; width: 100%; height: 100%; left: 0; top: 15px; object-fit: cover; object-position: top}


.sub01_2 .swiper-button-disabled .img {opacity: 0}


/* 진료안내 */
.sub01_3{}


.sub01_3 .sect2 {margin-top: var(--sect_mt); padding: var(--sect_bg_pd) 0;background-color: #F4F6FA}
.sub01_3 .sect2 .cont_txt_box {text-align: center}
.sub01_3 .sect2 .cont_txt_box .cont_txt {margin-top: 1.5rem}
.sub01_3 .sect2 .cont_txt_box .cont_txt p { word-break: keep-all }
.sub01_3 .sect2 .icon_box {display: flex;margin-top: 10rem}
.sub01_3 .sect2 .icon_box .cont {display: flex; flex-direction: column; align-items: center; width: 25%;}
.sub01_3 .sect2 .icon_box .cont .icon {height:6rem; margin-bottom: 5rem; }
.sub01_3 .sect2 .icon_box .cont .icon svg {width: auto; height: 100%}
.sub01_3 .sect2 .icon_box .cont .cir_badge { position: relative; z-index: 1; }
.sub01_3 .sect2 .icon_box .cont .txt_box {position: relative; margin-top: 1.5rem; width: 100%; text-align: center}
.sub01_3 .sect2 .icon_box .cont .txt_box:before {content: ""; position: absolute; left: 0; top: -3rem ;width: 100%; height: 2px; background-image: url("../img/sub/dotted_line.png"); opacity: 0.5}
.sub01_3 .sect2 .icon_box .cont:first-child .txt_box:after {content: ""; position: absolute; width: 50%; height: 2.6rem; left: 0; top: -2.5rem; transform: translateY(-50%); background-color: #f4f6fa}
.sub01_3 .sect2 .icon_box .cont:last-child .txt_box:after {content: ""; position: absolute; width: 50%; height: 2.6rem; right: 0; top: -2.5rem; transform: translateY(-50%); background-color: #f4f6fa}
.sub01_3 .sect2 .icon_box .cont .txt_box .tit {font-size: 2.4rem; font-weight: 600; }
.sub01_3 .sect2 .icon_box .cont .txt_box small {display: none; margin-top: 0.3rem; font-size: 1.6rem; color: #8899A6; }

/*.sub01_3 .sect2 .icon_box .cont:nth-child(1) .txt_box:before {transition: .5s linear; transition-delay: 0.8s}*/
/*.sub01_3 .sect2 .icon_box .cont:nth-child(2) .txt_box:before { transition-delay: 1.3s}*/
/*.sub01_3 .sect2 .icon_box .cont:nth-child(2) .icon {transition-delay: 1.4s}*/
/*.sub01_3 .sect2 .icon_box .cont:nth-child(2) .cir_badge {transition-delay: 1.5s}*/
/*.sub01_3 .sect2 .icon_box .cont:nth-child(2) .txt_box small,*/
/*.sub01_3 .sect2 .icon_box .cont:nth-child(2) .txt_box .tit{transition-delay: 1.6s}*/

/*.sub01_3 .sect2 .icon_box.active .icon,*/
/*.sub01_3 .sect2 .icon_box.active .cont .cir_badge,*/
/*.sub01_3 .sect2 .icon_box.active .cont .txt_box .tit,*/
/*.sub01_3 .sect2 .icon_box.active .cont .txt_box small {transform: unset; opacity: 1}*/
/*.sub01_3 .sect2 .icon_box.active .cont .txt_box:before {width: 50%}*/
/*.sub01_3 .sect2 .icon_box.active .cont:first-child .txt_box:before {width: 100%;}*/

.sub01_3 .sect3 {margin-top: var(--sect_mt); }
.sub01_3 .sect3 .map_box {margin-top: 6rem}
.sub01_3 .sect3 .map_box .map {position: relative; padding-top: max(40%,250px)}
.sub01_3 .sect3 .map_box .map .cont {position: absolute; width: 100%; height: 100%; left: 50%; top: 50%; transform: translate(-50%,-50%); object-position: center; object-fit: cover}
.sub01_3 .sect3 .cont_wrap { margin-top: 6rem}
.sub01_3 .sect3 .cont_wrap .left {}
.sub01_3 .sect3 .cont_wrap .left svg {width: 60%; height: auto}
.sub01_3 .sect3 .cont_wrap .right .txt_box .tit {font-size: 2.4rem; font-weight: 600}
.sub01_3 .sect3 .cont_wrap .right .txt_box ul {display: flex; align-items: center; margin-top: 2rem}
.sub01_3 .sect3 .cont_wrap .right .txt_box ul li {padding-right: 1rem; border-right: 1px solid #E0E0E0; font-size: var(--sub_txt); line-height: 1}
.sub01_3 .sect3 .cont_wrap .right .txt_box ul li + li {margin-left: 1rem}
.sub01_3 .sect3 .cont_wrap .right .txt_box ul li:last-child{ padding-right: 0; border-right: none}
.sub01_3 .sect3 .cont_wrap .right .txt_box .btn_wrap {display: flex; width: 85%; margin-top: 4rem}
.sub01_3 .sect3 .cont_wrap .right .txt_box .btn_wrap .btn {display: flex; align-items: center; justify-content: center; width: 20%; height: 2.75em; font-size: 1.6rem; font-weight: 500; border: 1px solid var(--blue); border-radius: 50px; transition: all .3s}
.sub01_3 .sect3 .cont_wrap .right .txt_box .btn_wrap .btn.naver{border: 1px solid #1cc838; background-color: #1cc838; color: #fff}
.sub01_3 .sect3 .cont_wrap .right .txt_box .btn_wrap .btn.kakao{border: 1px solid #f5cf00; background-color: #f5cf00;}


.sub01_3 .sect3 .cont_wrap .right .txt_box .btn_wrap .btn + .btn {margin-left: 1rem;}


.sub01_3 .sect4 {padding-top: var(--sect_mt);}
.sub01_3 .sect4 .right_cont {}
.sub01_3 .sect4 ul {margin-top: 3rem; border-top: 1px solid var(--blue)}
.sub01_3 .sect4 ul li {display: flex; padding: 2.5rem 0;border-bottom: 1px solid #EEEEEE}
.sub01_3 .sect4 ul li .tit {width: 6ch; flex-shrink: 0 ;font-size: 2rem; font-weight: 600}
.sub01_3 .sect4 ul li .txt {margin-left: 2.5em; font-size: var(--sub_txt);}
.sub01_3 .sect4 .sub_txt {display: flex; margin-top: 10px}
.sub01_3 .sect4 .sub_txt span {margin-right: 5px;margin-top: -1px}

.sub01_3 .sect5 {margin-top: var(--sect_mt);}

.sub01_3 .sect5 .parking {display: flex; align-items: flex-start ;margin-top: 6rem}
.sub01_3 .sect5 .parking .img {position: relative; width: 75%; padding-top: 38%; margin-right: 4rem}
.sub01_3 .sect5 .parking .img img {position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-position: center; object-fit: cover}
.sub01_3 .sect5 .parking .img img.pin_img {opacity: 0}
.sub01_3 .sect5 .parking .img img.pin_img.on {opacity: 1}
.sub01_3 .sect5 .parking .parking_list {width: 25%; border-top: 1px solid var(--blue)}
.sub01_3 .sect5 .parking .parking_list > li { display: block; padding: 3rem; transition: all .3s; border-bottom: 1px solid #EEEEEE; cursor: pointer}
.sub01_3 .sect5 .parking .parking_list > li .tit_box {display: flex; justify-content: space-between; align-items: center;}
.sub01_3 .sect5 .parking .parking_list > li .tit_box .left {font-size: 2rem; padding-right: 20px; font-weight: 600; }
.sub01_3 .sect5 .parking .parking_list > li .tit_box .view_txt {display: flex; color: #8899A6; font-size: 1.4rem}
.sub01_3 .sect5 .parking .parking_list > li .tit_box .view_txt svg {margin-left: 12px;margin-top: 0.2rem; fill: #8899A6}
.sub01_3 .sect5 .parking .parking_list > li .text {margin-top: 1.5rem}
.sub01_3 .sect5 .parking .parking_list > li .text ul li{display: flex; font-size: var(--sub_txt);}
.sub01_3 .sect5 .parking .parking_list > li .text ul li + li {margin-top: 3px;}
.sub01_3 .sect5 .parking .parking_list > li .text ul li .cir {width: 0.5rem; height: 0.5rem; margin-top: 1rem; margin-right: 1rem; border-radius: 50%; background-color: #8899A6;}
.sub01_3 .sect5 .parking .parking_list > li .text ul li .col {color: #DE4552}


/*병원둘러보기*/
.sub01_4 .sect2 {position: relative; margin-top: 5rem; padding-top: 5rem;}
.sub01_4 .sect2:before {content: ""; position: absolute; width: 100%; height: 90%; left: 0; top: 0; background-color: #F4F6FA}
.sub01_4 .sect2 .in {display: flex; flex-direction: column;}
.sub01_4 .sect2 .top_box {display: flex; justify-content: space-between}
.sub01_4 .sect2 .top_box .cont_txt {min-height: 7.5rem}
.sub01_4 .sect2 .swiper_page .swiper-pagination {position: static; font-family: var(--NotoSerif); line-height: 1; font-size: 2.4rem}
.sub01_4 .sect2 .swiper_page .swiper-pagination-current {font-size: 2em; font-weight: 600; opacity: 1}
.sub01_4 .sect2 .swiper_page .barSpace {margin:0 0.3em 0 0.7rem; opacity: 0.5; }
.sub01_4 .sect2 .swiper_page .swiper-pagination-total {opacity: 0.5; }


.sub01_4 .slide_box .swiper-slide {padding-top: 40%}
.sub01_4 .slide_box .swiper-slide img {position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; object-position: center}


/* 의료장비 소개 */
.sub01_5 .sect {margin-top: var(--sect_mt)}

.sub01_5 .sect.sect1 {margin-top: var(--top_sect_mt)}
.sub01_5 .sect1 .img {position: relative; padding-top: 40%; background-color: #F4F6FA; }
.sub01_5 .sect1 .img img {position: absolute; left: 50%; top: 50%; height: 80%; transform: translate(-50%,-50%);}
.sub01_5 .sect1 .img.full img {width: 100%; height: 100%; object-position: center; object-fit: cover}
.sub01_5 .sect.sect1 .warning_txt {display: flex; text-align: left; margin-bottom: 2.5rem}
.sub01_5 .sect.sect1 .warning_txt p { word-break: keep-all }
.sub01_5 .sect.sect1 .warning_txt svg {fill: var(--blue); margin-top: 2.5px; margin-right: 10px}

.sub6_2_4 .sect3 .point_cont .left,
.sub06_3  .sect5 .point_cont .left,
.sub46 .point_cont .left {font-family: 'Pretendard', sans-serif;}

.sub01_5 .sect2 {margin-top: var( --sect_mt);}

.sub01_5 .bg_sect {padding: 12rem 0; background-color: #F4F6FA;}
.sub01_5 .bg_sect .tit_box {text-align: center}
.sub01_5 .bg_sect .icon_box {display: flex; justify-content: center; flex-wrap: wrap ;margin-top: 10rem}
.sub01_5 .bg_sect .icon_box .cont {display: flex; flex-direction: column; align-items: center; width: 33.333%;}
.sub01_5 .bg_sect .icon_box .cont:nth-child(n+4){margin-top: 10rem}
.sub01_5 .bg_sect .icon_box .cont .img {height: var( --icon_size)}
.sub01_5 .bg_sect .icon_box .cont .img svg {height: 100%; max-width: 100%; text-align: center}
.sub01_5 .bg_sect .icon_box .cont .txt {margin-top: 3.5rem; font-size:var(--deps4_tit); font-weight: 600; text-align: center}

.sub01_5 .point_cont .right .graph_box {position: relative; display: flex; justify-content: space-around; align-items: flex-end; height: 25rem; padding: 0 10% ;margin: 0 10% 6rem;  border-bottom: 1px solid #E0E0E0;}
.sub01_5 .point_cont .right .graph_box .graph {position: relative;}
.sub01_5 .point_cont .right .graph_box .graph .num {position: absolute; top: -10px; left: 50%; transform: translate(-50%,-100%);font-weight: 500; font-size: 1.6rem; text-align: center; line-height: 1.3}
.sub01_5 .point_cont .right .graph_box .graph .bar {width: 4rem; background-color: var(--blue); opacity: 0.2 ;transition: height 1s ease-out }
.sub01_5 .point_cont .right .graph_box .graph .year {position: absolute;bottom: -5px;left: 50%;transform: translate(-50%,100%); color: var(--blue) ;white-space: nowrap; font-size: 1.6rem}
.sub01_5 .point_cont .right .graph_box .graph.active .num{color: var(--blue); font-size: 1.4rem ;font-weight: 700}
.sub01_5 .point_cont .right .graph_box .graph.active .num strong {font-size: 2rem}
.sub01_5 .point_cont .right .graph_box .graph.active .bar {opacity: 1}
.sub01_5 .point_cont .right .graph_box .graph.active .year {font-weight: 500}
.sub01_5 .point_cont .right .graph_box .graph:nth-child(1) .bar,
.sub01_5 .point_cont .right .graph_box .graph:nth-child(2) .bar,
.sub01_5 .point_cont .right .graph_box .graph:nth-child(3) .bar{height: 0}
.sub01_5 .point_cont .right .graph_box.active .graph:nth-child(1) .bar {height: 15rem}
.sub01_5 .point_cont .right .graph_box.active .graph:nth-child(2) .bar {height: 10rem; transition-delay: 0.2s}
.sub01_5 .point_cont .right .graph_box.active .graph:nth-child(3) .bar {height: 7.5rem; transition-delay: 0.4s}

.sub01_5 .point_cont .right .graph_box.result {padding-right: 15%; padding-left: 40%; margin: 0 0 4rem}
.sub01_5 .point_cont .right .graph_box.result .data_txt {position: absolute; left: 10px; bottom: 10px; font-size: 1.3rem; font-weight: 500}
.sub01_5 .point_cont .right .graph_box.result .bubble {position: absolute; left: -20px; top: 0; transform: translateX(-100%) ;padding: 1.5rem 2rem; background-color: #406078; border-radius: 2rem; color: #fff; white-space: nowrap; font-size: 1.6rem}
.sub01_5 .point_cont .right .graph_box.result .bubble:after {content: ""; position: absolute; right: 0; bottom: 0; width: 0; height: 0; transform: translate(40%,40%) rotate(135deg);
    transform-origin: center;border-bottom: 3rem solid #406078; border-left: 1.5rem solid transparent; border-right: 1.5rem solid transparent}
.sub01_5 .point_cont .right .graph_box.result .txt_box { padding: 2rem; width: 100%}
.sub01_5 .point_cont .right .graph_box.result .graph .bar {width: 5rem}
.sub01_5 .point_cont .right .graph_box.result.active .graph:nth-child(1) .bar {height: 18rem}
.sub01_5 .point_cont .right .graph_box.result.active .graph:nth-child(2) .bar {height: 16rem; transition-delay: 0.2s}
.sub01_5 .point_cont .right .graph_box.result.active .graph:nth-child(3) .bar {height: 8rem; transition-delay: 0.4s}



.sub01_6{}
.sub01_6 .hospital_list{display: grid; grid-template-columns: 1fr 1fr  1fr 1fr; gap: 8rem 4rem}
.sub01_6 .hospital_list .item{display: flex; flex-direction: column; align-items: center; gap: 0 4rem}
.sub01_6 .hospital_list .item .img{position: relative; height: 0; width: 100% ;padding-top: 56.25%; background-color: #F4F6FA}
.sub01_6 .hospital_list .item .img img{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 80%}
.sub01_6 .hospital_list .item .txt {width: 100%; font-size: 1.6rem; margin-top: 1.5rem; padding-left: 2.5rem}
.sub01_6 .hospital_list .item .txt p{ font-size: var(--deps3_tit); font-weight: 700; display: none}
.sub01_6 .hospital_list .item .txt span{display: block; word-break: break-all}
.sub01_6 .hospital_list .item .txt span + span {margin-top: 0.5em}
.sub01_6 .hospital_list .item .txt a{color: #757575; display: flex}
.sub01_6 .hospital_list .item .txt a svg {height: 1em; margin-right: 10px; margin-top: 0.2em; fill: #757575}
.sub01_6 .hospital_list .item .txt a.tel{cursor: default}


.sub01_9{}
.sub01_9 *[class^="sect"]{margin-top: var(--sect_mt)}
.sub01_9 .sect1{margin-top: 16rem}
.sub01_9 .sect2{}
.sub01_9 .sect2 .cont_img_list {margin-top: 6rem}
.sub01_9 .sect3{}

.sub01_9 .sect4{position: relative; padding-top: 12rem}
.sub01_9 .sect4::before{content: ''; position: absolute; top: 0; left: 0; width: 100%; height: calc(100% - 10rem); background-color: #F4F6FA}
.sub01_9 .sect4 .cont_txt_box{text-align: center}
.sub01_9 .sect4 ul{display: grid; grid-template-columns: 1fr 1fr; gap: 0 6rem; margin-top: 10rem}
.sub01_9 .sect4 ul li{position: relative}
.sub01_9 .sect4 ul li .img{position: relative}
.sub01_9 .sect4 ul li .img::before{content: ''; position: absolute; width: 100%; height: 100%;background:linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(23, 51, 72, 0.7))}
.sub01_9 .sect4 ul li .img img{width: 100%}
.sub01_9 .sect4 ul li .txt{position: absolute; bottom: 0; left: 0; z-index: 1; width: 100%; padding: 6rem; color: #fff}
.sub01_9 .sect4 ul li .txt p{font-size: var(--deps3_tit); font-weight: 700}
.sub01_9 .sect4 ul li .txt span{display: block}
.sub01_9 .sect4 ul li .txt p + span{margin-top: 3rem}
.sub01_9 .sect5{}
.sub01_9 .sect5 .grid_box{margin-top: var(--sect_mt)}
.sub01_9 .sect5 .icon_right {margin-top: 10rem}
.sub01_9 .sect5 ul{border-top: 1px solid var(--blue)}
.sub01_9 .sect5 ul li{display: grid; grid-template-columns: 20% 1fr; padding: 2.5rem 0; border-bottom: 1px solid #eee}
.sub01_9 .sect5 ul li .tit_box{font-size: 2rem; font-weight: 700}
.sub01_9 .sect5 ul li .cont{}
.sub01_9 .sect5 ul li .cont p{display: flex; align-items: flex-start; position: relative;}

.sub01_9 .sect5 ul li .cont p + p{margin-top: 1em}
.sub01_9 .sect5 ul li .cont p b{color: #83a4bd; font-weight: 500}
.sub01_9 .sect5 .equipment{display: grid; grid-template-columns: repeat(3, 1fr); gap: 6rem 2rem}
.sub01_9 .sect5 .equipment .item{}
.sub01_9 .sect5 .equipment .item .img{position: relative; border: 1px solid #eee}
.sub01_9 .sect5 .equipment .item .img img{}
.sub01_9 .sect5 .equipment .item p{margin-top: 1rem; font-size: var(--deps4_tit); font-weight: 700}
.sub01_9 .sect5 .time_cont .right{margin-left: 0}
.sub01_9 .sect5 .more_info{margin-top: 10rem}
.sub01_9 .sect5 .more_info .item{display: grid; grid-template-columns: 11.2rem 1fr;}
.sub01_9 .sect5 .more_info .item + .item{padding-top: 6rem; margin-top: 6rem; border-top: 1px solid #eee}
.sub01_9 .sect5 .more_info .item svg{font-size: 5.6rem}
.sub01_9 .sect5 .more_info .item div{}
.sub01_9 .sect5 .more_info .item div p{font-size: var(--deps3_tit); font-weight: 700}
.sub01_9 .sect5 .more_info .item div span{display: block; margin-top: 1em}
.sub01_9 .sect6 .in{position: relative}
.sub01_9 .intro_slide{position: relative; margin-top: 6rem}
.sub01_9 .intro_slide .swiper-slide{}
.sub01_9 .intro_slide .swiper-slide .txt{ margin-top: 6rem}
.sub01_9 .intro_slide .swiper-slide .txt p{margin-bottom: 1em; font-size: var(--deps3_tit); font-weight: 700}
.sub01_9 .intro_slide .swiper-slide .txt span{display: block; padding-right: 3em}
.sub01_9 .intro_slide .swiper-scrollbar{ position: relative; left: 0; width: 100%; height: 4px; margin-top: 2rem ;background: #e0e0e0; border-radius: 0}
.sub01_9 .intro_slide .swiper-scrollbar-drag{height: 4px; background: #173348; border-radius: 0}
.sub01_9 .intro_slide .swiper_btn {margin-top: 8rem}

.sub01_9 .sect6 .paging{display: inline-flex; align-items: baseline; position: absolute; top: 0; bottom: auto; left: auto; right: 2rem; width: auto; font-size: 2.4rem}
.sub01_9 .sect6 .paging span{opacity: 0.5; color: #8899A6; font-family: var(--NotoSerif); font-weight: 700; line-height: 1em}
.sub01_9 .sect6 .paging span[class^="current"]{opacity: 1; color: var(--blue); font-size: 2em}
.sub01_9 .sect6 .paging span.barSpace{margin: 0 0.25em}
.sub01_9 .sect7{}
.sub01_9 .sect7 ul{display: flex; justify-content: space-between; margin-top: 6rem; height: 48rem}
.sub01_9 .sect7 ul li{overflow: hidden; position: relative; width: calc(17.5% - 3rem/4); transition: width 0.5s}
.sub01_9 .sect7 ul li + li{margin-left: 1rem}
.sub01_9 .sect7 ul li a{display: block; height: 100%; cursor: default}
.sub01_9 .sect7 ul li .img{overflow: hidden; position: relative; padding-top: 60%; min-height: 100%}
.sub01_9 .sect7 ul li .img::before{content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 300%; background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.7)); z-index: 1 ;transition: height 0.2s}
.sub01_9 .sect7 ul li .img::after{content: '\2b'; position: absolute; top: calc(50% - 2.8rem); left: calc(50% - 2.8rem); opacity: 1; color: rgba(255, 255, 255, 0.2); font-size: 5.6rem; font-family: var(--awesome); z-index: 2; transition: opacity 0.2s; display: none}
.sub01_9 .sect7 ul li .img img{position: absolute; left: 0; top: 0; width: 100%; height: 100%; max-width: none; object-position: left; object-fit: cover}
.sub01_9 .sect7 ul li .txt{display: flex; flex-direction: column; position: absolute; bottom: 0; left: 0; width: 100%; padding: 6rem; color: #fff; z-index: 3}
.sub01_9 .sect7 ul li .txt span{position: absolute; left: 50%; transform: translateX(-50%); font-size: 1.6rem; font-family: var(--NotoSerif); font-weight: 700; line-height: 1em}
.sub01_9 .sect7 ul li .txt p{white-space: nowrap; opacity: 0; transform: translateX(1.5em); font-size: 3rem; font-weight: 700; line-height: 1em}
.sub01_9 .sect7 ul li.active{width: calc(100% - ((17.5%)*3 - 3rem))}
.sub01_9 .sect7 ul li.active a{}
.sub01_9 .sect7 ul li.active .img::before{height: 100%}
.sub01_9 .sect7 ul li.active .img::after{opacity: 0}
.sub01_9 .sect7 ul li.active .txt{}
.sub01_9 .sect7 ul li.active .txt span{left: auto; transform: translateY(calc(-100% - 1em))}
.sub01_9 .sect7 ul li.active .txt p{opacity: 1; transform: translateX(0); transition: opacity 0.5s, transform 0.5s}
.sub01_9 .sect8{padding: 0 2.5% 2.5%}
.sub01_9 .sect8 div{position: relative; padding: 15rem 0; background: url(/inc/img/sub/sub01_9_sect8_bg.jpg) no-repeat center / cover}
.sub01_9 .sect8 div::before{content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.1)}
.sub01_9 .sect8 p{position: relative; color: #fff; font-size: 4.4rem; font-weight: 700; text-align: center}


/* 스마트 스마일라식 > 스마트 스마일라식 */
.sub02_1 *[class^="sect"]{margin-top: var(--sect_mt)}
.sub02_1 .sect1{margin-top: 0}

.sub02_1 .sect2 .cont_tit {word-break: keep-all}


.sub02_1 .sect3{padding: var(--sect_bg_pd) 0; background: #F4F6FA}
.sub02_1 .sect3 .cont_txt_box{text-align: center}
.sub02_1 .sect3 ul{display: grid; grid-template-columns: repeat(5, 1fr); margin-top: var(--cont_mt)}
.sub02_1 .sect3 ul li{position: relative; text-align: center}
.sub02_1 .sect3 ul li:not(:last-child)::before{content: '\f105'; position: absolute; top: calc(8rem - 0.5em); right: 0; opacity: 0.3; transform: translateX(50%); color: #8899A6; font-size: 3.2rem; font-family: var(--awesome)}
.sub02_1 .sect3 ul li div{display: flex; align-items: center; justify-content: center; margin: 0 auto 6rem auto}
.sub02_1 .sect3 ul li .next_level{width: 16rem; height: 16rem; background: #8899A6; color: #fff; font-size: 3rem; font-family: var(--serif); font-weight: 700; border-radius: 50%; line-height: 1.2}
.sub02_1 .sect3 ul li svg{width: 16rem}
.sub02_1 .sect3 ul li p{margin-top: 2rem; font-size: 2.4rem; font-weight: 700; line-height: 1em}

.sub02_1 .point_cont .right .graph_bg {display: flex; flex-direction: column; justify-content: space-between; position: absolute; width: 100%; height: 80%; left: 0; bottom: 0; border-left: 1px solid #E0E0E0}
.sub02_1 .point_cont .right .graph_bg .line {position: relative;width: 100%; height: 1px; background-color: rgba(0,0,0,0.05)}
.sub02_1 .point_cont .right .graph_bg .line:last-child {background-color: transparent}
.sub02_1 .point_cont .right .graph_bg .line span {position: absolute; left: -10px; top: 50%; transform: translate(-100%,-50%) ;font-size: 10px; font-weight: 500}
.sub02_1 .point_cont .right .graph_box {position: relative;display: flex; justify-content: space-around; align-items: flex-end; height: 25rem; padding: 0 10% ;margin: 0 10% 6rem;  border-bottom: 1px solid #E0E0E0;}
.sub02_1 .point_cont .right .graph {position: relative; z-index: 2}
.sub02_1 .point_cont .right .graph .num {position: absolute; top: -5px; left: 50%; transform: translate(-50%,-100%);font-weight: 600; font-size: 1.5rem; text-align: center; line-height: 1.3}
.sub02_1 .point_cont .right .graph .bar {width: 4rem; background-color: #cdd2d6;transition: height 1s ease-out }
.sub02_1 .point_cont .right .graph .year {position: absolute;bottom: -5px;left: 50%;transform: translate(-50%,100%); color: var(--blue) ;white-space: nowrap; font-size: 1.6rem}
.sub02_1 .point_cont .right .graph.active .num{color: var(--blue); font-size: 1.4rem ;font-weight: 700}
.sub02_1 .point_cont .right .graph.active .num strong {font-size: 1.25em}
.sub02_1 .point_cont .right .graph.active .bar {background-color:rgba(23,51,72,1)}
.sub02_1 .point_cont .right .graph.active .year {font-weight: 500}
.sub02_1 .point_cont .right .graph_box .graph:nth-child(1) .bar,
.sub02_1 .point_cont .right .graph_box .graph:nth-child(2) .bar,
.sub02_1 .point_cont .right .graph_box .graph:nth-child(3) .bar{height: 0}

.sub02_1 .point_cont .right .graph_box.active .graph:nth-child(1) .bar {height: calc((25rem * 0.8) * 0.78)}
.sub02_1 .point_cont .right .graph_box.active .graph:nth-child(2) .bar {height: calc((25rem * 0.8) * 0.60); transition-delay: 0.2s}
.sub02_1 .point_cont .right .graph_box.active .graph:nth-child(3) .bar {height: calc((25rem * 0.8) * 0.45); transition-delay: 0.4s}

.sub02_3.tab3 .sect4,
.sub02_3.tab3 .sect3,
.sub02_3.tab3 .sect2 {margin-top: var(--sect_mt)}

.sub02_3.tab3 .sect4 .list {display: grid; grid-template-columns: 1fr 1fr; gap: 0rem 8rem; margin-top: 6rem;}
.sub02_3.tab3 .sect4 .list li {display: flex; position: relative; align-items: flex-start; padding: 2.5rem 2.5rem 2.5rem 2.5rem; border-bottom: 1px solid #eeeeee}
.sub02_3.tab3 .sect4 .list li p { word-break: keep-all }
.sub02_3.tab3 .sect4 .list li .cir {display: inline-block; position: absolute; top: 3.4rem; left: 1.5rem ;width: 0.5rem; height: 0.5rem;background-color: #8899A6; border-radius: 50%;}
.sub02_3.tab3 .sect4 .list li:nth-child(-n+2) { border-top: 1px solid #eeeeee}


.sub02_2 .sect2{padding: 10rem 0 var(--sect_bg_pd); background: #f4f6fa}


.sub02_2 .sect4,
.sub02_2 .sect3 {margin-top: var(--sect_mt)}


.sub02_2 .sect4 {background-color: #F4F6FA; padding-top: 12rem ;}
.sub02_2 .sect4 .tit_box {text-align: center}
.sub02_2 .sect4 .tit_box .btn {display: inline-block; margin-top: 6rem; padding: 1.1rem 3rem; border: 1px solid var(--blue); border-radius: 100px; transition: all .3s}

.sub02_2 .sect4 .img_wrap {display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6rem ;margin-top: 6rem}
.sub02_2 .sect4 .img_wrap .txt_box {margin-top: 15px;}
.sub02_2 .sect4 .img_wrap .txt_box span{font-family: var(--serif);font-weight: 700;margin-left: 1rem;}

.sub02_3{}

.sub02_3 .sect1{margin-top: var(--top_sect_mt)}


/*------------투데이 라섹------------*/


.sub3_2 .sect2 { margin-top: 10rem; padding: 10rem 0; background-color: #F4F6FA; }

.sub3_1 .sect2,.sub3_1 .sect3, .sub3_1 .sect4,
.sub3_2 .sect3 { margin-top: var(--sect_mt); }

.sub3_1 .sect3 { padding: 12rem 0; background-color: #F4F6FA; }
.sub3_1 .sect3 .cont .tit_wrap { text-align: center; }
.sub3_1 .sect3 .cont .tit_wrap .tit { font-size: var(--sub_cont_tit); font-weight: var(--sub_cont_tit_we); }
.sub3_1 .sect3 .cont .tit_wrap .txt { margin-top: 3rem; word-break: keep-all }

.sub3_1 .sect3 .cont .img_wrap { display: flex; align-items: flex-start; justify-content: center; margin-top: var(--cont_mt); }
.sub3_1 .sect3 .cont .img_wrap .box { width: calc(100%/3 - 1rem); text-align: center; }
.sub3_1 .sect3 .cont .img_wrap .box + .box { margin-left: 2rem; }
.sub3_1 .sect3 .cont .img_wrap .box .img { width: 40%; margin: 0 auto; }
.sub3_1 .sect3 .cont .img_wrap .box .in_txt_wrap { margin-top: 6rem; }
.sub3_1 .sect3 .cont .img_wrap .box .in_txt_wrap .in_tit { font-size: 2.4rem; font-weight: 600; }
.sub3_1 .sect3 .cont .img_wrap .box .in_txt_wrap .in_txt { margin-top: 2rem; word-break: keep-all; }

.sub3_1 .point_cont .right .graph_txt {display: flex; align-items: center; position: absolute; right: 20px; top: 20px;}
.sub3_1 .point_cont .right .graph_txt p {display: flex; align-items: center ;font-weight: 500; font-size: 1.6rem}
.sub3_1 .point_cont .right .graph_txt p + p {margin-left: 15px}
.sub3_1 .point_cont .right .graph_txt p span {display: inline-block;width: 2.5rem; height: 0.3rem; background-color: var(--blue); opacity: 0.2; margin-right: 5px}
.sub3_1 .point_cont .right .graph_txt p span.active {opacity: 1}
.sub3_1 .point_cont .right .graph_box {position: relative; display: flex; justify-content: space-around; align-items: flex-end; height: 25rem; padding: 0 5% ;margin: 0 10% 6rem;  border-bottom: 1px solid #E0E0E0;}
.sub3_1 .point_cont .right .graph {position: relative; display: flex; justify-content: center; align-items: flex-end}
.sub3_1 .point_cont .right .graph .num {position: absolute; top: -10px; left: 50%; transform: translate(-50%,-100%);font-weight: 500; font-size: 1.6rem; text-align: center; line-height: 1.3}
.sub3_1 .point_cont .right .graph .bar {width: 3rem; height: 0; background-color: var(--blue); opacity: 0.2 ;transition: height 1s ease-out }
.sub3_1 .point_cont .right .graph .bar.active {opacity: 1}
.sub3_1 .point_cont .right .graph .bar + .bar {margin-left: 0.8rem}
.sub3_1 .point_cont .right .graph .year {position: absolute;bottom: -10px;left: 50%;transform: translate(-50%,100%); color: var(--blue); font-weight: 600 ;white-space: nowrap; font-size: 1.6rem}


.sub3_1 .point_cont .right .graph_box.active .graph:nth-child(1) .bar {height: 2.5rem}
.sub3_1 .point_cont .right .graph_box.active .graph:nth-child(1) .bar + .bar {height:15rem ;  transition-delay: 0.1s}
.sub3_1 .point_cont .right .graph_box.active .graph:nth-child(2) .bar {height: 18rem; transition-delay: 0.3s}
.sub3_1 .point_cont .right .graph_box.active .graph:nth-child(2) .bar + .bar {height: 8rem; transition-delay: 0.4s}
.sub3_1 .point_cont .right .graph_box.active .graph:nth-child(3) .bar {height: 7.5rem; transition-delay: 0.5s}
.sub3_1 .point_cont .right .graph_box.active .graph:nth-child(3) .bar + .bar {height: 12rem; transition-delay: 0.6s}

.sub3_2 .sect2 { margin-top: 10rem; padding: 10rem 0 var(--sect_bg_pd); background-color: #F4F6FA; }


/*sub 04 백내장 */

.sub04_2 .sect,
.sub04_1 .sect {margin-top: var(--sect_mt)}

.sub04_1 .sect1,
.sub04_2 .sect1 {margin-top: var(--top_sect_mt)}

.sub04_1_1 .sect2 .right .tit_box .txt {margin-top: 2rem; word-break: keep-all}
.sub04_1_1 .sect2 .right .icon_com_cont {margin-top: 10rem}
.sub04_1_1 .sect2 .right .icon_com_cont + .tit_box {margin-top: 10rem}

.sub04_1_1 .sect4 {padding: var(--sect_bg_pd) 0; background-color: #F4F6FA; }
.sub04_1_1 .sect4 .cont_tit_box {text-align: center}
.sub04_1_1 .sect4 .cont_img_list {margin-top: 10rem}
.sub04_1_1 .sect4 .cont_img_list .img {background-color: #FCFCFC; padding: 0px 5rem}
.sub04_1_1 .bot_banner {margin-top: 0}

.sub04_1_2 .sect3 .bg{margin-top: 3rem; padding: var(--sect_bg_pd) 0 ;background-color: #F4F6FA}
.sub04_1_2 .sect4 .point_cont {margin-top: var(--cont_mt);}
.sub04_1_2 .sect5 .video video {width: 100%}


.sub04_2_1 .sect5 {padding: var(--sect_bg_pd) 0 ; background-color: #F4F6FA}
.sub04_2_1 .sect5 .cont_tit_box {text-align: center}
.sub04_2_1 .sect5 .check_cont {margin-top: var(--cont_mt)}
.sub04_2_1 .sect5 .check_cont ul {display: grid; grid-template-columns: 1fr 1fr; gap: 0 8rem;}
.sub04_2_1 .sect5 .check_cont ul li {display: flex; align-items: center ;padding: 2.5rem 0; border-bottom: 1px solid rgba(136,153,166,0.2)}
.sub04_2_1 .sect5 .check_cont ul li:nth-child(n):not(:nth-child(n+3)) {border-top: 1px solid rgba(136,153,166,0.2)}
.sub04_2_1 .sect5 .check_cont ul li svg {display: inline-block; width: auto; height: 2rem; margin-right: 1rem; margin-top: 0.3rem}
.sub04_2_1 .sect5 .check_cont ul li p {display: flex; align-items: flex-start; word-break: keep-all}

/*노안/백내장_다초점 인공 수정체*/
.sub04_3 .sect1 { margin-top: var(--top_sect_mt); }
.sub04_3 .sect2, .sub04_3 .video_sect, .sub04_3 .sect4 { margin-top: var(--sect_mt); }
.sub04_3 .sect2 .point_cont { margin-top: var(--cont_mt); }

.sub04_3 .sect4 .com_tab_box { margin-top: 4rem; }

.sub04_3 .sect4 #listView { margin-top: var(--top_sect_mt); }

.sub04_3 .sect4 .sub4_3_1 .in_sect1,
.sub04_3 .sect4 .sub4_3_1 .in_sect2,
.sub04_3 .sect4 .sub4_3_1 .in_sect3 { margin-top: var(--sect_mt); }
.sub04_3 .sect4 .sub4_3_1 .in_sect1 .img { margin-top: 6rem; }


/*추천드립니다.*/
.sub04_3 .sect4 .sub4_3_1 .in_sect3 .cont { margin-top: 6rem; }

.sub04_3 .sect4 .sub4_3_1 .col_sect { display: flex; align-items: flex-start; justify-content: center; margin-top: var(--cont_mt); }
.sub04_3 .sect4 .sub4_3_1 .col_sect .box { width: 100%; }
.sub04_3 .sect4 .sub4_3_1 .col_sect .box + .box { margin-left: 6rem }
.sub04_3 .sect4 .sub4_3_1 .col_sect .img { position: relative; width: 100%; padding-top: 60%; }
.sub04_3 .sect4 .sub4_3_1 .col_sect .img img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; }
.sub04_3 .sect4 .sub4_3_1 .col_sect .tit { margin-top: 2rem; font-size: var(--deps4_tit); font-weight: 600;  text-align: center}
.sub04_3 .sect4 .sub4_3_1 .col_sect .txt { margin-top: 1rem; line-height: 1.6; text-align: center}

.sub04_3 .sect4 .sub4_3_1 .geme_sect {display: flex; justify-content: center ;flex-wrap: wrap; margin-top: var(--cont_mt);}
.sub04_3 .sect4 .sub4_3_1 .geme_sect .box {width: calc(50% - 6rem/2)}
.sub04_3 .sect4 .sub4_3_1 .geme_sect .box:nth-child(2) {margin-left: 6rem}
.sub04_3 .sect4 .sub4_3_1 .geme_sect .box:nth-child(3) {margin-top: 6rem}
.sub04_3 .sect4 .sub4_3_1 .geme_sect .tit { margin-top: 2rem; font-size: var(--deps4_tit); font-weight: 600;  text-align: center}
.sub04_3 .sect4 .sub4_3_1 .geme_sect .txt { margin-top: 1rem; line-height: 1.6; text-align: center}


/*안티플러스 렌즈삽입술*/

.sub04_4 .sect1 {margin-top: var(--top_sect_mt)}
.sub04_4 .sect2, .sub04_4 .sect3 { margin-top: var(--sect_mt); }
.sub04_4 .sect3 .point_cont.type2 .box + .box { margin-top: var(--cont_mt); }

.sub04_4 .sect2 .left {word-break: keep-all}


/*------------시력교정술------------*/

.sub5 .sect {margin-top: var(--sect_mt)}

/*이미지 슬라이드*/
.sub05 ul.slide_more { display: flex; justify-content: space-between; margin-top: 6rem; height: 480px }
.sub05 ul.slide_more li{overflow: hidden; position: relative; width: calc(17.5% - 3rem/4); transition: width 0.5s}
.sub05 ul.slide_more li + li{margin-left: 10px}
.sub05 ul.slide_more li a{display: block; height: 100%; cursor: default}
.sub05 ul.slide_more li .img{overflow: hidden; position: relative; padding-top: 60%; min-height: 100%}
.sub05 ul.slide_more li .img::before{content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 300%; background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.7)); z-index: 1 ;transition: height 0.2s}
.sub05 ul.slide_more li .img::after{content: '\2b'; position: absolute; top: calc(50% - 2.8rem); left: calc(50% - 2.8rem); opacity: 1; color: rgba(255, 255, 255, 0.2); font-size: 5.6rem; font-family: var(--awesome); z-index: 2; transition: opacity 0.2s}
.sub05 ul.slide_more li .img img{position: absolute; left: 0; top: 0; width: 100%; height: 100%; max-width: none; object-position: left; object-fit: cover}
.sub05 ul.slide_more li .txt{display: flex; flex-direction: column; position: absolute; bottom: 0; left: 0; width: 100%; padding: 4rem; color: #fff; z-index: 3}
.sub05 ul.slide_more li .txt span{position: absolute; left: 50%; transform: translateX(-50%); font-size: 1.8rem; font-family: var(--serif); font-weight: 700; line-height: 1em}
.sub05 ul.slide_more li .txt span small {font-size: 0.9em; font-family: var(--NotoSerif); font-weight: 500}
.sub05 ul.slide_more li .txt p{white-space: nowrap; opacity: 0; transform: translateX(1.5em); font-size: 3rem; font-weight: 700; line-height: 1.3; }
.sub05 ul.slide_more li .txt sub{ opacity: 0; transform: translateX(1.5em); margin-top: 10px; height: 0}
.sub05 ul.slide_more li .txt p.in_tit { margin-top: 1.5rem; font-size: 1.6rem; font-weight: var(--sub_cont_txt_we); line-height: 1.5; }
.sub05 ul.slide_more li.active{width: calc(100% - ((17.5%)*3 - 3rem))}
.sub05 ul.slide_more li.active a{}
.sub05 ul.slide_more li.active .img::before{height: 100%}
.sub05 ul.slide_more li.active .img::after{opacity: 0}
.sub05 ul.slide_more li.active .txt{}
.sub05 ul.slide_more li.active .txt span{left: auto; transform: translateY(calc(-100% - 1em))}
.sub05 ul.slide_more li.active .txt p{opacity: 1; transform: translateX(0); transition: opacity 0.5s, transform 0.5s}
.sub05 ul.slide_more li.active .txt sub{opacity: 1; height: auto; transform: translateX(0); transition: opacity 0.5s, transform 0.5s; transition-delay: 0.1s}

/*시력교정술비교*/
.sub5_1 .board_wrap { margin-top: 3rem; }
.sub5_1 .youtube_box {display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6rem; }
.sub5_1 .youtube_box .video {position: relative; width: 100%; padding-top: 56.5%; }
.sub5_1 .youtube_box video {position: absolute; left: 0; top: 0; width: 100% !important; height: 100% !important; object-position: center; object-fit: cover;
    border: none; outline: unset; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; filter:contrast(101%); -webkit-filter:contrast(101%); background-color:transparent;}

.ytp-info-panel-preview {display: none !important; opacity: 0 !important}
.sub5_1 .youtube_box .txt_box {margin-top: 3rem; text-align: center}
.sub5_1 .youtube_box .txt_box .sub_tit {font-weight: 600; color: #8899A6}
.sub5_1 .youtube_box .txt_box .deps3_tit { margin-top: 1rem}
.sub5_1 .youtube_box .txt_box .txt {margin-top: 2rem; line-height: 1.7; word-break: keep-all;}

/*올레이저 라식&라섹*/
.sub05 .sect { margin-top: var(--sect_mt); }
.sub5 .sect1,
.sub05 .sect1 {margin-top: 0}
.sub5_2 .sect3 .img { margin-top: 6rem; }
.sub5_2 .sect3 .board_cont { margin-top: var(--cont_mt); }

/*렌즈삽입술*/

.sub5_3 .point_cont { margin-top: var(--cont_mt) }
.sub5_3 .point_cont .right.type2 .img_box .cont .img_txt .txt_wrap { margin-top: 2rem; }
.sub5_3 .point_cont .right.type2 .img_box .cont .img_txt .txt_wrap .txt { display: flex; align-items: center; justify-content: flex-start; }
.sub5_3 .point_cont .right.type2 .img_box .cont .img_txt .txt_wrap .txt .color { width: 9%; height: 1.2rem; border-radius: 2em; flex-shrink: 0; }
.sub5_3 .point_cont .right.type2 .img_box .cont .img_txt .txt_wrap .txt .color.red { background-color: #D9001B; }
.sub5_3 .point_cont .right.type2 .img_box .cont .img_txt .txt_wrap .txt .color.blue { background-color: #027DB4; }
.sub5_3 .point_cont .right.type2 .img_box .cont .img_txt .txt_wrap .txt .in_tit { margin-left: 1rem; font-size: var(--sub_cont_txt); font-weight: 600; }
.sub5_3 .point_cont .right.type2 .img_box .cont .img_txt .txt_wrap .txt .in_tit.red { color: #D9001B; }
.sub5_3 .point_cont .right.type2 .img_box .cont .img_txt .txt_wrap .txt .in_tit.blue { color: #027DB4; }
.sub5_3 .point_cont .right.type2 .img_box .cont .img_txt .in_txt { margin-top: 2rem; color: #212121; font-weight: var(---sub_cont_txt_we); }
.sub5_3 .point_cont .right.type2 .img_box .cont .img_txt .in_tit + .in_txt { margin-top: 0; margin-left: 0.8rem; }

.sub5_3 .sect3 .img{margin-top: 6rem}
.sub5_3 .tab4 .board_wrap {margin-top: var(--cont_mt)}


.sub5_3 .sect4 {padding: var(--sect_bg_pd) 0; background-color: #F4F6FA}
.sub5_3 .sect4 .tit_box {text-align: center}
.sub5_3 .sect4 .cont_box {display: flex; margin-top: var(--cont_mt)}
.sub5_3 .sect4 .cont_box .box {display: flex; flex-direction: column; align-items: center ;width: 33.33%}

.sub5_3 .sect4 .cont_box .box .img {position: relative; width: 100%; padding-top: 32%; text-align: center;}
.sub5_3 .sect4 .cont_box .box .img img {position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%) ;width: 55%;}
.sub5_3 .sect4 .cont_box .box .cir_badge {position: relative; z-index: 2 ;margin-top: 6rem; }
.sub5_3 .sect4 .cont_box .txt_box {position: relative; margin-top: 1.5rem; width: 100% ;text-align: center;}
.sub5_3 .sect4 .cont_box .txt_box .tit {font-size: 2.4rem; font-weight: 600;}
.sub5_3 .sect4 .cont_box .txt_box .txt {margin-top: 1rem; line-height: 1.6; word-break: keep-all}
.sub5_3 .sect4 .cont_box .txt_box:before {content: "";position: absolute;left: 0;top: -3rem;width: calc(100% - 2px);height: 2px;background-image: url("../img/sub/dotted_line.png");opacity: 0.5;}
.sub5_3 .sect4 .cont_box .box:nth-child(1) .txt_box:after {content: "";position: absolute;width: 50%;height: 2.6rem;left: 0;top: -2.5rem;transform: translateY(-50%);background-color: #f4f6fa;}
.sub5_3 .sect4 .cont_box .box:nth-child(3) .txt_box:after {content: "";position: absolute;width: 50%;height: 2.6rem;right: 0;top: -2.5rem;transform: translateY(-50%);background-color: #f4f6fa;}


.sub5_5 .sect5 > .grid_box .img{margin-top: 6rem}
.sub5_4 .sect5 .point_cont {margin-top: 12rem}


.sub5_5 .sect5 .img + .deps4_tit {margin-top: 2rem; text-align: center;}
.sub5_5 .sect5 .point_cont {margin-top: 12rem}


.sub5_5 .sect3 .img {margin-top: 6rem}

.sub5_6_1 .sect1 {margin-top: var(--cont_mt)}
.sub5_6_1 .sect_bg {padding: var(--sect_bg_pd) 0; background-color: #F4F6FA}
.sub5_6_1 .sect_bg .top_cont .com_tab_box {margin-top: 6rem}
.sub5_6_1 .sect_bg .tab_cont {margin-top: var(--top_sect_mt)}

.qna_sect .list {border-top: 2px solid var(--blue);}
.qna_sect .list li {border-bottom: 1px solid #eee; cursor: pointer; transition: all .3s}
.qna_sect .list .q_box{display: flex; align-items: center; padding: 4rem}
.qna_sect .list .q_box .tit_box {display: flex; align-items: flex-start}
.qna_sect .list .en {display: flex;justify-content: center;width: 4.5rem;height: 4.5rem;margin-top: -0.7rem; flex-shrink: 0; line-height: 4.3rem;border-radius: 50%;font-size: 2rem;color: #fff; background-color: #8899A6; font-family: var(--NotoSerif);}
.qna_sect .list .q_box .tit_box .tit {margin-left: 2rem; font-size: var(--deps4_tit); font-weight: 700}
.qna_sect .list .q_box .icon {margin-left: auto; line-height: 1}
.qna_sect .list .q_box .icon svg {width: 2.5rem; height: auto}
.qna_sect .list .q_box .icon .minus {display: none}
.qna_sect .list .a_box {margin: 0 4rem; padding:4rem; border-top: 1px solid #eee; display: none}
.qna_sect .list .a_box .txt_box {display: flex; align-items: flex-start}
.qna_sect .list .a_box .txt_box .en  {background-color: var(--blue);}
.qna_sect .list .a_box .txt_box .txt {margin-left: 2rem; word-break: keep-all}

.qna_sect .list li.on {background-color: #F4F6FA}

.qna_sect .list li.on .icon .minus {display: block}
.qna_sect .list li.on .icon .plus {display: none}

.sub5_6_2 .sect1 {margin-top: var(--top_sect_mt)}
.sub5_6_2 .war_box {margin-top: var(--cont_mt)}


/*안구 건조증*/

.sub6_1 .sect_bg {margin-top: var(--sect_mt); padding: var(--sect_mt) 0; background-color: #F4F6FA}
.sub6_1 .sect_bg .right .img_box {margin-top: 6rem}
/*.sub6_1 .sect_bg .right .img_box + .img_com_cont {margin-top: 3rem}*/
.sub6_1 .sect4 .img_cont_cont {margin-top: 6rem}
.sub6_1 .sect5 {margin-top: var(--sect_mt);}


.sub6_1 .sect2 ,
.sub6_1 .sect3 {margin-top: var(--sect_mt)}
.sub6_1 .sect3 .right .cir_box {display: flex; align-items: center; justify-content: space-between; width: 110rem; max-width: 100%; margin-top: 6rem}
.sub6_1 .sect3 .right .cir_box .cir {position: relative; width: 50%; height: 18rem; background: #F4F6FA; border-radius: 500px}
.sub6_1 .sect3 .right .cir_box .cir .txt_box {position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 100%; text-align: center}
.sub6_1 .sect3 .right .cir_box .cir .txt_box span { font-weight: 600; color: #8899A6}
.sub6_1 .sect3 .right .cir_box .cir .txt_box .deps3_tit {margin-top: 5px;}
.sub6_1 .sect3 .right .cir_box .svg {display: flex; align-items: center;  margin: 0 7rem}
.sub6_1 .sect3 .right .cir_box .svg svg{height: 3.2rem;}

.sub6_1 .sect6 {margin-top: var(--sect_mt);}
.sub6_1 .sect6 .img {margin-top: 6rem}
.sub6_1 .sect6 .img.ipl {position: relative; padding-top: 35%; background-color: var(--blue); text-align: center; overflow: hidden}
.sub6_1 .sect6 .img.ipl img {position: absolute; left: 50%; bottom: 0; transform: translate(-50%,10%); width: 100%; height: 100%; object-position: center; object-fit: contain}
.sub6_1 .sect6 .line_list.type2 {margin-top: 6rem}


.sub6_1 .sect7 {margin-top: var(--sect_mt);}
.sub6_1 .sect7 .point_cont {margin-top: 10rem}


.sub6_2 .sect{margin-top: var(--sect_mt);}
.sub6_2 .sect.sect1 {margin-top: var(--top_sect_mt) }


.sub6_2_1 .sect6 .self_chk {margin-top: 6rem}
.sub6_2_1 .sect6 .self_chk .img {width: 50%; margin: 0 auto}
.sub6_2_1 .sect6 .self_chk .txt_box {margin-top: 3rem; text-align: center}
.sub6_2_1 .sect6 .self_chk .txt_box p { word-break: keep-all; }
.sub6_2_1 .sect6 .self_chk .txt_box .cont_tit {margin-top: 2rem}

.sub6_2_1 .sect7 .img {margin-top: 6rem}
.sub6_2_1 .sect7 .img_txt {margin-top: 3rem; word-break: keep-all}


/*안질환_망막_망막박리*/
.war_box { padding: 6rem; background-color: #F4F6FA; }
.war_box .deps3_tit { margin-bottom: 3rem; font-weight: 700; }
.war_box .txt_box .txt { display: flex; position: relative; margin-top: 1.2rem; word-break: keep-all; }
.war_box .txt_box .txt_cir {background-color: var(--blue);}


/*안질환_망막_망막변성*/
.step_cont.content .left_cont { position: static; }


/*안질환_녹내장*/
.sub06_3 .sect { margin-top: var(--sect_mt); }

.sub06_3 .sect2 .cont { margin-top: 6rem; }
.sub06_3 .sect2 .cont .cir_wrap { display: flex; align-items: center; justify-content: center; text-align: center; }
.sub06_3 .sect2 .cont .cir_wrap .cir { display: flex; align-items: center; justify-content: center; width: 18rem; height: 18rem; border-radius: 100%; border: 1.5px solid var(--blue); color: var(--blue); flex-shrink: 0; }
.sub06_3 .sect2 .cont .cir_wrap .cir.fill { background-color: var(--blue); color: #fff; }
.sub06_3 .sect2 .cont .cir_wrap .round_wrap { display: flex; align-items: center; justify-content: center; width: 50%; }
.sub06_3 .sect2 .cont .cir_wrap .round { display: flex; align-items: center; justify-content: center; width: 100%; height: 18rem; padding: 0 2em; background-color: rgba(233,237,245,0.6); border-radius: 10rem; color: var(--blue); }
.sub06_3 .sect2 .cont .cir_wrap .round + .round { margin-left: -2em; }
.sub06_3 .sect2 .cont .cir_wrap .arr { width: 2rem; height: 3rem; margin: 0 3rem; }
.sub06_3 .sect2 .cont .cir_wrap .arr svg { width: 100%; height: 100%; fill: #E0E0E0; }

.sub06_3 .sect7 .graph_3d {margin-top: 6rem}

.sub06_3 .graph_3d {background-color: #F4F6FA; padding: 14rem 12% 12rem}
.sub06_3 .graph_3d .graph_bg {display: flex; flex-direction: column; justify-content: space-between; position: absolute; width: 100%; height: 100%; left: 0; bottom: 0;}
.sub06_3 .graph_3d .graph_bg .line {position: relative;width: 100%; height: 1px; border-top:2px dashed rgba(0,0,0,0.2)}
.sub06_3 .graph_3d .graph_bg .line:last-child {border: none}
.sub06_3 .graph_3d .graph_bg .line span {position: absolute; left: -10px; top: 50%; transform: translate(-100%,-50%) ;font-size: 1.8rem; font-weight: 600; color: rgba(0,0,0,0.2)}
.sub06_3 .graph_3d .graph_box {position: relative;display: flex; justify-content: center; align-items: flex-end; height: 40rem; border-bottom: 2px solid #E0E0E0;}
.sub06_3 .graph_3d .graph_box .bot_txt {position: absolute; left: 50%; bottom: -20px; transform: translate(-50%,100%); width: 100%; font-size: var(--deps4_tit); color: var(--blue); font-weight: 600; text-align: center}
.sub06_3 .graph_3d .graph {position: relative; z-index: 2}
.sub06_3 .graph_3d .graph + .graph {margin-left: 10rem}
.sub06_3 .graph_3d .graph .num {position: absolute; top: -10px; left: 50%; transform: translate(-50%,-100%);font-weight: 800; font-size: 2.2rem; text-align: center; line-height: 1.3; white-space: nowrap; color: #94a4b1}
.sub06_3 .graph_3d .graph .bar {position: relative; width: 10rem; background-color: #94a4b1;transition: height 1s ease-out }
.sub06_3 .graph_3d .graph .bar:before {content: "";position: absolute; left: 0; top: 0; width: 50%; height: 100%; background-color: rgba(0,0,0,0.05)}
.sub06_3 .graph_3d .graph .year {position: absolute;bottom: -5px;left: 45%;transform: translate(-50%,100%); color: var(--blue) ;white-space: nowrap; font-size: 1.6rem}

.sub06_3 .graph_3d .graph.active .num{color: var(--blue);}
.sub06_3 .graph_3d .graph.active .bar {background-color:#203b50}
.sub06_3 .graph_3d .graph.active .bar:before {background-color:#173448}
.sub06_3 .graph_3d .graph.active .year {font-weight: 500}

.sub06_3 .graph_3d .graph_box .graph:nth-child(1) .bar,
.sub06_3 .graph_3d .graph_box .graph:nth-child(2) .bar,
.sub06_3 .graph_3d .graph_box .graph:nth-child(3) .bar{height: 0}

.sub06_3 .graph_3d .graph_box.active .graph:nth-child(1) .bar {height: calc(40rem * 0.1)}
.sub06_3 .graph_3d .graph_box.active .graph:nth-child(2) .bar {height: calc(40rem * 0.77); transition-delay: 0.2s}


/*안질환_결막모반*/
.sub06_4 .sect { margin-top: var(--sect_mt); }

.sub06_4 .sect1 {margin-top: 0}


.sub06_4 .sect2 { margin-top: var(--top_sect_mt); }
.sub06_4 .sect2 .box_wrap { margin-top: 4rem; }

/*안질환_안내주사*/
.sub06_5 .sect { margin-top: var(--sect_mt); }
.sub06_5 .sect1 {margin-top: 0}


.sub07_4 .cont_top_txt {display: flex; justify-content: space-between; align-items: flex-end}
.sub07_4 .cont_top_txt .cou_btn {display: block; width: 16rem; height: 4.5rem; line-height: 4.6rem; font-size: 1.6rem; font-weight: 500; border-radius: 100px; background-color: var(--blue); color: #fff; text-align: center}

.sub07_6 .in {width: 104rem}


/*서브 공용 콘텐츠*/

/*.cir_com_box {display: flex}*/
/*.cir_com_box .cir .txt_box {position: absolute; display: flex; align-items: center; justify-content: center; left: 0 ;top: 0; width: 100%; height: 100%; }*/
/*.cir_com_box .cir .txt_box .sub_tit {font-size: 1.8rem; color: #8899A6}*/

/*.cir_com_box.type4 .cir {position: relative; flex-shrink: 0; width: 27.25%; height: 18rem; border-radius: 100px; background-color: rgba(244,246,250,0.9)}*/
/*.cir_com_box.type4 .cir + .cir {margin-left: -3%}*/


/*마이페이지*/
.my_page .in {width: 104rem}
.my_page .write_box {margin-top: 12rem; padding-bottom: 6rem; border-bottom: 1px solid #EEEEEE}
.my_page .inp_list {display: flex; align-items: center}
.my_page .inp_list + .inp_list {margin-top: 3rem}
.my_page .inp_list .left {min-width: 16rem}
.my_page .inp_list .right {width: 100%}
.my_page .inp_list.id .right {display: flex; align-items: center}
.my_page .inp_list.id .ico_box .ico {margin-right: 1rem;}
.my_page .inp_list.id .ico_box .ico {display: flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; border-radius: 50%;}
.my_page .inp_list.id .ico_box .ico.kakao { background-color: #F8D900;}
.my_page .inp_list.id .ico_box .ico.naver { background-color: #03BA49;}
.my_page .inp_list.id .ico_box .ico svg {height: 1.5rem}

.my_page .inp_list.pw {align-items: flex-start}
.my_page .inp_list.pw .left {transform: translateY(30%)}
.my_page .inp_list.pw .inp + .inp {margin-top: 10px}
.my_page .inp_list.pw .btn_box {display: flex; justify-content: flex-start; margin-top: 0; }
.my_page .inp_list.pw .inp_wrap + .inp_wrap { margin-top: 1rem; }
.my_page .inp_list.pw .btn_box.on { justify-content: flex-end; margin-top: 2rem; }


.my_page .inp_list.consent .view_btn {margin-left: 3rem; font-size: 1.6rem; font-weight: 500; color: #6D87A8; border-bottom: 1px solid #6D87A8}
.my_page .inp_list.consent .chk_btn {margin-left: auto}
.my_page .inp_list.consent .chk_btn label {display: flex; align-items: center; cursor: pointer; padding: 5px 1.5rem; border: 1px solid #707070; border-radius: 50px ;font-size: 1.5rem; font-weight: 500}
.my_page .inp_list.consent .chk_btn svg {margin-right: 5px; height: 1.6rem}

.my_page .inp_list.consent .chk_btn input:checked + label {background-color: #707070; color: #fff}
.my_page .inp_list.consent .chk_btn input:checked + label svg {fill: #fff}

.my_page .inp_list.mark .left {min-width: 0; margin-right: 5em}
.my_page .inp_list.mark .radio_box {display: flex}
.my_page .inp_list.mark .radio_box .box + .box {margin-left: 20px}
.my_page .inp_list.mark .radio_box .box label {display: flex; align-items: center; cursor: pointer}
.my_page .inp_list.mark .radio_box .box .chk {position: relative; display: block; width: 16px; height: 16px; border-radius: 50%; border: 2px solid #177FBB}
.my_page .inp_list.mark .radio_box .box .chk:before {content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%) ;width: 6px; height: 6px; background-color:#177FBB; border-radius: 50%; opacity: 0}
.my_page .inp_list.mark .radio_box .box .chk + span {margin-left: 8px}
.my_page .inp_list.mark .radio_box .box input:checked + label .chk:before {opacity: 1}

.my_page .btn_wrap {margin-top: 6rem}
.my_page .btn_wrap .btn5 { min-width: 12.5rem }
.my_page .btn_wrap .btn5 + .btn5 {margin-left: 1.5rem}


.my_page .inp_list .inp .ico { position: absolute; right: 15px; top: 50%; transform: translateY(-50%); }
.my_page .inp_list .inp .ico i { display: none; }
.my_page .inp_list .inp .ico.checked i { display: block; }
.my_page .inp_list .inp .ico.checked .fail { display: block; }
.my_page .inp_list .inp .ico.checked.enable i.sus { display: block; }
.my_page .inp_list .inp .ico.checked.unable i.sus { display: none; }
.my_page .inp_list .inp .ico.checked.enable i.fail { display: none; }
.my_page .inp_list .inp .ico.checked.unable i.fail { display: block; }
.my_page .inp_list .inp .ico .sus { color: var(--blue); }
.my_page .inp_list .inp .ico .fail { color: red; }
.my_page .inp_list .name { margin-bottom: 8px; font-size: 15px; font-weight: 700; }


/* 게시판 타입 */


/*게시판 없을 떄????*/
.empty_box {margin-top: 12rem; display: flex; flex-direction: column; align-items: center}
.empty_box img {width: 30rem; opacity: 0.5}
.empty_box span {margin-top: 10px; margin-top: 15px}


/* 게시판 상단 */
.list_top {display: flex; align-items: flex-end; justify-content: space-between}
.list_top .left {color: #9e9e9e; font-size: 1.6rem}
.list_top .not_empty_cnt{display: none}
.list_top .left span {font-size: 1em; font-weight: 500; color: var(--blue)}
.list_top .search_box {margin-left: auto}
.list_top .sch_inp {display: flex; align-items: center; justify-content: space-between; width: 40rem; height: 4.2rem; padding-bottom: 1.5rem; border-bottom: 1px solid #c7cacf; line-height: 4.2em;}
.list_top .sch_inp input {width: 100%; margin-right: 10px; font-size: 1.7rem; font-weight: var(--sub_cont_txt_we); }
.list_top .sch_inp input::placeholder {color: #BDBDBD}
.list_top .sch_inp .btn {line-height: 1; display: inline-block}
.list_top .sch_inp .btn svg{width: 1.5em; height: auto; fill: #c7cacf;}


/*리스트 btn*/

.review_btn {display: inline-flex; align-items: center; position: relative; padding: 1em; border-bottom: 2px solid; color: #fff; font-size: 1.4rem; font-weight: 700; line-height: 1em}
.review_btn svg{fill: #fff; margin-left: 0.75em; transition: all .3s}


/*뉴스 리스트*/
.com_tab_box + .review_list,
.com_tab_box + .news_list {margin-top: 10rem}
.news_list .list_box {border-top: 1px solid var(--blue); margin-top: 3rem}
.news_list .list_box li {border-bottom: 1px solid #eee}
.news_list .list_box .q_box,
.news_list .list_box li > a {display: flex; align-items: center; padding: 2rem 3rem; transition: all .3s}

.news_list .list_box .cir_badge {margin-right: 1rem}
.news_list .list_box .tit {display: flex; align-items: center; flex: 1; padding-right: 30px; overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
.news_list .list_box .tit > svg {height: 1.6rem; fill: #BDBDBD; margin-right: 10px}
.news_list .list_box .name { min-width: 3.5em; font-size: 1.4rem; font-weight: 300; color: #757575; text-align: center}
.news_list .list_box .date {min-width: 5.1em; font-size: 1.4rem; font-weight: 300; color: #757575; text-align: center}
.news_list .list_box .name + .date {margin-left: 20px}
.news_list .list_box .state {display: inline-block; width: 8rem; height: 3rem; margin-left: 4rem; line-height: 3.1rem; background-color: #EEEEEE; color: #BDBDBD; font-size: 1.5rem; font-weight: 500; border-radius: 50px; text-align: center}
.news_list .list_box .state.clear {background-color: #177FBB; color: #fff}

.news_list .q_box {cursor: pointer}
.news_list .q_box .badge_box {min-width: 12rem}
.news_list .q_box .icon .minus {display: none}
.news_list  li.on .q_box .icon .plus {display: none}
.news_list  li.on .q_box .icon .minus {display: block}

.news_list .a_box { padding: 4rem 8rem 4rem 15rem; font-size: 1.6rem; background-color: #F4F6FA; display: none; cursor: pointer}
.news_list .a_box .file_box {display: flex; margin-top: 2rem; margin-right: -10px; margin-bottom: -10px}
.news_list .a_box .file_box a {position: relative; margin-right: 10px; margin-bottom: 10px; color: #69B6FA; text-decoration-line: underline; text-decoration-color: #69B6FA; padding-left: 2rem}
.news_list .a_box .file_box a:before { content: "\f0c6";  font-family: "Font Awesome 6 Pro"; position: absolute; left: 0; top: 50%; transform: translateY(-50%)}

.news_list .a_box .link {position: relative}
.news_list .a_box .link {position: relative; margin-right: 10px; margin-bottom: 10px; color: #69B6FA; text-decoration-line: underline; text-decoration-color: #69B6FA; padding-right: 2rem}
.news_list .a_box .link:before { content: "\f08e";  font-family: "Font Awesome 6 Pro"; position: absolute; right: 0; top: 50%; transform: translateY(-50%)}


/*리뷰 리스트*/
.review_list .list_box {margin-top: 3rem;}
.review_list .list_box {display: grid; grid-template-columns: 1fr 1fr; gap: 6rem;}
.review_list .list_box li a {display: flex; align-items: center}
.review_list .list_box li .left {width: 50%}
.review_list .list_box li .left .img {position: relative; padding-top: 100%; background-color: var(--blue);}
.review_list .list_box li .left .img:before {content:""; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%) ;width: 40%; height: 40%; background: url("/inc/img/common/logo_col_white.svg") no-repeat center / contain ;}
.review_list .list_box li .left .img img {position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-position: center; object-fit: cover;}
.review_list .list_box li .right {width: 50%; margin-left: 3.5rem}
.review_list .list_box li .right .badge_box {display: flex; flex-wrap: wrap; margin-right: -5px; margin-bottom: -5px}
.review_list .list_box li .right .badge_box .cir_badge {margin-right: 5px; margin-bottom: 5px}
.review_list .list_box li .right .txt_box {margin-top: 2rem}
.review_list .list_box li .right .txt_box .tit {font-size: 3rem; font-weight: 600}
.review_list .list_box li .right .txt_box .txt {margin-top: 3rem; color: #757575; word-break: keep-all}
.review_list .list_box li .right .review_btn {margin-top: 5rem; color: var(--blue)}
.review_list .list_box li .right .review_btn svg {fill: var(--blue)}

.review_list #listView,
.news_list #listView,
.thumb_list #listView {min-height: 85rem}

/* 썸네일 리스트 타입 - 미디어, 유튜브 */
.thumb_list{}

.thumb_list .list_box{display: grid; grid-template-columns: repeat(4, 1fr); gap: 4.5rem; margin-top: 30px}
.thumb_list .list_box li{}
.thumb_list .list_box li a{display: block}
.thumb_list .list_box li .img{position: relative; z-index: 1; height: 0; padding-top: 68%}
.thumb_list .list_box li .img img{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; object-fit: cover}
.thumb_list .list_box li .img.empty{background-color: #F4F6FA;}
.thumb_list .list_box li .img.empty img {position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-position: center; object-fit: cover;}
.thumb_list .list_box li .img.empty:before {content:""; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%) ;width: 51%; height: 40%; background: url("/inc/img/common/logo_gray.svg") no-repeat center / contain ;}
.thumb_list .list_box li .txt{transform: translateY(-1px); padding: 2rem; transition: all .3s}
.thumb_list .list_box li .txt p{display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; height: 3.2em; font-weight: 700; line-height: 1.6em}
.thumb_list .list_box li .txt .date {margin-top: 1.5rem; font-size: 1.4rem; font-weight: 300; color: #757575;}

.thumb_list.youtube .list_box li .img {padding-top: 100%}


.sub07_2 .thumb_list .list_box li .txt p {height: auto; -webkit-line-clamp:1}

/* 게시판 버튼 */
.list_btn_box{display: flex; justify-content: center; margin-top: 8rem}
.list_btn_box .list_btn{padding: 0.75em 0em; min-width: 18.5rem ;border: 1px solid var(--blue); font-size: 1.6rem; font-weight: 500; border-radius: 100px; transition: all .3s; text-align: center}
.list_btn_box .list_btn + .list_btn {margin-left: 1rem}


/* 페이징 */
.pagination { display: flex; align-items: center; justify-content: center; margin-top: 12rem}
.pagination > a {line-height: 1}
.pagination > a svg { fill: #c7cacf; transition: all 0.3s; height: 2.2rem}
.pagination .num_list { display: flex; align-items: center; justify-content: center; margin: 0 2rem; }
.pagination .num_list li { position: relative; width: 1.78em; height: 1.78em; margin: 0 0.8rem; font-size: 1.8rem; border-radius: 50%; text-align: center; transition: all 0.3s; font-weight: var(--sub_cont_txt_we); }
.pagination .num_list li a { position: absolute; left: 50%; top: 50%; display: block; width: 100%; height: 100%; transform: translate(-50%, -50%); line-height: 1.85em; transition: all 0.4s; }
.pagination .num_list li a:before { content: ''; position: absolute; left: 50%; top: 50%; width: 3.5rem; height: 3.5rem; border-radius: 50%; background-color: #173348; color: #fff; transform: translate(-50%, -50%) scale(0); opacity: 0; transition: all 0.4s; z-index: -1; }
.pagination .num_list li.active a { color: #fff; font-weight: 700}
.pagination .num_list li.active a:before { transform: translate(-50%, -50%) scale(1); opacity: 1; }
.pagination .next { margin-right: 3rem; }
.pagination .prev { margin-left: 3rem; }


/*인풋공용*/
.inp_list .left {font-weight: 600}
.inp_list .inp { position: relative; flex: 1}
.inp_list .inp input {  width: 100%; height: 6rem; padding: 2rem; border-radius: 5px; border: 1px solid #c7cacf; background-color: #fff; font-size: 1em}
.inp_list .inp textarea::placeholder,
.inp_list .inp input::placeholder{color: #BDBDBD; font-size: 1em}
.inp_list .inp textarea {padding: 2rem; width: 100%; min-height: 1.8rem; resize: none; border: 1px solid #c7cacf; font-size: 1em; outline: none; border-radius: 5px;}

.consent_chk svg {height: 1.9rem; margin-right: 0.5rem; margin-top: -0.25rem ;vertical-align: middle;}
.consent_chk .n {fill: #c7cacf;}
.consent_chk .y {display: none; fill: #177FBB}
.consent_chk span {font-size: 1.6rem}
.consent_chk label {cursor: pointer}
.consent_chk input:checked + label .n {display: none}
.consent_chk input:checked + label .y {display: inline}

/* 이전글 다음글 */
.prev_next{margin-top: 8rem; border-top: 1px solid #eee}
.prev_next li{display: grid; grid-template-columns: auto 1fr; gap: 0 14rem; padding: 2.2rem 6rem; border-bottom: 1px solid #eee}
.prev_next li p{display: flex; align-items: center; transform: translateX(-1em); font-size: var(--sub_txt); font-weight: 700}
.prev_next li p svg{transform: translateX(-100%); width: 1em}
.prev_next li a{flex: 1 1 0; min-width: 0; font-size: var(--sub_txt); font-weight: var(--sub_cont_txt_we); overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
.prev_next li.end{}
.prev_next li.end p svg{fill: #bdbdbd}
.prev_next li.end a{color: #bdbdbd; cursor: default}


/* 뷰 페이지 기본 */
/*.view_page{margin-top: 16rem}*/
.view_page .in {width: 124rem}
.view_page .tit_box{text-align: center}
.view_page .tit_box .badge {display: none; margin-bottom: 2.5rem; padding: 0 1.2rem; height: 3rem; line-height: 3rem; border:1px solid var(--blue); border-radius: 50px; font-size: 1.6rem; font-weight: 600; font-family: var(--NotoSerif);}
.view_page .tit_box .cir_badge + .tit {margin-top: 10px}
.view_page .tit_box .tit{margin-bottom: 3rem; font-size: var(--sub_cont_tit); font-weight: 700}

.view_page .tit_box .date{color: #757575; font-size: 1.6rem}
.view_page .tit_box .date span + span {margin-left: 30px}
.view_page .view_cont{ margin-top: 6rem; border-top: 1px solid var(--blue)}
.view_page .view_cont .cont {padding: 8rem 6rem 6rem;}
.view_page .view_cont .txt_box{margin-top: 3.33em; font-size: var(--sub_txt)}
.view_page .info_cont ol {display: flex; padding: 2rem 6rem; border-bottom: 1px solid #eee}
.view_page .info_cont li {display: flex; align-items: center}
.view_page .info_cont li + li {margin-left: 8rem}
.view_page .info_cont li .left {font-weight: 600}
.view_page .info_cont li .right {display: flex; align-items: center}
.view_page .info_cont li .right:before {content: ""; width: 1px; height: 1.8rem; margin: 0 2rem; background-color: #eee}
.view_page .info_cont li .sight {display: flex; align-items: center; padding: 0.7rem 1.5rem; margin-left: 1rem; background-color: #F4F6FA; border-radius: 50px;}
.view_page .info_cont li .sight span {font-weight: 600; font-size: 1.7rem}
.view_page .info_cont li .sight svg {margin: 0 1rem; fill: #8899A6; opacity: 0.5}
.view_page .info_cont li .sight + .txt {margin-left: 2rem}
.view_page .attach_file{display: flex; align-items: center; padding: 1.8rem 6rem; border-top: 1px solid #eee; border-bottom: 1px solid #eee}
.view_page .attach_file p{margin-right: 12rem; flex-shrink: 0; font-size: var(--sub_txt); font-weight: 700}
.view_page .attach_file ul{display: flex; flex-wrap: wrap; margin-bottom: -1rem; margin-right: -1rem}
.view_page .attach_file ul li{margin-right: 1rem; margin-bottom: 1rem}
.view_page .attach_file ul li a{display: inline-flex; position: relative; padding-left: 1.2em; color: #69B6FA; font-size: var(--sub_txt);text-decoration-line: underline;text-decoration-color: #69B6FA;}
.view_page .attach_file ul li a::before{content: ''; position: absolute; top: 0.25em; left: 0; width: 1em; height: 1em; background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 448 512"><style>path{fill: %2369B6FA}</style><path d="M364.2 83.8c-24.4-24.4-64-24.4-88.4 0l-184 184c-42.1 42.1-42.1 110.3 0 152.4s110.3 42.1 152.4 0l152-152c10.9-10.9 28.7-10.9 39.6 0s10.9 28.7 0 39.6l-152 152c-64 64-167.6 64-231.6 0s-64-167.6 0-231.6l184-184c46.3-46.3 121.3-46.3 167.6 0s46.3 121.3 0 167.6l-176 176c-28.6 28.6-75 28.6-103.6 0s-28.6-75 0-103.6l144-144c10.9-10.9 28.7-10.9 39.6 0s10.9 28.7 0 39.6l-144 144c-6.7 6.7-6.7 17.7 0 24.4s17.7 6.7 24.4 0l176-176c24.4-24.4 24.4-64 0-88.4z"/></svg>') no-repeat center / contain; line-height: 1em}
.view_page .attach_file ul li a span {display: inline-block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100px;}

.view_page .cou_input {background-color: #F4F6FA; padding: 4rem 6rem}
.view_page .cou_input ul {display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0rem 3rem;}
.view_page .cou_input ul li { }
.view_page .cou_input ul li .left {margin-bottom: 1rem;}
.view_page .cou_input .bot {display: flex; align-items: center; margin-top: 3rem}
.view_page .cou_input .bot .g-recaptcha {margin-left: 20px;transform: scale(0.75); transform-origin: left center}
.view_page .cou_input .bot .btn {display: block; width: 12rem; height: 4.5rem; margin-left: auto; line-height: 4.4rem; font-size: 1.6rem; color: #fff; background-color: var(--blue)}
.view_page .cou_input .bot .all {margin-left: 10px; padding-bottom: 1px; font-weight: 600; font-size: 1.2rem; border-bottom: 1px solid #6D87A8; color: #6D87A8;}

.view_page .qa_cont {margin-top: 6rem; border-top: 1px solid var(--blue)}
.view_page .qa_cont .box {display: flex; padding: 4rem;}
.view_page .qa_cont .box .cir {display: flex; justify-content: center; width: 4.5rem; height: 4.5rem; line-height: 4.2rem ;border-radius: 50%; font-size: 2rem; color: #fff; font-family: var(--NotoSerif)}
.view_page .qa_cont .box .txt {flex: 1; margin-left: 4rem; line-height: 1.7}
.view_page .qa_cont .q_box .cir {background-color: #8899A6}
.view_page .qa_cont .a_box {background-color: #F4F6FA}
.view_page .qa_cont .a_box .cir {background-color: var(--blue)}
.view_page .qa_cont .wait_box {background-color: #eee; padding: 8rem 0}
.view_page .qa_cont .wait_box p {font-size: 2.4rem; font-weight: 600; text-align: center}


    /*등록 페이지*/

.write_page .top_cont {text-align: right; margin-bottom: 1.5rem}
.write_page .blue {color: #177FBB;}
.write_page p {color: #9E9E9E; font-size: 1.4rem; font-weight: 300}

.write_page .write_box {padding-top: 6rem; border-top: 1px solid var(--blue)  }
.write_page .write_box .form {width: 120rem; max-width: 100%; margin: 0 auto}
.write_page .write_box .form .inp_list {display: flex; align-items: center}
.write_page .write_box .form .inp_list.start {align-items: flex-start}
.write_page .write_box .form .inp_list.start.type2 .left{transform: translateY(60%)}
.write_page .write_box .form .inp_list.badge {display: flex; align-items: flex-start}
.write_page .write_box .form .inp_list.badge .left{transform: translateY(1rem)}
.write_page .write_box .form .inp_list + .inp_list {margin-top: 2.5rem}
.write_page .write_box .form .inp_list.badge + .inp_list.badge {margin-top: 2.5rem}
.write_page .write_box .form .inp_list.badge + .inp_list {margin-top: 2.5rem}
.write_page .write_box .form .inp_list .left {width: 16rem; flex-shrink: 0}
.write_page .write_box .form .inp_list .right {flex: 1;}
.write_page .write_box .form .inp_list .right .g-recaptcha {transform: scale(0.75); transform-origin: left center}
.write_page .write_box .form .inp_list .type_badge {display: flex; flex-wrap: wrap; margin-right: -10px; margin-bottom: -10px}
.write_page .write_box .form .inp_list .type_badge .badge {margin-right: 10px; margin-bottom: 10px}
.write_page .write_box .form .inp_list .type_badge .badge label {display: inline-block; padding: 0 2rem; height: 4.5rem; line-height: 4.4rem; border-radius: 50px; font-weight: 500; color: #BDBDBD; border: 1px solid #c7cacf;cursor: pointer;}
.write_page .write_box .form .inp_list .type_badge .badge input:checked + label {border-color: var(--blue); color: var(--blue)}
.write_page .write_box .form .inp_list .sub_txt {margin-top: 1rem; color: #9E9E9E;}
.write_page .write_box .form .inp_list.auto .right {display: flex}
.write_page .write_box .form .inp_list .auto_txt {width: 20rem; height: 6rem;line-height: 5.9rem; margin-right: 1rem ;background-color: #F4F6FA; text-align: center; font-family: var(--NotoSerif); font-size: 2rem; font-weight: 600; color: #8899A6}
.write_page .write_box .form .inp_list.auto #captchaNum {width: 100px;}

.write_page .write_box .form .inp_list.auto .right .captcha { display: flex; align-items: center; justify-content: flex-start; margin-right: 2rem; }
.write_page .write_box .form .inp_list.auto .right .captcha .img { display: flex; align-items: center; justify-content: center; height: 6rem; padding: 0 1rem; background-color: #F4F6FA; border-radius: 5px; overflow: hidden; }
.write_page .write_box .form .inp_list.auto .right .captcha a { display: flex; align-items: center; justify-content: center; height: 6rem; padding: 0 0.5rem; }
.write_page .write_box .form .inp_list.auto .right .captcha a svg { fill: #8899A6; }

.write_page .write_box .form .inp_list.consent {flex-wrap: wrap; margin-top: 6rem}
.write_page .write_box .form .inp_list.consent .left {width: 100%; display: flex;}
.write_page .write_box .form .inp_list.consent .left .blue {margin-right: 0.4rem}
.write_page .write_box .form .inp_list.consent .left .consent_chk {margin-left: auto}
.write_page .write_box .form .inp_list.consent .cont_box {padding: 2rem; margin-top: 2rem; flex: 1; line-height: 1.7 ;border: 1px solid #c7cacf; font-size: 1.4rem; font-weight: 300; border-radius: 5px;}


/*404*/
.un_found_wrap { display: flex; align-items: center; justify-content: center; width: 100%; height: 100vh; background-color: #F4F6FA; }
.un_found_wrap .box { display: flex; align-items: center; justify-content: center; flex-direction: column; }
.un_found_wrap .box .ico { font-size: 9.6rem; }
.un_found_wrap .box .ico svg { fill: rgba(136,153,166,0.3); }
.un_found_wrap .box .tit { font-size: 3rem; font-weight: 600; color: #173348; }
.un_found_wrap .box .txt { margin-top: 2rem; text-align: center; color: #173348; font-weight: 300; }
.un_found_wrap .list_btn_box { margin-top: 6rem; }


@media screen and (max-width: 2000px) {
    .sub01_1 .top_img .top_cont .tit_box .tit { font-size: 10rem}
}

@media screen and (min-width: 1241px) {
    .com_tab_box .btn:hover {border-color: var(--blue); color: var(--blue); }
    .top_tab a:hover {color: var(--blue);}
    .top_tab a:hover:before {width: 100%}

    .my_page .inp_list.pw .btn5:hover {background-color: var(--blue); color: #fff; border-color: var(--blue)}

    .top_tab button:hover {color: var(--blue);}
    .top_tab button:hover:before {width: 100%}
    .time_cont .right .cont.naver .txt:hover svg {transform: translateX(5px)}
    .sub01_1 .sect5 .ci .down_wrap .btn:hover {background-color: var(--blue); color: #fff; }
    .sub01_1 .sect5 .ci .down_wrap .btn:hover svg {fill: #fff}
    .sub01_3 .sect3 .cont_wrap .right .txt_box .btn_wrap .btn:hover {background-color: var(--blue); color: #fff}
    .sub01_3 .sect3 .cont_wrap .right .txt_box .btn_wrap .btn.naver:hover {background-color: #17B75E; border-color: #17B75E}
    .sub01_3 .sect3 .cont_wrap .right .txt_box .btn_wrap .btn.kakao:hover {background-color: #FADA0A; border-color: #FADA0A; color: inherit}
    .sub01_3 .sect5 .parking .parking_list > li:hover {background-color: #F4F6FA}
    .sub02_2 .sect4 .tit_box .btn:hover {background-color: var(--blue); color: #fff}
    .review_btn:hover svg{transform: rotate(180deg)}
    .news_list .list_box > a:hover {background-color: #F4F6FA}
    .thumb_list .list_box li:hover .txt{background: #f4f6fa; box-shadow: inset 0px 0px 0px 1px #f4f6fa}
    .list_btn_box .list_btn:hover {background-color: var(--blue); color: #fff}
}


/* ===== 2026 서브 통합 (연세힐) — 이하 신규 페이지 CSS ===== */
/* 규약: docs/conventions/figma-page-build.md · 카탈로그: docs/conventions/front-components.md
   구조: [서브 공용 컴포넌트] → [페이지별 블록 .pg_{slug}] / 반응형은 inc/css/sub_resp.css / 토큰은 common.css :root 만 */

/* ───────────────────────── 서브 공용 컴포넌트 (2페이지 이상 공용 · 카탈로그 front-components.md) ───────────────────────── */

/* 서브 본문 공통 — 시안 Pretendard 전 스타일 자간 −2% (2026-09-18 검토 X7; Marcellus 제목은 .sect_tit 의 −0.01em 유지) */
.sub_cont {letter-spacing: -0.02em;}
.sub_cont {position: relative; width: 100%; overflow-x: clip;}
.sub_cont img {display: block;}
.sub_cont .i18n-ltr {direction: ltr; unicode-bidi: isolate;}

/* 서브탑(_Skin/include/sub-top.php) — 라벨 + 페이지명 + 오렌지 내비 pill. type_light(기본) / type_visual(_Skin/{idx}.meta.php 선언, 90rem 이미지) */
.sub_top {position: relative; background-color: #fff; z-index: 3;}
.sub_top .in {position: relative; z-index: 1;}
.sub_top.type_light {padding: calc(var(--hdH) + 12rem) 0 3rem;}
.sub_top .sub_top_label {font-size: var(--p2); font-weight: 700; line-height: 1; color: var(--point01);}
.sub_top .sub_top_tit {margin-top: 3rem; font-family: var(--en); font-size: 8rem; font-weight: 400; line-height: 1; letter-spacing: -0.02em; color: var(--gray90);}
.sub_top .sub_top_txt {margin-top: 2rem; font-size: var(--p3); line-height: 1.7; color: var(--gray50);}
.sub_top .sub_top_nav {position: relative; display: flex; align-items: center; gap: 2rem; height: 5rem; margin-top: 5rem; padding: 0 3rem; border-radius: 10rem; background-color: var(--point01); color: #fff; backdrop-filter: blur(25px);}
.sub_top .sub_top_nav .home {display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 1.4rem; height: 1.4rem; color: #fff;}
.sub_top .sub_top_nav .home svg {width: 100%; height: 100%;}
.sub_top .sub_top_nav .line {flex-shrink: 0; width: 1px; height: 1.1rem; background-color: rgba(255,255,255,0.4);}
.sub_top .sub_top_nav .sub_dropdown {position: relative;}
.sub_top .sub_top_nav .sub_dropdown > button {display: flex; align-items: center; justify-content: space-between; width: 100%; height: 5rem; font-size: var(--p6); font-weight: 500; line-height: 1.3; color: #fff; text-align: start;}
.sub_top .sub_top_nav .sub_dropdown > button .lbl {overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.sub_top .sub_top_nav .sub_dropdown > button .arr {flex-shrink: 0;width: 0.7em;height: auto;margin-inline-start: 2rem;transition: transform 0.3s;}
.sub_top .sub_top_nav .sub_dropdown.is-open > button .arr {transform: rotate(180deg);}
.sub_top .sub_top_nav .sub_dropdown > ul {display: none; position: absolute; top: calc(100% + 0.5rem); inset-inline-start: -1.5rem; z-index: 20; min-width: calc(100% + 3rem); max-width: calc(100vw - 4rem); padding: 1rem 0; border-radius: 1.5rem; background-color: #fff; box-shadow: 0 1rem 3rem rgba(0,0,0,0.12);}   /* 닫힘 = display:none (visibility 만으로는 절대 위치 폭이 남아 375 에서 가로 넘침) */
.sub_top .sub_top_nav .sub_dropdown.is-open > ul {display: block; animation: subDropIn 0.25s ease;}
@keyframes subDropIn {from {opacity: 0; transform: translateY(-0.5rem);} to {opacity: 1; transform: none;}}
.sub_top .sub_top_nav .sub_dropdown > ul a {display: block; padding: 1rem 2rem; font-size: var(--p5); font-weight: 500; line-height: 1.4; color: var(--gray90); white-space: nowrap;}
.sub_top .sub_top_nav .sub_dropdown > ul a:focus-visible {background-color: var(--grayBg2); color: var(--point01);}
@media screen and (min-width: 1241px) { .sub_top .sub_top_nav .sub_dropdown > ul a:hover {background-color: var(--grayBg2); color: var(--point01);} }
.sub_top .sub_top_nav .sub_dropdown > ul a.is-cur {font-weight: 700; color: var(--point01);}
.sub_top .sub_top_nav .smile {position: absolute; top: 50%; inset-inline-end: 3.5rem; width: 5rem; height: 1.5rem; transform: translateY(-50%);}
.sub_top.type_visual {display: flex; align-items: flex-end; height: 90rem; padding-bottom: 5rem; overflow: hidden; color: #fff; background-color: var(--gray90);}
.sub_top.type_visual .sub_top_bg {position: absolute; inset: 0; z-index: 0;}
.sub_top.type_visual .sub_top_bg img {width: 100%; height: 100%; object-fit: cover;}
.sub_top.type_visual .sub_top_bg::after {content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0.2) 0%, rgba(194,194,194,0) 27%), rgba(0,0,0,0.2);}
.sub_top.type_visual .in {width: var(--in);}
.sub_top.type_visual .sub_top_label {font-size: var(--p3);}
.sub_top.type_visual .sub_top_tit {margin-top: 1.5rem; line-height: 1.5; color: #fff;}
.sub_top.type_visual .sub_top_txt {color: rgba(255,255,255,0.85);}
.sub_top.type_visual .sub_top_nav {margin-top: var(--contMt1);}

/* 섹션 타이틀(피그마 "서브타이틀") — landing-common.css 베이스(.sect_desc/.sect_tit) 를 서브 시안 값으로 재정의. 리빌은 landing-common.js 자동 관찰 */
.sub_cont .sect_tit_box .sect_desc {margin-bottom: 2rem; font-size: var(--p2); font-weight: 600; line-height: 1; color: var(--point01);}
.sub_cont .sect_tit_box .sect_tit {font-family: var(--en); font-size: 7rem; font-weight: 400; line-height: 1.3; letter-spacing: -0.01em; color: var(--gray90);}
.sub_cont .sect_tit_box .sect_tit + .sect_txt {margin-top: 2rem; font-size: var(--p3); line-height: 1.7;}
.sub_cont .sect_tit_box.center {text-align: center;}
.sub_cont .sect_tit_box.wh .sect_tit, .sub_cont .sect_tit_box.wh .sect_txt {color: #fff;}
.sub_cont .sect_tit_box.wh_all .sect_desc, .sub_cont .sect_tit_box.wh_all .sect_tit, .sub_cont .sect_tit_box.wh_all .sect_txt {color: #fff;}
.sub_cont .sect_tit_box.orange .sect_tit {color: var(--point01);}   /* 13 Con_05: 오렌지 제목 */
.sub_cont .sect_tit_box.lg .sect_tit {font-size: var(--d1);}   /* 18 Con_02: 대표원장 이름 100px (17 의료진 이름과 같은 스케일) */

/* 설명 블록(피그마 "서브내용") */
.sub_desc_box .desc_tit {font-size: var(--h8); font-weight: 600; line-height: 1.5;}
.sub_desc_box .desc_txt {margin-top: 2rem; font-size: var(--p3); line-height: 1.7;}
.sub_desc_box .desc_txt:first-child {margin-top: 0;}   /* 부제 없는 설명 블록(37 등) — 제목→본문 간격 시안 50 유지 */
.sub_desc_box .desc_txt br {display: none;}
.sub_desc_box.center {max-width: 110rem; margin-left: auto; margin-right: auto; text-align: center;}
.sub_desc_box.wh {color: #fff;}
.sub_desc_box.center.wide {max-width: none;}   /* 13 Con_03: 1600 폭 설명 */

/* 히어로(About·임플란트 Con_01) — 풀블리드 90rem. 오버레이 = 검정 평면 틴트(기본 35%, 시안별 .dim_20/.dim_25/.dim_30/.dim_40/.dim_45/.dim_50/.dim_none) + 선택: .grad(하단 오렌지 그라데이션 — 13·18 시안만) · .vignette/.vignette_light(중앙 라디얼) · .blur(사진 2.5px 블러 — 21). 2026-09-18 검토 X2: 그라데이션을 opt-in 으로 전환 */
.sub_hero {position: relative; display: flex; align-items: center; height: 90rem; overflow: hidden; color: #fff; text-align: center;}
.sub_hero .hero_bg {position: absolute; inset: 0; z-index: 0; background-color: var(--gray90);}
.sub_hero .hero_bg img {width: 100%; height: 100%; object-fit: cover; object-position: center;}
.sub_hero .hero_bg::before {content: ''; position: absolute; inset: 0; z-index: 1; background-color: rgba(0,0,0,0.2);}
.sub_hero .hero_bg::after {content: ''; position: absolute; inset: 0; z-index: 1; display: none;}
.sub_hero.dim_flat .hero_bg::before, .sub_hero.dim_30 .hero_bg::before {background-color: rgba(0,0,0,0.2);}   /* 30% (41·42·43·24·36 …) — .dim_flat 은 구 이름 */
.sub_hero.dim_light .hero_bg::before, .sub_hero.dim_20 .hero_bg::before {background-color: rgba(0,0,0,0.2);}   /* 20% (27·31·33·34·38·39·45·22·23) — .dim_flat.dim_light 조합도 20% */
.sub_hero.dim_25 .hero_bg::before {background-color: rgba(0,0,0,0.1);}   /* 32·35·40 */
.sub_hero.dim_40 .hero_bg::before {background-color: rgba(0,0,0,0.1);}   /* 18·44 */
.sub_hero.dim_45 .hero_bg::before {background-color: rgba(0,0,0,0.1);}   /* 21 */
.sub_hero.dim_50 .hero_bg::before {background-color: rgba(0,0,0,0.1);}   /* 13 */
.sub18 .sub_hero .hero_bg::before,
.sub13 .sub_hero .hero_bg::before {display: none;}

.sub18 .sub_hero .hero_bg img,
.sub13 .sub_hero .hero_bg img {object-position: bottom;}

.sub_hero.dim_none .hero_bg::before {display: none;}   /* 47: 사진 자체 톤 */
.sub_hero.grad .hero_bg::after {display: block;    background: linear-gradient(180deg, rgba(255, 96, 17, 0) 65%, #f65e12 100%);}  
.sub_hero.vignette .hero_bg::after {display: block; background: radial-gradient(ellipse 55% 60% at 50% 55%, rgba(0,0,0,0.2), rgba(0,0,0,0) 100%);}   /* 25·37 시안: 중앙 라디얼(검정 60%→0 × 30%) */
.sub_hero.vignette_light .hero_bg::after {display: block; background: radial-gradient(ellipse 55% 60% at 50% 55%, rgba(0,0,0,0.1), rgba(0,0,0,0) 100%);}   /* 17·19 시안: 10% */
.sub_hero.blur .hero_bg img {filter: blur(2.5px); transform: scale(1.02);}   /* 21 시안 */
.sub_hero .in {z-index: 1;}
.sub_hero .hero_txt {max-width: 100%; margin: 0 auto;} /* 25 히어로 3줄(최장 ≈122rem) 수용 — 1240/768 은 sub_resp 가 폭 100% 처리 */
.sub_hero .hero_txt .tit {font-family: var(--en); font-size: 7rem; font-weight: 400; line-height: 1.3;}
.sub_hero .hero_txt .txt {margin-top: 2.5rem; font-size: var(--p3); font-weight: 500; line-height: 1.7;}
.sub_hero .hero_txt .txt > span {display: block;}
.sub_hero .hero_txt .txt > span + span {margin-top: 1.7em;}   /* 문단(팩의 빈 줄)을 span 으로 나눠 출력 — 문단 간격 = 빈 줄 1행(시안 13·18) */
.sub_js .sub_hero .hero_txt .tit, .sub_js .sub_hero .hero_txt .txt {opacity: 0; transform: translateY(3rem); transition: opacity 0.8s ease-out, transform 0.8s ease-out;}   /* body.sub_js 는 sub-common.js 가 부여 — JS 미실행 시 숨김 없음 */
.sub_js .sub_hero .hero_txt .txt {transition-delay: 0.2s;}
.sub_js .sub_hero.active .hero_txt .tit, .sub_js .sub_hero.active .hero_txt .txt {opacity: 1; transform: none;}

/* 인트로(임플란트 Con_02) — 가운데 타이틀 + 설명 + 이미지 */
.sub_intro {padding: var(--pd2) 0;}
.sub_intro .sect_tit_box + .sub_desc_box {margin-top: 5rem;}
.sub_intro .intro_img {position: relative; display: flex; align-items: center; justify-content: center; height: 66.7rem; margin-top: var(--contMt2); overflow: hidden;}
.sub_intro .intro_img img {max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain;}
.sub_intro .intro_img.round {overflow: hidden; border-radius: 3rem; border-end-start-radius: 30rem; background-color: #E6E6E6;}   /* 27: 박스를 채우는 사진 + 좌하단 큰 라운드(논리 속성 → RTL 미러) */
.sub_intro .intro_img.round img {width: 100%; height: 100%; max-height: none; object-fit: cover;}
.sub_intro .intro_img.is_video {height: auto; max-height: none; aspect-ratio: 16 / 9;}   /* 영상 버튼이 있는 인트로(26·31) — 유튜브와 같은 16:9 (2026-10-13) */
.sub_intro .intro_img .sub_video_frame {position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; border: 0; opacity: 0; pointer-events: none; transition: opacity 0.3s ease;}   /* 제자리 재생 iframe — sub-common.js subVideoPlayInit (옵저버 자동재생, 재생 시작 전엔 이미지·버튼이 보이게 투명) */
.sub_intro .intro_img .sub_video_frame.yt_on {opacity: 1; pointer-events: auto;}
/* 인트로 이미지 위 영상 재생 버튼(_Skin/include/sub-video-play.php — 31·26). 아이콘은 환자 스토리 카드(45 .story_card .play)와 같은 흰 원 + 주황 삼각형, 항상 보임 */
.sub_video_play {position: absolute; top: 50%; left: 50%; z-index: 1; display: block; width: max(12rem, 56px); height: max(12rem, 56px); border-radius: 50%; box-shadow: 0 1rem 4rem rgba(0,0,0,0.25); transform: translate(-50%, -50%); transition: transform 0.3s ease;}
.sub_video_play[hidden] {display: none;}
.sub_intro .intro_img .sub_video_play {display: none;}   /* 2026-10-13 재생 버튼 숨김(CSS만) — 영상은 옵저버 자동재생(sub-common.js), 마크업·스크립트는 그대로 */
.sub_video_play svg {display: block; width: 100%; height: 100%;}
.sub_video_play:focus-visible {outline: 3px solid var(--point01); outline-offset: 4px;}
@media screen and (min-width: 1241px) { .sub_video_play:hover {transform: translate(-50%, -50%) scale(1.08);} }

/* 넘버 카드(임플란트 Con_03) — 오렌지 배경, 좌하단 큰 라운드, 캡슐 이미지 카드 */
.sub_num_cards {position: relative; padding: var(--pd2) 0; overflow: hidden; background: linear-gradient(180deg, #FF5E10 56.13%, #F74E0A 100%); border-end-start-radius: 60rem; color: #fff;}
.sub_num_cards .in_w {z-index: 1;}
.sub_num_cards .bg_photo {position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.2; pointer-events: none;} /* 배경 사진 variant(25 임플란트 개요 Con_03): 섹션 첫 자식으로 <img class="bg_photo" alt="" aria-hidden="true" loading="lazy"> */
.sub_num_cards .bg_photo.strong {opacity: 0.5; mix-blend-mode: soft-light;}   /* 일반진료 Con_03(시안 텍스처 50% soft-light) — 공용 파일 /inc/img/sub/common/num_cards_bg.webp */
.sub_num_cards .num_card_list {display: flex; flex-wrap: wrap; justify-content: center; gap: 4rem; max-width: 200rem; margin: var(--contMt2) auto 0;}
.sub_num_cards .num_card_list > li {width: calc(20% - 16rem / 5); text-align: center;}
.sub_js .sub_num_cards .num_card_list > li {opacity: 0; transform: translateY(5rem); transition: opacity 0.6s ease-in-out, transform 0.6s ease-in-out;}
.sub_num_cards .num_card_list > li:nth-child(even) {padding-top: 10rem;}
.sub_js .sub_num_cards .num_card_list > li.active {opacity: 1; transform: none;}
.sub_num_cards .num_card_list .img {padding-top: 135%; overflow: hidden; border-radius: 99rem; background-color: rgba(255,255,255,0.15); position: relative;}
.sub_num_cards .num_card_list .img img {position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; object-position: center;}
.sub_num_cards .num_card_list .num {display: inline-flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; margin-top: 3rem; border-radius: 50%; background-color: var(--gray90); font-size: var(--p6); font-weight: 700; line-height: 1;}
.sub_num_cards .num_card_list .tit {margin-top: 1.5rem; font-family: var(--en); font-size: var(--h6); font-weight: 400; line-height: 1.3; color: var(--yellow);}
.sub_num_cards .num_card_list .txt, .sub_num_cards .num_card_list .txt_list {max-width: 28rem; margin: 1rem auto 0; font-size: var(--p3); line-height: 1.7;}
.sub_num_cards .num_card_list .txt_list > li {padding-inline-start: 1em; text-indent: -1em;}
.sub_num_cards .num_card_list .txt_list > li::before {content: '· ';}

/* 넘버 카드 6장 3×2 격자 variant .num_card_list.col3 (일반진료 32·34·36·37·38 Con_03): 가운데 열(3n+2)만 10rem 오프셋, 행 사이 간격은 오프셋 카드 높이가 만든다(시안 100) */
.sub_num_cards .col3 {width: calc((100% - 16rem) * 0.6 + 8rem); max-width: 118.4rem;}   /* 3칸 목록 폭 = 5칸 목록(최대 200rem)에서 카드 3장 + 간격 2개 → 카드 폭이 5칸과 같다. 우선순위를 낮춰(0,2,0) sub_resp 가 이긴다 */
.sub_num_cards .col3 > li {width: calc((100% - 8rem) / 3);}   /* = 기본 5칸 li calc(20% - 16rem / 5) 와 같은 실제 폭, 한 줄 3장 */
.sub_num_cards .num_card_list.col3 > li:nth-child(even) {padding-top: 0;}
.sub_num_cards .num_card_list.col3 > li:nth-child(3n+2) {padding-top: 10rem;}   /* 가운데 열만 오프셋 */

/* 프로세스 행(임플란트 Con_04) — 이미지 | 번호·제목·설명 */
.sub_step_rows {position: relative; padding: var(--pd2) 0; overflow: hidden;}
.sub_step_rows::before {content: '';position: absolute;top: calc(50% + 2rem);inset-inline-start: -125.6rem;width: 219rem;height: 219rem;margin-top: -84.5rem;border-radius: 50%;background: radial-gradient(circle, rgba(255,94,16,0.45) 0%, rgba(255,94,16,0.28) 30%, rgba(255,94,16,0.1) 55%, rgba(255,94,16,0) 72%);pointer-events: none;}
.sub_step_rows.glow_end::before {inset-inline-start: auto; inset-inline-end: -125.6rem;}   /* 19 약속: 글로우가 우측 */
.sub_step_rows .in {z-index: 1;}
.sub_step_rows .step_row_list {display: flex; flex-direction: column; gap: 6rem; margin-top: var(--contMt1);}
.sub_step_rows .step_row_list > li {display: grid; grid-template-columns: 74rem minmax(0, 1fr); gap: 10rem; align-items: center;}
.sub_js .sub_step_rows .step_row_list > li {opacity: 0; transform: translateY(5rem); transition: opacity 0.6s ease-in-out, transform 0.6s ease-in-out;}
.sub_js .sub_step_rows .step_row_list > li.active {opacity: 1; transform: none;}
.sub_step_rows .step_row_list .img {height: 50rem; overflow: hidden; border-radius: 3rem; border-end-start-radius: 20rem; background-color: var(--grayBg1);}
.sub_step_rows .step_row_list .img img {width: 100%; height: 100%; object-fit: cover;}
.sub_step_rows .step_row_list .txt_box {padding-inline-end: 8rem;}
.sub_step_rows .step_row_list .num {display: block; font-family: var(--en); font-size: var(--d1); font-weight: 400; line-height: 0.8; letter-spacing: -0.02em; color: var(--gray90); opacity: 0.1;}
.sub_step_rows .step_row_list .tit {margin-top: var(--contMt2); font-size: var(--h6); font-weight: 600; line-height: 1.4;}   /* 시안 30 SemiBold leading-none */
/* 임플란트 25~31 · 19 · 일반진료 32·37 시안: 행마다 큰 라운드(20rem) 위치가 순환(좌상 → 우상 → 우하 → 좌하) — 섹션에 .round_cycle (그 외 일반진료는 좌하 고정) */
.sub_step_rows.round_cycle .step_row_list > li:nth-child(4n+1) .img {border-radius: 3rem; border-start-start-radius: 20rem;}
.sub_step_rows.round_cycle .step_row_list > li:nth-child(4n+2) .img {border-radius: 3rem; border-start-end-radius: 20rem;}
.sub_step_rows.round_cycle .step_row_list > li:nth-child(4n+3) .img {border-radius: 3rem; border-end-end-radius: 20rem;}
.sub_step_rows.round_cycle .step_row_list > li:nth-child(4n) .img {border-radius: 3rem; border-end-start-radius: 20rem;}
.sub_step_rows .step_row_list .txt {max-width: 59rem; margin-top: 2rem; font-size: var(--p3); line-height: 1.7; color: var(--gray50);}

/* 슬라이더 컨트롤(피그마 "롤링") — 현재 · 진행바 · 전체 · ← → (JS: sub-common.js subSlideCtrlBind) */
.sub_slide_ctrl {display: flex; align-items: center; gap: 3rem;}
.sub_slide_ctrl .frac {display: flex; align-items: center; gap: 1.5rem; line-height: 1;}
.sub_slide_ctrl .frac .cur {min-width: 1.2rem; font-size: var(--p4); font-weight: 800; color: var(--gray90); width: 1.3em; text-align: center;}
.sub_slide_ctrl .frac .bar {position: relative; width: 14.4rem; height: 3px; overflow: hidden; background-color: var(--gray10);}
.sub_slide_ctrl .frac .bar .fill {position: absolute; top: 0; inset-inline-start: 0; width: 0; height: 100%; background-color: var(--point01); transition: width 0.4s ease;}
.sub_slide_ctrl .frac .total {font-size: var(--p4); color: var(--gray30);}
.sub_slide_ctrl .btns {display: flex; align-items: center; gap: 0;}   /* 화살표 중심 간격 35(시안) = 버튼 3.5rem 밀착(2026-09-18 검토 35 #5·28 #7) */
.sub_slide_ctrl .btns button {display: flex; align-items: center; justify-content: center; width: 3.5rem; height: 3.5rem; border-radius: 50%; color: var(--gray90); transition: color 0.3s, background-color 0.3s;}
.sub_slide_ctrl .btns button svg {width: 2rem; height: 2rem;}
.sub_slide_ctrl .btns button:focus-visible {background-color: var(--grayBg2);}
@media screen and (min-width: 1241px) { .sub_slide_ctrl .btns button:hover {background-color: var(--grayBg2);} }
.sub_slide_ctrl .btns button.is-disabled, .sub_slide_ctrl .btns button[disabled] {color: var(--gray30); cursor: default; background-color: transparent;}
.sub_slide_ctrl.wh .frac .cur, .sub_slide_ctrl.wh .btns button {color: #fff;}
.sub_slide_ctrl.wh .frac .bar {background-color: rgba(255,255,255,0.3);}
.sub_slide_ctrl.wh .frac .bar .fill {background-color: #fff;}
.sub_slide_ctrl.wh .frac .total {color: rgba(255,255,255,0.4);}
.sub_slide_ctrl.wh .btns button:focus-visible {background-color: rgba(255,255,255,0.15);}
@media screen and (min-width: 1241px) { .sub_slide_ctrl.wh .btns button:hover {background-color: rgba(255,255,255,0.15);} }
.sub_slide_ctrl.wh .btns button.is-disabled {color: rgba(255,255,255,0.4);}
body.is-rtl .sub_slide_ctrl .btns button svg {transform: scaleX(-1);}

/* 마퀴(라미네이트·수면 "롤링 텍스트") — Marcellus 대형 텍스트 가로 흐름, transform 애니메이션만 */
.sub_marquee {width: 100%; overflow: hidden; padding: 4.8rem 0; direction: ltr; pointer-events: none; user-select: none;}   /* 장식(aria-hidden) — RTL 에서도 트랙을 왼쪽에 고정(뷰포트 밖 시작 방지), 흐름 방향만 reverse */
.sub_marquee .marquee_track {display: flex; width: max-content; animation: subMarquee 40s linear infinite;}
.sub_marquee .marquee_txt {padding-inline: 4rem; font-family: var(--en); font-size: 23rem; font-weight: 400; line-height: 1; letter-spacing: -0.02em; white-space: nowrap; color: #F0F0F0;}
.sub_marquee.wh .marquee_txt {color: rgba(255,255,255,0.25);}
@keyframes subMarquee {from {transform: translateX(0);} to {transform: translateX(-50%);}}
body.is-rtl .sub_marquee .marquee_track {animation-direction: reverse;}

/* B&A 스토리(_Skin/include/sub-ba-stories.php, 임플란트 공통영역) — 오렌지 배경, 대형 장식 텍스트, 사례 3행(텍스트|전후 사진, 홀짝 반전) */
.sub_ba_stories {position: relative; padding: var(--pd2) 0; overflow: hidden; border-start-start-radius: 10rem; border-start-end-radius: 10rem; background: linear-gradient(180deg, #FF5E10 56.13%, #F74E0A 100%); color: #fff;}
.sub_ba_stories .ba_deco {position: relative; display: flex; flex-direction: column; align-items: center; gap: 5rem; text-align: center;}
.sub_ba_stories .ba_deco .smile {width: 25.6rem; height: 7.8rem;}
.sub_ba_stories .ba_deco .big_txt {max-width: 100%; font-family: var(--en); font-size: min(28rem, calc(100vw / var(--chars, 20) * 2)); font-weight: 400; line-height: 1.2; white-space: nowrap; color: rgba(255,255,255,0.3); background: linear-gradient(0deg, rgba(255,255,255,0.5) 6%, #fff 89%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; opacity: 0.3;}
.sub_ba_stories .in {margin-top: 22.4rem;}
.sub_ba_stories .ba_story_list {display: flex; flex-direction: column; gap: var(--pd3); margin-top: var(--contMt1);}
.sub_ba_stories .ba_story {display: flex; align-items: center; gap: 8rem;}
.sub_ba_stories .ba_story.is-rev {flex-direction: row-reverse;}
.sub_ba_stories .ba_story .txt_box {display: flex; flex: 1 1 0; flex-direction: column; justify-content: flex-end; gap: 0; min-width: 0; min-height: 62rem;}
.sub_ba_stories .ba_story .case {font-size: var(--p3); font-weight: 600; line-height: 1.3;}
.sub_ba_stories .ba_story .quote {margin-top: var(--contMt3);}   /* 라벨 → 인용 60 (시안) */
.sub_ba_stories .ba_story .notice {margin-top: 9rem;}   /* 인용 → 안내문 90 */
.sub_ba_stories .ba_story .quote .q_mark {display: block; width: 4.5rem; height: 3.72rem; color: var(--yellow); transform: rotate(180deg);}
body.is-rtl .sub_ba_stories .ba_story .quote .q_mark {transform: scaleY(-1);}   /* RTL: 여는 따옴표 좌우 반전(= 180° 회전 + 좌우 반전) */
.sub_ba_stories .ba_story .quote .q_tit {max-width: 61rem; margin-top: 1.5rem; font-family: var(--en); font-size: var(--h5); font-weight: 400; line-height: 1.3; color: var(--yellow);}
.sub_ba_stories .ba_story .quote .q_txt {max-width: 54rem; margin-top: 1.5rem; font-size: var(--p3); line-height: 1.7;}
.sub_ba_stories .ba_story .quote .q_txt br {display: none;}
.sub_ba_stories .ba_story .notice {font-size: 12px; line-height: 1.3; opacity: 0.6; counter-reset: baNotice;}
.sub_ba_stories .ba_story .notice li {position: relative; padding-inline-start: 1.4em; counter-increment: baNotice;}
.sub_ba_stories .ba_story .notice li::before {content: counter(baNotice) '.'; position: absolute; inset-inline-start: 0; top: 0;}
.sub_ba_stories .ba_story .img_box {display: flex; flex-shrink: 0; width: 94.5rem;}
.sub_ba_stories .ba_story .img {position: relative; flex: 1 1 0; height: 62rem; overflow: hidden; background-color: #E4E1E0;}
.sub_ba_stories .ba_story .img img {width: 100%; height: 100%; object-fit: cover; object-position: center top;}
.sub_ba_stories .ba_story .img .label {position: absolute; bottom: 0; left: 0; width: 100%; padding: 1.5rem 0; font-size: var(--p1); font-weight: 600; line-height: 1; text-align: center;}
.sub_ba_stories .ba_story .img.before {border-start-start-radius: 1.5rem; border-end-start-radius: 1.5rem;}
.sub_ba_stories .ba_story .img.before::after {content: ''; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(90deg, rgba(0,0,0,0.08), rgba(0,0,0,0)); pointer-events: none;}
body.is-rtl .sub_ba_stories .ba_story .img.before::after {background: linear-gradient(270deg, rgba(0,0,0,0.08), rgba(0,0,0,0));}   /* RTL: 바깥쪽(오른쪽)부터 음영 */
.sub_ba_stories .ba_story .img.before .label {border-end-start-radius: inherit; background-color: rgba(0,0,0,0.2); backdrop-filter: blur(15px); color: rgba(255,255,255,0.6);}   /* backdrop-filter 레이어는 부모 overflow+radius 클립을 벗어나는 크롬 버그 → 모서리 radius 를 직접 상속 */
.sub_ba_stories .ba_story .img.after {border: 5px solid #010101; border-bottom: none; border-start-end-radius: 1.5rem; border-end-end-radius: 1.5rem; background: linear-gradient(180deg, #EFEFEF, #D9D4D2);}
.sub_ba_stories .ba_story .img.after .label {background-color: #010101; color: #fff;}

/* What Makes HEAL the Right Choice(_Skin/include/sub-why-heal.php) — 검정 배경, 오렌지 카드 2열(우측 열 20rem 아래), 가운데 세로 진행바 */
.sub_why_heal {color: #fff;}   /* 2026-09-18: 검정 박스를 .why_wrap 으로 옮기고 우상단 60rem 라운드 — 앞 섹션 배경(흰/오렌지)이 비침 */
.sub_ba_stories + .sub_why_heal {background-color: #F74E0A;}   /* 앞 B&A 스토리 그라데이션 끝색과 이어지게 */
.sub_why_heal .why_wrap {padding: var(--pd2) 0; border-start-end-radius: 60rem; background-color: #010101;}
.sub_why_heal .why_head {display: flex; align-items: flex-start; justify-content: space-between ; gap: 4rem;}
.sub_why_heal .why_head .sect_tit_box {min-width: 0; width: 50%;}
.sub_why_heal .why_head .sub_desc_box {flex-shrink: 0; width: 55rem;}
.sub_why_heal .why_body {position: relative; display: flex; align-items: flex-start; gap: 12rem; margin-top: var(--pd2);}   /* 열 = (1600 − 120 − 21(바) − 120)/2 = 669.5 — 바가 flex 아이템 */
.sub_why_heal .why_col {display: flex; flex: 1 1 0; flex-direction: column; gap: 5rem; min-width: 0;}
.sub_why_heal .why_col.col_r {padding-top: var(--pd2);}
.sub_why_heal .why_card {padding: 2rem 2rem 7rem; border-radius: 3rem; background-color: var(--point01); text-align: center;}
.sub_why_heal .why_card .img {height: 40rem; overflow: hidden; border-radius: 2.5rem; border-end-start-radius: 20rem; background-color: rgba(255,255,255,0.1);}
.sub_why_heal .why_card .img img {width: 100%; height: 100%; object-fit: cover;}
.sub_why_heal .why_card .txt_box {padding: 0 2rem;}
.sub_why_heal .why_card .num {display: inline-flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; margin-top: 5rem; border-radius: 50%; background-color: var(--gray90); font-size: var(--p6); font-weight: 700; line-height: 1;}
.sub_why_heal .why_card .tit {margin-top: 1.5rem; font-family: var(--en); font-size: var(--h6); font-weight: 400; line-height: 1.3;}
.sub_why_heal .why_card .txt {max-width: 50rem; margin: 1rem auto 0; font-size: var(--p3); line-height: 1.7;}
.sub_why_heal .why_bar {position: relative; flex: 0 0 2.1rem; align-self: stretch; width: 2.1rem;}
.sub_why_heal .why_bar::before {content: ''; position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; margin-left: -0.5px; background-color: rgba(255,255,255,0.1);}
.sub_why_heal .why_bar .fill {position: absolute; top: 0; left: 50%; width: 1px; height: 0; margin-left: -0.5px; background-color: var(--point01); transition: height 0.2s linear;}
.sub_why_heal .why_bar .dot {position: absolute; top: var(--vbar, 0%); left: 50%; width: 2.1rem; height: 2.1rem; border-radius: 50%; background-color: rgba(255,94,16,0.2); transform: translate(-50%, -50%); transition: top 0.2s linear;}
.sub_why_heal .why_bar .dot::after {content: ''; position: absolute; inset: 25%; border-radius: 50%; background-color: var(--point01);}

/* [서브 공용] 목록 헤드 — 총 건수 + 검색(pill) (42·43 B&A 목록, 47 FAQ; 시안 "총/검색" 2130:23293) */
.sub_list_head {display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem;}
.sub_list_head .total {font-size: var(--p4); line-height: 1; color: var(--gray90);}
.sub_list_head .total strong {font-weight: 700; color: var(--point01);}
.sub_search {display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: 31.6rem; max-width: 100%; height: 6rem; padding-block: 0; padding-inline: 3rem 1rem; border-radius: 60rem; background-color: #F6F6F6;}
.sub_search input {flex: 1; min-width: 0; height: 100%; border: 0; background: none; font-size: var(--p4); color: var(--gray90); outline: none;}
.sub_search input::placeholder {color: #828282;}
.sub_search input::-webkit-search-cancel-button {margin-inline-start: 1rem; cursor: pointer;}   /* 지우기(X) — 입력 글자와 간격 */
body.is-rtl .sub_search input[type="search"] {unicode-bidi: isolate;}   /* RTL: i18n.css 의 plaintext 를 덮음 — 영문 입력 시 방향이 LTR 로 바뀌어 글자가 왼쪽으로 튀던 문제 */
.sub_search input:focus-visible {box-shadow: none; text-decoration: underline; text-underline-offset: 0.3rem;}
.sub_search button {display: flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 4rem; height: 4rem; border-radius: 50%; background-color: var(--point01); color: #fff; cursor: pointer; transition: background-color 0.3s;}
.sub_search button:focus-visible {background-color: var(--gray90);}
@media screen and (min-width: 1241px) { .sub_search button:hover {background-color: var(--gray90);} }
.sub_search button svg {width: 1.5rem; height: 1.5rem;}
/* [서브 공용] 탭 — 활성 pill(검정) + 텍스트 탭 (47 FAQ 카테고리; 링크 ?cate=) */
.sub_tabs {display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4rem;}
.sub_tabs a {display: inline-flex; align-items: center; justify-content: center; padding: 1rem 0; font-size: var(--h8); font-weight: 600; line-height: 1; color: var(--gray90); transition: color 0.3s;}
@media screen and (min-width: 1241px) { .sub_tabs a:hover {color: var(--point01);} }
.sub_tabs a.is-cur, .sub_tabs a[aria-current="page"] {padding: 1rem 3rem; border-radius: 99rem; background-color: #000; color: #fff;}
/* [서브 공용] 페이지네이션 — 파셜 _Skin/include/sub-paging.php (처음/이전 · 번호 · 다음/마지막) */
.sub_paging {display: flex; align-items: center; justify-content: center; gap: 2rem; margin-top: var(--contMt2);}
.sub_paging .pg_btns {display: flex; align-items: center; gap: 1rem;}
.sub_paging .pg_btns a {display: flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; border-radius: 0.4rem; color: var(--gray90); transition: background-color 0.3s, color 0.3s;}
.sub_paging .pg_btns a svg {width: 1rem; height: 1rem;}
.sub_paging .pg_btns a:focus-visible {background-color: var(--grayBg2);}
@media screen and (min-width: 1241px) { .sub_paging .pg_btns a:hover {background-color: var(--grayBg2);} }
.sub_paging .pg_btns a.is-disabled {opacity: 0.3; pointer-events: none;}
.sub_paging .pg_prev svg, .sub_paging .pg_first svg {transform: scaleX(-1);}
body.is-rtl .sub_paging .pg_prev svg, body.is-rtl .sub_paging .pg_first svg {transform: none;}
body.is-rtl .sub_paging .pg_next svg, body.is-rtl .sub_paging .pg_last svg {transform: scaleX(-1);}
.sub_paging .pg_nums {display: flex; align-items: center; gap: 1.5rem;}
.sub_paging .pg_nums a, .sub_paging .pg_nums span {display: flex; align-items: center; justify-content: center; min-width: 2rem; height: 3rem; padding: 0 0.5rem; border-radius: 0.4rem; font-size: var(--p4); line-height: 1; color: var(--gray90); transition: color 0.3s;}
@media screen and (min-width: 1241px) { .sub_paging .pg_nums a:hover {color: var(--point01);} }
.sub_paging .pg_nums .is-cur {min-width: 3rem; background-color: var(--point01); font-weight: 700; color: #fff;}
/* [서브 공용] 상세 이전/다음 + 목록 버튼 (B&A 상세 42/43_view; 시안 2130:23549) */
.sub_post_nav {display: flex; flex-direction: column; align-items: center; gap: 5rem; margin-top: var(--contMt3);}
.sub_post_nav .nav_list {width: 100%; border-top: 1px solid var(--gray10);}
.sub_post_nav .nav_list > li {display: flex; align-items: center; gap: 5rem; padding: 2rem 10rem 2rem 3rem; border-bottom: 1px solid var(--gray10);}
.sub_post_nav .nav_list > li.is-empty {opacity: 0.3;}
.sub_post_nav .nav_list .lbl {display: inline-flex; align-items: center; gap: 1rem; flex: 0 0 auto; min-width: 6rem; font-size: var(--p6); font-weight: 500; line-height: 1.3; color: var(--gray90);}
.sub_post_nav .nav_list .lbl svg {width: 0.9rem; height: 0.9rem; transform: rotate(90deg);}   /* 시안: PREV 위 꺾쇠 */
.sub_post_nav .nav_list .lbl.next svg {transform: rotate(-90deg);}   /* NEXT 아래 꺾쇠 */
.sub_post_nav .nav_list .subject {flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--p4); line-height: 1.7; color: var(--gray90);}
@media screen and (min-width: 1241px) { .sub_post_nav .nav_list a.subject:hover {color: var(--point01);} }
.sub_post_nav .list_btn {display: inline-flex; align-items: center; justify-content: center; gap: 1.7rem; min-width: 14.5rem; padding: 1.7rem 2.5rem; border: 1px solid var(--gray90); border-radius: 99rem; font-size: var(--p4); font-weight: 600; line-height: 1; color: var(--gray90); transition: background-color 0.3s, color 0.3s;}
@media screen and (min-width: 1241px) { .sub_post_nav .list_btn:hover {background-color: var(--gray90); color: #fff;} }
.sub_post_nav .list_btn svg {width: 1.4rem; height: 1.4rem;}
body.is-rtl .sub_post_nav .list_btn svg {transform: scaleX(-1);}

/* [서브 공용] 타입 카드 .sub_type_cards (일반진료 "증상별 치료·치료 종류" Con_04/05 — 32·33·34·35·36·38·39·40; 시안 2186:44715)
   4열(기본): 카드 37rem = (100% - 12rem)/4, 이미지 41rem 캡슐 위/아래 교차(홀 위·짝 아래), 좌상단 번호 뱃지(오렌지, Marcellus 30), 제목 30 Bold + 설명 16 회색 32rem
   .cols3 (33): (100% - 8rem)/3, 1번 좌상단 18rem · 3번 우하단 18rem 라운드, 제목 35 SemiBold / .cols2 (39·40): (100% - 4rem)/2, 홀 좌상단 20rem · 짝 우하단 20rem
   .tag (36 "구분" chip) · .type_note (36·38 하단 오렌지 안내 바). 시안의 "롤링" 컨트롤은 hidden → 슬라이더 없음(정적 목록) */
.sub_type_cards {padding-top: var(--pd1);}
.sub_intro + .sub_type_cards {padding-top: 0;}   /* 33 충치: 인트로(하단 --pd1) 바로 뒤 타입카드 — 시안 Con_03 은 pt 없음 */
.sub_hero.dim_flat.dim_light .hero_bg::before {background-color: rgba(0,0,0,0.2);}   /* 평면 20% 틴트 조합(33·34 히어로) */
.sub_type_cards .type_card_list {display: flex; flex-wrap: wrap; gap: 4rem; margin-top: var(--contMt2);}
.sub_type_cards .type_card_list > li {position: relative; width: calc((100% - 12rem) / 4); text-align: center;}
.sub_js .sub_type_cards .type_card_list > li {opacity: 0; transform: translateY(5rem); transition: opacity 0.6s ease-in-out, transform 0.6s ease-in-out;}
.sub_js .sub_type_cards .type_card_list > li.active {opacity: 1; transform: none;}
.sub_type_cards .type_card_list .img {height: 41rem; overflow: hidden; border-radius: 18.5rem 18.5rem 8rem 8rem; background-color: var(--grayBg3);}
.sub_type_cards .type_card_list > li:nth-child(even) .img {border-radius: 8rem 8rem 18.5rem 18.5rem;}
.sub_type_cards .type_card_list .img img {width: 100%; height: 100%; object-fit: cover;}
.sub_type_cards .type_card_list .num {position: absolute; top: 0; inset-inline-start: 0; z-index: 1; display: inline-flex; align-items: center; justify-content: center; padding: 1.5rem 2rem; border-start-start-radius: 5rem; border-start-end-radius: 4rem; border-end-end-radius: 0.5rem; border-end-start-radius: 5rem; background-color: var(--point01); font-family: var(--en); font-size: var(--h6); font-weight: 400; line-height: 1; color: #fff;}
.sub_type_cards .type_card_list .num svg {display: block; width: 3.4rem; height: 3rem; fill: currentColor;}   /* 뱃지 안 벡터 아이콘(36 건강 상태 카드 스마일) — "01" 글자 자리 */
.sub_type_cards .type_card_list .tit {margin-top: 3rem; font-size: var(--h6); font-weight: 700; line-height: 1.5;}
.sub_type_cards .type_card_list .tag {display: inline-flex; align-items: center; margin-top: 1.5rem; padding: 0.5rem 2rem; border-radius: 99rem; background-color: rgba(255,94,16,0.1); font-size: var(--p3); font-weight: 700; line-height: 1.5; color: var(--point01);}
.sub_type_cards .type_card_list .txt {max-width: 32rem; margin: 1.5rem auto 0; font-size: var(--p4); line-height: 1.5; color: var(--gray50);}
.sub_type_cards .type_card_list.cols3 > li {width: calc((100% - 8rem) / 3);}
.sub_type_cards .type_card_list.cols3 .img, .sub_type_cards .type_card_list.cols3 > li:nth-child(even) .img {border-radius: 3rem;}
.sub_type_cards .type_card_list.cols3 > li:first-child .img {border-start-start-radius: 18rem;}
.sub_type_cards .type_card_list.cols3 > li:nth-child(3) .img {border-end-end-radius: 18rem;}
.sub_type_cards .type_card_list.cols3 .tit {margin-top: 4rem; font-size: var(--h5); font-weight: 600; line-height: 1.3;}
.sub_type_cards .type_card_list.cols3 .txt {max-width: 38rem; margin-top: 2rem;}
.sub_type_cards .type_card_list.cols2 > li {width: calc((100% - 4rem) / 2);}
.sub_type_cards .type_card_list.cols2 .img, .sub_type_cards .type_card_list.cols2 > li:nth-child(even) .img {border-radius: 99rem;}   /* 39·40 갱신 시안: 780×410 캡슐 */
.sub_type_cards .type_card_list.cols2 .txt {max-width: 50rem;}
.sub_type_cards .type_note {margin-top: var(--contMt2); padding: 7rem 20rem; border-radius: 10rem; border-start-end-radius: 0; background-color: var(--point01); font-size: var(--p3); line-height: 1.7; color: #fff; text-align: center;}
.sub_type_cards .type_note strong {font-weight: 700; color: var(--yellow);}   /* 시안 강조 구절 옐로 Bold */

/* [서브 공용] 와이드 슬라이더 .sub_wide_slider (28 전신질환 Con_05 · 35 크라운 Con_03-01; 시안 2185:44554) — 헤드(타이틀 + .sub_slide_ctrl) + Swiper 1장씩(이미지 75rem | 번호 Marcellus 7rem·제목·설명)
   JS 는 페이지 스크립트: new Swiper(el, {slidesPerView: 1, spaceBetween: 간격(10rem/5rem/3rem), loop: false, watchOverflow: true}) + subSlideCtrlBind. 오렌지 배경(.sub_num_cards 안)에서는 번호 옐로·글 흰색·이미지 우상단 라운드, 컨트롤은 .sub_slide_ctrl.wh */
.sub_wide_slider .wide_head {display: flex; align-items: flex-end; justify-content: space-between; gap: 4rem;}
.sub_wide_slider .wide_head .sub_slide_ctrl {flex-shrink: 0; padding-bottom: 0.5rem;}
.sub_wide_slider .wide_slider {margin-top: var(--contMt2); overflow: visible; clip-path: inset(0 -100vw 0 0);}   /* 다음 슬라이드가 컨테이너 우측 밖으로 살짝 보임(시안 28·35 peek), 왼쪽은 잘라냄 */
body.is-rtl .sub_wide_slider .wide_slider {clip-path: inset(0 0 0 -100vw);}
.sub_wide_slider .wide_slider .swiper-slide {display: grid; grid-template-columns: 75rem minmax(0, 1fr); gap: 10rem; align-items: center;}
.sub_wide_slider .wide_slider .img {overflow: hidden; border-radius: 3rem; border-end-start-radius: 20rem; border-start-end-radius: 20rem; background-color: #EDEDED;}   /* 28 시안: 좌하 200 + 우상 200 */
.sub_wide_slider .wide_slider .img img {width: 100%; height: 100%; object-fit: cover;}
.sub_wide_slider .wide_slider .txt_box {padding-inline-end: 10rem;}
.sub_wide_slider .wide_slider .num {display: block; font-family: var(--en); font-size: 7rem; font-weight: 400; line-height: 1; color: var(--point01);}
.sub_wide_slider .wide_slider .tit {margin-top: var(--contMt2); font-size: var(--h5); font-weight: 600; line-height: 1.3;}
.sub_wide_slider .wide_slider .txt {margin-top: 2rem; font-size: var(--p4); line-height: 1.5; color: var(--gray50);}
.sub_wide_slider .wide_slider .txt_list > li {position: relative; padding-inline-start: 2.4rem;}   /* 시안 2019:25355 — 불릿 목록(들여쓰기 24, 점은 글자색) */
.sub_wide_slider .wide_slider .txt_list > li::before {content: ''; position: absolute; top: calc(0.75em - 0.15em); inset-inline-start: 0.9rem; width: 0.2em; height: 0.2em; border-radius: 50%; background-color: currentColor;}
.sub_wide_slider .wide_slider .txt_list > li + li {margin-top: 0.4em;}
.sub_num_cards .sub_wide_slider .wide_slider .img {border-end-start-radius: 3rem; border-start-end-radius: 20rem; background-color: rgba(255,255,255,0.15);}   /* 35 시안: 우상단만 */
.sub_num_cards .sub_wide_slider .wide_slider .num {color: var(--yellow);}
.sub_num_cards .sub_wide_slider .wide_slider .tit, .sub_num_cards .sub_wide_slider .wide_slider .txt {color: #fff;}

/* [서브 공용] 전후사진 비교 위젯 .sub_ba_compare (메인 .ba_compare 를 서브 공용으로 승격 — 42·43 B&A 목록 카드; 시안 2143:29210)
   after 사진 위에 before 사진 박스를 --ba-pos 폭으로 잘라 겹치고(같은 크기 사진) 3px 흰 라인 + 40 핸들 버튼 + 글래스 chip. JS: inc/js/sub-common.js subBaCompareInit(자동 초기화, 마우스 드래그/터치 핸들/키보드 ←→).
   물리 좌표계(direction: ltr, left/right) — RTL 에서도 before 가 왼쪽(라인·핸들과 같은 좌표계). 크기·라운드는 페이지가 정한다 */
.sub_ba_compare {--ba-pos: 67%; position: relative; overflow: hidden; direction: ltr; cursor: ew-resize; touch-action: pan-y; user-select: none;}
.sub_ba_compare .cimg {position: absolute; inset: 0; background-color: var(--gray10);}
.sub_ba_compare .cimg img {position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; user-select: none; pointer-events: none;}
.sub_ba_compare .aimg_box {background: linear-gradient(180deg, #EFEFEF 0%, #D9D4D2 100%);}
.sub_ba_compare .bimg_box {right: auto; width: var(--ba-pos); overflow: hidden; z-index: 2;}
.sub_ba_compare .bimg_box img {width: var(--ba-img-width, 100%); max-width: none;}
.sub_ba_compare .bimg_box::after {content: ''; position: absolute; inset: 0; background-color: rgba(0,0,0,0.3); pointer-events: none;}
.sub_ba_compare .ba_line {position: absolute; top: 0; left: var(--ba-pos); z-index: 3; width: 3px; height: 100%; background-color: #fff; transform: translateX(-50%); pointer-events: none;}
.sub_ba_compare .handle {position: absolute; top: 57%; left: var(--ba-pos); z-index: 4; display: flex; align-items: center; justify-content: center; width: 4rem; height: 4rem; padding: 0; border: 0; border-radius: 50%; background: none; transform: translate(-50%, -50%); cursor: ew-resize;}
.sub_ba_compare .handle svg {display: block; width: 100%; height: 100%;}
.sub_ba_compare .handle:focus-visible {outline: 2px solid var(--point01); outline-offset: 2px;}
.sub_ba_compare .chip {position: absolute; bottom: 1.5rem; z-index: 3; min-width: 8.4rem; padding: 0.8rem 1.5rem; border-radius: 5rem; background-color: rgba(255,255,255,0.3); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); font-size: var(--p4); font-weight: 600; line-height: 1; text-align: center; white-space: nowrap; color: #fff; pointer-events: none;}   /* 시안 흰색 30% 글래스 — 밝은 after 사진 위 가독성 보강용 그림자만 추가 */
.sub_ba_compare .chip.before {left: 1.5rem;}
.sub_ba_compare .chip.after {right: 1.5rem; bottom: 1.5rem;}

/* ───────── 서브 공용 (라미네이트 22 · 트리네이트 23 · 시니어 24 공용: B&A 그리드 · 갤러리 슬라이더 · 후기 카드 — 구 .sub_brand_top / .sub_feature_cards 는 2026-09-18 신 시안 재구현으로 폐기) ───────── */

/* B&A 그리드 .sub_ba_grid (Con_06/Con_03 — 2열 카드: 분류 chip · 전/후 사진 · 캡션. 데이터 getFrontBeforeAfterList, 라벨 cmsT(sub.before/after)) */
.sub_ba_grid {display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5rem 4rem;}
.sub_ba_grid > li {padding: 0 4rem 4rem; border-radius: 3rem; background-color: var(--grayBg1);}
.sub_ba_grid .cate {padding: 3rem 0 2rem; font-size: var(--p5); font-weight: 700; line-height: 1; text-align: center; text-transform: uppercase; color: var(--point01);}
.sub_ba_grid .imgs {position: relative; display: flex; overflow: hidden; border-radius: 2rem;}
.sub_ba_grid .imgs .img {position: relative; flex: 1 1 0; min-width: 0; height: 24.5rem; overflow: hidden; background-color: var(--gray10);}
.sub_ba_grid .imgs .img img {width: 100%; height: 100%; object-fit: cover;}
.sub_ba_grid .imgs .img.after {border: 3px solid var(--point01); border-start-end-radius: 2rem; border-end-end-radius: 2rem;}
.sub_ba_grid .imgs .lbl {position: absolute; bottom: 0; left: 50%; padding: 0.5rem 1.5rem 0.7rem; border-radius: 0.5rem 0.5rem 0 0; background-color: var(--gray90); font-size: var(--p4); line-height: 1; white-space: nowrap; color: #fff; transform: translateX(-50%);}
.sub_ba_grid .imgs .after .lbl {background-color: var(--point01); font-weight: 600;}
.sub_ba_grid .imgs .arr {position: absolute; top: 50%; left: 50%; z-index: 1; width: 3rem; height: 3rem; transform: translate(-50%, -50%); pointer-events: none;}
.sub_ba_grid .imgs .arr svg {display: block; width: 100%; height: 100%;}
body.is-rtl .sub_ba_grid .imgs .arr svg {transform: scaleX(-1);}
.sub_ba_grid .cap {padding-top: 2rem; font-size: var(--p6); line-height: 1.5; text-align: center; color: var(--gray90);}
.sub_ba_empty {padding: var(--pd4) 0; font-size: var(--p3); line-height: 1.7; text-align: center; color: var(--gray50);}
.sub_ba_notes {margin-top: 5rem; font-size: var(--p3); line-height: 1.7; color: var(--gray50);}
.sub_ba_notes > li::before {content: '* ';}

/* 갤러리 슬라이더 .sub_gallery_slider (Con_07/Con_04 — 3장 센터 슬라이더: 가운데 80rem, 양옆 60rem(scale .75), 간격 10rem. Swiper 5 slidesPerView:'auto'+centeredSlides, 컨트롤 .sub_slide_ctrl + subSlideCtrlBind) */
.sub_gallery_slider {display: flex; flex-direction: column; align-items: center; gap: 5rem; border-radius: 4rem; background-color: #fff;}
.sub_gallery_slider .swiper-container {width: 100%; overflow: visible;}
.sub_gallery_slider .swiper-slide {width: 80rem;}
.sub_gallery_slider .swiper-slide .img {aspect-ratio: 800 / 468; overflow: hidden; border-radius: 3rem; border-start-end-radius: 20rem; border-end-start-radius: 20rem; border: 1.33rem solid #fff; background-color: var(--gray10); transform: scale(0.75); transition: transform 0.5s ease, border-radius 0.5s ease;}   /* 22·23·24 시안: 양옆 좌하 100 + 흰 10px 보더(scale .75 반영), 가운데 우상·좌하 200 */
.sub_gallery_slider .swiper-slide .img img {width: 100%; height: 100%; object-fit: cover;}
.sub_gallery_slider .swiper-slide-active .img {transform: none; border-width: 1rem; }

/* 리뷰 카드 .sub_review_cards (Con_08 — 이미지 62rem + 항목 chip + 이름 + 본문, 3열) */
.sub_review_cards {display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4.1rem;}
.sub_review_cards .img {height: 62rem; overflow: hidden; border-radius: 3rem; background-color: var(--gray10);}
.sub_review_cards .img img {width: 100%; height: 100%; object-fit: cover;}
.sub_review_cards .head {display: flex; align-items: center; gap: 2rem; margin-top: 4rem;}
.sub_review_cards .chip {display: inline-flex; align-items: center; flex-shrink: 0; padding: 0.7rem 1.5rem; border-radius: 10rem; background-color: var(--point01); font-size: var(--p6); font-weight: 600; line-height: 1; color: #fff;}
.sub_review_cards .name {font-size: var(--h8); font-weight: 700; line-height: 1.3; color: var(--gray90);}
.sub_review_cards .txt {margin-top: 2rem; font-size: var(--p4); line-height: 1.3; color: var(--gray50);}
/* 리뷰 카드 capsule variant .sub_review_cards.capsule (24 시니어 트리네이트 Con_06 2229:30631 — 담당자 M 제안): 캡슐 이미지 70rem, chip 위·이름 아래 세로 스택 가운데, 본문 가운데, 가운데 카드 10rem 아래 오프셋 */
.sub_review_cards.capsule {align-items: start;}
.sub_review_cards.capsule > li:nth-child(2) {padding-top: 10rem;}
.sub_review_cards.capsule .img {height: 70rem; border-radius: 3rem;}   /* 22·23·24 시안: 카드별 비대칭 — 1 좌상 200 / 2 아치(위 260) / 3 우하 200 */
.sub_review_cards.capsule > li:nth-child(1) .img {border-start-start-radius: 20rem;}
.sub_review_cards.capsule > li:nth-child(2) .img {border-start-start-radius: 26rem; border-start-end-radius: 26rem; border-end-start-radius: 2rem; border-end-end-radius: 2rem;}
.sub_review_cards.capsule > li:nth-child(3) .img {border-end-end-radius: 20rem;}
.sub_review_cards.capsule .name {font-size: 2.4rem;}
.sub_review_cards.capsule .head {flex-direction: column; justify-content: center; gap: 1.5rem; text-align: center;}
.sub_review_cards.capsule .txt {text-align: center;}

/* 스크롤 리빌 기본형(페이지에서 data-landing-observe 로 .active 부여) */
.sub_js .sub_cont .sub_reveal {opacity: 0; transform: translateY(5rem); transition: opacity 0.6s ease-in-out var(--d, 0s), transform 0.6s ease-in-out var(--d, 0s);}
.sub_js .sub_cont .sub_reveal.active {opacity: 1; transform: none;}


/* ───────────────────────── 페이지별 블록 (.pg_{slug}) ───────────────────────── */

/* ── 전체 임플란트 (/implants/full-mouth, idx 26) ── */
.pg_full_mouth .sub_hero .hero_bg img {object-position: center 87%;}

/* ── 컴퓨터분석 임플란트 (/implants/computer-guided, idx 27) ── */
/* 페이지 전용 규칙 없음 — 히어로는 hero.webp 를 시안 가시 영역(2560×900) 그대로 크롭해 object-position 보정 불필요(2026-09-18 검토 27 #3). .sub_hero.dim_20 / .sub_intro(.intro_img.round) / .sub_num_cards / .sub_step_rows.round_cycle 공용 컴포넌트만 사용 */

/* ── 올온엑스 (/implants/ALL-ON-X, idx 31) ── */
.pg_all_on_x .sub_hero .hero_bg img {object-position: center bottom;}

/* ── 라미네이트 (/veneers, idx 22) ── */
/* 신 시안 2143:29355 (2026-09-18 재구현) — 서브탑 표준(light) → Con_01 공용 .sub_hero.dim_20 → Con_02 공용 .sub_intro(.intro_img.round) → Con_03 공용 .sub_num_cards(인용 카드 + 캡슐 카드) → Con_04 다이어그램 → Con_05 콜라주 → Con_06 마퀴 + 반원 이미지 → Con_07 디테일 → Con_08 B&A → Con_09 갤러리 → Con_10 후기. 섹션 상하 여백 250(--pd1) */
/* Con_01 히어로 · Con_02 인트로 — 공용 컴포넌트 그대로(페이지 추가 규칙 없음) */
/* Con_03 ① 인용 카드 — .in 폭 블록(제목 좌측 정렬) + 2열 그리드(760, 열 간격 80, 행 간격 40). 홀수(좌열) 카드는 시안대로 100 아래 — 레이아웃에 영향 없는 position 오프셋(리빌 transform 과 충돌 없음)이라 리스트 아래 10rem 을 더해 높이를 보정. 2026-09-29 시안 2143:33262: 원형 사진 → 카드 하단 가로 사진 박스(650×400, 좌상·우하 120 라운드, 오렌지 바탕) */
.pg_veneers .quote_block {width: var(--in); max-width: 100%; margin: 0 auto;}
.pg_veneers .quote_cards {display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4rem 8rem; align-items: start; padding-bottom: 10rem; margin-top: var(--contMt1);}
.pg_veneers .quote_cards > li {position: relative; display: flex; flex-direction: column; align-items: flex-end; gap: 3rem; padding: 5rem; border-radius: 3rem; border-end-end-radius: 15rem; background: linear-gradient(-3.93deg, #FBBB9C 36.06%, #FFE5D9 101.63%); color: var(--gray90);}
.pg_veneers .quote_cards > li:nth-child(odd) {top: 10rem;}
.pg_veneers .quote_cards .q_txt {width: 100%;}
.pg_veneers .quote_cards .q_mark {display: block; width: 3.6rem; height: 2.976rem; color: var(--point01); transform: rotate(180deg);}
body.is-rtl .pg_veneers .quote_cards .q_mark {transform: scaleY(-1);}   /* RTL: 여는 따옴표 좌우 반전 */
.pg_veneers .quote_cards .q_txt p {margin-top: 1.5rem; font-family: var(--en); font-size: var(--h6); font-weight: 400; line-height: 1.3; min-height: 2.6em;}   /* 시안은 전 카드 2줄 — 한 줄로 끝나는 문구도 2줄 높이를 잡아 좌·우 열 카드 높이를 맞춘다 */
.pg_veneers .quote_cards .q_img {width: 100%; height: 40rem; overflow: hidden; border-radius: 2rem; border-start-start-radius: 12rem; border-end-end-radius: 12rem; background-color: var(--point01);}
.pg_veneers .quote_cards .q_img img {display: block; width: 100%; height: 100%; object-fit: cover;}
/* Con_03 ② 캡슐 카드 — 공용 .num_card_list(짝수 오프셋 기본), 인용 블록과 200 간격 */
.pg_veneers .diff_block {margin-top: var(--pd2);}
/* Con_04 다이어그램(오각형 SVG + 라벨 5개 절대 배치, 1600×1109 비율 박스) — 제목·설명 가운데, 위 여백 250 만(아래 여백은 Con_05 가 가진다) */
.pg_veneers .pg_veneers_clear {padding-top: var(--pd1);}
.pg_veneers .clear_head .sub_desc_box {margin-top: 5rem;}
.pg_veneers .diagram {position: relative; width: 100%; aspect-ratio: 1600 / 1109; margin-top: var(--contMt1);}
.pg_veneers .diagram .diagram_svg {position: absolute; left: 19.34%; top: 9.02%; width: 61.31%; height: auto;}
.pg_veneers .diagram .diagram_labels > li {position: absolute; width: max-content; max-width: 22rem; font-family: var(--en); font-size: 3.2rem; font-weight: 400; line-height: 1.3; text-align: center; color: var(--point01); transform: translateX(-50%);}
.pg_veneers .diagram .diagram_labels > .lbl1 {left: 50.63%; bottom: 91.5%;}
.pg_veneers .diagram .diagram_labels > .lbl2 {left: 86.72%; top: 40.3%; transform: translate(-50%, -50%);}
.pg_veneers .diagram .diagram_labels > .lbl3 {left: 13.38%; top: 40.3%; transform: translate(-50%, -50%);}
.pg_veneers .diagram .diagram_labels > .lbl4 {left: 30.47%; top: 92.06%; max-width: none;}
.pg_veneers .diagram .diagram_labels > .lbl5 {left: 69.56%; top: 92.06%; max-width: none;}
/* Con_05 콜라주 — 제목·설명(116rem) 가운데 + 1602.5×1110.5 비율 박스 안 절대 배치 4장(% 좌표: 840×500 좌하 30rem / 480×550 ×2 / 720×450 우하 30rem) + 원형 텍스트패스(39.75rem, 3번 이미지 우하단에 걸쳐 회전) */
.pg_veneers .pg_veneers_collage {padding: var(--pd1) 0;}
.pg_veneers .collage_head .sub_desc_box {max-width: 116rem; margin-top: 5rem;}
.pg_veneers .collage {position: relative; width: 100%; max-width: 160.25rem; aspect-ratio: 1602.5 / 1110.5; margin: var(--contMt1) auto 0;}
.pg_veneers .collage .c_img {position: absolute; overflow: hidden; border-radius: 3rem; background-color: var(--gray90);}
.pg_veneers .collage .c_img img {width: 100%; height: 100%; object-fit: cover;}
.pg_veneers .collage .c1 {inset-inline-start: 0; top: 0; width: 52.418%; height: 45.026%; border-end-start-radius: 30rem;}
.pg_veneers .collage .c2 {inset-inline-start: 55.101%; top: 0.764%; width: 29.953%; height: 49.528%;}
.pg_veneers .collage .c3 {inset-inline-start: 22.496%; top: 50.472%; width: 29.953%; height: 49.528%;}
.pg_veneers .collage .c4 {inset-inline-start: 55.07%; top: 55.695%; width: 44.93%; height: 40.523%; border-end-end-radius: 30rem;}
.pg_veneers .collage .circle_txt {position: absolute; inset-inline-start: 1%; top: 58%; z-index: 1; width: 24.805%; aspect-ratio: 1; overflow: visible; pointer-events: none; animation: pgVeneersSpin 40s linear infinite;}
.pg_veneers .collage .circle_txt text {font-family: var(--en); font-size: 36px; letter-spacing: 0.06em; fill: var(--gray10); direction: ltr; unicode-bidi: isolate;}
@keyframes pgVeneersSpin {from {transform: rotate(0deg);} to {transform: rotate(360deg);}}
/* Con_06 마퀴(공용 .sub_marquee) + 철학 — 흰 배경 100rem 행: 좌 텍스트 80rem(.in 왼쪽 선에 맞춰 열 끝에 정렬) | 우 반원 이미지 128rem(화면 끝까지, 시작쪽 라운드 50rem) */
.pg_veneers .art_body {display: flex; align-items: center; justify-content: space-between; padding-inline-start: max(calc((100% - var(--in)) / 2 + var(--inPd)), var(--inPd));}
.pg_veneers .art_txt {width: 35%;}
.pg_veneers .art_txt .txt_box {}
.pg_veneers .art_txt .sub_desc_box {margin-top: 3rem;}
.pg_veneers .art_txt .desc_txt {color: var(--gray50);}
.pg_veneers .art_img { width: 55%;height: 90rem; overflow: hidden; border-start-start-radius: 50rem; border-end-start-radius: 50rem; background-color: #E6E6E6;}
.pg_veneers .art_img img {width: 100%; height: 100%; object-fit: cover;}
/* Con_07 디테일 — 타이틀·설명(108.5rem) + 이미지 2장(좌 좌상 30rem / 우 우하 30rem) + 오렌지 Marcellus 문단 */
.pg_veneers .pg_veneers_detail {padding: var(--pd1) 0;}
.pg_veneers .detail_head .sub_desc_box {max-width: 108.5rem; margin-top: 5rem;}
.pg_veneers .detail_imgs {display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3rem; margin-top: var(--contMt1);}
.pg_veneers .detail_imgs > li {height: 110rem; overflow: hidden; border-radius: 3rem; background-color: var(--gray10);}
.pg_veneers .detail_imgs > li:first-child {border-start-start-radius: 30rem;}
.pg_veneers .detail_imgs > li:last-child {border-end-end-radius: 30rem;}
.pg_veneers .detail_imgs > li img {width: 100%; height: 100%; object-fit: cover;}
.pg_veneers .detail_quote {margin-top: var(--contMt1); font-family: var(--en); font-size: 5rem; font-weight: 400; line-height: 1.3; color: var(--point01);}
/* 라미네이트 공용 파셜(22·23·24) — _Skin/include/veneers-{ba,space,review}.php. 섹션 상하 여백만 페이지 규칙, 안쪽은 여기 한 곳 */
.sub_vn_ba .sub_ba_grid {margin-top: var(--contMt1);}
.sub_vn_space .space_head .sub_desc_box {max-width: 102rem; margin-top: 5rem;}   /* 시안 서브내용 1053 (22·23 동일) */
.sub_vn_space .sub_gallery_slider {margin-top: var(--contMt1);}
.sub_vn_review .sub_review_cards {margin-top: var(--contMt1);}
/* Con_08 Before & After — 공용 .sub_ba_grid + 고지문 */
.pg_veneers .pg_veneers_ba {padding-bottom: var(--pd1);}
/* Con_09 공간 — 타이틀·설명(105.3rem) + 공용 .sub_gallery_slider */
.pg_veneers .pg_veneers_space {padding-bottom: var(--pd1);}
/* Con_10 후기 — 공용 .sub_review_cards.capsule */
.pg_veneers .pg_veneers_review {padding-bottom: var(--pd1);}

/* ── 트리네이트 (/veneers/trinate, idx 23) ── */
/* 신 시안 2164:34687(2026-09-18 재구현) — Con_01 히어로 / Con_02 인트로 / Con_03 캡슐 카드는 공용 컴포넌트(.sub_hero.dim_20 / .sub_intro + .intro_img.round / .sub_num_cards + img.bg_photo.strong)만 사용, 페이지 추가 규칙 없음 */
/* Con_04 Before & After — 공용 .sub_ba_grid + 고지문 (트리네이트 2차 카테고리 우선, 시안 상하 250) */
.pg_trinate .pg_trinate_ba {padding: var(--pd1) 0;}
/* Con_05 공간 — 타이틀·설명 + 공용 .sub_gallery_slider (시안 하단 250) */
.pg_trinate .pg_trinate_space {padding-bottom: var(--pd1);}
/* Con_06 후기 — 공용 .sub_review_cards.capsule (시안 하단 250) */
.pg_trinate .pg_trinate_review {padding-bottom: var(--pd1);}

/* ── 병원소개 (/about, idx 13) ── */
/* 히어로(Con_01) — 공용 .sub_hero.grad.dim_50. 줄바꿈은 팩 문구(시안 1983:16856)의 줄바꿈으로 맞춤 — 폭 제한 없음 */
/* 설명 블록(Con_03·Con_04 서브내용) — 시안 본문 #616E7C (검토 #2, 페이지 한정) */
.pg_about .sub_desc_box .desc_txt {color: var(--gray50);}
/* 가치 카드(Con_02) — 오렌지 배경·좌하단 60rem 라운드, 2열(왼쪽 세로 1장 · 오른쪽 2장). 텍스처는 시안 blur 이미지 대신 그라데이션 */
.pg_about .pg_about_values {position: relative; padding: var(--pd2) 0; overflow: hidden; border-end-start-radius: 60rem; color: #fff; background: linear-gradient(180deg, #FF5E10 56.13%, #F74E0A 100%);}
.pg_about .pg_about_values .in {z-index: 1;}
.pg_about .values_grid {display: flex; gap: 15rem; }
.pg_about .values_grid .col {flex: 1 1 0; min-width: 0;}
.pg_about .values_grid .col:first-child {padding-top: 30rem;}
.pg_about .values_grid .col:last-child {display: flex; flex-direction: column; gap: 15rem;}
.pg_about .value_card .img {overflow: hidden; border-radius: 3rem; border-end-start-radius: 25rem; background-color: var(--ivory); aspect-ratio: 725 / 520;}
.pg_about .values_grid .col:first-child .value_card .img {aspect-ratio: 725 / 900;}
.pg_about .value_card .img img {width: 100%; height: 100%; object-fit: cover;}
.pg_about .value_card .txt_box {padding: 0 5rem; margin-top: 5rem;}
.pg_about .value_card .quote {display: block; width: 4.5rem; height: 3.8rem; color: var(--yellow);}
.pg_about .value_card .quote svg {display: block; width: 100%; height: 100%;}
.pg_about .value_card .tit {margin-top: 1.5rem; font-family: var(--en); font-size: var(--h4); font-weight: 400; line-height: 1.3;}
/* 카드 제목 폭 — 시안 수동 개행(311 / 428 / 575 텍스트 블록)을 폭 제한으로 재현 (검토 #5) */
.pg_about .values_grid .col:first-child .value_card .tit {max-width: 34rem;}
.pg_about .values_grid .col:last-child .value_card:first-child .tit {max-width: 46rem;}
.pg_about .values_grid .col:last-child .value_card:last-child .tit {max-width: 58rem;}
.pg_about .value_card .txt {margin-top: 2rem; font-size: var(--p3); line-height: 1.7; opacity: 0.7;}
/* 공간 콜라주(Con_03) — 가운데 타이틀·설명 + 2열 콜라주(왼쪽 900/612 · 오른쪽 760/640), 뒤에 오렌지 글로우(시안 Ellipse blur 대체) */
.pg_about .pg_about_space {position: relative; padding: var(--pd1) 0; overflow: hidden;}
.pg_about .pg_about_space::before {content: ''; position: absolute; top: 146.6rem; left: 50%; width: 178rem; height: 178rem; border-radius: 50%; background: radial-gradient(circle, rgba(255,94,16,0.26) 0%, rgba(255,94,16,0.12) 28%, rgba(255,94,16,0) 62%); transform: translate(-50%, -50%); pointer-events: none;}
.pg_about .pg_about_space .in {z-index: 1;}
/* .pg_about .space_head {padding-top: 5rem;} */
.pg_about .space_head > .sub_desc_box {margin-top: var(--contMt4);}
.pg_about .space_collage {display: flex; justify-content: center; gap: 6rem; margin-top: var(--contMt1);}
.pg_about .space_collage .col {flex: 0 0 auto; width: 90rem;}
.pg_about .space_collage .col:last-child {width: 76rem; padding-top: 8rem;}
.pg_about .space_collage .img {overflow: hidden; border-radius: 3rem; background-color: var(--gray10);}
.pg_about .space_collage .img img {width: 100%; height: 100%; object-fit: cover;}
.pg_about .space_collage .col:first-child .img:first-child {aspect-ratio: 900 / 540; border-end-start-radius: 30rem;}
.pg_about .space_collage .col:first-child .img:last-child {width: 61.2rem; margin-top: 6rem; margin-inline-start: 28.8rem; aspect-ratio: 612 / 905;}
.pg_about .space_collage .col:last-child .img:first-child {aspect-ratio: 760 / 570;}
.pg_about .space_collage .col:last-child .img:last-child {width: 64rem; margin-top: 7rem; aspect-ratio: 1 / 1; border-end-end-radius: 30rem;}
/* VIP 라운지(Con_04) — 센터 확장 슬라이더: 슬롯 82rem 균일, 가운데 80rem·양옆 25rem 캡슐(2rem 간격). 폭·위치·오버레이는 JS 가 넣는 --sp(0~1 거리) --se(1 초과분) --ss(방향 ±1) --sv(가시성) 로 계산. 시안에 컨트롤(.sub_slide_ctrl) 없음 → 자동재생만 */
.pg_about .pg_about_lounge {padding: 0 0 var(--pd);}
.pg_about .lounge_slider {position: relative; margin-top: var(--contMt1);}
.pg_about .lounge_slider .swiper-container {overflow: visible;}
.pg_about .lounge_slider .swiper-slide {width: 82rem;}
.pg_about .lounge_slider .slide_box {position: relative; width: calc(80rem - 55rem * var(--sp, 1)); height: 52.7rem; margin: 0 auto; overflow: hidden; border-radius: calc(3rem + 96rem * var(--sp, 1)); border-end-start-radius: calc(20rem + 79rem * var(--sp, 1)); background-color: var(--gray30); -webkit-mask-image: -webkit-radial-gradient(white, black); isolation: isolate; opacity: var(--sv, 1); transform: translate(calc(var(--ss, 0) * (27.5rem * var(--sp, 1) + 55rem * var(--se, 0))), calc(1rem * var(--sp, 1) + 2rem * var(--se, 0))); transition: width 0.6s ease, border-radius 0.6s ease, transform 0.6s ease, opacity 0.6s ease;}
.pg_about .lounge_slider .slide_box img {width: 100%; height: 100%; object-fit: cover; object-position: var(--ox, 50%) 50%; filter: blur(calc(1.5px * var(--sp, 1))); transition: filter 0.6s ease; transition-duration: inherit;}
.pg_about .lounge_slider .slide_box .ov {position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255,94,16,0) 10%, var(--point01) 84%); opacity: var(--sp, 1); transition: opacity 0.6s ease; transition-duration: inherit;}
.pg_about .lounge_slider .circle_txt {position: absolute; top: -13.6rem; inset-inline-end: 20.4rem; z-index: 2; width: 29.1rem; height: 29.1rem; margin: 0; pointer-events: none;}
.pg_about .lounge_slider .circle_txt svg {display: block; width: 100%; height: 100%; overflow: visible; direction: ltr; animation: pgAboutSpin 40s linear infinite;}
.pg_about .lounge_slider .circle_txt text {font-family: var(--en); font-size: 26px; fill: var(--gray10);}
@keyframes pgAboutSpin {from {transform: rotate(0deg);} to {transform: rotate(360deg);}}
/* 롤링 컨트롤(시안 2708:7987) — 공용 .sub_slide_ctrl 을 한 줄 배치(← 현재 · 바 · 전체 →, 간격 15)로, 가운데 슬라이드 하단 25.6 아래 가운데. 진행바 채움은 gray90(시안), 바탕 #F1F1F3 */
.pg_about .lounge_ctrl {justify-content: center; gap: 1.5rem; margin-top: 2.56rem;}
.pg_about .lounge_ctrl .bar {background-color: #F1F1F3;}
.pg_about .lounge_ctrl .bar .fill {background-color: var(--gray90);}
.pg_about .lounge_ctrl .prev, .pg_about .lounge_ctrl .next {display: flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; color: var(--gray90); transition: color 0.3s;}
.pg_about .lounge_ctrl .prev {color: var(--gray30);}
.pg_about .lounge_ctrl svg {display: block; width: 100%; height: 100%;}
.pg_about .lounge_ctrl .prev:focus-visible, .pg_about .lounge_ctrl .next:focus-visible {color: var(--point01);}
@media screen and (min-width: 1241px) { .pg_about .lounge_ctrl .prev:hover, .pg_about .lounge_ctrl .next:hover {color: var(--point01);} }
body.is-rtl .pg_about .lounge_ctrl svg {transform: scaleX(-1);}
/* 컨트롤 → 설명 7.6rem(시안 롤링 컨트롤 하단 811.6 → 설명 888) */
.pg_about .lounge_desc {max-width: 80rem; margin: var(--contMt1) auto 0; text-align: center;}
.pg_about .lounge_desc .sub_tit {margin-bottom: var(--contMt4); font-family: var(--en); font-size: 5rem; font-weight: 400; line-height: 1.4; color: var(--gray90);}
/* 의료진 단체사진(Con_05) — 오렌지 타이틀(좌) + 문구(우·아래 정렬, 시안 411 텍스트 블록 → 42rem) + 1600×797 사진(좌하단 32rem 라운드) + 스마일 서명 와이프 */
.pg_about .pg_about_team {padding: 0 0 var(--pd);}
.pg_about .team_head {display: flex; align-items: flex-end; justify-content: space-between; gap: 4rem;}
.pg_about .team_txt {flex: 0 1 auto; max-width: 42rem; font-size: var(--h8); font-weight: 600; line-height: 1.3; text-align: end; color: var(--point01);}
.pg_about .team_img {position: relative; margin-top: 5rem; overflow: hidden; border-radius: 3rem; border-end-start-radius: 32rem; aspect-ratio: 1600 / 797; background-color: var(--gray10);}
.pg_about .team_img img {width: 100%; height: 100%; object-fit: cover;}
.pg_about .team_img .sign {position: absolute; top: 75.7%; inset-inline-start: 8%; width: 26.8%; height: auto; color: #fff;}
.sub_js .pg_about .team_img .sign {clip-path: inset(0 100% 0 0); transition: clip-path 0.9s ease-out 0.4s;}
.sub_js .pg_about .team_img.active .sign {clip-path: inset(0);}

/* ── 수면 임플란트 (/implants/sleep, idx 29) ── */
.pg_sleep .pg_sleep_sedation {overflow: hidden;}
.pg_sleep .pg_sleep_sedation .sedation_body {display: grid; grid-template-columns: 80rem minmax(0, 1fr); align-items: center; padding-inline-start: max(calc((100% - var(--in)) / 2 + var(--inPd)), var(--inPd));}   /* 시안: 텍스트 800 + 이미지 1280(우측 끝까지) — 2026-09-18 검토 29 #2 */
.pg_sleep .pg_sleep_sedation .txt_box {max-width: 80rem; padding-inline-end: 4rem;}
.pg_sleep .pg_sleep_sedation .txt_box .txt {margin-top: 3rem; font-size: var(--p3); line-height: 1.7; color: var(--gray50);}
.pg_sleep .pg_sleep_sedation .img {position: relative; height: 100rem; overflow: hidden; border-start-start-radius: 50rem; border-end-start-radius: 50rem; background-color: var(--gray10);}
.pg_sleep .pg_sleep_sedation .img img {width: 100%; height: 100%; object-fit: cover;}
.pg_sleep .pg_sleep_sedation .img {background-color: #E6E6E6;}   /* 시안: 오버레이 없음(밝은 톤) — 29 #3 */

/* ── 전신질환 환자 임플란트 (/implants/medical-conditions, idx 28) ── */
.pg_medical_conditions .pg_medical_conditions_safe {padding-top: var(--pd);}
.pg_medical_conditions .safe_body {display: grid; grid-template-columns: minmax(0, 1fr) 64rem; grid-template-areas: 'head img' 'list img'; column-gap: 10rem; align-items: start;}
.pg_medical_conditions .safe_head {grid-area: head;}
.pg_medical_conditions .safe_head .desc {max-width: 80.4rem; margin-top: 5rem; font-size: var(--p3); line-height: 1.7;}
.pg_medical_conditions .safe_head .desc p + p {margin-top: 2rem;}
.pg_medical_conditions .safe_list {grid-area: list; max-width: 68rem; margin-top: var(--contMt1);}
.pg_medical_conditions .safe_list > li {display: flex; align-items: center; gap: 2rem; padding-block: 4.5rem; border-bottom: 1px solid var(--gray20);}   /* 2026-09-18: pr 10rem 제거 — 원고 제목이 길어 559 폭 사용(시안 행 123) */
.pg_medical_conditions .safe_list .num {display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 4.5rem; height: 3rem; border-radius: 99rem; background-color: var(--point01); font-family: var(--en); font-size: var(--p4); line-height: 1; color: #fff;}
.pg_medical_conditions .safe_list .tit {font-size: var(--h8); font-weight: 600; line-height: 1.3;}
.pg_medical_conditions .safe_body .img_box {grid-area: img; position: relative; align-self: end;}
.pg_medical_conditions .safe_body .img_box .img {height: 86rem; overflow: hidden; border-radius: 3rem; border-start-end-radius: 32rem; background-color: var(--gray10);}
.pg_medical_conditions .safe_body .img_box .img img {width: 100%; height: 100%; object-fit: cover;}
.pg_medical_conditions .safe_body .img_box .circle_txt {position: absolute; top: -4rem; inset-inline-end: -4rem; width: 27rem; height: 27rem; overflow: visible; font-family: var(--en); font-size: 2.8rem; letter-spacing: 0.06em; fill: var(--gray10); pointer-events: none; animation: pgMcSpin 40s linear infinite;}   /* 시안 텍스트패스 ≈ 시각 지름 330·글자 28~30 (2026-09-18 검토 28 #3) */
.pg_medical_conditions .safe_body .img_box .circle_txt text {direction: ltr; unicode-bidi: isolate;}   /* 영문 장식 텍스트패스 — RTL 을 상속하면 글리프가 경로 시작점 앞으로 흘러 비가시(svg 자체가 아니라 text 에만 지정해 inset-inline-end 유지) */
@keyframes pgMcSpin {from {transform: rotate(0deg);} to {transform: rotate(360deg);}}   /* 원형 텍스트 회전 — 라미네이트·병원소개·대표원장과 동일(40s 선형 무한) */
.pg_medical_conditions .pg_medical_conditions_cond {padding: var(--pd) 0 var(--pd2); overflow: hidden;}   /* 질환별 슬라이더는 공용 .sub_wide_slider (2026-09-17 승격) */
.pg_medical_conditions .wide_slider ul.txt {padding-inline-start: 0; list-style: disc;}   /* 시안 슬라이드 설명 = list-disc 3줄 */

/* ── 임플란트 재수술 (/implants/revision-surgery, idx 30) ── */
/* 페이지 전용 규칙 없음 — .sub_hero / .sub_intro / .sub_num_cards(.txt_list) / .sub_step_rows 공용 컴포넌트만 사용 */

/* ── 상담예약 (/consultation-appointment, idx 44) ── */
/* Con_01 hero — 공용 .sub_hero 그대로(2560×1280 crop 의 가운데 900 밴드가 시안 크롭) */
/* Con_02 본문(900 폭 = .in5 콘텐츠) — 유의사항 박스(오렌지 그라데이션) → 병원정보 박스(진료시간·TEL·Email, 이메일 비면 열 생략) → 필수 안내 행 → 공용 상담폼 라벨 variant */
.pg_consultation .pg_consultation_body {padding: var(--pd3) 0;}
.pg_consultation .notice_box {padding: 4rem; border-radius: 2rem; background: linear-gradient(90deg, #E9611F 0%, #EB4D00 100%); color: #fff;}
body.is-rtl .pg_consultation .notice_box {background: linear-gradient(270deg, #E9611F 0%, #EB4D00 100%);}
.pg_consultation .notice_tit {display: flex; align-items: center; gap: 1rem; font-size: var(--p2); font-weight: 700; line-height: 1.3;}
.pg_consultation .notice_tit .ico {flex-shrink: 0; width: 2rem; height: 2rem;}
.pg_consultation .notice_txt {margin-top: 1.5rem; font-size: var(--p3); line-height: 1.7;}
.pg_consultation .info_list {display: flex; align-items: stretch; gap: 2rem; margin-top: 2rem;}
.pg_consultation .info_box {display: flex; flex: 1 1 0; flex-direction: column; align-items: center; gap: 2rem; min-width: 0; padding: 3.5rem 3rem; border-radius: 2rem; background-color: #F6F6F6; text-align: center; color: var(--gray90);}
.pg_consultation .info_tit {font-family: var(--en); font-size: var(--h8); font-weight: 400; line-height: 1.3; color: var(--point01);}
.pg_consultation .hours_body {display: flex; flex-direction: column; align-items: flex-start; gap: 2rem; max-width: 100%; text-align: start;}   /* 시안 2108:29923(2026-09-30): 요일 100 열 + 시간, 행 간격 10, 목록 → 안내 20 */
.pg_consultation .hours_list {display: grid; grid-template-columns: minmax(10rem, 1fr) max-content; gap: 1rem 0.5rem; max-width: 100%; font-size: var(--p4); line-height: 1.2;}   /* 요일 열 최소 100 — ru·ar 처럼 긴 요일명은 박스 폭 안에서 줄바꿈, 시간은 한 줄 */
.pg_consultation .hours_list > li {display: contents;}
.pg_consultation .hours_list .day {font-weight: 600; color: var(--point01);}
.pg_consultation .hours_list .time {font-weight: 500; white-space: nowrap; color: #1C1C1C;}
.pg_consultation .hours_note {font-size: var(--p6); line-height: 1; color: #828282;}
.pg_consultation .info_val {display: flex; align-items: center; justify-content: center; gap: 0.5rem; font-size: var(--p2); font-weight: 700; line-height: 1.5;}
.pg_consultation .info_val .ico {flex-shrink: 0; width: 2rem; height: 2rem; color: var(--gray90);}
.pg_consultation .info_val a {color: inherit; text-decoration: none; white-space: nowrap;}   /* 이메일 1줄(시안 abc@naver.com 1줄 — 2026-09-18 검토 44 #2: 박스 px 2rem + 이메일 18px SemiBold) */
.pg_consultation .info_val a[href^="mailto:"] {font-size: var(--p3); font-weight: 600;}   /* 시안 Email SemiBold 20 → 긴 실제 주소가 1줄에 들어가도록 18(검토 44 #8) */
.pg_consultation .c_form.type_label .f_item_top .f_label {padding-top: 0;}   /* 시안: 라벨 글리프가 textarea 상단 정렬(검토 44 #4) */
.pg_consultation .c_form.type_label input:focus, .pg_consultation .c_form.type_label textarea:focus {border-color: var(--black);}   /* 시안 포커스 테두리 검정(검토 44 #6) */
@media screen and (min-width: 1241px) { .pg_consultation .info_val a[href^="mailto:"]:hover {color: var(--point01);} }   /* 전화번호는 호버 없음(2026-09-30) */
.pg_consultation .required_note {margin-top: 5rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--gray90); font-size: var(--p6); line-height: 1; text-align: end; color: var(--gray70);}
.pg_consultation .required_note .req {font-style: normal; font-weight: 700; color: var(--point01);}
.pg_consultation .form_wrap {width: 90rem; max-width: 100%; margin: 5rem auto 0; padding: 0 3rem; scroll-margin-top: calc(var(--hdH) + 3rem);} /* #consultFormWrap 앵커로 올 때 고정 헤더에 가리지 않게 */

/* ── 임플란트 개요 (/implants, idx 25) ── */
/* Con_01 히어로 — 공용 .sub_hero, 시안 크롭 위치(이미지 하단 87%)만 보정 */
.pg_implants .sub_hero .hero_bg img {object-position: center 87%;}
/* Con_03-01 "What Is an Implant?" 구조 블록 — 공용 .sub_num_cards 안, 카드 리스트 앞(시안 01 → 02 간격 200). 다이어그램 75×56.5rem(옐로 라벨 + 지시선·점) | 설명 + 부품 리스트(흰 카드 3행) */
.pg_implants .structure {max-width: 160rem; margin: 0 auto var(--pd2);}
.pg_implants .structure_body {display: flex; align-items: center; gap: 5rem; margin-top: var(--contMt2);}
.pg_implants .diagram {position: relative; flex-shrink: 0; width: 75rem; aspect-ratio: 750 / 565; direction: ltr;}   /* 라벨이 그림 좌표에 묶여 있어 RTL 에서도 물리 위치 유지(그림 자체는 미러링하지 않음) */
.pg_implants .diagram > img {width: 100%; height: 100%; object-fit: contain;}
.pg_implants .diagram_labels > li {position: absolute; left: 7.2%; display: flex; align-items: center; height: 3.4rem;}
.pg_implants .diagram_labels > li::before {content: ''; position: absolute; top: 50%; left: 0; right: 0; height: 1px; background-color: var(--yellow);}
.pg_implants .diagram_labels > li::after {content: ''; position: absolute; top: 50%; right: -0.25rem; width: 0.5rem; height: 0.5rem; border-radius: 50%; background-color: var(--yellow); transform: translateY(-50%);}
.pg_implants .diagram_labels .lbl1 {top: 13%; width: 20.1%;}
.pg_implants .diagram_labels .lbl2 {top: 44.4%; width: 25.5%;}   /* 시안 pill2 top 251/565 (2026-09-18 검토 25 #4) */
.pg_implants .diagram_labels .lbl3 {top: 74.1%; width: 25.5%;}   /* 시안 pill3 top 418.8/565 */
.pg_implants .diagram_labels .pill {position: relative; z-index: 1; display: inline-flex; align-items: center; padding: 0.8rem 1.5rem; border: 1px solid var(--yellow); border-radius: 99rem; background-color: var(--yellow); font-size: var(--p3); font-weight: 700; line-height: 1; white-space: nowrap; color: #481A04;}   /* 시안 18px Bold */
.pg_implants .structure .txt_box {flex: 1 1 0; min-width: 0;}
.pg_implants .structure .txt_box > .txt {font-size: var(--p3); line-height: 1.7;}
.pg_implants .part_list {display: flex; flex-direction: column; gap: 1rem; margin-top: 5rem;}
.pg_implants .part_list > li {display: flex; align-items: center; gap: 2rem; padding: 3rem 4rem; border-radius: 1.5rem; background-color: #fff; color: var(--gray90);}
.pg_implants .part_list .name {display: flex; align-items: center; gap: 1rem; flex-shrink: 0; min-width: 14rem; font-size: var(--p2); font-weight: 700; line-height: 1;}
.pg_implants .part_list .num {display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 3rem; height: 3rem; border-radius: 50%; background-color: #171A3B; font-size: var(--p6); font-weight: 700; line-height: 1; color: #fff;}
.pg_implants .part_list .desc {font-size: var(--p4); line-height: 1.7; color: var(--gray60);}


/* ── 의료진 소개 (/about/medical-team, idx 17) ── */
/* 히어로(Con_01) — 공용 .sub_hero.dim_30.vignette_light(단체사진, 검정 30% + 중앙 라디얼 10%, 오렌지 없음), 페이지 추가 규칙 없음 */
/* 의료진 행(Con_02) — 사진 70rem(700×925, 좌하단 30rem 라운드) | 텍스트 80rem(직급 chip · Marcellus 이름 5.5rem · 오렌지 인용(“ ” 텍스트 밀착 — 스킨 JS 가 .q_txt 폭을 가장 긴 줄로) · 약력 66rem 가운데 정렬 + 인라인 불릿). 홀수 index .is-rev 는 사진 오른쪽(우하단 라운드). DB 사진은 누끼 PNG 라 스튜디오 배경을 그라데이션으로 대체 */
.pg_medical_team .pg_medical_team_list {padding: var(--pd) 0;}
.pg_medical_team .doctor_list {display: flex; flex-direction: column; gap: var(--contMt1); margin-top: var(--contMt1);}
.pg_medical_team .doctor_row {display: flex; align-items: center; gap: 10rem;}
.pg_medical_team .doctor_row.is-rev {flex-direction: row-reverse;}
.pg_medical_team .doctor_row .img {flex: 1 1 0; min-width: 0; aspect-ratio: 700 / 925; overflow: hidden; border-radius: 3rem; border-end-start-radius: 30rem; background: linear-gradient(180deg, var(--gray5) 0%, var(--gray10) 100%);}
.pg_medical_team .doctor_row.is-rev .img {border-end-start-radius: 3rem; border-end-end-radius: 30rem;}
.pg_medical_team .doctor_row .img img {width: 100%; height: 100%; object-fit: cover; object-position: center top;}
.pg_medical_team .doctor_row .txt_box {flex-shrink: 0; width: 80rem;}
.pg_medical_team .doctor_row .head {display: flex; flex-direction: column; align-items: center; gap: 2rem; padding-bottom: 3rem; border-bottom: 1px solid var(--gray10); text-align: center;}
.pg_medical_team .doctor_row .chip {display: inline-flex; align-items: center; padding: 0.5rem 2rem; border-radius: 60rem; background-color: rgba(255,94,16,0.1); font-size: var(--p3); font-weight: 700; line-height: 1.5; color: var(--point01);}
.pg_medical_team .doctor_row .name {font-family: var(--en); font-size: 5.5rem; font-weight: 400; line-height: 1; color: var(--gray90);}   /* 시안 55px (검토 #4) — 1240/768 px 는 sub_resp */
.pg_medical_team .doctor_row .quote {display: flex; align-items: flex-start; justify-content: center; gap: 1.1rem; margin-top: 4rem; font-family: var(--en); color: var(--point01);}
.pg_medical_team .doctor_row .quote .q_mark {flex-shrink: 0; font-size: 5rem; line-height: 1;}
body.is-rtl .pg_medical_team .doctor_row .quote .q_mark {transform: scaleX(-1);}   /* RTL: “ ” 글리프는 방향과 무관 → 좌우 반전(메인 .d_quote 와 동일) */
.pg_medical_team .doctor_row .quote .q_txt {min-width: 0; max-width: 56rem; font-size: var(--h5); line-height: 1.3; text-align: center; text-wrap: balance;}   /* max-width 는 줄바꿈 기준, 실제 폭은 JS 가 가장 긴 줄로 줄인다(검토 #3) */
.pg_medical_team .doctor_row .career {max-width: 66rem; margin: 5rem auto 0; font-size: var(--p4); font-weight: 500; line-height: 1.7; text-align: center; color: var(--gray70);}   /* 시안 list-disc 660 가운데 정렬 (검토 #2) */
.pg_medical_team .doctor_row .head + .career {margin-top: 4rem;}
.pg_medical_team .doctor_row .career > li::before {content: ''; display: inline-block; width: 5px; height: 5px; margin-inline-end: 1.2rem; border-radius: 50%; background-color: currentColor; vertical-align: middle;}
.pg_medical_team .doctor_empty {padding: var(--pd4) 0; margin-top: var(--contMt1); font-size: var(--p3); line-height: 1.7; text-align: center; color: var(--gray50);}

/* ── 오시는 길 (/about/location, idx 21) ── */
/* 히어로(Con_01) — 공용 .sub_hero.dim_45.vignette.blur(외관 사진 blur 2.5px + 검정 45% + 중앙 라디얼, 오렌지 없음), 페이지 추가 규칙 없음 */
/* Con_02 — 타이틀 · 지도 파셜(.map_box 는 common.css) · 정보 블록 3개(pb 10rem + 하단 1px rgba(0,0,0,.5) 선, 간격 10rem, 마지막 인천 블록은 선·하단 패딩 없음): 상담(px 6rem, 가운데 정렬: 텍스트 컬럼(hug, 시안 509) + gap 20rem + 약도 64.5rem) / 공항 2블록(px 0 — 제목 x 480 · 지도 1600×771 라운드 3rem, 제목 2줄 둘째 줄 오렌지 + 설명 2.4rem/1.5) */
.pg_location .pg_location_body {padding: var(--pd) 0;}
.pg_location .map_area {padding-top: 2rem;}   /* 공용 .map_box 의 margin-top(--contMt2 8rem) + 2rem = 시안 간격 10rem */
.pg_location .info_block {margin-top: var(--contMt1); padding: 0 0 10rem; border-bottom: 1px solid rgba(0,0,0,0.5);}   /* 시안 약도·김포 블록 pb 100 + 1px 선(검토 인벤토리 792 / 1173) */
.pg_location .info_block:last-child {padding-bottom: 0; border-bottom: 0;}   /* 시안 2120:5116 인천 블록: 구분선·pb 없음 (검토 #6) */
.pg_location .blk_tit {font-family: var(--en); font-size: 5rem; font-weight: 400; line-height: 1.4; color: var(--gray90);}
.pg_location .blk_tit .hl {color: var(--point01);}
.pg_location .consult_block {display: flex; align-items: flex-start; justify-content: center; gap: 20rem; margin-top: var(--contMt3); padding: 0 6rem 10rem;}   /* 시안 2120:5086: px 60 · 지도→약도 60 · pb 100 · justify-center (검토 #3·#5) */
.pg_location .consult_txt {flex: 0 1 auto; min-width: 0;}   /* 시안 텍스트 컬럼 509 = 제목(Marcellus 50) hug 폭 */
.pg_location .consult_info {margin-top: var(--contMt1);}
.pg_location .tel_label {font-size: var(--p4); line-height: 1; color: var(--gray90);}
.pg_location .tel {display: inline-block; margin-top: 3rem; font-size: 5rem; font-weight: 700; line-height: 1; color: var(--gray90);}
.pg_location .hours_box {margin-top: var(--contMt2);}
.pg_location .hours {display: flex; flex-direction: column; gap: 2rem; font-size: var(--p4); line-height: 1.5; color: var(--gray90);}
.pg_location .hours > li {display: flex; align-items: flex-start; gap: 2rem;}
.pg_location .hours .day {flex: 0 0 12rem;}
.pg_location .hours .time {font-weight: 700;}
.pg_location .hours > li.is_evening .time {color: var(--point01);}   /* 시안 2120:5100 야간진료 행 오렌지 (검토 #9 — 공용 문구 구조상 시간 전체 강조) */
.pg_location .hours .badge {font-style: normal; white-space: nowrap; color: var(--point01);}
.pg_location .hours .badge::before {content: '(';}
.pg_location .hours .badge::after {content: ')';}
.pg_location .parking {max-width: 46rem; margin-top: 3rem; font-size: var(--p4); line-height: 1.5; color: var(--gray60);}
.pg_location .sketch {flex-shrink: 0; width: 64.5rem;}
.pg_location .sketch img {width: 100%; height: auto;}
.pg_location .airport_block .blk_txt {max-width: 90rem; margin-top: var(--contMt4); font-size: 2.4rem; font-weight: 400; line-height: 1.5; color: var(--gray90);}   /* 시안 24px/1.5, 제목→설명 40 (검토 #7) — 1240/768 px 는 sub_resp */
.pg_location .airport_block .map_img {margin-top: 5rem; overflow: hidden; border-radius: 3rem; background-color: var(--grayBg1);}
.pg_location .airport_block .map_img img {width: 100%; height: auto;}

/* ── 대표원장 소개 (/about/chief-director, idx 18) ── */
/* 프로필(Con_02) — 오렌지 배경·하단 양쪽 10rem 라운드, 가운데 타이틀(.sect_tit_box.center.wh_all[.lg 요청]) + 흰 박스(좌상단 36rem 라운드) 위 누끼 사진(박스 위로 18.1rem 돌출) + 회전 텍스트패스 + 직급·약력. 텍스처(blur 사진)는 그라데이션 근사 */
.pg_chief_director .pg_chief_director_profile {position: relative; padding: var(--pd2) 0; overflow: hidden; background: linear-gradient(180deg, #FF5E10 56.13%, #F74E0A 100%); border-end-start-radius: 10rem; border-end-end-radius: 10rem; color: #fff;}
.pg_chief_director .pg_chief_director_profile .in {z-index: 1;}
.pg_chief_director .profile_body {display: flex; align-items: center; justify-content: center; gap: 10rem; margin-top: var(--pd2);}
.pg_chief_director .profile_img {position: relative; flex-shrink: 0; width: 67.4rem; aspect-ratio: 674 / 795; border-radius: 3rem; border-start-start-radius: 36rem; background-color: #fff;}
.pg_chief_director .profile_img::before {content: ''; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(55% 55% at 100% 100%, rgba(255,94,16,0.45), rgba(255,94,16,0) 70%); pointer-events: none;}
body.is-rtl .pg_chief_director .profile_img::before {background: radial-gradient(55% 55% at 0% 100%, rgba(255,94,16,0.45), rgba(255,94,16,0) 70%);}   /* RTL: 큰 라운드(좌상→우상) 반대편 하단 글로우도 미러 */
.pg_chief_director .profile_img img {position: absolute; bottom: 0; inset-inline-start: 5.86%; z-index: 1; width: 96.44%; height: auto;}
.pg_chief_director .profile_img .circle_txt {position: absolute; top: 3%; inset-inline-start: -11.05rem; z-index: 2; width: 30.4rem; height: 30.4rem; margin: 0; pointer-events: none;}
.pg_chief_director .profile_img .circle_txt svg {display: block; width: 100%; height: 100%; overflow: visible; animation: pgChiefSpin 40s linear infinite;}
.pg_chief_director .profile_img .circle_txt text {font-family: var(--en); font-size: 24px; fill: var(--gray10); direction: ltr; unicode-bidi: isolate;}
@keyframes pgChiefSpin {from {transform: rotate(0deg);} to {transform: rotate(360deg);}}
.pg_chief_director .profile_txt {width: 67.3rem;}
.pg_chief_director .profile_txt .position {font-family: var(--en); font-size: var(--h4); font-weight: 400; line-height: 1.3; color: var(--yellow);}
.pg_chief_director .career_list {display: flex; flex-direction: column; gap: 1rem; margin-top: 3rem; font-size: var(--p3); line-height: 1.7;}
.pg_chief_director .career_list > li {position: relative; padding-inline-start: 1rem;}   /* 시안 불릿 5 + gap 5 (18.md #8) */
.pg_chief_director .career_list > li::before {content: '·'; position: absolute; top: 0; inset-inline-start: 0;}
/* 사진 흩뿌림 + 텍스트 모션(Con_03) — 144rem 섹션에 사진 6장 절대배치(x 는 2560 기준 %, y·크기는 rem, 가장자리 4장은 시안대로 섹션 경계에서 잘림), 가운데 100rem 문단(단어별 불투명도는 JS) */
/* 스티키 스토리(Con_03, 2026-09-30 — 참고 medi.soijeong.com .rotation_sect) — 섹션 300svh 가 스크롤되는 동안 .story_sticky(100lvh)가 sticky 고정, 사진 6장은 스크롤 타임라인(스킨 스크립트)으로 아래에서 올라와 자리 잡고 문구가 채워진다.
   사진은 문구 위 띠(1·5·4)·아래 띠(2·3·6)로 나눠 문구 높이 절반(--th, JS 실측)만큼 떨어뜨려 붙인다 → 폭·언어·화면 높이가 달라도 문구와 겹치지 않음(짧은 화면은 가장자리가 잘림) */
.pg_chief_director .pg_chief_director_story {position: relative; height: 300svh;}
.pg_chief_director .pg_chief_director_story.is_static {height: auto;}   /* 모션 줄이기·스크립트 없음: 한 화면 그대로 */
.pg_chief_director .story_sticky {--th: 12rem; position: sticky; top: 0; display: flex; align-items: center; height: 100lvh; overflow: hidden;}
.pg_chief_director .pg_chief_director_story.is_static .story_sticky {position: relative;}
.pg_chief_director .story_sticky .in {position: relative; z-index: 1; width: 100%;}
.pg_chief_director .story_txt {max-width: 100rem; margin: 0 auto; font-size: var(--h6); font-weight: 500; line-height: 1.5; text-align: center; color: var(--gray90);}
.pg_chief_director .story_txt .fill {background: linear-gradient(to right, var(--gray90) 50%, var(--gray20) 50%) 0% 0 / 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;}   /* 기본 = 다 채운 상태, 스크립트가 100% → 0% 로 채움 */
body.is-rtl .pg_chief_director .story_txt .fill {background-image: linear-gradient(to right, var(--gray20) 50%, var(--gray90) 50%); background-position: 100% 0;}   /* 아랍어는 오른쪽부터 채움(0% → 100%) */
.pg_chief_director .story_imgs {position: absolute; inset: 0; pointer-events: none;}
.pg_chief_director .story_imgs > li {position: absolute;}
.pg_chief_director .story_imgs .pic {width: 100%; overflow: hidden; border-radius: 2rem; background-color: var(--gray10);}
.pg_chief_director .story_imgs .pic img {display: block; width: 100%; height: auto;}   /* li 는 너비만 지정 — 높이는 이미지 원본 비율을 따른다 */
.pg_chief_director .story_imgs > li:nth-child(1) {bottom: calc(50% + var(--th) + 10rem); inset-inline-start: 8.71%; width: 40.5rem;}
.pg_chief_director .story_imgs > li:nth-child(1) .pic {background-color: transparent;}   /* scatter1 은 이미지 자체에 위·아래 라운드(투명 모서리) */
.pg_chief_director .story_imgs > li:nth-child(5) {bottom: calc(55% + var(--th) + 3rem); inset-inline-start: 40.12%; width: 33.3rem;}
.pg_chief_director .story_imgs > li:nth-child(4) {bottom: calc(50% + var(--th) + 1rem); inset-inline-start: 78.24%; width: 30.8rem;}
.pg_chief_director .story_imgs > li:nth-child(2) {top: calc(50% + var(--th) + 6rem); inset-inline-start: 0; width: 28.2rem;}
.pg_chief_director .story_imgs > li:nth-child(3) {top: calc(50% + var(--th) + 3rem); inset-inline-start: 47.3%; width: min(29.8rem, calc((50lvh - var(--th) - 5rem) / 1.5));}   /* 어느 화면이든 아래가 잘리지 않게 — 문구 아래~바닥 남은 높이에 맞춰 줄어듦(2026-09-30) */
.pg_chief_director .story_imgs > li:nth-child(6) {top: calc(50% + var(--th) + 12rem); inset-inline-start: 90.27%; width: 24.9rem;}

/* 강연 슬라이더(Con_04) — 타이틀(좌) + .sub_slide_ctrl(우·아래 정렬), 좌측 정렬 블리드 슬라이더(컨테이너는 .in 왼쪽선~화면 오른쪽 끝, 기본 overflow hidden 유지; 54.8rem 카드, 간격 5rem(JS spaceBetween), 우상·좌하 20rem 대각 라운드 + 캡션) */
.pg_chief_director .pg_chief_director_world {padding: var(--pd2) 0; overflow: hidden;}
.pg_chief_director .world_head {display: flex; align-items: flex-end; justify-content: space-between; gap: 4rem;}
.pg_chief_director .world_head .head_txt {flex: 1 1 0; min-width: 0;}
.pg_chief_director .world_head .sub_slide_ctrl {flex-shrink: 0; padding-bottom: 0.5rem;}
.pg_chief_director .world_txt {max-width: 81.6rem; margin-top: 5rem; font-size: var(--p3); line-height: 1.7; color: var(--gray50);}   /* 시안 서브내용 816 폭 3줄 (18.md #2) */
.pg_chief_director .lecture_slider {margin-top: var(--contMt1); padding-inline-start: max(calc((100% - var(--in)) / 2 + var(--inPd)), var(--inPd));}
.pg_chief_director .lecture_slider .swiper-slide {width: 54.8rem;}
.pg_chief_director .lecture_slider .img {height: 40rem; overflow: hidden; border-radius: 3rem; border-start-end-radius: 20rem; border-end-start-radius: 20rem; background-color: var(--gray10);}   /* 시안 대각 라운드: 좌상 30 · 우상 200 · 좌하 200 · 우하 30 (18.md #1) */
.pg_chief_director .lecture_slider .img img {width: 100%; height: 100%; object-fit: cover;}
.pg_chief_director .lecture_slider .cap {margin-top: 3rem; font-size: var(--h8); font-weight: 600; line-height: 1.5; color: var(--gray90);}

/* ── 연세힐치과의 약속 (/about/promise, idx 19) ── */
/* 약속 인트로(Con_02) — 타이틀·설명 + [의료진 사진 750×1000(좌상·우하 30rem 대각 라운드, 스마일 서명 우하단 와이프) | 인용 박스(오렌지, 좌하단 0 라운드, “ ” 5rem 이 첫 줄 양끝에 밀착) + 본문 + 서명]. 아래 공용 .sub_step_rows 패딩(25rem)과 합쳐 시안 30rem */
.pg_promise .pg_promise_intro {padding: var(--pd) 0 5rem;}
.pg_promise .intro_head > .sub_desc_box {margin-top: var(--contMt4);}
.pg_promise .intro_body {display: flex; align-items: flex-start; justify-content: space-between; gap: 10rem; margin-top: var(--contMt1);}
.pg_promise .intro_img {position: relative; flex-shrink: 0; width: 75rem; aspect-ratio: 3 / 4; overflow: hidden; border-radius: 3rem; border-start-start-radius: 30rem; border-end-end-radius: 30rem; background-color: var(--gray10);}   /* 시안 2120:3868 좌상 300 · 우하 300 (검토 #2) */
.pg_promise .intro_img img {width: 100%; height: 100%; object-fit: cover;}
.pg_promise .intro_img .smile {position: absolute; bottom: 6rem; inset-inline-end: 13rem; width: 34.6rem; height: 10rem; color: var(--point01);}   /* 시안 2120:13829 right 130 (검토 #3) */
.sub_js .pg_promise .intro_img .smile {clip-path: inset(0 100% 0 0); transition: clip-path 0.9s ease-out 0.4s;}
.sub_js .pg_promise .intro_img.active .smile {clip-path: inset(0);}
body.is-rtl .pg_promise .intro_img .smile {transform: scaleX(-1);}   /* RTL: 스마일 미러 — clip-path 가 svg 좌표 기준이라 드로잉도 시작(오른쪽)부터 */
.pg_promise .intro_txt {display: flex; flex-direction: column; align-items: flex-end; gap: 5rem; width: 75rem;}
.pg_promise .intro_txt .quote {width: 100%; padding: 7rem 4rem; border-radius: 10rem; border-end-start-radius: 0; background-color: var(--point01); color: #fff; text-align: center;}
.pg_promise .intro_txt .q_txt {display: flex; align-items: flex-start; justify-content: center; gap: 1.1rem; font-family: var(--en); font-size: var(--h3); font-weight: 400; line-height: 1.3;}   /* 시안 2120:3872: “ 50 | 텍스트(auto 폭) | ” 50, items-start, gap 11 (검토 #8) */
.pg_promise .intro_txt .q_mark {flex-shrink: 0; font-size: 5rem; line-height: 1;}
body.is-rtl .pg_promise .intro_txt .q_mark {transform: scaleX(-1);}   /* RTL: 따옴표 좌우 반전 */
.pg_promise .intro_txt .q_body {min-width: 0; width: fit-content; text-align: center; text-wrap: balance;}   /* 수동 개행 없이 자동 줄바꿈되는 locale 은 스킨 JS 가 가장 긴 줄 폭으로 줄인다 */
.pg_promise .intro_txt .txt {width: 100%; font-size: var(--p3); line-height: 1.7; color: var(--gray90);}
.pg_promise .intro_txt .txt > span {display: block;}
.pg_promise .intro_txt .txt > span + span {margin-top: 1.7em;}   /* 문단 간격 = 기존 빈 줄(br br) 1줄 높이 */
.pg_promise .intro_txt .sign {width: 32rem; height: auto;}
/* 3가지 약속(Con_03) — 공용 .sub_step_rows.round_cycle.glow_end 3행(행별 라운드 좌상→우상→우하, 글로우 우측). 페이지 규칙: 이미지 75rem · 내용 pr 10rem · 제목 35/1.5 · 본문 16/1.5 65rem · 하단 패딩 30rem (검토 #6·#7·#9·#10) */
.pg_promise .pg_promise_promises {padding-bottom: var(--pd);}
.pg_promise .step_row_list > li {grid-template-columns: 75rem minmax(0, 1fr);}
.pg_promise .step_row_list .txt_box {padding-inline-end: 10rem;}
.pg_promise .step_row_list .tit {font-size: var(--h5); line-height: 1.5;}
.pg_promise .step_row_list .txt {max-width: 65rem; font-size: var(--p4); line-height: 1.5;}

/* ── 환자 경험 (/before-after, idx 41) ── */
/* Con_01 히어로 — 공용 .sub_hero.dim_none(시안 오버레이 hidden). Con_02 인트로 — 공용 .sub_intro + .intro_img.round (페이지 추가 규칙 없음) */
/* Con_03 환자 이야기 — 공용 .sub_marquee 아래 80rem 타이틀·설명(회색) + 목록 버튼 2개(pill 25×5rem, 치료명 오렌지) + B&A 콜라주(188rem: 캡슐 34×50rem ×3 + 와이드 80×60rem, .in 을 양옆 14rem 넘쳐 가운데) */
.pg_patient_experience .pg_patient_experience_stories {padding-bottom: var(--pd1);}
.pg_patient_experience .stories_head {max-width: 80rem; margin: var(--contMt2) auto 0; color: var(--gray50);}
.pg_patient_experience .stories_head .sub_desc_box {margin-top: 3rem;}
.pg_patient_experience .ba_btns {display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1.5rem; margin-top: var(--contMt2);}
.pg_patient_experience .ba_btn {display: inline-flex; align-items: center; justify-content: center; gap: 1.7rem; min-width: 25rem; height: 5rem; padding: 0 2.5rem; border: 1px solid var(--gray90); border-radius: 99rem; font-size: var(--p4); font-weight: 600; line-height: 1; white-space: nowrap; color: var(--gray90); transition: background-color 0.3s, color 0.3s;}
.pg_patient_experience .ba_btn em {font-style: normal; font-weight: 600; color: var(--point01);}   /* 시안 SemiBold(2026-09-18 검토 41 #1) */
.pg_patient_experience .ba_btn .arr_ico {flex-shrink: 0; width: 1.4rem; height: 1.4rem;}
.pg_patient_experience .ba_btn:focus-visible {background-color: var(--gray90); color: #fff;}
@media screen and (min-width: 1241px) { .pg_patient_experience .ba_btn:hover {background-color: var(--gray90); color: #fff;} }
body.is-rtl .pg_patient_experience .ba_btns .arr_ico {transform: scaleX(-1);}
/* B&A 콜라주(2026-09-29 아코디언) — 카드 4장, .active(첫 카드로 시작, 호버로 전환) 만 와이드 80:60(합본 전체 + Before/After 라벨), 나머지는 캡슐 34:50(합본 왼쪽 Before 절반). 폭 = flex-grow 34/80, 높이 = 컨테이너 폭 기준(cqw) 이라 전환이 끊김 없이 이어진다. (188 = 34×3 + 80 + 간격 2×3) */
.pg_patient_experience .ba_collage_wrap {width: min(188rem, 100vw - 4rem); margin: var(--contMt2) calc((100% - min(188rem, 100vw - 4rem)) / 2) 0; container-type: inline-size;}   /* 폭이 .in 보다 넓어도 가운데(음수 마진), 뷰포트보다 넓으면 카드가 비율대로 줄어듦. 카드 크기는 이 폭(cqw) 기준 */
.pg_patient_experience .ba_collage {display: flex; align-items: center; justify-content: center; gap: 2rem; height: calc((100cqw - var(--ba-gaps, 6rem)) * 60 / var(--ba-span, 182));}   /* 높이 = 펼친 카드(80:60) 높이로 고정 — 전환 중 카드 높이가 바뀌어도 아래 내용이 움직이지 않음. --ba-span/--ba-gaps 는 카드 수에 따라 _Skin/41.php 가 싣는다(기본값 = 4장) */
.pg_patient_experience .ba_collage > li {position: relative; flex: 34 1 0; min-width: 0; height: calc((100cqw - var(--ba-gaps, 6rem)) * 34 / var(--ba-span, 182) * 50 / 34); overflow: hidden; border-radius: 99rem; background: linear-gradient(180deg, #F0F3F7 0%, #CBD0D6 100%); cursor: pointer;}
.pg_patient_experience .ba_collage > li.active {flex-grow: 80; height: calc((100cqw - var(--ba-gaps, 6rem)) * 80 / var(--ba-span, 182) * 3 / 4); border-radius: 3rem; background: linear-gradient(0deg, #F0F3F7 0%, var(--point01) 75%, var(--point01) 100%); cursor: default;}
.pg_patient_experience .ba_collage > li {transition: flex-grow 0.6s ease, height 0.6s ease, border-radius 0.6s ease;}   /* 아코디언 전환(리빌은 ul 의 공용 .sub_reveal) */
.pg_patient_experience .ba_collage > li:focus-visible {outline: 2px solid var(--point01); outline-offset: 3px;}
.pg_patient_experience .ba_collage .img {position: absolute; inset: 0;}
.pg_patient_experience .ba_collage .img img {position: absolute; top: 0; left: 0; width: 200%; max-width: none; height: 100%; object-fit: cover; object-position: left center; transition: width 0.6s ease;}   /* 사진 좌표는 물리 좌표(RTL 에서도 Before 가 왼쪽) — 캡슐은 합본 왼쪽 절반만 */
.pg_patient_experience .ba_collage .active .img img {width: 100%;}
.pg_patient_experience .ba_collage .img .pair {position: absolute; top: 0; left: 0; display: flex; width: 200%; height: 100%; direction: ltr; transition: width 0.6s ease;}   /* 관리자 지정 사례(Before·After 별도 이미지)를 합본처럼 나란히 — 캡슐은 왼쪽(Before) 절반, 물리 좌표 고정 */
.pg_patient_experience .ba_collage .active .img .pair {width: 100%;}
.pg_patient_experience .ba_collage .img .pair img, .pg_patient_experience .ba_collage .active .img .pair img {position: static; flex: 0 0 50%; width: 50%; height: 100%; object-fit: cover; object-position: center; transition: none;}
.pg_patient_experience .ba_collage .lbl {position: absolute; top: 5%; left: 25%; z-index: 1; min-width: 9rem; padding: 0.8rem 1.5rem; border-radius: 5rem; background-color: rgba(255,255,255,0.2); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); font-size: var(--p3); font-weight: 600; line-height: 1; text-align: center; white-space: nowrap; color: #fff; opacity: 0; transform: translateX(-50%); transition: opacity 0.3s ease; pointer-events: none;}
.pg_patient_experience .ba_collage .lbl.after {left: 75%; background-color: #fff; color: var(--point01);}
.pg_patient_experience .ba_collage .active .lbl {opacity: 1; transition-delay: 0.4s;}

/* ── 자주 묻는 질문 (/before-after/faq, idx 47) ── */
/* 자주묻는질문 섹션 — 120rem 콘텐츠(.in3): 공용 .sub_tabs(카테고리) → .sub_list_head(총/검색) → 아코디언 → 공용 .sub_paging. 서브탑·푸터 사이 pt 10rem / pb 20rem */
.pg_faq .pg_faq_list {padding: var(--pd4) 0 var(--pd2);}
.pg_faq .pg_faq_list .sub_list_head {margin-top: var(--contMt2);}
.pg_faq .search_result {margin-top: 1.5rem; font-size: var(--p4); line-height: 1.5; color: var(--gray50);}
/* 아코디언 — 목록 상단 1px 진한 선, 행마다 1px 연한 선(열린 행은 선 대신 회색 답변 패널이 이어진다) */
.pg_faq .faq_list {margin-top: 2rem; border-top: 1px solid var(--gray90);}
.pg_faq .faq_item {border-bottom: 1px solid var(--gray20);}
.pg_faq .faq_item.is-open {border-bottom-color: transparent;}
/* 질문 행(button) — 카테고리 라벨 8rem 가운데 + 질문 1줄 말줄임 + 우측 화살표(export svg 11×20 을 90° 회전 = 아래 / 열리면 -90° = 위) */
.pg_faq .faq_q_h {margin: 0; font: inherit;}   /* 질문 h3 래퍼(heading 구조) — 모양은 .faq_q 그대로. 769px 이상 subgrid 통과 규칙은 sub_resp.css */
.pg_faq .faq_q {display: flex; align-items: center; gap: 3.5rem; width: 100%; min-height: 10rem; padding: 2rem 4rem; text-align: start; color: var(--gray90); cursor: pointer;}
.pg_faq .faq_q:focus-visible {outline: 2px solid var(--point01); outline-offset: -2px;}
.pg_faq .faq_q .cate {flex: 0 0 auto; width: 8rem; font-size: var(--p4); font-weight: 600; line-height: 1.3; text-align: center; overflow-wrap: anywhere; color: var(--gray40);}
.pg_faq .faq_q .q_txt {flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--p1); font-weight: 700; line-height: 1.7; color: var(--gray90); transition: color 0.3s;}
.pg_faq .faq_q .arr {display: flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 2rem; height: 2rem; color: var(--gray90);}
.pg_faq .faq_q .arr svg {width: 1.1rem; height: 2rem; transform: rotate(90deg); transition: transform 0.3s ease;}
.pg_faq .faq_q[aria-expanded="true"] .arr svg {transform: rotate(-90deg);}
/* 답변 패널 — [hidden] 은 display:none, 열림 전환은 grid-template-rows 0fr→1fr (JS 는 hidden/.is-open 만 토글) */
.pg_faq .faq_a {display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.35s ease;}
.pg_faq .faq_a[hidden] {display: none;}
.pg_faq .faq_a.is-open {grid-template-rows: 1fr;}
.pg_faq .faq_a_in {min-height: 0; overflow: hidden;}
.pg_faq .faq_a_body {display: flex; align-items: flex-start; gap: 3.5rem; padding-block: 4rem; padding-inline: 4rem 30rem; background-color: #F6F6F6;}
.pg_faq .faq_a_body .a_lbl {flex: 0 0 auto; width: 8rem; font-family: var(--en); font-size: var(--h6); font-weight: 400; line-height: 1.3; text-align: center; color: var(--point01);}
.pg_faq .faq_a_body .a_txt {flex: 1 1 0; min-width: 0; font-size: var(--p3); line-height: 1.7; overflow-wrap: anywhere; color: var(--gray90);}
.pg_faq .faq_a_body .a_txt img {max-width: 100%; height: auto;}
.pg_faq .faq_a_body .a_txt a {text-decoration: underline; text-underline-offset: 0.2em;}
/* 빈 목록/검색 결과 없음 */
.pg_faq .faq_empty {margin-top: 2rem; padding: var(--pd4) 2rem; border-top: 1px solid var(--gray90); border-bottom: 1px solid var(--gray20); font-size: var(--p3); line-height: 1.7; text-align: center; color: var(--gray50);}

/* ── Before & After 목록 (/before-after/implants idx 42 · /before-after/veneers idx 43 — 공용 파셜 _Skin/include/ba-list.php, 루트 .pg_ba_list + .pg_ba_implants|.pg_ba_veneers) ── */
/* 히어로(Con_01) — 공용 .sub_hero.dim_flat(검정 30% 평면 틴트, 그라데이션 없음 — 통합 담당자 variant), 페이지 추가 규칙 없음 */
/* 치료후기 — .in3(1200) 안 공용 .sub_list_head(총 건수 + 검색) → 3열 카드(373×797: 비교 이미지 545 + 카테고리·Marcellus 제목·환자 + View more pill) → 공용 sub-paging.php */
.pg_ba_list .pg_ba_list_body {padding: var(--pd4) 0 var(--pd2);}   /* 시안 Con_02: 상 100 / 하 200 (2026-09-18 검토 42 #1) */
.pg_ba_list .list_result {margin-top: 2rem; font-size: var(--p4); line-height: 1.5; color: var(--gray50);}
.pg_ba_list .ba_card_list {display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10rem 4rem; margin-top: 2rem;}
.pg_ba_list .ba_card {display: flex; flex-direction: column; gap: 4rem; height: 100%; color: var(--gray90);}
/* 비교 이미지 — 공용 .sub_ba_compare(드래그 비교)를 373×545 라운드 30 박스로. 사진이 한 장뿐이면 .imgs.is-single 로 전체 표시 + chip */
.pg_ba_list .ba_card .imgs {position: relative; aspect-ratio: 373 / 545; overflow: hidden; border-radius: 3rem; background-color: var(--gray10);}
.pg_ba_list .ba_card .imgs.is-single .cimg {position: absolute; inset: 0;}
.pg_ba_list .ba_card .imgs.is-single .cimg img {width: 100%; height: 100%; object-fit: cover; object-position: center top;}
.pg_ba_list .ba_card .imgs.is-single .chip {position: absolute; bottom: 1.5rem; inset-inline-start: 1.5rem; z-index: 1; min-width: 8.4rem; padding: 0.8rem 1.5rem; border-radius: 5rem; background-color: rgba(255,255,255,0.3); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); font-size: var(--p4); font-weight: 600; line-height: 1; text-align: center; white-space: nowrap; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,0.35);}
.pg_ba_list .ba_card .txt_box {flex: 1 1 auto;}
.pg_ba_list .ba_card .cate {font-size: var(--p4); font-weight: 500; line-height: 1; color: var(--point01);}
.pg_ba_list .ba_card .tit a {color: inherit; transition: color 0.3s;}
@media screen and (min-width: 1241px) { .pg_ba_list .ba_card .tit a:hover {color: var(--point01);} }
.pg_ba_list .ba_card .tit {display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font-family: var(--en); font-size: var(--h6); font-weight: 400; line-height: 1.5; color: var(--gray90);}
.pg_ba_list .ba_card .cate + .tit {margin-top: 1rem;}
.pg_ba_list .ba_card .writer {display: flex; align-items: center; gap: 0.8rem; margin-top: 2rem; font-size: var(--p3); line-height: 1.7; color: var(--gray90);}
.pg_ba_list .ba_card .writer svg {flex-shrink: 0; width: 2rem; height: 2rem; color: var(--gray90);}
.pg_ba_list .ba_card .more {display: flex; align-items: center; justify-content: center; gap: 1.7rem; width: 100%; padding: 1.6rem 2.5rem; border: 1px solid var(--gray90); border-radius: 99rem; background-color: #fff; font-size: var(--p4); font-weight: 600; line-height: 1; color: var(--gray90); transition: background-color 0.3s, border-color 0.3s, color 0.3s;}
.pg_ba_list .ba_card .more svg {flex-shrink: 0; width: 1.4rem; height: 1.4rem;}
body.is-rtl .pg_ba_list .ba_card .more svg {transform: scaleX(-1);}
.pg_ba_list .ba_card .more:focus-visible {border-color: var(--point01); background-color: var(--point01); color: #fff;}
@media screen and (min-width: 1241px) { .pg_ba_list .ba_card:hover .more {border-color: var(--point01); background-color: var(--point01); color: #fff;} }
.pg_ba_list .list_empty {padding: var(--pd4) 0; margin-top: 2rem; font-size: var(--p3); line-height: 1.7; text-align: center; color: var(--gray50);}

/* ── Before & After 상세 (/before-after/{implants|veneers}/view — _Skin/42_view.php·43_view.php → 공용 파셜 _Skin/include/ba-view.php, 루트 .pg_ba_view) ── */
/* 서브탑 없이 고정 헤더 바로 아래 900 폭(.in5): 제목 블록(카테고리 1차|2차 · h1 30 SemiBold · 날짜 15 · 1px 선) → 본문(px 30: 16/1.7 + 16:9 박스 before|after) → 공용 .sub_post_nav */
.pg_ba_view .pg_ba_view_body {padding: calc(var(--hdH) + 10rem) 0 var(--pd2);}
.pg_ba_view .post_head {padding-bottom: 3rem; border-bottom: 1px solid rgba(0,0,0,0.15);}
.pg_ba_view .post_head .cate {display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; font-size: var(--p4); font-weight: 500; line-height: 1; color: var(--gray50);}
.pg_ba_view .post_head .cate .c1 {color: var(--point01);}
.pg_ba_view .post_head .cate .bar {width: 1px; height: 1.1rem; background-color: var(--gray50); opacity: 0.4;}
.pg_ba_view .post_head .tit {font-size: var(--h6); font-weight: 600; line-height: 1.5; color: var(--gray90);}
.pg_ba_view .post_head .cate + .tit {margin-top: 1rem;}
.pg_ba_view .post_head .meta {display: flex; align-items: center; justify-content: space-between; gap: 2rem; margin-top: 3rem; font-size: var(--p6); line-height: 1; color: var(--gray50);}   /* 시안: 날짜 14 #616E7C 좌 · 작성자 14 #9AA5B1 우 (2026-09-18 검토 42 #2·#9) */
.pg_ba_view .post_head .meta .writer {color: var(--gray30);}
.pg_ba_view .post_body {margin-top: var(--contMt3); padding: 0 3rem;}
.pg_ba_view .post_body .txt {font-size: var(--p4); line-height: 1.7; color: var(--gray90);}
.pg_ba_view .post_body .txt + .ba_imgs {margin-top: 5rem;}
.pg_ba_view .ba_imgs {display: flex; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 2rem; background-color: var(--gray10);}
.pg_ba_view .ba_imgs .img {position: relative; flex: 1 1 0; min-width: 0; overflow: hidden; background-color: var(--gray10);}
.pg_ba_view .ba_imgs .img.after {background: linear-gradient(180deg, #EFEFEF 0%, #D9D4D2 100%);}
.pg_ba_view .ba_imgs .img + .img {border-inline-start: 3px solid #fff;}
.pg_ba_view .ba_imgs .img img {width: 100%; height: 100%; object-fit: cover; object-position: center top;}
.pg_ba_view .ba_imgs .lbl {position: absolute; bottom: 2rem; padding: 0.8rem 1.5rem; border-radius: 5rem; background-color: rgba(0,0,0,0.5); font-size: var(--p4); font-weight: 600; line-height: 1; white-space: nowrap; color: #fff;}
.pg_ba_view .ba_imgs .before .lbl {inset-inline-start: 2rem;}
.pg_ba_view .ba_imgs .after .lbl {inset-inline-end: 2rem; background-color: var(--point01);}

/* ── 시니어 트리네이트 (/veneers/senior-trinate, idx 24) ── */
/* Con_01 히어로 — 공용 .sub_hero.dim_flat(30% 평면 틴트, 시안 오버레이 rect hidden) — 이미지는 시안 크롭(2560×900) 그대로라 보정 없음 */
/* Con_02 인트로 — 공용 .sub_intro(타이틀·설명) + 페이지 전용 합성 비주얼 .intro_visual: 그라데이션·블러 사진·광원을 구운 배경 1장 + 인물 컷아웃(우측, 바닥 정렬) + 스마일 로고·인용(좌측 세로 중앙) */
.pg_senior_trinate .intro_visual {position: relative; height: 66.7rem; margin-top: var(--contMt2); overflow: hidden; border-radius: 3rem; border-end-start-radius: 30rem; background: linear-gradient(-11.58deg, #FBBB9C 2.9%, #FFE5D9 67.1%);}
.pg_senior_trinate .intro_visual .bg {position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;}
.pg_senior_trinate .intro_visual .person {position: absolute; bottom: 0; inset-inline-start: 48.44%; width: 42.19%; height: auto;}
.pg_senior_trinate .intro_visual .visual_txt {position: absolute; top: calc(50% - 2.95rem); inset-inline-start: 13.75%; display: flex; flex-direction: column; align-items: center; gap: 5rem; text-align: center; transform: translateY(-50%);}
.pg_senior_trinate .intro_visual .smile {flex-shrink: 0; width: 19.7rem; height: 6rem; color: var(--point01);}
.pg_senior_trinate .intro_visual .quote {display: flex; align-items: flex-start; justify-content: center; gap: 1.1rem; font-family: var(--en); font-size: var(--h5); font-weight: 400; line-height: 1.3; color: var(--gray90);}
.pg_senior_trinate .intro_visual .quote .q_mark {flex-shrink: 0; font-size: 5rem; line-height: 1;}
body.is-rtl .pg_senior_trinate .intro_visual .quote .q_mark {transform: scaleX(-1);}   /* RTL: 따옴표 좌우 반전 */
body.is-rtl .pg_senior_trinate .intro_visual .bg {transform: scaleX(-1);}   /* 구운 배경(블러 사진·광원)은 물리 좌표 — RTL 은 인물·문구가 논리 속성으로 자리를 바꾸므로 배경도 미러 */
/* Con_03 캡슐 카드 4 — 공용 .sub_num_cards + img.bg_photo (페이지 추가 규칙 없음) */
/* Con_04 Before & After — 공용 .sub_ba_grid + 고지문 (시안 상하 250) */
.pg_senior_trinate .pg_senior_trinate_ba {padding: var(--pd1) 0;}
/* Con_05 공간 — 타이틀·설명 + 공용 .sub_gallery_slider (시안 하단 250) */
.pg_senior_trinate .pg_senior_trinate_space {padding-bottom: var(--pd1);}
/* Con_06 후기 — 공용 .sub_review_cards(.capsule variant 요청: common-request.md) (시안 하단 250) */
.pg_senior_trinate .pg_senior_trinate_review {padding-bottom: var(--pd1);}

/* ── 일반진료 개요 (/general-dentistry, idx 32) ── */
/* 공용 컴포넌트(.sub_hero.dim_flat / .sub_intro / .sub_num_cards.col3 / .sub_type_cards / .sub_step_rows)만 사용. 페이지 전용은 Con_03 카드 링크(하위 메뉴 33~38)뿐 */
.pg_general_dentistry .num_card_list .card_link {display: block; color: inherit;}
.pg_general_dentistry .num_card_list .card_link .img img {transition: transform 0.6s ease;}

/* ── 턱관절치료 (/general-dentistry/tmj-treatment, idx 37) ── */
/* 페이지 전용 규칙 없음 — .sub_hero.dim_flat / .sub_intro(.intro_img.round) / .sub_num_cards(.col3 + bg_photo.strong) / .sub_step_rows 공용 컴포넌트만 사용 */

/* ── 크라운 보철 (/general-dentistry/crown-restoration, idx 35) ── */
.pg_crown_restoration .sub_hero .hero_bg img {object-position: center 70%;}   /* 시안 2185:44520 — 원본을 위로 104px 올린 크롭(2560×1432 export 기준 밴드 위치) */
.pg_crown_restoration .sub_wide_slider {width: calc(var(--in) - var(--inPd) * 2); max-width: 100%; margin: 0 auto;}   /* 오렌지 섹션(.in_w) 안에서 슬라이더만 1600 폭 가운데 */
.pg_crown_restoration .crown_types {margin-top: var(--pd2);}   /* Con_03 01 슬라이더 → 02 넘버카드 gap 200 */

/* ── 잇몸치료 (/general-dentistry/gum-treatment, idx 36) ── */
.pg_gum_treatment .sub_hero .hero_bg img {object-position: center 55%;}   /* 시안 2207:15574 — 2560×1600 원본을 34px 위로 올린 크롭 */

/* ── 충치치료 (/general-dentistry/cavity-treatment, idx 33) ── */
/* 신경치료 순서 .pg_cavity_treatment_procedure — 시안 "2 신경치료 순서"(2186:45329): 전체 폭 오렌지 섹션(배경·좌하 라운드는 공용 .sub_num_cards), 상하 250, 제목 좌측 흰색, 캡슐 이미지 370×410(상 200/하 20 ↔ 교차), 번호 Marcellus 30 노랑, 문구 18 흰색 (2026-09-29 박스 → 섹션) */
.pg_cavity_treatment .pg_cavity_treatment_procedure {margin-top: var(--pd2);}
.pg_cavity_treatment .proc_list {display: flex; gap: 3rem; margin-top: var(--contMt2);}
.pg_cavity_treatment .proc_list > li {flex: 1 1 0; min-width: 0; text-align: center;}
.pg_cavity_treatment .proc_list .img {max-width: 37rem; height: 41rem; margin: 0 auto; overflow: hidden; border-radius: 20rem 20rem 2rem 2rem; background-color: #fff;}
.pg_cavity_treatment .proc_list > li:nth-child(even) .img {border-radius: 2rem 2rem 20rem 20rem;}
.pg_cavity_treatment .proc_list .img img {width: 100%; height: 100%; object-fit: cover;}
.pg_cavity_treatment .proc_list .num {display: block; margin-top: 3rem; font-family: var(--en); font-size: var(--h6); font-weight: 400; line-height: 1.3; color: var(--yellow);}
.pg_cavity_treatment .proc_list .txt {max-width: 28rem; margin: 1rem auto 0; font-size: var(--p3); line-height: 1.3;}

/* ── 신경치료 (/general-dentistry/root-canal, idx 34) ── */
/* 페이지 전용 규칙은 히어로 사진 위치 보정 1줄 — 시안 Con_01 의 사진(2559×1141)이 중앙보다 57px 아래로 놓임 → 26% (그 외 .sub_intro.round / .sub_num_cards.col3 / .sub_type_cards / .sub_step_rows 공용만 사용) */
.pg_root_canal .sub_hero .hero_bg img {object-position: center 26%;}

/* ── 사랑니 발치 (/general-dentistry/wisdom-tooth-extraction, idx 38) ── */
/* 공용 컴포넌트(.sub_hero.dim_flat / .sub_intro .intro_img.round / .sub_num_cards .col3 + .bg_photo.strong / .sub_type_cards + .type_note / .sub_step_rows / sub-why-heal)만으로 구성 — 페이지 전용 규칙 없음 */

/* ── 이갈이장치 (/general-dentistry/night-guard, idx 39) ── */
/* 공용 컴포넌트(.sub_hero.dim_flat / .sub_intro .intro_img.round / .sub_num_cards 5장 + .bg_photo.strong / .sub_type_cards .cols2 / .sub_step_rows / sub-why-heal)만으로 구성 — 페이지 전용 규칙 없음 */

/* ── 수면무호흡·코골이 장치 (/general-dentistry/sleep-apnea-snoring, idx 40) ── */
/* 공용 컴포넌트(.sub_hero.dim_25 / .sub_intro .intro_img.round / .sub_num_cards 5장 + .bg_photo.strong / .sub_type_cards .cols2 / .sub_step_rows / sub-why-heal) 위에 페이지 규칙 1줄 — Con_04(갱신 시안 2262:19714) 제목 아래 설명 블록 .sub_desc_box: 제목→설명 50, 폭 1081 (설명→카드 80 은 공용 .type_card_list margin-top) */
.pg_sleep_apnea_snoring .sub_type_cards .sect_tit_box + .sub_desc_box {max-width: 108.1rem; margin-top: 5rem;}

/* ── 환자 스토리 (/before-after/patient-stories, idx 45) ── */
/* 히어로(Con_01) — 공용 .sub_hero.dim_flat.dim_light(사진 + 20% 평면 틴트), 페이지 추가 규칙 없음 */
/* 영상 목록(Con_02) — .in3(1200): 공용 .sub_list_head → 3열 카드(썸네일 380×213.75 r20 + play 50 + 제목 24 SemiBold, 열 간격 30·행 간격 60) → 공용 sub-paging.php. 시안 상 100 / 하 200 */
.pg_patient_stories .pg_patient_stories_body {padding: var(--pd4) 0 var(--pd2);}
.pg_patient_stories .list_result {margin-top: 2rem; font-size: var(--p4); line-height: 1.5; color: var(--gray50);}
.pg_patient_stories .story_card_list {display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6rem 3rem; margin-top: 2rem;}
.pg_patient_stories .story_card {display: block; color: var(--gray90);}
.pg_patient_stories .story_card .thumb {position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 2rem; background-color: var(--gray10);}
.pg_patient_stories .story_card .thumb img {width: 100%; height: 100%; object-fit: cover; transition: filter 0.3s ease;}
.pg_patient_stories .story_card .thumb::after {content: ''; position: absolute; inset: 0; background-color: rgba(0,0,0,0.2); opacity: 0; transition: opacity 0.3s;}   /* 시안 "썸네일 hover": 20% 어둡게 + play 노출 */
.pg_patient_stories .story_card .play {position: absolute; top: 50%; left: 50%; z-index: 1; width: 5rem; height: 5rem; opacity: 0; transform: translate(-50%, -50%) scale(0.9); transition: opacity 0.3s, transform 0.3s;}
.pg_patient_stories .story_card .play svg {display: block; width: 100%; height: 100%;}
.pg_patient_stories .story_card:focus-visible .thumb::after {opacity: 1;}
@media screen and (min-width: 1241px) { .pg_patient_stories .story_card:hover .thumb::after {opacity: 1;} }
.pg_patient_stories .story_card:focus-visible .play {opacity: 1; transform: translate(-50%, -50%) scale(1);}
@media screen and (min-width: 1241px) { .pg_patient_stories .story_card:hover .play {opacity: 1; transform: translate(-50%, -50%) scale(1);} }
.pg_patient_stories .story_card:focus-visible .thumb img {filter: blur(7.5px);}
@media screen and (min-width: 1241px) { .pg_patient_stories .story_card:hover .thumb img {filter: blur(7.5px);} }   /* 시안 썸네일 hover: blur 7.5 + 20% 어둡게 + play (45 #2) */
.pg_patient_stories .story_card .txt_box {display: block; margin-top: 3rem;}
.pg_patient_stories .story_card .tit {display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font-size: var(--h8); font-weight: 600; line-height: 1.5; color: #000;}   /* 시안 24 SemiBold (2026-09-18 검토 45 #1) */
.pg_patient_stories .story_card .name {display: none;}   /* 시안 카드에 환자명 없음(모달에 표시) — 45 #5 */
.pg_patient_stories .list_empty {padding: var(--pd4) 0; margin-top: 2rem; font-size: var(--p3); line-height: 1.7; text-align: center; color: var(--gray50);}