@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900');
@import 'https://fonts.googleapis.com/earlyaccess/notosanstc.css';

/* 根據bootstrap所做的調整 */
/*google字型*/
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100;300;400;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700&display=swap');


body{ font-family: "Noto Sans TC","Microsoft JhengHei","微軟正黑體","Roboto","Open Sans",sans-serif;color: #222;letter-spacing:1px;font-size: 17px;line-height: 1.6;}
form{height: 100%;}
a { color:var(--color-main1);text-decoration: none;}
a:hover{ color: #000;text-decoration: none;}
a:focus{text-decoration: none;color: saddlebrown;}
a:after{color: #000;}
ul,li{list-style: none;padding: 0;margin: 0;}
img{max-width: 100%;}
:focus {outline: #ccc auto 3px;}
hr{border-top: 1px solid #ccc;}
.container{position: relative;padding-left: 15px;padding-right: 15px;}
.en{font-family:'Roboto',sans-serif;}
.center{display: block;margin: auto;text-align: center;}
p { font-size: 17px; font-weight: 400; line-height: 1.6; }
h1 { font-size: 40px; margin-bottom: 10px;line-height: 1.8; margin-top: 0px; }
h2 { font-size: 30px;margin-bottom: 10px;line-height: 1.8; margin-top: 0px;}
h3 { font-size: 24px;margin-bottom: 10px; line-height: 1.8;margin-top: 0px;}
h4 { font-size: 20px; margin-bottom: 10px;line-height: 1.8; margin-top: 0px;}
h5 { font-size: 18px; margin-bottom: 10px;line-height: 1.8; margin-top: 0px;}
@media (max-width: 1024px) {
p { font-size: 16px; font-weight: 400; margin: 0; }
h1 { font-size: 28px; font-weight: 700; margin: 0;padding: 0; }
h2 { font-size: 22px; font-weight: 700; margin: 0; padding: 0;}
h3 { font-size: 18px; font-weight: 700; margin: 0; }
h4 { font-size: 17px; font-weight: 700; margin: 0; }
h5 { font-size: 16px; margin-bottom: 10px;line-height: 1.5; }
    }
@media (max-width: 767px) {
p { font-size: 16px; font-weight: 400; margin: 0; }
h1 { font-size: 28px; font-weight: 700; margin: 0;padding: 0; }
h2 { font-size: 22px; font-weight: 700; margin: 0; padding: 0;}
h3 { font-size: 19px; font-weight: 700; margin: 0; }
h4 { font-size: 17px; font-weight: 700; margin: 0; }
h5 { font-size: 16px; margin-bottom: 10px;line-height: 1.5; }
    }

:root {
  --color-main1: #1d8caa;
  --color-main2: #40b5c5;
  --color-main3:#85d4d6;
  --color-main4: #c8edec;

  --color-dark: #0071a6;
  --color-light: #e8f4fb;
  --color-primary: #fed966;

  /* 若有更多顏色繼續加 */
  
}
.hightlight {color: var(--color-dark);font-weight: bold;}
  /* 手機版斷行 */
.mobile-br { display: none; }
@media (max-width: 767px) { .mobile-br { display: block; } }
/* ----------------------------------------------------------------
	圖片樣式
-----------------------------------------------------------------*/
.br23-img{width:100%;height:100%;object-fit:cover;display:block;overflow:hidden;border-radius:0 50px 0 50px}
/* ----------------------------------------------------------------
	title 標題樣式
-----------------------------------------------------------------*/
.section-title{text-align:center;width:100%;margin-bottom: 40px;}
.section-title h2{display:inline-flex;align-items:center;white-space:nowrap;margin-bottom: 0;}
.section-title h2::after,.section-title h2::before{content:'';display:block;height:2px;background:#40b5c5;width:10vw;margin:0 15px}
.section-title p{color: #40b5c5;line-height: 1;}

.page-title{text-align:center;margin-bottom: 20px;letter-spacing: 2px;}
.page-title h1{display:block;align-items:center;white-space:nowrap;margin-bottom: 0;color:#40b5c5;}
.page-title h1::after{content:'';display:block;height:2px;background:#40b5c5;width:15vw;margin:5px auto;}
.title-bg{background: var(--color-main2);border-radius: 100px;padding:5px 15px;color: #fff;font-weight: bold;}
@media screen and (max-width: 991px){
    .title-bg{text-align: center;}
    .section-title{margin-bottom: 10px;}}
/* ----------------------------------------------------------------
	Go To Top
-----------------------------------------------------------------*/
#back-to-top {position: fixed;bottom:15px;right: 20px;z-index: 9999;border-radius: 100px;
width:auto;height:auto;text-align: center;background:var(--color-main2);line-height: 15px;color: #fff;padding:14px 15px;cursor: pointer;text-decoration: none;transition: opacity 0.2s ease-out;
opacity: 0;text-align: center;}
#back-to-top i{display: block;}
#back-to-top:hover {}
#back-to-top.show {opacity:1;}

/* ----------------------------------------------------------------
	carousel
-----------------------------------------------------------------*/
/* 首頁大圖輪播*/
#myCarousel{}
.carousel-inner{height: 100%;}
.carousel-control.right,.carousel-control.left{background-image: none;}
.carousel-control i{line-height: 40px;color: #ababab;}
.carousel-control{text-shadow: none;width: 40px;
   background-color: none;height: 40px;top:50%;margin-top: -30px;border-radius: 400px;}
.carousel-control .glyphicon-chevron-left, .carousel-control .icon-prev{margin-left: -20px;margin-top: -15px;font-size: 30px;line-height:30px;}
.carousel-indicators li{width: 15px;height: 15px;margin:5px;}
.carousel-indicators .active{width: 15px;height: 15px;margin: 5px;}
.carousel-indicators {}
.carousel-indicators li{    border: 2px solid #ababab;}
.carousel-indicators .active{    background-color: #ababab;}

@media screen and (max-width: 991px){
.carousel-control{background-color: transparent;}
.carousel-indicators {bottom: -10px;}
.carousel-indicators li{width: 10px;height: 10px;margin: 2px;}
.carousel-indicators .active{width: 10px;height:10px;margin: 2px;}    
}
@media screen and (max-width: 480px){
    .carousel-control.right, .carousel-control.left{display: none;}    
.carousel-indicators {bottom:-40px;} 
.carousel-indicators li{}    
.carousel-indicators .active {}    
}
/*owl小輪播*/
.owl-carousel .owl-item img{    padding: 0 10px;
    border-radius: 15px;
    overflow: hidden;}

/* header樣式與 Flex 佈局 */
.header{;box-shadow:0 2px 10px rgba(0,0,0,.1);transition:height .3s;border-top: 6px solid var(--color-main2); background: linear-gradient(
    to bottom,
    var(--color-light) 5%, 
    #ffffff 40%
  );}
.header-inner{align-items:center;display:flex;height:100px;justify-content:space-between;position:relative}
.header-inner *{box-sizing:border-box}
.header .logo{max-width: 18%;}
.header .logo img{display:block;height:auto;transition:height .3s;max-width: 100%;max-height:80px;}
.navigation{margin:0 20px}

.main-menu{display:flex;list-style:none;margin:0;padding:0}
.main-menu>li{position:relative}
.main-menu>li{position:relative}.main-menu>li:not(:last-child)::after{content:'';position:absolute;top:50%;right:0;transform:translateY(-50%);height:30px;width:1px;background-color:#00BCD4}
.main-menu>li>a{color:#333;display:block;font-size:16px;font-weight:500;padding:0 18px;transition:color .3s;letter-spacing: 2px;    line-height: 1.5;}
.main-menu>li>a:hover{color:#40b5c5}
.header-cta a{background:#40b5c5;border-radius:100px;color:#fff;font-size:15px;padding:8px 15px;text-decoration:none}
.sub-menu{background:#fff;box-shadow:0 4px 12px rgba(0,0,0,.1);display:none;left:0;list-style:none;margin:0;min-width:180px;padding:10px 0;position:absolute;top:100%;z-index:10}
.has-dropdown:hover>.sub-menu{display:block}
.sub-menu li a{color:#333;display:block;font-size:14px;padding:8px 15px;text-decoration:none}
.sub-menu li a:hover{background:#f4f4f4;color:#007bff}
.fixed-header{left:0;position:fixed;top:0;width:100%;z-index:9999}
.fixed-header .header-inner{height:60px}
.fixed-header .main-menu>li>a{line-height:60px}
.fixed-header .logo img{height:60px}
.menu-trigger{cursor:pointer;display:none;height:24px;position:absolute;right:15px;top:50%;transform:translateY(-50%);width:30px;z-index:1000}
.menu-trigger span{background:#333;display:block;height:2px;margin-bottom:8px;transition:all .3s;width:100%}
.menu-trigger span:last-child{margin-bottom:0}
@media (max-width:991px){
    
    .header-inner{height:80px;justify-content:flex-start;padding:0 15px;}
.navigation{margin:0}
    .header .logo{max-width: 100%;}
.header .logo img{width:220px;display: inline-block;margin: auto;        height: auto;}
.main-menu{background:var(--color-main3);color:#222;display:block;height:100%;left:-70%;padding-top:20px;position:fixed;top:0;transition:left .3s;width:70%;z-index:9999}
.main-menu.active{left:0}
.main-menu>li{border-bottom:1px solid #fff;}
.main-menu>li>a{color:#3e3e3e;line-height:50px;padding:5px 20px;text-align:center;}
.main-menu>li>a:hover{background:hsla(0,0%,100%,.1)}
.sub-menu{background:rgba(0,0,0,.1);box-shadow:none;padding:0;position:relative;width:100%}
.sub-menu li a{color:#eee;padding:10px 30px}
.sub-menu li a:hover{background:rgba(0,0,0,.2)}
.header-cta{display:none}
.menu-trigger{display:block}
.overlay{background:rgba(0,0,0,.6);display:none;height:100%;left:0;position:fixed;top:0;width:100%;z-index:9998}
.overlay.active{display:block}
}


/* ----------------------------------------------------------------
	Footer 
-----------------------------------------------------------------*/

.footer{   background:#f0efec;color:#333;padding: 20px;}
.footer-content{display: flex;justify-content:space-around;align-items:center;
font-weight:500;column-gap: 20px;}
.footer-content .fc1{max-width: 150px;}
.footer-content h5{line-height:2!important;text-align: left;color:#333;}
.footer .logo{max-width: 180px;margin: 10px auto;}
.copyrights{padding: 15px 0;letter-spacing: 1px;color: #fff;font-size: 0.9em;border-top: 1px solid rgba(0,0,0,0.2);
background: var(--color-main1);}
.copyrights-content{display: flex;justify-content: space-between;}
.copyrights a{color: #fff;}
.design-company a{color: #ccc;font-size: 90%;}
@media screen and (max-width: 991px){
.copyrights {letter-spacing: 0;font-size: 0.8em;}   
    .footer{text-align: center;}
}
@media screen and (max-width: 767px){
    .footer-content{flex-direction: column;}
img.footerlogo {max-width:200px;}
    .copyrights-content{flex-direction: column;}
}
/* ----------------------------------------------------------------
	Video Youtube RWD
-----------------------------------------------------------------*/
.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 0px;
    height: 0;
    overflow: hidden;
}
.video-container iframe, .video-container object, .video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.iframe-rwd {
    position: relative;
    padding-bottom:100%;
    padding-top:100%;
    height: 100%;
    overflow: visible;
}
.iframe-rwd iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
/* ----------------------------------------------------------------
首頁區塊
-----------------------------------------------------------------*/
.section-block{padding:50px 0;overflow:hidden}
/*診療項目*/
.info-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
.info-card{padding:30px 20px;text-align:center;border:1px solid #00bcd4;border-radius:12px;transition:all .3s;background:var(--color-main3);box-shadow:0 0px 2px 5px rgba(0,188,212,.03)}
.info-card:hover{opacity: 0.5;background:var(--color-main4);}
.info-card img{width:80px;height:auto;}
.info-card h3{font-weight:600;color:#111;margin-bottom: 0;}
.info-card p{font-size:14px;color:var(--color-dark);}
.info-card p::after{content:'';display:block;height:1px;background:var(--color-dark);width:3vw;margin:10px auto 10px;}
.info-card .des{color: #606060;text-align: left;font-size: 90%;line-height: 1.5;}
@media (max-width:991px){.info-grid{grid-template-columns:repeat(2,1fr);gap:10px;}
.info-card {padding: 20px 15px;}
}

/*callback方框*/
.block-layout{display:flex;align-items:center;gap:40px;background-color: var(--color-main1); color: #fff;;border-radius: 20px;
padding: 40px 60px;}
.block-content{flex:1;max-width:70%}
.block-content h2{margin-bottom:20px;line-height:1.4;font-weight:700;color: #fff;}
.block-content p{line-height:1.8;margin-bottom:5px;color: #fff;}
.block-image{flex:1;max-width:35%;display:flex;justify-content:flex-end}
.block-image img{width:100%;height:auto;border-radius:15px;box-shadow:0 10px 20px rgba(0,0,0,.1)}
.btn{display:inline-block;padding:12px 30px;margin-top:25px;border:2px solid;border-radius:40px;text-decoration:none;font-size:16px;transition:all .3s;        font-weight: bold;}

.btn-white{background:#fff;color:#2a8d9d}
.btn-white:hover{color:#fff;border-color:#fff;background:var(--color-main1);}
@media (max-width:991px){.section-block{padding:30px 0px;}
.block-layout{flex-direction:column-reverse;padding: 15px;gap:15px;}
.block-content,.block-image{max-width:100%;flex:auto}
.block-content{text-align:left;}
.block-image{margin-bottom:20px;flex: 1;}
.block-image img{width:100%}
.block-content h2{font-size:26px}
.block-content p{font-size:16px}
.btn{margin-top:15px}
}
/*聯絡*/
.mapzone {margin-bottom: 40px;padding:40px;border:1px solid var(--color-main2);border-radius: 20px;line-height: 1.8;background: #fff;gap:20px;
display: flex;align-items: center;box-shadow:0 10px 20px rgba(0,0,0,.1);}
.mapzone .left,.mapzone .right{flex:1;box-sizing:border-box}
.mapzone i{color: var(--color-main1)!important;}
@media screen and (max-width:991px){
.mapzone {display: flex;flex-direction: column;padding:30px;}
.mapzone .left,.mapzone .right{width: 100%;}
}
@media screen and (max-width:767px){
.mapzone {display: flex;flex-direction: column;padding:15px;}
}
/*關於*/
ul.text-list  li{color: var(--color-dark);font-weight: 500;font-style: italic;font-size: 110%;
margin-bottom: 5px;}
ul.text-list  li img{display: inline-block;margin-right: 10px;}
@media (max-width: 991px) {
    ul.text-list  li{padding:8px 5px;
margin-bottom: 5px;}
}

/*why choose*/
ul.img-list{display:flex;flex-wrap:wrap;list-style:none;padding:0;margin:0}
ul.img-list li{padding: 10px;flex: 1;}
ul.img-list li img{border-radius: 15px;overflow: hidden;}
ul.img-list li .des{display: flex;font-size: 105%;font-weight: bold;align-items: center;
padding: 10px 0;}
ul.img-list li .des img{margin-right: 10px;}
/*FAQ*/
.faq-item {margin-bottom: 3px;
}
@media screen and (max-width:991px){
    ul.img-list{flex-direction: column;}
ul.img-list li{flex-basis:50%}
}
/* 標題 */
.faq-question{cursor:pointer;background:#ffffff;padding:12px 30px;border-radius:4px;font-weight:bold;display:flex;justify-content:space-between;align-items:center;color: #333;}
.faq-answer{max-height:0;background:var(--color-light);border-radius:4px;overflow:hidden;opacity:0;padding:0 30px;transition:max-height 0.4s ease-in-out, opacity 0.3s, padding 0.4s ease-in-out}
.faq-answer.open{opacity:1;max-height:max-content;padding:30px}
@media screen and (max-width:767px){
.faq-question{cursor:pointer;background:#ffffff;padding:12px 15px;}
    .faq-question .icon{padding-left: 5px;}
}
/* ----------------------------------------------------------------
	內頁ABOUT
-----------------------------------------------------------------*/
.page-header{background-image:url(../images/bg-top.png);background-position: bottom center;
padding: 30px;}
.page-content{}
.one-column-hero{text-align:center;}
.img-grid{width:100%;display:flex;justify-content: center;max-width: 800px;margin: auto;}
.img-grid img{border-radius: 15px;margin: 20px;overflow: hidden;}
.flex-section{display:flex;align-items:center;flex: 1 1;text-align: justify;padding: 0 20px;}
.flex-section .left{padding:0 20px; flex:1;}
.flex-section .right{flex:1;box-sizing:border-box;padding:20px; }
.flex-section h2{color:var(--color-main1);border-bottom: 3px solid var(--color-main1);margin-bottom: 15px;}
.flex-section.dark h2{color:#fff;border-bottom: 3px solid #fff; }
.flex-section.dark {color:#fff;}
.B{flex-direction:row-reverse}@media (max-width: 768px){.col{flex-direction:column}.B{flex-direction:column}}
.logozone {margin-bottom: 40px;padding:40px;border:1px solid var(--color-main2);border-radius: 20px;line-height: 1.8;justify-content: space-around;
display: flex;align-items: center;box-shadow:0 10px 20px rgba(0,0,0,.1);}
.about-block{display: flex;}
.about-block .left{flex:1;box-sizing:border-box;padding:20px; }
.about-block .right{flex:1;box-sizing:border-box;padding:20px; }

@media (max-width: 991px) {
    .img-grid img{margin:10px 5px;}
.page-header{padding: 10px;}
    .flex-section{flex-direction: column;}
.flex-section .left{padding:0 10px; flex:1;}
.flex-section .right{flex:1;box-sizing:border-box;padding:10px; }
    .logozone{flex-direction: column;padding:20px;margin-bottom: 0;}
    .logozone .text h2{text-align: center;}
    .logozone .text p{margin-bottom: 10px;border-bottom: 1px #efefef solid;padding-bottom: 10px;}
.about-block{display: flex;flex-direction: column;}
.dpic{display: block;margin: auto;max-width: 60%;}
}
@media (max-width: 991px) {
    .one-column-hero{text-align: left;}
}
/* ----------------------------------------------------------------
	內頁 info
-----------------------------------------------------------------*/
.info1{display: flex;align-items: center;max-width: 90%;margin: auto;}
.info1 .left{padding: 20px;flex: 1;}
.info1 .right{padding: 30px;flex: 1;}
.info2{max-width: 90%;margin: auto;}
.info2 .title{background:var(--color-main2); border-top-left-radius: 20px;border-top-right-radius: 20px;
padding: 15px;text-align: center;color: #fff;}
.info-list ul li {display: flex;width: 100%;border: 1px var(--color-main3) solid;border-radius: 10px;background: #fff;margin-bottom: 15px;padding: 15px;justify-content: center;}
.info-list ul li .des{width: 80%;}
.info-list ul li img{padding: 10px;width: 100px;height: 100px;display: block;margin-right: 15px;}
.info-list ul{position:relative}
.info-list ul li:not(:last-child)::after{content:'';position:absolute;bottom:-15px;left:50%;transform:translateX(-50%);width:0;height:0;border-left:10px solid transparent;border-right:10px solid transparent;border-top:15px solid #004d40;z-index:1}
@media screen and (max-width: 991px){
    .info1{flex-direction: column;}
    .info1 .right{padding: 15px;}
    .info-list ul li p{height: auto;}

}

/* ----------------------------------------------------------------
	醫師介紹
-----------------------------------------------------------------*/
.dr-profile{margin:30px auto 80px;padding:40px 20px;line-height:1.6;background:rgb(255 255 255 / 50%);border-radius:20px;}

.dr-item{margin:30px auto 80px;padding:40px 20px;line-height:1.6;background:rgb(245 250 250 / 70%);border-radius:20px;}


.bio-container{display:flex;align-items:flex-start;gap:10%;padding:0px 10%;margin-bottom:50px;}
.bio-img{position: relative;}
.bio-name{display:block;background:rgba(0,133,135,.95);padding:10px 20px;position:relative;bottom: 0;
width: 100%;text-align: center;color: #fff;border-top-right-radius: 50px;margin-top: -35px;}
.bio-name p{line-height: 1.5;margin: 0;
padding-bottom: 5px;}
.bio-name h3{margin-bottom: 0;}
.bio-img img{width:250px;border-radius:20px;border:5px solid #fff;box-shadow:0 5px 5px rgba(0,0,0,.1);margin: 0 15px;}
.bio-container h4{padding-left: 15px;color: var(--color-main1);border-left: 3px solid var(--color-main1);
line-height: 1.3;}

.edu-list,.exp-list{list-style:none;padding:0}
.exp-list {
  list-style: none;
padding-left: 18px;
}

.exp-list li {
  position: relative;
}

.exp-list li::before {
  content: "•";
  position: absolute;
  left: -24px;
  color: #00b3b3;
}
.dr-services h2{text-align:center;margin-bottom:30px;background:var(--color-main1);color:#fff;border-top-right-radius: 20px;border-bottom-left-radius: 20px; }
.service-grid{display:flex;flex-wrap:wrap;gap:15px;align-items:flex-start}
.service-item{flex:0 0 calc(50% - 8px);border:1px solid #eee;border-radius:8px;background:#fff;transition:all .3s;box-sizing:border-box;align-self:flex-start;}
.service-header{padding:15px 20px;display:flex;align-items:center;cursor:pointer;font-weight:700;letter-spacing: 1px;}
.service-header i{color:var(--color-dark);margin-right:12px;width:44px;text-align:center;font-size: 30px;}
.service-header img{width:55px;height: auto;display: inline-block;margin-right: 10px;}
.service-header .en{font-size:14px;color:var(--color-dark);margin-left:15px;font-weight:400}
.plus-icon{margin-left:auto;transition:transform .3s;color:#999}
.service-content{max-height:0;overflow:hidden;opacity:0;transition:max-height 0.4s ease,opacity 0.3s;padding:0 20px;background:#fafafa}.service-item.open .service-content{max-height:1000px;opacity:1;padding:20px}.service-item.open .plus-icon{transform:rotate(45deg);color:var(--color-dark)}.service-item.open{box-shadow:0 4px 12px rgba(0,0,0,0.05)}@media(max-width:768px){.service-item{flex:0 0 100%}}
@media(max-width:768px){
    .dr-services h2{margin-bottom: 10px;}
    .dr-profile{margin-top: 10px;}
.service-header {padding: 10px 10px 10px 10px;}
    .service-header .item{
        white-space: nowrap;}
.service-header .en{font-size: 80%;letter-spacing: 0;line-height: 1.2;
    display: block;
        padding: 0;
        margin: 0;}
    .service-header i{color:var(--color-dark);margin-right:5px;}
.bio-container{flex-direction:column;        align-items: center;padding: 0;}
    .bio-info h1{text-align: center;margin-top: 10px;}
.service-grid{grid-template-columns:1fr!important;gap:10px;}
.bio-img img{width:200px!important;}
.bio-img{margin-bottom: 50px;}
.service-header i{color:var(--color-dark);margin-right:12px;width:24px;text-align:center;font-size: 20px;}
}

/* ----------------------------------------------------------------
	contact 聯絡我們
-----------------------------------------------------------------*/
.cblock{max-width: 900px;background: rgb(223 188 100 / 30%);padding:50px 50px;
margin: auto;border: 1px solid #dbc8ab  ;}
.cblock h3{color:#7d3a0c;font-weight: 700;    background: #fff;
    display: inline-block;
    padding: 0 20px;
    border-radius: 40px;}

@media screen and (max-width: 991px){
 .cblock{   text-align: justify;
     padding:20px 20px;}
    .cblock h3{font-size: 20px;}
}


/* ----------------------------------------------------------------
	診療項目
-----------------------------------------------------------------*/
.dr-intro-simple{background:#f8fafa;border:1px solid #eee;border-radius:15px;padding:30px;margin:20px 0;display:flex;align-items:center;gap:40px;}
.dr-left{flex:0 0 220px;}
.dr-left h4{margin:0;color:#333;line-height:1.4;text-align: center;}
.dr-left .title{display:block;color:var(--color-dark);margin-bottom:8px;text-align: center;font-weight: bold;}
.dr-right{flex:1;border-left:2px solid #ddd;padding-left:20px}
.dr-right p{margin:0 0 15px;line-height:1.7;color:#444}
.dr-right .spec-box{background:#fff;padding:12px 18px;border-radius:8px;border-left:4px solid var(--color-dark)}
.dr-right .spec-tag{color:var(--color-dark);font-weight:700;margin-right:10px}
.dr-intro-img{width:180px;border-radius:20px;border:5px solid #fff;box-shadow:0 5px 5px rgba(0,0,0,.1);    display: block;
    margin: auto;}

@media(max-width:768px){.dr-intro-simple{flex-direction:column;gap:20px;padding:20px}
.dr-left{flex:none;width:100%;border-right:none;border-bottom:2px solid #ddd;padding-right:0;padding-bottom:15px}
.dr-right{border-left:none;padding-left:0px;}
}

.flow-box{background:#fff;border-radius:15px;padding:30px;box-shadow:0 8px 25px rgba(0,0,0,.05);max-width:80%;margin:15px auto;font-family:sans-serif}
.flow-main-title{text-align:center;background:var(--color-dark);color: #fff;margin:0 0 25px 0;font-weight:700}
.flow-list{position:relative;padding:0;list-style:none;margin:0}
.flow-list:before{content:'';position:absolute;top:0;bottom:0;width:2px;background:#e0f2f1;left:25px}
.flow-node{position:relative;margin-bottom:25px;padding-left:45px}
.flow-symbol{position:absolute;left:0;top:2px;width:50px;height:50px;background:#fff;border:2px solid #b2dfdb;border-radius:50%;display:flex;align-items:center;justify-content:center;z-index:1}
.flow-symbol i{color:var(--color-dark);font-size: 20px;}
.flow-txt{background:#f8fafa;padding:15px;border-radius:8px}
.flow-txt h3{margin:0 0 8px;color:var(--color-dark);display:flex;align-items:center}
.flow-txt h3 span{background:var(--color-dark);color:#fff;width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin-right:8px;flex-shrink:0}
.flow-txt p{margin:0;color:#555;line-height:1.6;text-align:justify}

@media(max-width:480px){.flow-box{padding:20px 15px}
.flow-box{max-width:100%;}
}