@import url(https://fonts.googleapis.com/earlyaccess/cwtexfangsong.css);
/*------------------------------------header----------------------------------------------*/

*{
    margin: 0;
    padding: 0;
}
/*-------------動畫-----------------------------------------------------------------------------------*/
/* .animated {
    -webkit-animation-duration: .5s;
    animation-duration: .5s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
} */

body{
    width: 100%;
    height: 100%;
    position: relative; 
}

video{
    display: none;
}

.homevideo div{
    position: relative;
}
.backgroundvideo video{
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    
}
@-webkit-keyframes fadeInUp {
    from {
      opacity: 0;
      /*-webkit-transform: translate3d(0, 100%, 0);
      transform: translate3d(0, 100%, 0);*/
      -webkit-transform: translate3d(0, 50px, 0);
      transform: translate3d(0, 50px, 0);
    }
  
    to {
      opacity: 1;
      -webkit-transform: none;
      transform: none;
    }
  }
  
  @keyframes fadeInUp {
    from {
      opacity: 0;
      /*-webkit-transform: translate3d(0, 100%, 0);
      transform: translate3d(0, 100%, 0);*/
      -webkit-transform: translate3d(0, 50px, 0);
      transform: translate3d(0, 50px, 0);
    }
  
    to {
      opacity: 1;
      -webkit-transform: none;
      transform: none;
    }
  }
  
  .animate__fadeInUp {
    -webkit-animation-name: fadeInUp;
    animation-name: fadeInUp;
  }
  


/*-------------導覽列-----------------------------*/
a{
    text-decoration: none;
    color: #787785;  
}
a:hover{
    color: #313131;  
}
.logo{
    width: 100%;
    max-width: 300px;
    margin: 10px 0px;
}
@media(max-width:768px){
    .logo{
        max-width: 300px;
    }
    .fixed-top{
        position: relative;
    }   
}

.header .nav {
    padding: 0;
    margin:10px 0;
}
.header .nav-item{
    box-sizing: border-box;
    width: 100%;
    max-width: 100px;
    height: 50px;
    border: 1px solid #2f4f4f;
    border-radius: 10px;
    margin: 0 10px;
}
.header .nav-item:hover{
    /* background-color: #dab445;
    background-image: linear-gradient(180deg, #dab445 7%, #edd496 32%, #ffeac3 51%, #edd496 70%, #dab445 97%); */
    background-color: #2f4f4f;

    
}
.header .nav-link{
    text-align: center;
    line-height: 50px;
    padding: 0;
    color: #2f4f4f;
    font-weight: bold;
    font-size: 14pt;
}
/* .header .nav-link.active{
    color: #f3a7a0;
    font-weight: bold;
    border-bottom: 1px solid #f3a7a0;
} */
.header .nav-link:hover{
    color: #ffffff;
}
@media(min-width:992px){
.navbar-expand-lg .navbar-nav .nav-link{
    padding-left: 0px;
}
}
@media(max-width:1030px) {
    .header .nav-item{
        max-width: 90px;
        height: 40px;
        margin: 0 5px;
    }
    .header .nav-item .nav-link{
        line-height: 40px;  
    }
    .header .nav-link{
        font-size: 12pt;
    }   
}
@media(max-width:320px) {
    .header .nav-item{
        max-width: 80px;
        height: 40px;
    }
    .header .nav-item .nav-link{
        line-height: 40px;  
    }   
}
@media(max-width:280px) {
    .header .nav-item{
        max-width: 60px;
        height: 30px;
        border-radius: 5px; 
    }
    .header .nav-item .nav-link{
        line-height: 30px;
        font-size: small;  
    }   
}
.fixed-top{
    border-bottom: solid 1px #a88113;
}
/*---------------------------------------navbar----------------------------------------*/
/* #main-navbar{

} */
#main-navbar .nav-item{
    padding: 10px 20px;
    font-size: 14pt;
    position: relative;
}
#main-navbar .nav-item::after{
    content: "";
    position: absolute;
    width: 0;
    
}
#main-navbar .nav-item:hover::after{
    width: 100%;
    left: 0;
    height: 2px;
    background: #9a572d;
    bottom:-2;
    -webkit-transition: all .3s;
    transition: all .3s;
    -webkit-transition-timing-function: ease;
    transition-timing-function: ease;
    
}

