@charset "utf-8";


.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: 2.2rem; line-height: 1.7; word-break: keep-all}
.cont_txt p { word-break: keep-all; }

.deps3_tit {font-size: 2.5rem; 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-right: 1rem; flex-shrink: 0; border-radius: 50% ; background-color: #8899A6}


/*서브 탑 공용*/

.top_img {position: relative; padding: 5% 2.5% 0;}
.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: 2rem; 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:hover:before,
.top_img .sub_nav .option.focus:before,
.top_img .sub_nav .option.selected.focus:before {opacity: 1 !important}

.top_img .sub_nav .option:hover,
.top_img .sub_nav .option.focus,
.top_img .sub_nav .option.selected.focus {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: 30% 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: 2rem; 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}

.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: 2.1rem; 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;  padding: 0.8rem 1.5rem; font-size: 2.2rem; 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('/img_up/shop_pds/sample06/build/option/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: center; 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}


/*스와이퍼 버튼 공용*/
.swiper_btn {display: flex; justify-content: space-between; margin-top: 20px}
.swiper_btn .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: 600; font-size: 14px; transition: all .3s}
.swiper_btn .btn .txt {display: flex; align-items: center;}
.swiper_btn .btn .txt span {text-transform: capitalize}
.swiper_btn .swiper-button-next .txt {justify-content: flex-end}
.swiper_btn .swiper-button-next svg {margin-left: 3rem}
.swiper_btn .swiper-button-prev svg {margin-right: 3rem}
.swiper_btn > div svg {fill: var(--blue); font-size: 1.6rem}


.swiper_btn .swiper-button-disabled {opacity: 0.3}

.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;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%}

@media screen and (min-width: 768px) {
    .sub01_1 .top_img .top_cont .svg_tit .tit span ,
    .sub01_1 .top_img .top_cont .tit_box .tit {opacity: 0; transform: translateY(100px); transition: opacity 1s , transform 1s; transition-delay: 0.2s}
    .sub01_1 .top_img .top_cont .tit_box .txt {opacity: 0; transform: translateY(100px); transition: opacity 1s , transform 1s; transition-delay: 0.3s}

    .sub01_1 .top_img .top_cont .svg_tit .tit.active span,
    .sub01_1 .top_img .top_cont .tit_box.active .tit,
    .sub01_1 .top_img .top_cont .tit_box.active .txt {opacity: 1; transform: unset}
}

.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: 50%}
.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: 2.2rem; font-weight: 700}
.sub01_9 .sect5 ul li .cont{}
.sub01_9 .sect5 ul li .cont p{display: flex; align-items: center; 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 img {width: 100%}
.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: 1.3em}

.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.faq .list_box .tit {white-space: inherit}

.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; }



.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;}
.content {
  display: none;
}
.content.active {
  display: block;
}

.cont_img_list ul{display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 9rem 6rem;}
.grid_box{display: grid; grid-template-columns: 30% 1fr; gap: 0 40px;}

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

@media screen and (min-width: 1200px) {
    .top_img .sub_nav .li .nice-select { font-size:1.8rem }
    .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}
}