:root{--ani:cubic-bezier(.32,.94,.6,1)}

.sub .xgap1 {--x-gap:1rem}
.sub .xgap2 {--x-gap:2rem}
.sub .xgap3 {--x-gap:3rem}
.sub .xgap4 {--x-gap:4rem}
.sub .xgap5 {--x-gap:5rem}
.sub .xgap6 {--x-gap:6rem}

.sub .ygap0 {--y-gap:0rem}
.sub .ygap1 {--y-gap:1rem}
.sub .ygap2 {--y-gap:2rem}
.sub .ygap3 {--y-gap:3rem}
.sub .ygap4 {--y-gap:4rem}
.sub .ygap5 {--y-gap:5rem}

.sub .enTit {font-weight: 700; font-family: var(--pointfont); color:var(--subcolor)}
.sub .mainTit span {color:var(--pointcolor);}
.sub .mainTit.Wh span {color:#bfcdff;}

.sub .Radius12 {border-radius: .75rem; overflow: hidden;}

.sub .enPoint {font-family: var(--pointfont); color:var(--subcolor); white-space: nowrap;}

.sub .zum {position: relative; padding-left: 1rem;}
.sub .zum:after {content:'· '; position: absolute; left: 0; top:0; color:#1d284f; font-weight: 800;}

.sub img {border-radius: .75rem; overflow: hidden;}

@media(max-width:768px) {
    .sub.font-20 {font-size: 1.5rem;}
}

.sub .swiper-button-next:after, .sub .swiper-button-prev:after {content:'';}
.sub .swiper-button-next, .sub .swiper-button-prev {position: relative; margin-top: 0; left: 0; right:0;}
.sub .swiper-button-prev img {transform: rotate(180deg);}
.sub .Btn_wrap {display: flex; align-items: center; gap:.5rem;}
.sub .SlideBtn {width: 3.75rem; height: 3.75rem; border-radius: 50%; border:1px solid #fff; opacity: .5;}
.sub .SlideBtn:hover {opacity: 1;}

.sub .arrowImg {width: 1.375rem;}


/* sub Top */
.subTop {height:40.625rem; position:Relative; margin-top:70px; left:0; overflow: hidden; z-index: 3;}
.subTop .subTopImg {position:absolute; top:0; left:0; width:100%; height:100%; overflow: hidden; opacity:0; transform:scale(1.05); transition:transform 2s var(--ani);}
.subTop .subTopImg.on {opacity:1;transform:scale(1)}

.subTop .inner {position: relative; max-width: 1410px; width: 90%; top:12rem; margin: auto;}
.subTop .navEnTit {font-family: var(--pointfont); color:rgba(255,255,255,.1); font-weight: 700;}

#subnav {display: flex; align-items: center; gap:1rem;}
@media(max-width:500px) {
    .subTop .navEnTit {font-size: 2.5rem;}
}


/* start */
.sub .Truth .Radius12 {height: 22.5rem; padding: 3rem 2.5rem;}
.sub .Truth .box1 {background-color: #f3f4f9;}
.sub .Truth .box2 {background-color: #e0e5f9;}
.sub .Truth .box3 {background: no-repeat center / cover url('/img/sub/baro/TruthBg.jpg'); position: relative;}

.sub .Truth .Txt {font-family: var(--pointfont); color: rgba(87,116,190,.8); font-size: 4rem; font-weight: 700; position: absolute; bottom:2rem; right:2rem; white-space: nowrap;}
.sub .Truth .LogoBg {position: absolute; right:0; top:0; z-index: -1; width: 8.5625rem;}

@media(max-width:500px) {
    .sub .Truth .Radius12 {height: auto;}
    .sub .Truth .Radius12.box3 {height: 23rem;}
    .sub .Truth .Txt {font-size: 3.3rem;}
}


/* Strength */
.sub .Strength {background-image: linear-gradient(180deg, #f3f4f9, #fff); position: relative;}
.sub .Strength .container {position: relative; z-index: 3; padding-bottom: 12.5rem;}
.sub .Strength .StrengthImg {position: absolute; z-index: 1; border-radius: .75rem; overflow: hidden;}
.sub .Strength .Img1 {top:4rem; right:2rem; width: 21.5625rem;}
.sub .Strength .Img2 {top:17rem; left:3rem; width: 21.5625rem;}
.sub .Strength .Img3 {bottom:8rem; right: 9rem; width: 20.625rem;}
@media(max-width:1440px) {
    .sub .Strength .Img1 {width: 19rem;}
    .sub .Strength .Img2 {width: 19rem; left: 1rem;}
    .sub .Strength .Img3 {width: 18rem; right: 5rem;}
}
@media(max-width:1240px) {
    .sub .Strength .container {padding-bottom: 0;}
}


/* Specialization */
.sub .Specialization {background: no-repeat center / cover url('/img/sub/baro/SpecializationBg.jpg'); padding: 2rem 0;}
.sub .Specialization .gridBox {display:grid; grid-template-columns: 42% 55%; grid-template-rows: auto auto; row-gap: 1rem; column-gap: 1rem;}
.sub .Specialization .gridBox .TitBox {grid-column-start: 1; grid-column-end: 2; grid-row-start: 1; grid-row-end: 2; align-self: flex-end;}
.sub .Specialization .gridBox .TxtSlide {grid-column-start: 1; grid-column-end: 2; grid-row-start: 2; grid-row-end: 3;}
.sub .Specialization .gridBox .Btn_wrap {grid-column-start: 1; grid-column-end: 2; grid-row-start: 3; grid-row-end: 4; align-self: flex-start; position: relative;}
.sub .Specialization .gridBox .ImgSlide {grid-column-start: 2; grid-column-end: 3; grid-row-start: 1; grid-row-end: 4;}

.sub .Specialization .ImgSlide img {overflow: hidden; border-radius: .75rem;}
@media(max-width:990px) {
    .sub .Specialization {padding: 10rem 0;}
    .sub .Specialization .gridBox {display: flex; flex-direction: column;}
    .sub .Specialization .gridBox .TitBox {order:1; align-self: flex-start;}
    .sub .Specialization .gridBox .Btn_wrap {order: 2; justify-content: end; margin-top: 1rem;}
    .sub .Specialization .gridBox .ImgSlide {order:3; margin-top: 1rem;}
    .sub .Specialization .gridBox .TxtSlide {order:4;}
    .sub .Specialization .box {width: 95%;} 
}



/* Promise */
.sub .Promise .flexBox {display: flex; gap:4rem 0}
.sub .Promise ul {display: flex; flex-direction: column; gap:2.5rem 1.5rem}
.sub .Promise ul li {display: flex; gap:1.5rem;}
.sub .Promise .Img {align-self: stretch; background: no-repeat center / cover; width: 35%; border-radius: .75rem; overflow: hidden; min-height: 23.25rem;}
.sub .Promise .Desc {background-color: #f3f4f9; align-self: stretch; border-radius: .75rem; padding: 4rem 5rem; width: 65%;}
@media(max-width:500px) {
    .sub .Promise ul li {flex-direction: column;}
    .sub .Promise .Img {width: 100%;} 
    .sub .Promise .Desc {width: 100%; padding: 4rem 2rem;}
}


/* Personalized */
.sub .Personalized {background: no-repeat center / cover url('/img/sub/PersonalizedBg.jpg');}
.sub .Personalized .box {position: relative; transform: translateY(0); transition: .3s;}
.sub .Personalized .box.on {transform: translateY(-3rem);}
.sub .Personalized .Txt {position: absolute; left: 2rem; bottom:3rem; color:#fff;}
.sub .Personalized .enTxt {font-family: var(--pointfont); color:rgba(255,255,255,.5)}

.sub .Personalized .Btn {width: 2.5rem; height: 2.5rem; border-radius: 50%; border:1px solid #fff; position: absolute; left: 2rem; top:2rem;}
.sub .Personalized .Btn .arrowImg {width: 1rem;}

.sub .Personalized .box.on .Btn, .sub .Personalized .swiper-slide-active .Btn  {background-color: #fff;}
.sub .Personalized .box.on .arrowImg, .sub .Personalized .swiper-slide-active .arrowImg {filter: invert(1);}
@media(max-width:1240px) {
    .sub .Personalized .SlideInner {padding-left : calc((100% - var(--layoutwidth)) / 2);width:100%; margin-left: 5%;}
    .sub .Personalized .flexList {flex-wrap: nowrap; --x-gap:0;}    
    .sub .Personalized .swiper-slide {opacity: .5;}
    .sub .Personalized .swiper-slide-active {opacity: 1;}
}


/* Doctor */
.sub .Dr {background-image: linear-gradient(0deg, #f2f5ff, #fff);}
.sub .Dr .Desc {padding-left: 4rem;}
.sub .Dr .zum {line-height: 1.7;}
.sub .Dr .Name {font-family: var(--pointfont); font-size: 5rem; line-height: 1.2; color:#fff; font-weight: 700; white-space: nowrap; position: absolute; bottom:2rem; right:-85%}
@media(max-width:990px) {
    .sub .Dr .Desc {padding-left: 0;}
}
@media(max-width:768px) {
    .sub .Dr .Name {right: -1rem;}
}



/* EquPage */
#slideTab .tit_list {display: flex; align-items: center; justify-content: center; gap:.5rem;}
#slideTab .tit_list li a {border:1px solid var(--pointcolor); display: block; border-radius: 24px; color:var(--pointcolor); padding: .5rem 2.5rem;}
#slideTab .tit_list li.active a {background-color: var(--pointcolor); color:#fff;}


#slideTab .slider {position: relative;}
#slideTab .slider .inner {overflow: hidden;width: 100%;margin: 0 auto;}

#slideTab .Equslider .swiper-slide {background: no-repeat center /cover url('/img/sub/baro/EquBg.jpg'); min-height: 32.5rem; display: flex; justify-content: space-between; gap:2rem; border-radius: .75rem; padding: 0 3rem;}
#slideTab .Equslider .Img {display: flex; align-items: flex-end; width: 22.625rem;}
#slideTab .Equslider .Img img {position: absolute; bottom:0; width: 22.625rem;}
#slideTab .Equslider .Desc {background-color: rgba(255,255,255,.75); border-radius: .75rem; padding:5rem 3rem 0; min-height: 25rem; margin: 3.5rem 0; max-width: 39.375rem; width: 70%;}
#slideTab .Equslider .SlideBtn {border-color:var(--pointcolor); opacity: 1; position: absolute; top:50%; transform: translateY(-50%);}
#slideTab .Equslider .btn_next {right:15.5vw; left: auto;}
#slideTab .Equslider .btn_prev {left: 15.5vw; right: auto;}
@media(max-width:1480px) {
    #slideTab .Equslider .Desc {width: 70%;}
}
@media(max-width:1240px) {
    #slideTab .Equslider .btn_next {right:7vw;}
    #slideTab .Equslider .btn_prev {left: 7vw;}
    #slideTab .Equslider .Img img {left: 3%;}
}
@media(max-width:768px) {
    #slideTab .Equslider .btn_next {right:4vw;}
    #slideTab .Equslider .btn_prev {left: 4vw;}
    #slideTab .Equslider .swiper-slide {flex-direction: column; height: 56rem; gap:1rem;}
    #slideTab .Equslider .Img {width: 100%; position: relative; order: 2;}
    #slideTab .Equslider .Img img {left: 0; right: 0; bottom:0; margin: auto;}
    #slideTab .Equslider .Desc {width: 100%; order: 1; margin: 3rem auto; padding:3rem 2rem; min-height: 20rem;}
}
@media(max-width:520px) {
    #slideTab .slider {padding-top: 3rem;}
    #slideTab .Equslider .swiper-slide {height: 59rem;}
    #slideTab .Equslider .Btn_wrap {display: flex; align-items: center; position: absolute; width: fit-content; top: 0; left: 50%; transform: translateX(-50%);}
    #slideTab .Equslider .SlideBtn {position: relative; left: 0; right: 0;}
}



/* Information */
.sub .Information .Desc {padding-left: 3rem;}
.sub .Information .TimeTb td {padding: .3rem 0;}
.sub .Information .TimeTb .TbTit {width: auto; font-weight: 700; text-align: justify; padding-right: 2rem; height: 30px; display: block;}
.sub .Information .TimeTb .TbTit:after {content:''; display: inline-block; width: 100%;}

.sub .Information .TimeTb .TbDesc {width: auto;text-align: justify; padding-right: 2rem; height: 30px; display: block;}
.sub .Information .TimeTb .TbDesc:after {content:''; display: inline-block; width: 100%;}

.sub .Information .callBox {display: flex; align-items: center; gap:.5rem;}
.sub .Information .callBox li a {display: flex; font-size: 1.125rem; align-items: center; gap:.5rem; font-weight: 600; border-radius: .5rem; border:1px solid #e3e7ea; padding: .7rem 1.5rem; width: fit-content; transition: .3s;}
.sub .Information .callBox li a:hover {border-color: var(--pointcolor);}
.sub .Information .callBox img {height: 1.3125rem;}


.sub .Location #map {height: 36rem; border-radius: .75rem; border:1px solid #d3d6e1; overflow: hidden;}
.sub .Location .mapBox {position: relative;}
.sub .Location .map_cover{position: absolute;top:0;width:100%; height: 100%; left: 0; background-color: rgb(0,0,0,.01); z-index: 3;transition: 1s all ease;display:flex;align-items: center;justify-content: center;}

.sub .Location .mapLink {display: flex; align-items: center; gap:0 .5rem; max-width: 530px; width: 100%;}
/* .sub .Location .mapLink li {flex: 1;} */
.sub .Location .mapLink li a {display: flex; align-items: center; justify-content: center; white-space: nowrap; gap:0 .5rem; font-size: 1.125rem; font-weight: 600; padding: .7rem 1.7rem; border-radius: .5rem; border:1px solid #e3e7ea; background-color: #fff;}
.sub .Location .mapLink img {max-width: 1.125rem;}

.sub .Location .mapLink.mapIn {gap:0; position: absolute; left: 0; bottom:0; z-index: 3;}

.sub .Location .mapLink.mapIn li a {border-radius: 0;}
.sub .Location .mapLink.mapIn li:first-child a {border-radius: 0 0 0 .5rem; border-right: none;}
.sub .Location .mapLink.mapIn li:last-child a {border-radius:  0 .5rem 0 0; border-left:none;}
.sub .Location .mapLink.mapIn li:nth-child(2) a {background-color: #fbe100;}



.sub .trafficInfo .trafficList {display: flex; flex-direction: column; gap:3rem;}
.sub .trafficInfo .trafficList img {border-radius: 0;}
.sub .trafficInfo .trafficList li {display: flex; align-items: flex-start; gap:1rem;}
.sub .trafficInfo .Tit {display: flex; align-items: center; gap:.5rem; width: 17.5rem;}
.sub .trafficInfo .Desc {width: calc(100% - 11.5rem);}
.sub .trafficInfo .Desc b {color:var(--pointcolor)}
@media(max-width:1340px) {
    .sub .trafficInfo .trafficList li {flex-direction: column; gap:.5rem;}
    .sub .trafficInfo .Desc {width: 100%;}
}




/* Interior */
.sub .Interior .Interior_Inner {max-width: 1820px; margin: auto;}
#InteriorTab {display: flex; align-items: center; gap:1rem;}
#InteriorTab .TxtBox {background-color: #f3f4f9; border-radius: .75rem; align-self: stretch; display: flex;align-items: center; justify-content: center;}
#InteriorTab .TxtBox_Inner {max-width: 22.5rem; display: flex; flex-direction: column; gap:3rem 0; justify-content: space-between; height: 100%; padding: 6rem 0;}
#InteriorTab .Tit_list {display: flex; flex-wrap: wrap; justify-content: space-between; gap:1rem;}
#InteriorTab .Tit_list li {width: calc(40% - 1rem);}
#InteriorTab .Tit_list li a {position: relative; padding-right: 2rem; display: inline-block;}
#InteriorTab .Tit_list li.active p {font-weight: 700; width: fit-content; border-bottom: 1px solid #2c2c2c;}
#InteriorTab .Tit_list li.active a:after {content:''; width: .875rem; height: .75rem; background-image: url('/img/sub/baro/InteriorArrow.png'); background-repeat: no-repeat; background-size: contain; position: absolute; top:0; bottom:0;right:0;margin: auto;}

#InteriorTab .Floor {display: flex; justify-content: space-between; gap:1rem;}
#InteriorTab .Floor li {width: calc(40% - 1rem);}
#InteriorTab .Floor li p {width: 4.6875rem; height: 4.6875rem; color:var(--pointcolor); border-radius: .5rem; border:1px solid #e3e7ea; background-color: #fff; display: flex; align-items: center; justify-content: center;}


/* 슬라이드 */
#InteriorTab  .slider {font-size: 0;text-align: center;}
#InteriorTab  .slider .inner {overflow: hidden;width: 100%;margin: 0 auto;}

@media(max-width:1820px) {
    .sub .Interior .Interior_Inner {width: 95%;}
}
@media(max-width:1340px) {
    #InteriorTab .TxtBox_Inner {padding: 4rem 0;}
}
@media(max-width:1100px) {
    #InteriorTab {flex-direction: column;}
    #InteriorTab .box {width: 100%;}
    #InteriorTab .TxtBox_Inner {flex-direction: row; max-width: 90%;}
    #InteriorTab .TxtBox_Inner > div {width: 50%;}
    #InteriorTab .Tit_list li, #InteriorTab .Floor li {width: calc(50% - 1rem);}
}
@media(max-width:768px) {
    #InteriorTab .TxtBox_Inner {flex-direction: column; max-width: 80%;}
    #InteriorTab .TxtBox_Inner > div {width: 100%;}
}



/* Reservation */
#Reservation .calendar .month {background-color: var(--pointcolor); display: flex; align-items: center; justify-content: center; gap:0 2rem; border-radius: .75rem; padding: 1rem; color:#fff;}
#Reservation .calendar .arrow {display: flex; align-items: center;}

#Reservation .calendarTb {width: 100%; border-spacing: 0;}

#Reservation .calendarTb td:first-child, #Reservation .Red  {color:#ba201f;}
#Reservation .calendarTb td:last-child {color:#1f6ac6;}
#Reservation .calendarTb td {padding: 1.1rem 0; border-bottom:1px solid rgba(20,49,79,.15)}

#Reservation .TimeBox {margin-right: 1rem;}
#Reservation .TimeBox .box {background-color: #f3f4f9; padding: 1rem 0; color:var(--pointcolor); border-radius: .75rem;}

#Reservation .scrollBox {padding-right: .7rem; padding-top: .7rem; border-radius: .75rem; border:1px solid #e5e5e5;}
#Reservation .TimeList { max-height: 22.375rem; overflow-y: scroll;}
#Reservation .TimeList::-webkit-scrollbar {width: 3px;}
#Reservation .TimeList ul {padding: 0 .7rem .7rem; display: flex; flex-direction: column; gap:.7rem;}
#Reservation .TimeList li {padding: .5rem; border-radius: .75rem; border:1px solid #e5e5e5;}

#Reservation .TimeList li.on {border-color:var(--pointcolor); background-color: var(--pointcolor); color:#fff; font-weight: 700;}
#Reservation .TimeList li.off {background-color: #f5f5f5; color:#838383;}

#Reservation .Line {width: 100%; height: 2px; background-color: rgba(56,74,139,.2); margin: 3rem 0;}

#Reservation .input_box {display: flex;} 
#Reservation .input_box .inputTit {font-weight: 700; max-width: 8.5rem; width: 100%;}
#Reservation .input_box .inputTxt {width: calc(100% - 8rem); display: flex; align-items: center; gap:.5rem; justify-content: space-between;}
#Reservation .input_box span {position: relative; padding-right: 1rem;}
#Reservation .input_box span:after {content:'*'; color:#ba201f; font-weight: 400; position: absolute; right: 0; top:0;}

#Reservation .input_box input[type='text'], #Reservation .input_box select, #Reservation .select_box select {padding: 1rem 1.2rem; border-radius: 0; border:1px solid #e5e5e5; box-shadow: none; min-height: 3.75rem; height: 100%;}
#Reservation .input_box select {-webkit-appearance: none; -moz-appearance: none; appearance: none; display: inline-block; appearance:none; background:url('/img/sub/select_arrow.png') no-repeat right .875rem center; background-size: 1rem;}

#Reservation .Phone select {width: 28%;}
#Reservation .Phone input[type='text'] {width: 34%;}

#Reservation .check_box .box {display: flex; align-items: center; gap:.5rem;}
#Reservation input[type='radio'] { appearance: none; width: 1.375rem; height: 1.375rem; padding: 0; box-shadow: 0 0 0 1px #dfdfdf; border: 4px #dfdfdf; border-radius: 50%; background-color: #fff;} 
#Reservation input[type='radio']:checked {box-shadow: 0 0 0 1px #dfdfdf; border: 4px solid #fff; background-color: var(--pointcolor);}

#Reservation textarea {padding: 1rem 1.2rem; border-radius: 0; border:1px solid #e5e5e5; width: 90%; height: 11.25rem;}
#Reservation .BR_Btn {padding: 1rem 5.5rem; border-radius: 1.875rem;}


/* Definition */
.sub .Definition .LogoBg {position: absolute; right:0; bottom:0; z-index: -1; width: 8.5625rem;}
.sub .Definition .ImgBox {height: 25rem; border-radius: .75rem; background: no-repeat center / cover;}
@media(max-width:768px) {
    .sub .Definition .LogoBg {bottom: auto; top:1rem;}
    .sub .Definition .ImgBox {height: 23rem;}
}
@media(max-width:500px) {
    /* .sub .Definition .ImgBox {aspect-ratio: 12 / 3;} */
}



/* Type */
.sub .Type {background: no-repeat center / cover;}
.sub.dryEye .Type {background-image: url('/img/sub/comprehensive/dryEye_TypeBg.jpg');}
.sub.glaucoma .Type {background-image: url('/img/sub/comprehensive/glaucoma_TypeBg.jpg');}

.sub.macula .Type {background-image: url('/img/sub/Retina/macula_TypeBg.jpg');}
.sub.diabetic .Type {background-image: url('/img/sub/Retina/diabetic_TypeBg.jpg');}
.sub.occlusion .Type {background-image: url('/img/sub/Retina/occlusion_TypeBg.jpg');}
.sub.maculaHole .Type {background-image: url('/img/sub/Retina/maculaHole_TypeBg.jpg');}
.sub.floaters .Type {background-image: url('/img/sub/Retina/floaters_TypeBg.jpg');}
.sub.detachment .Type {background-image: url('/img/sub/Retina/detachment_TypeBg.jpg');}
.sub.uveitis .Type {background-image: url('/img/sub/Retina/uveitis_TypeBg.jpg');}

.sub.gerontopia .Type {background-image: url('/img/sub/Cataract/gerontopia_TypeBg.jpg');}
.sub.higher .Type {background-image: url('/img/sub/Cataract/higher_TypeBg.jpg');}
.sub.revision .Type {background-image: url('/img/sub/Cataract/revision_TypeBg.jpg');}

.sub .Type .box {display: flex; flex-direction: column;}
.sub .Type .Desc {border-radius: .75rem; background-color: #fff; padding:3.5rem 3rem; margin-top: 2rem; flex-grow: 1;}
.sub .Type .TitFlex {display: flex; align-items: center; gap:0 2rem;}
@media(max-width:990px) {
    .sub .Type .TitFlex {flex-direction: column; align-items: flex-start;}
}



/* Symptom */
.sub .Symptom .Inner {display: flex; gap:2rem; border-radius: .75rem; background-color: #f8f8f8; padding: 3rem;}
.sub .Symptom .TitFlex {display: flex; align-items: center; gap:2rem;}
.sub .Symptom .box {background-color: #fff; padding: .7rem 1.5rem;}
@media(max-width:768px) {
    .sub .Symptom .Inner {flex-direction: column;}
}


/* Importance */
.sub .Importance {background: no-repeat center / cover; background-color: #f7f7f7;}
.sub.dryEye .Importance {background-image:url('/img/sub/comprehensive/dryEye_ImportanceBg.jpg');}
.sub.glaucoma .Importance {background-image:url('/img/sub/comprehensive/glaucoma_ImportanceBg.jpg');}

.sub.chorioretinopathy .Importance {background-image:url('/img/sub/Retina/chorioretinopathy_ImportanceBg.jpg');}
.sub.diabetic .Importance {background-image:url('/img/sub/Retina/diabetic_ImportanceBg.jpg');}
.sub.occlusion .Importance {background-image:url('/img/sub/Retina/occlusion_ImportanceBg.jpg');}
.sub.maculaHole .Importance {background-image:url('/img/sub/Retina/maculaHole_ImportanceBg.jpg');}
.sub.floaters .Importance {background-image:url('/img/sub/Retina/floaters_ImportanceBg.jpg');}
.sub.detachment .Importance {background-image:url('/img/sub/Retina/detachment_ImportanceBg.jpg');}
.sub.uveitis .Importance {background-image:url('/img/sub/Retina/uveitis_ImportanceBg.jpg');}

.sub.gerontopia .Importance {background-image:url('/img/sub/Cataract/gerontopia_ImportanceBg.jpg');}
.sub.higher .Importance {background-image:url('/img/sub/Cataract/higher_ImportanceBg.jpg');}

.sub .Importance .ImporList {display: flex; flex-direction: column; gap:1rem;}
.sub .Importance .ImporList li {max-width: 535px; width: 90%; color:var(--pointcolor); border-radius: .625rem; background-color: #fff; padding: 1rem 1.5rem;}
.sub .Importance .ImporList li p {position: relative; padding-left: 1.5rem;}
.sub .Importance .ImporList li p:after {content:''; width: 1.0625rem; height: 1.0625rem; background-image: url('/img/sub/checkDot.png'); background-repeat: no-repeat; background-size: contain; position: absolute; left: 0; top:5px;}

.sub .Importance .box.Img {aspect-ratio: 12 / 9; padding-bottom: 5rem;}
.sub .Importance .Img1 {position: relative; z-index: 3; max-width: 35.625rem;}
.sub .Importance .Img2 {position: absolute; z-index: 1; bottom: 0; right:-9.6875rem; max-width: 32.1875rem;}
@media(max-width:1240px) {
    .sub .Importance .Img img {width: 70%;}
}
@media(max-width:768px) {
    .sub .Importance .Img2 {right: 0;}
}
@media(max-width:500px) {
    .sub .Importance .ImporList li {width: 100%;}
}


/* habits */
.sub .habits .flexBox {display: flex; gap:5rem 2rem;}
.sub .habits .ImgBox {max-width: 930px;}
@media(max-width:1400px) {
    .sub .habits .flexBox {flex-direction: column;}
    .sub .habits .ImgBox, .sub .habits .TitBox {width: 100%;}
}



/* Speciality */
.sub .Speciality {background: no-repeat center / cover url('/img/sub/SpecialityBg.jpg');}
.sub .Speciality .flexList {padding-bottom: 6rem;}
.sub .Speciality .box {position: relative; z-index: 3;}
.sub .Speciality .box2 {position: relative; top:6rem;}
.sub .Speciality .Desc {position: absolute; width: 80%; height: auto; bottom:3rem; left: 50%; transform: translateX(-50%);}
@media(max-width:990px) {
    .sub .Speciality .box2 {top:31vw;}
}
@media(max-width:768px) {
    .sub .Speciality .box > div {width: fit-content; max-width: 590px; margin: auto; position: relative;}
    .sub .Speciality .box2 {top:auto;}
}


#rollingBox {position: absolute; left: -50%; top:50%; transform: translateY(-50%);}
#rollingBox .rolling {white-space: nowrap; color:rgba(255,255,255,.5);}
#rollingBox .rolling .rolling_text {font-size: 5rem; font-family: var(--pointfont); font-weight: 700; display: inline-block;}


/* Equipment */
.sub .Equipment {background-image: linear-gradient(0deg, #e1e1e1, #fff);}
.sub .Equipment img {border-radius: 0;}


/* Counseling */
.sub .Counseling .inner {max-width: 1720px; margin: auto; border-radius: .75rem; padding: 12.5rem 0; background: no-repeat center / cover url('/img/sub/CounselingBg.jpg');}
.sub.Cataract .Counseling .inner {background-image: url('/img/sub/Cataract/CounselingBg.jpg');}


/* Treatment */
.sub .Treatment {background-color: #f3f4f9; position: relative; overflow: hidden;}
.sub .Treatment .container {position: relative; z-index: 3;}
.sub .Treatment .LogoBg_Wh {position: absolute; top:-2rem; right:-2rem; width: 24.1875rem;}
.sub .Treatment .Desc {position: absolute; width: 80%; margin: auto; left: 0; right:0; bottom:2.5rem; color:#fff;}
.sub .Treatment .enfont {font-family: var(--pointfont); color:rgba(255,255,255,.5); margin-bottom: .3125rem;}

.sub.Cataract .Treatment #onBox {width: 90%;}
.sub .Treatment .flexList {flex-wrap: nowrap;}    
.sub .Treatment .box {position: relative; transform: translateY(0); transition: .3s;}
.sub .Treatment .box.on {transform: translateY(-3rem);}

.sub .Treatment .box.on .Btn, .sub .Treatment .swiper-slide-active .Btn  {background-color: #fff;}
.sub .Treatment .box.on .arrowImg, .sub .Treatment .swiper-slide-active .arrowImg {filter: invert(1);}

.sub .Treatment .Btn {width: 2.5rem; height: 2.5rem; border-radius: 50%; border:1px solid #fff; position: absolute; left: 2rem; top:2rem;}
.sub .Treatment .Btn .arrowImg {width: 1rem;}
@media(max-width:1340px) {
    .sub.Cataract .Treatment #onBox {width: 100%;}
}
@media(max-width:768px) {
    .sub .Treatment .xsInner {padding-left : calc((100% - var(--layoutwidth)) / 2);width:100%; margin-left: 5%;}
    .sub .Treatment .xsInner .flexList {--x-gap:0;}
}


/* SymptomArrow */
.sub .SymptomArrow {background-image: linear-gradient(0deg, #f6f6f6 ,#fff);}
.sub .SymptomArrow .box:after {content:''; width: 3.75rem; height: 3.75rem; border-radius: 50%; background-color: var(--pointcolor); background-image: url('/img/sub/arrow.png'); background-size: 1.375rem; background-repeat: no-repeat; background-position: center; display: flex; position: absolute; top:50%; right:-2.3rem; z-index: 3; transform: translateY(-50%);}
.sub .SymptomArrow .box:last-child:after {display: none;}
.sub .SymptomArrow .Tit {color:#fff; position: absolute; bottom: 2rem; left: 2rem;}

.sub .SymptomArrow .NonArrow .box:after {display: none;}

@media(max-width:768px) {
    .sub .SymptomArrow .box:nth-child(2):after {display: none;}
}
@media(max-width:500px) {
    .sub .SymptomArrow .box {width: fit-content; margin: auto;}
    .sub .SymptomArrow .NonArrow .box:after {display: none !important;}
    .sub .SymptomArrow .box:after {left: 50%; transform: translateX(-50%) rotate(90deg); top: auto; bottom:-2.3rem;}
    .sub .SymptomArrow .box:nth-child(2):after {display: block;}
    .sub .SymptomArrow .Arrow2 .box:nth-child(2):after {display: none;}
}



/* Self */
.sub .Self .box {background-color: #f5f5f5; border-radius: .75rem; padding: 1rem 2rem; display: flex; align-items: baseline; gap:0 1rem;}
.sub .Self .box .check {max-width: 1.25rem; width: 100%; height: 1.25rem; border-radius: 50%; background-color: #fff; display: flex; align-items: center; justify-content: center;}
.sub .Self .box .check img {width: .75rem;}
.sub .Self .box.on .check {background-color: var(--pointcolor);}
.sub .Self .box.on .check img {filter: invert(1) brightness(10);}



/* Distinction */
.sub .Distinction table {width: 100%; border-spacing: 0;}
.sub .Distinction table .TitBox  {width: 42%;}
.sub .Distinction table .vsBox  {width: 18%;}

.sub .Distinction .DistinctionTb {background-color: #f8f8f8; border-radius: .75rem; overflow: hidden;}

.sub .Distinction .DistinctionTb .TitBox {font-size: 1.875rem; color:#fff; border-bottom:none; position: relative;}
.sub .Distinction .DistinctionTb .BgAfter {background-image: linear-gradient(90deg, #f8f8f8 50%, #a4a4a4 50%);}
.sub .Distinction .DistinctionTb .Tit1:after {content:''; width: 100%; height: 100%; background-color: var(--pointcolor); border-radius: .75rem .75rem 0 0; position: absolute; top:0; right:0;}
.sub .Distinction .DistinctionTb .Tit1 p {position: relative; z-index: 3;}
.sub .Distinction .DistinctionTb .Tit2 {background-color: #a4a4a4;}
.sub .Distinction .DistinctionTb .Tit3 {background-color: #a4a4a4; border-radius: .75rem .75rem 0 0;}

.sub .Distinction .DistinctionTb td {padding:1.5rem 1rem; border-bottom:1px solid #dedede;}
.sub .Distinction .DistinctionTb .Border_LT {border-left:1px solid #dedede;}
.sub .Distinction .DistinctionTb .NoneBt {border-bottom: none;}


.sub .Distinction .DistinctionTb .bg-white {border-left: 2px solid var(--pointcolor); border-right: 2px solid var(--pointcolor);}
.sub .Distinction .DistinctionTb .bor_Bottom {border-bottom: 2px solid var(--pointcolor); border-radius: 0 0 .75rem .75rem;}
@media(max-width:768px) {
    .sub .Distinction .TabMenu {display: flex; align-items: center; justify-content: center; gap:1rem;}
    .sub .Distinction .TabMenu li {width: fit-content; padding: .4rem 2rem; border-radius: 1.5rem; color:#666; background-color: #f7f7f7; border:1px solid var(--pointcolor); cursor: pointer;}
    .sub .Distinction .TabMenu li.active {background-color: var(--pointcolor); color:#fff; font-weight: 700;}
    .sub .Distinction table {max-width: 595px; width: 100%; margin-left: auto; margin-right: auto;}
    .sub .Distinction table .TitBox {width: 100%;}
    .sub .Distinction .DistinctionTb .Border_LT {border-left: none;}

}


/* selfTest */
.sub .selfTest .flexBox {display: flex; gap:3rem 1rem;}
.sub .selfTest .selfTestList {display: flex; flex-direction: column; gap:1rem;}
.sub .selfTest .selfTestList li {background-color: #f3f4f9; border-radius: .75rem; padding: 1.7rem 2.5rem; max-width: 50.625rem; width: 100%;}
.sub .selfTest .Num {position: relative; padding-left: 2.5rem;}
.sub .selfTest .Num:after {content:''; font-weight: 700; font-family: var(--pointfont); color:var(--pointcolor); position: absolute; left: 0; top:0;}
.sub .selfTest .Num1:after {content:'01';}
.sub .selfTest .Num2:after {content:'02';}
.sub .selfTest .Num3:after {content:'03';}
.sub .selfTest .Num4:after {content:'04';}
.sub .selfTest .Num5:after {content:'05';}
.sub .selfTest .Num6:after {content:'06';}

.sub .selfTest .selfTestList.NonBg {gap:0;}
.sub .selfTest .selfTestList.NonBg li {background-color: transparent; padding: 1.7rem 0; border-bottom:1px solid rgba(56,74,139,.25); border-radius: 0;} 
.sub .selfTest2 .Img {background-color: #f6f6f6; align-self: stretch; border-radius: .75rem; min-height: 51.875rem; padding: 1.5rem;}
.sub .selfTest2 .Img img {border-radius: 0;}
.sub .selfTest2 .Desc {max-width: 37.5rem; width: 100%; margin-left: auto; padding-left: 2rem;}
.sub .selfTest2 .one {background-color: #f3f4f9; border-radius: .75rem; padding: 1rem; text-align: center;}
 @media(max-width:768px) {
    .sub .selfTest2 .Img {order:2; margin-top: 3rem; min-height: auto; padding: 3rem 1.5rem;}
    .sub .selfTest2 .Desc {padding-left: 0; margin-left: 0;}
 }


/* cause */
.sub .cause {background: no-repeat center / cover url('/img/sub/Retina/causeBg.jpg');}
.sub .cause .box {border-radius: .75rem; background-color: #fff; padding: 3rem 1rem;}
.sub .cause .causeImg {width: 4.4375rem;}
.sub .cause .checkDot {width: 1.0625rem;}
.sub .cause img {border-radius: 0;}



/* Early */
.sub .Early {background-color: #f3f4f9;}
.sub .Early .box {background-color: #fff; border-radius: .75rem; padding: 3rem;}



/* way */
.sub .way {background-color: #f3f4f9; position: relative;}
.sub .way .max1920 {position: relative; z-index: 3;}
.sub .way .LogoBg_Wh {position: absolute; top:-2rem; right:-2rem; width: 24.1875rem;}

.sub .way .waySwiper {padding-top: 8rem;}
.sub .way .swiper-slide {position: relative; transform: translateY(0); transition: .3s;}
.sub .way .swiper-slide-active, .sub .way .swiper-slide.on {transform: translateY(-5rem);}
.sub .way .Txt {position: absolute; left: 2rem; bottom:3rem; color:#fff;}
.sub .way .enTxt {font-family: var(--pointfont); color:rgba(255,255,255,.5)}

.sub .way .Btn {width: 2.5rem; height: 2.5rem; border-radius: 50%; border:1px solid #fff; position: absolute; left: 2rem; top:2rem;}
.sub .way .Btn .arrowImg {width: 1rem;}

.sub .way .swiper-slide.on .Btn, .sub .way .swiper-slide-active .Btn  {background-color: #fff;}
.sub .way .swiper-slide.on .arrowImg, .sub .way .swiper-slide-active .arrowImg {filter: invert(1);}

.sub .way .Btn_wrap {justify-content: flex-end; position: relative; bottom:-5rem;}
.sub .way .SlideBtn {border-color:var(--pointcolor); opacity: 1;}
.sub .way .SlideBtn:hover {background-color: var(--pointcolor);}
.sub .way .SlideBtn:hover img {filter: invert(1) brightness(10);}

@media(max-width:550px) {
    .sub .way .LogoBg_Wh {width: 20rem;}
    .sub .way .SlideInner {width: 100%; margin: auto; padding-left: 0;}
    .sub .way .swiper-slide {opacity: .5;}
    .sub .way .swiper-slide-active {opacity: 1;}
    .sub .way .Btn_wrap {display: none;}
}


/* Professionalism */
.sub .Professionalism {background-image: linear-gradient(0deg, #f7f7f7, #fff);}
.sub .Professionalism .Desc {max-width: 33.4375rem; margin: auto;}
@media(max-width:768px) {
    .sub .Professionalism .Img {order:2;}
}


/* Case */
.sub .Case .flexBox {display: flex; gap:3rem 2rem;}
.sub .Case .Desc {max-width: 52.5rem; width: 100%;}
.sub .Case .CaseList {display: flex; flex-direction: column; gap:1rem;}
.sub .Case .CaseList li {background-color: #f9f9f9; border-radius: .75rem; padding: 2rem 5%;}
.sub .Case .Tit {display: flex; gap:1rem}
@media(max-width:768px) {
    .sub .Case .Desc {max-width: 100%;}
}



/* kind */
.sub .kind .subTitBox {border-radius: .3125rem; background-color: var(--pointcolor); padding: .5rem 2.5rem; color:#fff; width: fit-content; margin: 5rem auto 3.5rem;}