@media(max-width:969px){
    #main-navbar .nav-item::after{
        height: 0px;
    }
}
#main-navbar .nav-link{
    color: #9a572d;   
}
#main-navbar .nav-link:hover,#main-navbar .nav-link:focus,#main-navbar .nav-link.active{
    color: #9a572d;
    font-weight: bolder;
 
}

/*----------------------------漢堡選單---------------------------------------------*/
.navbar-toggler{
  border-color: transparent;
  border: none;
}
.navbar-toggler:focus{
    box-shadow: 0 0 0 0; 
}
@media(max-width:750px){
    #main-navbar .nav-item{
        font-size: 12pt;
    } 
}
/*------------------------下拉選單-------------------------------------*/
.dropdown-toggle{
    position: relative;
}
.dropdown-toggle::before{
    display: none;
}
.dropdown-toggle::after{
    border-top: 0px;
}
#main-navbar .dropdown-toggle::before{
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    right: -5px;
    margin-top: -7px;
    width: 2.5px;
    height: 12px;
    background-color: #9a572d;
    opacity: 1;
    
}
#main-navbar .dropdown-toggle::after{
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    right: -10px;
    margin-top: -2px;
    width: 13px;
    height: 2.5px;
    background-color: #9a572d;
}
#main-navbar .dropdown-menu{
    background-color: #ceb62ec5;
    border: none;  
}
#main-navbar .dropdown-item{
    color: #ffffff;
    border-top: #ffffff 1px solid;
}
@media(max-width:989px){
    #main-navbar .dropdown-menu{
        background-color: #fce9b856;
        border: none;
    }
    #main-navbar .dropdown-item{
        color: #a88113;
    }
}
.navbar-light .navbar-toggler-icon{
    background-image: url(../SVG/hamberger.svg);
}

#main-navbar .dropdown-item:hover{
    background-color: #f3f2d5dc;
    color: #ceb72e;
}
/*---------------------------輪播-----------------------------------*/
#ad-carousel img{
    width: 100%;
    max-height: 800px;
}
#ad-carousel .carousel-indicators button{
    border-radius: 50%;
    width: 15px;
    height: 15px;
    background-color: #2f4f4f;
}
.ad-carousel{
margin-top: 200px;
}

#ad-carousel .carousel-control-prev-icon,#ad-carousel .carousel-control-next-icon{
    background-image: none;
}
@media(max-width:768px){
    .ad-carousel{
        margin-top: 0px;
        } 
    #ad-carousel .carousel-control-prev-icon,
    #ad-carousel .carousel-control-next-icon {
        width: 1rem;
        height: 1rem;
        }
    #ad-carousel .carousel-indicators button{
        border-radius: 50%;
        width: 10px;
        height: 10px;
        background-color: #a88113;
        }
}
/*----------------------最新消息---------------------------*/
#news{
    width: 100%;
    margin: 0 auto;
    background-color: #f3d5d8;
    vertical-align: top;
    
}
.news-box1{
    text-align: right;
    background-color: #f3d5d8;
    position: relative;
    
}
.news-box1>h3{
    font-weight: bold;
    color: #d99f9e;
    line-height: 143px;

}
#news .news-box1 h3::after{
    content: "";
    position: absolute;
    display: inline-block;
    width: 2px;
    height: 70%;
    top: 15px;
    right: -3px;
    background-color: #d99f9e;
}

