@charset "utf-8";
/* CSS Document */
:root {  scroll-padding-top: 82px;}
html{overflow: overlay;scroll-behavior: smooth;}
body{color: #4D4D4D;background-color: #F9E9EA;font-family: "Noto Sans TC", sans-serif;}
a { color: #4D4D4D; cursor: pointer;    text-decoration: none; }
a:focus { outline: 0; }
a:active,
a:hover { text-decoration: none; color: #6D226C; }
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {font-weight: 600;}
.fs-5-1{font-size: 1rem}
.line-height-6{line-height: 1.6;}
.bg-white{background-color: #fff;}
.bg-light-blue{background-color: #F3FBFE}
.text-overflow-2{ overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-box-orient: vertical; -webkit-line-clamp: 2;}
.text-overflow-2{ overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-box-orient: vertical; -webkit-line-clamp: 2;}
.line-height-32{line-height: 32px;}
.text-align-justify{text-align: justify;}
.color-1{color: #E98CAF;}
.color-2{color: #64B8CC;}
.color-3{color: #D49246;}
@media (min-width:768px){.fs-5-1{font-size: 1.125rem;}}
@media (max-width: 992px){.container, .container-sm { max-width: 98%;}}
.svg-icon{width: 1.5rem; height: 1.5rem;}
.svg-icon-home{fill: #223c44;}
.svg-icon-home:hover{fill: #2f94b2;}
.svg-icon-to-top{fill: #fffff;stroke: #fffff;}
.svg-icon-more{}
.title{font-weight: bold!important;}

/*頁首*/
.header-page{background-color: #6D226C;min-height: 56px;}
.header-page.fix-header{    box-shadow: 0 2px 3px rgba(0,0,0,.2);transition: .5s; }

.quick-area-page{position: fixed;z-index: 1;    z-index: 1021;	bottom: -35px; right: 0%;  transform: translate(0%, -50%);}
.quick-area-box{display: flex;flex-direction: column;gap: 25px;}
.quick-area-page img{max-width: 76px;height: auto;}
@media (min-width: 992px){
.quick-area-page img{max-width: 80px;height: auto;}
}
@media (min-width:1200px){
.quick-area-page{position: fixed;z-index: 1;    z-index: 1021;	bottom: -80px; right: 0%;  transform: translate(0%, -50%);}
.quick-area-page img{max-width: 100px;height: auto;}
}

/*選單*/
.nav-eye-health{grid-gap: 1rem;}
.nav-eye-health a{position: relative;padding: 0 .25rem;color: #ffffff!important;font-size: 20px;}
.nav-eye-health a:hover{color: #ffffff!important;}
.nav-eye-health a:hover:before{transform: scale(1,1);    transform-origin: left center;}
.nav-eye-health a:before {    content: "";    position: absolute;    left: 0px;    right: 0px;    bottom: 10px;    margin: auto;    height: 2px;transition: transform .25s cubic-bezier(.37,.31,.2,.85);    transform-origin: right center;    transform: scale(0,1);    background-color: #e6679d;}
@media (min-width:1200px){
.nav-eye-health{grid-gap: .5rem;}
}
@media (min-width:1400px){
.nav-eye-health{grid-gap: 1rem;}
}

/*形象區*/
.website-image-pictures-page{margin-top: 56px;}
.website-image-pictures-page img{width: 100%;}

/*內容*/
.main-page{position: relative;display: block;padding-bottom: 0px;width: 100%;}
.container-1{border-bottom-left-radius: 60px;position: relative;background-image: url(../img/bg.svg);background-repeat: no-repeat;    background-position: bottom;    background-size: contain;}
/*.container-1:before {    content: "";    position: absolute;    left: 0px;     bottom: 0px;    height: 80px; width: 80px;   background-color: #fff;}*/

/* 標題 */
.title-box{font-weight: bold;margin: 0rem 0rem 1rem 0rem;position: relative;z-index: 1;}
.main-title{font-size: 26px;font-weight: bold!important; color: #6D226C;margin-bottom: 30px;}
.sub-title{font-size: 18px;font-weight: 400;}
@media (min-width: 576px){
.title-box{margin: 0rem 1rem 2rem 1rem;}
.main-title{font-size: 28px;}
.sub-title{font-size: 18px;}
}
@media (min-width: 992px){
}
@media (min-width:1200px){
.title-box{font-weight: bold;margin: 0rem 1rem 3rem 1rem;}
.main-title{font-size: 36px;}
.sub-title{font-size: 20px;}
}
@media (min-width:1400px){
}

/* 什麼是術後沾黏呢？*/
.what-pgae{}
.what-box{padding-top: 30px;overflow: hidden;}
.card-what-page{border-radius: 20px;margin-bottom: 30px;    border: none;}
.card-header-box{    padding-top: 15px;border-top-left-radius: 20px!important; border-top-right-radius: 20px!important;border-bottom:none; display: flex;    flex-direction: column;    align-items: center;text-align: center;}
.card-header-img{width: 120px;height: 120px;border-radius: 100%;    position: relative;    margin-top: -30px;    border: 3px solid transparent;margin-bottom: 15px;}
.card-header-title{margin-left: 0px;font-size: 20px;color: #fff;}
.card-header-sub-title{margin-left: 0px;font-size: 28px;color: #fff;height: auto;}
.card-what-page .card-body{padding: 30px;font-size: 18px;}
.card-what-page .card-text{margin-bottom: 20px;color: #4D4D4D;}
@media (min-width: 576px){}
@media (min-width: 992px){}
@media (min-width:1200px){
.card-header-box{align-items: flex-start;text-align: left;}
.card-header-img{width: 120px;height: 120px;border-radius: 100%;    position: absolute;   margin-top: -30px;    border: 3px solid transparent;}
.card-header-title{margin-left: 150px;font-size: 20px;color: #fff;}
.card-header-sub-title{margin-left: 150px;font-size: 28px;color: #fff;height: 78px;}
.card-what-page .card-body{padding: 30px;font-size: 20px;}
}
@media (min-width:1400px){
.card-header-sub-title{margin-left: 150px;font-size: 32px;color: #fff;height: 78px;}
}

/* 預防沾黏應用 */
.application-body{}
.application-page{border-radius: 20px;background-color: #fff; display: flex;position: relative;    overflow: hidden;flex-direction: column;}
.application-box{background-color: #6D226C; color: #fff;flex-basis: auto;padding: 45px;flex-shrink: 0;}
.application-list-box{padding: 90px 45px 45px 45px;flex-direction: column;    display: flex;    gap: 30px;    background-repeat: no-repeat;
    background-position:center -10px;}
.application-list-item{ display: flex;    column-gap: 30px;    flex-direction: column;align-items: center;}
.application-list-img{background-color: #F9E9EA;border-radius: 100%;width: 110px;height: 110px;display: flex;margin-bottom: 15px;
    justify-content: center;    align-items: center;position: relative;flex-shrink: 0;font-size: 24px;color: #6D226C;font-weight: bold;}
.application-list-img strong{background-color: #6d226c;    color: #fff;    border-radius: 100%;    width: 40px;    height: 40px;    display: flex;    align-items: center;    justify-content: center;    position: absolute;    left: -6px;    top: -6px;}
.application-list-txt{font-size: 20px;text-align: center}
.application-list-txt strong{margin-bottom: 10px;    display: flex;font-weight: 400;}
.application-list-txt p{display: flex;    align-items: baseline;color: #6D226C;justify-content: center;}
.application-list-txt svg{flex-shrink: 0;margin-right: 5px;}
.application-list-box{background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNTAiIGhlaWdodD0iNTAiIHZpZXdCb3g9IjAgMCAxNTAgNTAiPjxwYXRoIGZpbGw9IiM2RDIyNkMiIGQ9Ik03NSA1MEwwIDBoMTUwTDc1IDUweiIvPjwvc3ZnPg==")}
@media (min-width: 576px){
.application-list-item{ flex-direction: row;align-items: flex-start;}
.application-list-img{margin-bottom: 0;}
.application-list-txt{font-size: 20px;text-align: left}
.application-list-txt p{justify-content: flex-start;}
}
@media (min-width: 992px){
.application-list-box{background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNTAiIGhlaWdodD0iNTAiIHZpZXdCb3g9IjAgMCAxNTAgNTAiPjxwYXRoIGZpbGw9IiM2RDIyNkMiIGQ9Ik03NSA1MEwwIDBoMTUwTDc1IDUweiIvPjwvc3ZnPg==")}
}
@media (min-width:1200px){
.application-page{border-radius: 20px;background-color: #fff; display: flex;position: relative;    overflow: hidden;flex-direction: row;}
.application-box{background-color: #6D226C; color: #fff;flex-basis: 510px;padding: 45px;flex-shrink: 0;}
.application-list-box{padding: 45px 45px 45px 90px;flex-direction: column;    display: flex;    gap: 30px;    background-repeat: no-repeat;    background-position: left center;}
.application-list-box{background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI1MCIgaGVpZ2h0PSIxNTAiIHZpZXdCb3g9IjAgMCA1MCAxNTAiPjxwYXRoIGRhdGEtbmFtZT0iUG9seWdvbiAzIiBkPSJNNTAgNzVMMCAxNTBWMHoiIGZpbGw9IiM2ZDIyNmMiLz48L3N2Zz4=")}
}

/* 啟動術後守護力 */
.guardian-power{  padding-bottom: 70px;  background-repeat: no-repeat;
    background-position: left bottom;background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iNjAiIGhlaWdodD0iNjAiIHZpZXdCb3g9IjAgMCA2MCA2MCI+PGRlZnM+PHBhdGggaWQ9ImEiIGQ9Ik0wIDBoNjB2NjBIMHoiLz48L2RlZnM+PGNsaXBQYXRoIGlkPSJiIj48dXNlIHhsaW5rOmhyZWY9IiNhIiBvdmVyZmxvdz0idmlzaWJsZSIvPjwvY2xpcFBhdGg+PGcgY2xpcC1wYXRoPSJ1cmwoI2IpIiBmaWxsPSIjZmZmIj48cGF0aCBkPSJNMCAuMDAxVjYwaDYwLjAwMUMyNi44NjMgNjAgMCAzMy4xMzkgMCAuMDAxTTYwLjAwMS02MEgwVi4wMDFDMC0zMy4xMzcgMjYuODYzLTYwIDYwLjAwMS02MG0wIDEyMEgxMjBWLjAwMUMxMjAgMzMuMTM5IDkzLjEzOSA2MCA2MC4wMDEgNjBtMC0xMjBDOTMuMTM5LTYwIDEyMC0zMy4xMzcgMTIwIC4wMDFWLTYweiIvPjwvZz48L3N2Zz4=")}
.guardian-power-tab-nav{grid-gap: 1rem;    display: flex;    justify-content: center;}
.guardian-power-link{color: #6D226C;font-size: 20px;    display: flex;    align-items: center;    justify-content: space-between;padding: 0.5rem 1.35rem;border: 1px solid #6D226C;background-color: transparent;}
.guardian-power-link:hover{color: #fff;border: 1px solid #6D226C;background-color: #6D226C!important;}
.guardian-power-link.active,
.guardian-power-link.active:hover{color: #fff;border: 1px solid #6D226C;background-color: #6D226C!important;}

.guardian-power-page{border-radius: 20px;background-color: #fff; padding: 60px 0px 60px 0px;display: flex;position: relative;align-items: flex-start;    line-height: 36px;flex-direction: column;}
.guardian-power-box{flex-grow: 1;width: 100%}
.list-box{list-style-type: none;    padding: 0;    margin: 30px; }
.list-title{font-size: 32px;color: #fff;    display: inline-flex;    align-items: center;padding-left: 30px;position: relative;height: 65px; padding-right: 98px;   }
.list-title img{width: 65px;height: 65px;border-radius: 100%; border: 3px solid transparent;    margin-left: 40px;    position: absolute;    right: -33px;}
.list-box li{     line-height: 36px;    display: flex;    column-gap: 15px;    align-items: baseline;font-size: 20px;margin-bottom: 8px; margin-left: 0px;}
.list-box li strong.number{color: #6D226C}
.list-box li .txt-box-1{border-bottom: 3px solid #F9E9EA;width: 100%;}
.list-box li .txt-box-2{border-bottom: 3px solid #E4F2F5;width: 100%;}
.list-box li .txt-box-3{border-bottom: 3px solid #F8EFE7;width: 100%;}
.list-box li .txt-box strong{}

.example-box{border-radius: 20px; padding: 30px;flex-grow: 0;flex-basis: auto;font-size: 20px;position: relative;margin-left:30px;    margin-right: 30px;    flex-shrink: 0;}
.example-box .example-icon{width: 40px;height: 40px;position: absolute;right: -10px;top: -10px;background-color: #6D226C;border-radius: 100%;color: #fff;font-size: 20px;font-weight: bold;text-align: center;display: flex;    justify-content: center;    align-items: center;}
.guardian-power-img-box{    position: absolute;bottom: -85px;    right: 45px;}
.guardian-power-img-box img{height: 165px;}

@media (min-width: 576px){
.guardian-power-page{align-items: normal;align-items: flex-start;}
.list-title{padding-left: 45px;} 
.list-box li{   margin-left: 15px;}
}
@media (min-width: 992px){}
@media (min-width: 1200px){
.guardian-power-page{ padding: 45px 30px 45px 0px;flex-direction: row;align-items: flex-start;}
.example-box{flex-basis: 375px;}
.list-title{padding-left: 45px;} 
.list-box li {margin-left: 15px;}
.guardian-power-img-box img{height: 220px;}
}
@media (min-width: 1400px){
.guardian-power-page{ padding: 60px 60px 60px 0px;flex-direction: row;align-items: flex-start;}
.example-box{flex-basis: 375px;}
}
		
/*		專家應用認可 */
.doctor-news-tab-nav{grid-gap: 1rem;    display: flex;    justify-content: center;}
.doctor-news-link{color: #6D226C;font-size: 18px;    display: flex;    align-items: center;    justify-content: space-between;padding: 0.5rem 1.35rem;border: 1px solid #6D226C;background-color: transparent;}
.doctor-news-link:hover{color: #fff;border: 1px solid #6D226C;background-color: #6D226C!important;}
.doctor-news-link.active,
.doctor-news-link.active:hover{color: #fff;border: 1px solid #6D226C;background-color: #6D226C!important;}
.doctor-news-img-box:hover img{transform: scale(1.12);transition: 0.5s ease-out;}
.doctor-news-img{ width: 100%;height: auto;transform: scale(1);transition: 0.5s ease-out;margin-bottom: 0!important;}
.doctor-news-content{display: flex;grid-gap: 0.25rem;    flex-direction: column;}
.doctor-news-title{font-size: 20px;margin-bottom: 0;line-height: 32px;}
.doctor-news-txt{margin-bottom: 0;font-size: 18px;}
.doctor-news-time{margin-bottom: 0;opacity: .5;}
.doctor-news-img-box{    position: relative;    display: block;    overflow: hidden;transition: all .4s ease;border-radius: 1rem;    margin-bottom: 1rem;}
.doctor-news-img-box a:before {    position: absolute;    top: 50%;    left: 50%;    display: block;    content: "";    width: 0;    height: 0;    background: rgba(255, 255, 255, 0.2);   border-radius: 1rem;   -webkit-transform: translate(-50%, -50%);    transform: translate(-50%, -50%);    opacity: 0;    z-index: 1;}
.doctor-news-img-box:hover a::before {    -webkit-animation: circle 0.75s;    animation: circle 0.75s;}
@-webkit-keyframes circle {
	0% {
		opacity: 1;
	}
	40% {
		opacity: 1;
	}
	100% {
		width: 200%;
		height: 200%;
		opacity: 0;
	}
}
@keyframes circle {
	0% {
		opacity: 1;
	}
	40% {
		opacity: 1;
	}
	100% {
		width: 200%;
		height: 200%;
		opacity: 0;
	}
}

/*頁尾*/
#footer { background: #4D4D4D; color: #f7f7f7; padding: 1.5rem 1.5rem 1.25rem; text-align: center; position: relative; z-index: 1;}
#footer .footer-wrapper { font-size: .9rem; margin: auto }
#footer .footer-info__logo { margin: 0 auto 1rem }
#footer .footer-info__logo img { margin: auto }
#footer .footer-link { margin-top: 1rem }
#footer .footer-link__about ul, #footer .footer-link__social ul { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center ;list-style-type: none; list-style-image: none;margin-bottom: 0;}
#footer .footer-link__about ul li, #footer .footer-link__social ul li { margin-top: .25rem; margin-bottom: .25rem }
#footer .footer-link__about ul li:not(:first-child), #footer .footer-link__social ul li:not(:first-child) { margin-left: 1rem }
#footer .footer-link__about li { padding-left: .5rem; position: relative }
#footer .footer-link__about li:not(:first-child):after { content: ""; background: #fff; width: 1px; height: 70%; position: absolute; top: 15%; left: -.25rem }
#footer .footer-copyright { -webkit-box-flex: 0; -ms-flex: none; flex: none; font-size: .725rem; width: 100% }
#footer a { color: #fff }

@media screen and (min-width: 960px) {
#footer { text-align: left }
#footer .footer-wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between }
#footer .footer-info { display: -webkit-box; display: -ms-flexbox; display: flex }
#footer .footer-info__logo { margin: 0 1rem 0 0 }
#footer .footer-info__logo img { width: 150px; height: auto }
#footer .footer-link { margin: 0 }
#footer .footer-link__about ul, #footer .footer-link__social ul { -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end }
#footer .footer-copyright { margin-top: -1rem }
}

/*回頁面上方*/
.to-top { position: fixed;    bottom: 20px;    right: 20px;    width: 40px;    height: 40px;   background-color: #6D226C;    z-index: 99;    cursor: pointer;    border-radius: 6px;
    text-align: center;    color: #FFFFFF;    display: flex;    align-items: center;    justify-content: center;}
.to-top:hover{ background:  #555555;}

/*手機*/
.mobile-navbar{display: flex;top: 0;right: 10;position: fixed;      z-index: 1031;}
.mobile-navbar .navbar-toggler{    background-color: #f9e9ea;}
.mobile-navbar .navbar-toggler:focus {box-shadow: none;}
.offcanvas-header{align-items: flex-start;    background-color: #f9e9ea;    padding: 0;    margin: 0;}
.offcanvas-title{ width: 100%;    text-align: center;color: #6D226C;    padding-bottom: 15px;}
.mobile-img{width: 100%;display: flex;justify-content: center;margin: 0 auto;margin-bottom: .5rem;}
.offcanvas-body .navbar-nav{text-align: center;}
.offcanvas-body{    border-top: 1px solid rgb(163 115 160 / 67%);font-size: 1.125rem;background-color: #f9e9ea;    padding: 0;}
.offcanvas-body .nav-item{    border-bottom: 1px solid rgb(163 115 160 / 67%);}
.offcanvas-body .nav-link{}
.offcanvas-body .nav-link:hover{color: #fff;    background-color:#E98CAF;}
.offcanvas-header .btn-close{position: absolute;    right: 10px;    top: 10px;}

.wow{visibility: hidden}
/*動畫*/
.bg-1{ z-index: -1;position: absolute;top: 50%; left: 0%;  transform: translate(-50%, -50%);filter: blur(15px);opacity: .7;}
.animate-1{animation-name: animate-1; animation-duration: 6s;transition-timing-function:linear; animation-iteration-count: infinite;}

@keyframes animate-1 {
  0%   {transform: rotate(0deg) translateX(50px) rotate(-0deg);}
  100%  {transform: rotate(360deg) translateX(50px) rotate(-360deg);}
}

.bg-2{ z-index: -2;position: absolute;top:80%; left: 85%;  transform: translate(-50%, -50%);filter: blur(34px);}
.animate-2{animation-name: animate-2;animation-duration: 10s;transition-timing-function:ease-in;animation-iteration-count: infinite;animation-direction: alternate;    width: 500px;}
@keyframes animate-2 {
  0%   {transform: scale(1);}
  100%  {transform: scale(1.5);}
}

.bg-3{ z-index: -2;position: absolute;top:35%; right: 0%;  transform: translate(50%, -50%);filter: blur(10px);}
.animate-3{animation-name: animate-3;animation-duration: 20s;transition-timing-function:ease-in;animation-iteration-count: infinite;animation-direction: alternate;}
@keyframes animate-3 {
  0%   {transform: scale(1);transform: rotate(0deg);}
  100%  {transform: scale(1.5);transform: rotate(360deg);}
}

.bg-4{ z-index: -4;position: absolute;top:50%; left: 50%;  transform: translate(-50%, -30%);filter: blur(10px);}
.animate-4{}

.bg-5{ z-index: -4;position: absolute;top:0%; left: 50%;  transform: translate(-50%, -50%);filter: blur(2px);}
.animate-5{    margin-right: 100px;width: 22px;height: 22px;animation-name: animate-5;animation-duration: 6s;transition-timing-function:linear;animation-iteration-count: infinite;}
@keyframes animate-5 {
  0%   {transform: rotate(0deg) translateX(10px) rotate(-0deg);}
  100%  {transform: rotate(360deg) translateX(10px) rotate(-360deg);}
}
@media (min-width: 576px){
.animate-5{    margin-right: 140px;width: 36px;height: 36px;}
}
@media (min-width: 1200px){
.animate-5{    margin-right: 180px;width: 46px;height: 46px;}
}

.bg-6{ z-index: -4;    position: absolute;    bottom: 0;    left: 50%;    transform: translate(-50%, 78%);    filter: blur(10px);}