@media(max-width:768px){
    #news .news-box1 h3::after{
        display: none;
    }
    .news-box1>h3{
        line-height: 50px;
        font-size: 20px;
        margin: 0 auto;
    } 
}
.news-box2{
    background-color: #f3d5d8;  
}
#news .carousel-item{
    padding-top: 3px;
    height: 150px;
    max-width: 800px;
}
.date{
    float: left;
    text-align: center;
    color: #fff;
    font-size: 20px;
    letter-spacing: .1em;
    line-height: 45px;
    margin-right: 30px;
    -webkit-transition: all .3s;
    transition: all .3s;
    -webkit-transition-timing-function: ease;
    transition-timing-function: ease;
    border-radius: 100%;
    background: #d99f9e;
    padding: 16px 0;
    width: 80px;
    height: 80px;
    margin-left: 25px;
    margin-top: 5px;
}
#new .carousel-item a .text{
    font-size: 16pt;
    color: #787785;
}
#news .carousel-control-next-icon {
    background-image: none;
  }
  @media(max-width:768px){ 
    #news .carousel-control-prev-icon,
    #news .carousel-control-next-icon {
        width: 1rem;
        height: 1rem;
        }
    #new .carousel-item a .text{
        font-size: 10pt;
    }
}
/*-----------------最新消息-內頁-------------------------------------*/
.modal-header .btn-close {
    margin: -0.5rem -0.5rem -0.5rem -1.5rem;
  }

.modal-title{
    color: #e5828b;
}
#news .modal{
    background-color: #dbdbdb50;
}
#news .modal-body h4{
    color: #ab393d;
}
#news .modal-body p{
    color: #787785;
}
/*--------------------main-------------------------------*/
.main{
    background-color: #ffffff;  
}
.main h1{
    color: #daa520;
}
.main p{
    /* color: #787785; */
    /* line-height: 2; */
    /* font-size: 14pt; */
}
.line{
    display: inline-block;
    width: 50%;
    height: 1px;
    background-color: #a88113;
}
@media(max-width:768px){
    .line{
        width: 70%;
    }  
}
/*-------------------------------經營理念----------------------------------------*/
section{
    padding: 6rem 0; 
}

.about p{
    font-size: 16pt;
}
@media(max-width:768px){
    .about{
        padding-top: 0;
    }

}
.about-img{
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
    width: 100%;
    max-width: 450px;
    height: 550px;
      
}
.about-img1{
    margin-top: 80px;
}
@media(max-width:768px){
    .about-img1{
        margin-top:0;
    } 
}
.team-img{
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    position: relative;
    width: 100%;
    max-width: 1024px;
    height: 300px;

}
#team .vision{
    /* margin-top: 80px; */
}

.vision-text{
    font-family: 'cwTeXFangSong', serif;
    font-weight: 300;
    font-size: 17.5pt;
    line-height: 3;
    color: #ffffff;
    text-align: center;
}
@media(max-width:768px){
    #team .vision{
        margin-top: 10px;
    }
}
#team h1{
    text-align: center;
}


/*------------服務宗旨-----------------------*/
.service-text{
    margin-top: 100px;
}
@media(max-width:768px){
    .service-text{
        margin-top: 10px;
    } 
}
.service-img{
    display: table;
    height: auto;
    width: 100%;
    background-repeat: no-repeat;
    background-position: top top;
    background-image: url(../image/service-1.png);
    background-attachment: fixed;
    background-size: cover;
}

@media(max-width:768px){
    .service-img{
        background-position: center center;
        height: auto;
    } 
}
/*----------------地圖--------------------------*/
#map img{
    width: 100%;
    height: auto;
    max-width: 675px;
    border-radius: 30px;   
}
#map h4{
    color: #daa520;
}
/* #map span{
    color: #787785;
} */
/*----------頁面右邊icon------------------*/
.r-fixed-icon{
    position: fixed;
    right: 10px;
    bottom: 10px;
    z-index: 100;
}
.r-fixed-icon svg{
    width: 60px;
    height: 60px;
}
.r-fixed-icon a{
    margin: 3px 0;
}
@media(max-width:768px){
    .r-fixed-icon{
        right: 10px;
        bottom: 10px; 
    }
    .r-fixed-icon svg{
        width: 45px;
        height: 45px;   
    }
}

/*---------footer---------------*/
#wn__footer svg{
    fill: #9a572d;
}
#wn__footer .footer-static-top {
    padding: 90px 0 10px;
}
#wn__footer {
    background: url(../image/Footer-bg.png);
    background-size: cover;
    background-position: center;
    /* margin-top: -75px; */
    position: relative;
}
.version_footer_02 .ft__logo {
    text-align: center;
    margin-bottom: 2.8rem;
}
#wn__footer .footer-static-top .footer__widget .footer__address ul li {
    padding: 0 30px;
    letter-spacing: .3vw;
    font-family: "Marcellus";
}
.footer__address ul li {
    margin-bottom: 12px;
    list-style: none;
}
.version_footer_02 .footer__address ul:last-child {
    margin-right: 0;
}
#wn__footer .footer-static-top .footer__widget {
    margin-bottom: 50px;
}
.version_footer_02 .footer__widget {
    text-align: center;
}
.version_footer_02 .footer__address {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}
#wn__footer .footer-static-top .footer__widget .footer__address ul li svg {
    color: #d8bc79;
}
#wn__footer .footer-static-top .footer__widget .footer__address ul li a {
    color: #000;
    letter-spacing: .1vw;
}
#wn__footer .footer-static-top .copyright__wrapper {
    background: rgba(0,0,0,0);
}
.copyright__wrapper {
    font-size: 12px;
    color: #e4e4e4;
}
.copyright{
    color: #e9e9e9;
}
#wn__footer .footer-static-top .copyright .sitemap_privacy li {
    color: rgba(255, 255, 255, 0.932);
    font-size: 12px;
    letter-spacing: .1vw;
}
.copyright ul.sitemap_privacy li {
    display: inline-block;
    margin: 0 2px;
}
.copyright ul.sitemap_privacy li {
    display: inline-block;
    margin: 0 2px;
}


/*------------------------醫學美容內容--------------------------------------*/
.main-title{
    display: inline-block;
    width: 100%;
    margin-top: 200px;
    /* background-image: url(../image/maintitle.png);
    background-repeat: no-repeat;
    background-position: center; */
    z-index: 1;
    position: relative; 
    
}
.main-etitle{
    font-size: 14pt;
    display: block;
}

@media(max-width:768px){
    .main-title{
        margin-top: 0px;
    }
}
.main-title h1{
    color: #494a4b;
    
}
.main-title h1 strong{
    position: relative;
}
.main-title h1 strong::before{
    content: '';
    position: absolute;
    width: 41px;
    height: 37px;
    background: url(../image/maintitle-icon.png);
    right: -30px;
    top: -10px;
}
/*---------------------醫學美容內容-tab---------------------------------*/

#beauty-tab .nav-link{
    border: 2px solid #2f4f4f;
    color: #2f4f4f;
    border-radius: 20px;
}
#beauty-tab .nav-link:hover {
    border: none;
    background-color: #2f4f4f;
    color: #ffffff;
  }
 #beauty-tab .nav-tabs .nav-item.show .nav-link, #beauty-tab .nav-tabs .nav-link.active {
    border: none;
    background-color: #2f4f4f;
    color: #ffffff;
}
#beauty-tab .light-btn{
    width: 100%;
    max-width: 350px;
    font-weight: bold;
    font-size: 15pt;
    margin: 10px;
    text-align: center;
    cursor:pointer;
}
#beauty-tab .nav-tabs{
    border-bottom: none;
}

#beauty-content .beauty-content h2{
    position: relative;
}

#beauty-content .beauty-content h2::after{
    content: '';
    position: absolute;
    left: -2%;
    width: 15px;
    height: 15px;
    border: 2.5px #d8bc79 solid;
    border-radius: 50%;
    top: 75%;
    transform: translateY(-75%);
}

.beauty-content{
    width: 100%;
    
}

 @media(max-width:768px){
    #beauty-tab .light-btn{
        max-width: 350px;
        font-size: 12pt;
        white-space:nowrap; 
        overflow: hidden;
        text-overflow: ellipsis;
        margin: 5px;  
    }
    .beauty-content img{
        max-width: 800px;       
    }  
}
.beauty-pic{
    display: inline-block;
    width: 100%;
    max-width: 400px;
    height: 450px;
    background-position: center center;
    background-repeat: no-repeat;
    margin: 150px 0 50px;
    margin-left: 150px;
    position: relative;   

}
.beauty-pic::after{
    content: '';
    width: 100%;
    max-width: 400px;
    height: 450px;
    background-color: #a8811359;
    position: absolute;
    top: -70px;
    left: 60px;
    z-index: -1;
}
@media(max-width:768px){
    .beauty-pic{
        margin: 50px 0;
        background-image: url(https://picsum.photos/id/500/1000/550);
        background-position: center center;
        background-repeat: no-repeat;
    }
    .beauty-pic::after{
        display: none;
    }
}
.pic-position{
    display: flex;
    flex-direction: row;
    justify-content: center;

}
.beauty-content h2{
    padding: 30px 0 0 30px;
    color: #c3a8a1;
    font-weight: bold;
}
.beauty-content p{
    padding: 30px 30px 0 30px;
    /* text-align: center; */
    line-height: 80px;
    font-size: 14pt;
    color: #000;
}
@media(max-width:768px){
    .beauty-content h2{
        padding: 30px 0px 0 10px;  
    }
    .beauty-content p{
        padding: 10px 10px 0 10px;
    }  
}
.beauty-box{
    margin: 50px 0;
    padding: 30px;
}

.beauty-box h4{
    padding: 20px 0;
    color: #e5828b;
    font-weight: bolder;
}

.beauty-box li{
    list-style-type: none;
    padding: 20px 0;
    font-size: 14pt;
    color: #787785;
}

#service-item img{
    width: 100%;
    height: auto;
    margin-top: 30px;
    border-radius: 30px;
    box-shadow: 0px 0px 10px rgb(139, 139, 139);
}
/*---------------關於我們-院所介紹--------------------------------*/
.other-clinic img{
    width: 80%;
    height: auto;
    border-radius: 25px;
}
@media(max-width:768px){
    .other-clinic img{
        width: 100%;
    }
}
#clinic img{
    width: 100%;
    height: 100%;
    max-width: 800px;
    max-height: 600px;
}
#clinic .modal{
    background-color: #dbdbdb5b;
}
#clinic .modal-content{
    background-color: transparent;
    border: none;
}
#clinic .modal-header{
    border-bottom: none;
}
#clinic .btn-close{
    width: 2em;
    height: 2em;
    background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") center/2em auto no-repeat;
}
@media(max-width:768px){
    #clinic .btn-close{
        width: 0.5em;
        height: 0.5em;
    }  
}
.other-clinic h3{
    color: #2f4f4f;
    font-weight: bold;

}
.other-clinic p{
    line-height: 2em;
    padding-left: 0px;
}
.other-clinic ul li{
    list-style: none;
    color: #000;
}
.other-clinic svg{
    width: 20px;
    margin-right: 10px;
}
.other-clinic .more{
    position: relative;

}
.other-clinic .more::before{
    content: '';
    display: inline-block;
    width: 50px;
    height: 50px;
    /* background-color: aqua; */
    position: absolute;
    top: 50%;
    left: 50%;
    background-image: url("../SVG/52.svg");
}
@media(max-width:768px){
    .other-clinic .more::before{
        width: 30px;
        height: 30px; 
    }
}
/* ------------------------------亮點環境介紹-------------------------------------- */
#light-pic img{
    margin-top: 30px;
}
#light-pic h3{
    padding: 20px;
    font-weight: bold;
}
/*-----------------------院長專區----------------------------------------*/
.dean-img{
    border-radius: 20px;
    box-shadow: 5px 5px 5px rgb(126, 126, 126);
  }

.dean-img2{
    margin-top: 60px;
  }
#dean span{
    color: #c3a8a1;
}
#dean h2{
    color: #9a572d;
    font-weight: bold;
}
#dean h3{
    color: #2f4f4f;
    font-weight: bold;
}
#dean ul li{

    list-style: none;
    position: relative;
    letter-spacing: .1vw;
    padding-left: 30px;
}
#dean ul li::before{
    content: '';
    width: 8px;
    height: 8px;
    position: absolute;
    background-color: #2f4f4f;
    border-radius: 50px;
    top: 12px;
    transform: translateY(-50%);
    left: 0;

}
/*----------------------------------------------------*/
/*-----------------門診時刻表-----------------------------------*/
.table-responsive {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: -ms-autohiding-scrollbar;
    
}
.table{
    width: 100%;
}
@media (max-width: 768px){

.table-responsive-md {
    width: 650px;
}
}
#calendar-title {
    width: 100%;
    min-width: 650px;
    height: 80px;
    line-height: 80px;
    display: flex;
    flex-direction: row;
    justify-content: center;
}
#calendar-title svg{
    width: 30px;
    height: 30px;
}
.month {
    font-size: 20px;
    color: #787785;
}
.size1{
    width: 20px;
    height: 20px;
}



.outpatient-date,.outpatient-week{
    color: #787785;
}
/*-----------------恢衡耳鼻喉科門診表----------------------------------*/

/*-------------恢衡藥局營業時間----------------------------*/

#outpatient2 h2,#outpatient1 h2{
    color: #658bc4;
    margin:30px 0;
    font-weight: bold;
}

/*------------------服務項目--------------------------------*/

.main-title h6{
    color: #787785;
}
 .maternity-servicebg{
    display: inline-block;
    width: 100%;
    height: auto;
    max-width: 300px;
    height: 400px;
    position: relative;
    margin: 50px 0;   
}
.maternity-servicebg::after{
    content: '';
    display: inline-block;
    width: 300px;
    height: 400px;
    background-position: center center;
    background-repeat: no-repeat;
    top: 50px;
    left: 50px;
    position: absolute;
}
.maternity-servicebg1,.maternity-servicebg2,.maternity-servicebg3,.maternity-servicebg4{
    background-color: #F3D5D8;
}
.maternity-servicebg1::after{
    background-image: url(../image/f1.jpg);
}
.maternity-servicebg2::after{
    background-image: url(../image/f2.jpg);
}
.maternity-servicebg3::after{
    background-image: url(../image/f3.jpg);
}
.maternity-servicebg4::after{
    background-image: url(../image/f4.jpg);
}
@media (max-width: 768px){
    .maternity-servicebg{
        background-position: center center;
        background-repeat: no-repeat; 
    }
    .maternity-servicebg::after{
        display: none;
    }
    .maternity-servicebg1{
        background-image: url(../image/f1.jpg);
    }
    .maternity-servicebg2{
        background-image: url(../image/f2.jpg);
    }
    .maternity-servicebg3{
        background-image: url(../image/f3.jpg);
        background-color: transparent;
    }
    .maternity-servicebg4{
        background-image: url(../image/f4.jpg);
    }
}
.maternity-service_box{
    padding-top: 150px;
}
@media (max-width: 768px){
    .maternity-service_box{
        padding-top: 0px;
    } 
}
.maternity-service_box button{
    background-color: #F3A7A0;
    padding: 10px;
    color: #fff;
}
.maternity-service_box button:hover{
    background-color: transparent;
    border: 1px #F3A7A0 solid;
    color: #F3A7A0;
}
.maternity-service_box h2{
    color: #A25E39;
    font-weight: bold;
}
.maternity-service_box p{
    color: #787785;
    font-weight: bold;
}
/*------------婦產科醫學內容--------------------------*/
#beauty-tab .maternity-btn{
    width: 100%;
    max-width: 300px;
    font-weight: bold;
    font-size: 15pt;
    margin: 10px;
    text-align: center;
    cursor:pointer;
}
.maternity h1{
    color: #D99F9E;
    font-weight: bold;
    margin-bottom: 30px;
}
.maternity-item{
    /* width: 100%; */
    display: inline-flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    max-width: 300px;
    height: 300px;
    border: 3px solid #D99F9E;
    border-radius: 10px;
    margin: 10px;
    text-align: center;
    font-size: 25pt;
    color: #D99F9E;
}
.maternity-item:hover,.maternity-item.active{
    background-color:#D99F9E ;
    color: #fff;
}
/*---------------------醫師專欄主頁---------------------------------------------*/
.artical_box{
    margin-bottom: 50px;
}
.artical_item{
    width: 80%;
    height: 500px;
    margin: 0 auto;
    padding: 15px;
    background-color: #DEB8B8;
    color: #787785;
    font-weight: bold;
    position: relative;  
}
@media (max-width: 768px){
    .artical_item{
        height: 400px;
    }
}
.artical_item .pic{
    background-repeat: no-repeat;
    background-position: center center;
    width: 100%;
    height: 300px;
    text-align: center;
    font-size: 25pt;
    line-height: 300px;
    color: #fff;
    background-size: cover;
}
@media (max-width: 768px){
    .artical_item .pic{
        height: 200px;
        line-height: 200px;
    }
}
.artical_item .artical_date{
    padding: 10px 0;
}
.artical_item .title{
    font-size: 15pt;
    
}
.artical_button{
    width: 100px;
    height: 30px;
    border-radius: 5px;
    background-color: #F3D5D8;
    text-align: center;
    line-height: 30px;
    margin-top: 30px;
    color: #C6A1A1;
    position: absolute;
    bottom: 15px;
    right: 10px;

}
@media (max-width: 768px){
    .artical_button{
        margin-top: 30px;
    }  
}
@media (max-width: 1280px){
    .artical_button{
        margin-top: 20px;
    }  
}
/*-------------------------醫師專欄內頁--------------------------------------------*/
.artical-inner_font{
    color: #e5828b;
    font-weight: bolder;
}
/*----------------------------案例分享------------------------------------*/
#light_case h1{
    color: #e5828b;
}
#light_case h5{
    color: #c3a8a1;
}

/*---------------------常見疾病-------------------------------------*/


#disease img{
    margin: 10px;
    border-radius: 50%;
    cursor: pointer;
    
}

#disease img:hover{
    transform: rotateX('angle');
}
#disease h3{
    text-align: center;
    font-weight: bold;
    margin: 25px 0;
    color: #313131;
}
#disease p,#disease li{
    margin: 10px;
    line-height: 2;
    font-size: 14pt;
    color: #313131;
}
#disease .d-grid{
    margin: 50px 0;
}

/*-----------------------本院特色--------------------------------*/

.feature-contain img{
    width: 100%;
    max-width: 500px;
    border-radius: 25px;
    margin-bottom: 50px;
    display: flex;
    margin: 50px auto; 
}

.feature-contain h2{
    margin-bottom: 30px;
    color: #fff;
}
.feature-contain h4{
    margin-bottom: 30px;
    color: #2f4f4f;
}

.feature-contain h2{
    margin-bottom: 80px;
    position: relative;
    border-bottom: 2px #255aaa solid;
    background-color: #658bc4;
    border-radius: 26px;
    display: table;
    box-shadow: 6px 6px 10px rgba(17,17,17,.07);
    display: table;
    line-height: 1.2;
    padding: 5px 0px;
    
}


.feature-contain h4{
    position: relative;
    font-weight: bolder;
    
}

.feature-contain h4::after{
    content: '';
    display: inline-block;
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 20px solid #9a572d;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    margin-top: 45px;
    
}

.feature-inner{
    margin-bottom: 150px;
    
}