@charset "utf-8";
/* CSS Document */
header {
    position: fixed;
    z-index: 999;
    background: #fff;
}
header:after {
    content: "";
    position: absolute;
    width: 40%;
    height: 36px;
    background: #fff;
    top: 14px;
    left: 0;
    z-index: 1;
    clip-path: polygon(0 0, 98% 0, 100% 100%, 0% 100%);
}
.pageHeader{ width: 100%; min-height: 50px; background: #4575c0; 
display: flex;
  justify-content: space-between;
}
.ovhe{-webkit-transition: all 0.5s ease; transition: all 0.5s ease;}
header.ovhe {
    box-shadow: 0px 0px 15px rgb(0 0 0 / 10%);
}
.logobox h1 img.ovhe{ width: 300px; -webkit-transition: all 0.5s ease; transition: all 0.5s ease;}
header:after.ovhe{ display: none; -webkit-transition: all 0.5s ease; transition: all 0.5s ease;}
  
.pageHeader .box-1{ 
display: flex;
  justify-content: space-between;
}
.logobox{ max-width:1160px; width: 90%; margin:0px auto; padding:0; height:auto; position: relative;  
}
.logobox h1{ width: 370px; padding:0 0px 0 0; margin: 23px 0px 0 0; z-index:2; position: absolute; }
.logobox h1 img{ width: 100%; }

.menubox{
 padding: 0 0 0 370px; margin:30px 0px 60px 0;
  display: flex;
  flex-direction: row;
    align-items: center;
    justify-content: center;
}
.menubox.ovhe{ margin:30px 0px 30px 0; -webkit-transition: all 0.5s ease; transition: all 0.5s ease;}
@media only screen and (min-width: 0px) and (max-width: 1200px){
header{
    height: 140px;
}
header:after {
    display: none;
}
.logobox h1{ width: 270px; margin: 57px 0px 0 0; }
.logobox h1 img.ovhe{ width: 270px; }
.menubox{
 padding: 0 0 0 270px; margin:40px 0px 50px 0;
}
} 
@media only screen and (min-width: 0px) and (max-width: 950px){
.pageHeader .box-1{ 
    width: 95%;
}
} 

.mobile{ display: none;}
@media only screen and (min-width: 0px) and (max-width: 950px){
.mobile{ display: block;}
/*hamburger menu*/
.hamburger-menu {
  z-index:99999999;
  position: absolute;
    top: 65px;
    right: 5%;
    width: 30px;
  height: 30px;
  cursor: pointer;
}

.bar,
.bar:after,
.bar:before {
  width: 30px;
  height: 3px;
}

.bar {
  position: relative;
  transform: translateY(25px);
  background-color: #555555;
  transition: all 0ms 300ms;
}

.bar.animate {
  background: rgba(255, 255, 255, 0); 
}

.bar.animate:before {
  background-color: #fff;
}

.bar.animate:after {
  background-color: #fff;
}

.bar:before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 10px;
  background-color: #555555;
  transition: bottom 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
}

.bar:after {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  background-color: #555555;
  transition: top 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
}

.bar.animate:after {
  top: 0;
  transform: rotate(45deg);
  transition: top 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1);;
}

.bar.animate:before {
  bottom: 0;
  transform: rotate(-45deg);
  transition: bottom 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1);;
}
/*nav menu*/
.show {
  left:0%;
  opacity:1;
  transition: .3s ease;
}

.hide {
  opacity:0;
  left:100%;
  transition: .3s ease;
}

.mobile-nav {
  background:rgba(28,69,132,0.9);
  position:fixed;
  top:0;
  width:100%;
  height:100%;
  overflow-y: auto;
  transition: .3s ease;
  z-index: 99;
  /*  transition: opacity .5s ease;
  -moz-transition: opacity .5s ease;
  -webkit-transition: opacity .5s ease;
  transition:left .5s ease-in-out;*/
}
}
 

/* 首頁 */
/* 最新消息跑馬燈 */
.top_news{ width:calc(100% - 150px); margin:0px 0 0 0px; padding: 0px 0 0 425px; 
display: flex;
    align-items: center;
    justify-content: center;
}
.top_news ul {
  padding:0px 0 0 0; margin:0; list-style:none;
  width: 100%;
}
.top_news ul li {
  line-height: 1.2; color: #fff;
  width: 100%;
}
.top_news ul li a {
  color: #fff;
}
.top_news ul li:hover a {
  color:rgba(255, 255, 255, 0.7)
}

.social{ margin:0px; padding:0px 0px 0px 0px; width: 150px; 
display: flex;
    align-items: center;
    justify-content: flex-end;
}
.social a{ padding: 0 0px 0 0; margin: 0 0px 0 15px; list-style: none; }
@media only screen and (min-width: 1201px) and (max-width: 1700px){
.top_news{ width:auto; margin:0px 0 0 0px; padding: 0px 0 0 40%;}
} 
@media only screen and (min-width: 0px) and (max-width: 1200px){
.top_news{ width:calc(100% - 90px); padding: 0px 0 0 0;}
.social a{ margin: 0 0px 0 10px; }
} 
@media only screen and (min-width: 0px) and (max-width: 600px){
.top_news ul li {
  font-size: 15px; 
}
} 

/* 最新消息 */
.ind_newsbox {
  width: 100%;
  padding: 50px 0 0px 0; margin:0px 0 0px 0px;
  height: auto; overflow: hidden;
}
.ind_news {
  width: 39%;
  float: left; display: block;
}
.ind_news .btn{ width: 100%; margin:30px 0 0px 0px; 
display: flex;
    justify-content: flex-end;
}
.ind_news ul{ width: 100%; margin:37px 0 0px 0px; padding:0px 0px 0 0px; list-style: none;  }
.ind_news ul li{ width: 100%; margin:0px 0 0px 0px; padding:18px 0px 18px 0px; list-style: none; height: auto; overflow: hidden;
border-bottom: 1px solid #ddd; font-weight: 600;
}
.ind_news ul li:hover p{ color:#1864db;}
.ind_news ul li:hover .date{ background:#1864db;}
.ind_news ul li .date{ width: 110px; float: left; display: block; font-size: 12px; color: #fff; position: relative; padding: 3px 0px 3px 30px; background: #776861; border-radius: 15px;}
.ind_news ul li .date:before { content: ''; width: 13px; height: 11px; background:url('../../archive/images/news_icon.png') no-repeat; display: block;  position: absolute; left: 10px;}
.ind_news ul li p{ width: calc(100% - 110px); float: left; display: block; font-size: 14px; color: #212121; 
white-space:nowrap;overflow:hidden;text-overflow:ellipsis; padding: 0 0 0 20px;}

.ind_division {
  width: calc(100% - 39% - 40px); margin:0px 0 0px 40px;
  float: left; display: block;
}
.ind_division ul{ width: 100%; margin:40px 0 0px 0px; padding:10px 0px 10px 10px; list-style: none; 
display: flex;
  justify-content: space-between;
  flex-wrap: wrap; 
  border-bottom: 1px solid #ddd;
}
.ind_division ul:after {
    content: "";
    width:calc(100% / 2 - 5px);
}
.ind_division ul li{ width: calc(100% / 2 - 5px); margin:0px 0 12px 0px; padding:16px 0px 16px 0px; list-style: none; font-size: 18px; letter-spacing: 1px;
color: #333; font-weight: 600; background: #c9c3c0; box-shadow: 2px 3px 5px rgba( 0,0,0,0.1); text-align: center;
}
.ind_division ul li a{ color: #333 }
.ind_division ul li:hover{ background:#1864db }
.ind_division ul li:hover a { color:#fff;}
@media only screen and (min-width: 0px) and (max-width: 900px){
.ind_news {
  width: 100%;
}
.ind_division {
  width: 100%; margin:45px 0 0px 0px;
}
.ind_division ul{ padding:0px 0px 10px 0px; 
}
}

/* 門診時間 */
.ind_timebox {
  width: 100%;
  padding: 0px 0; margin:70px 0 0px 0px;
  height: auto; overflow: hidden;
}
.ind_timebox .animal{
  max-width:1140px; width: 100%; margin:0px auto; padding:0px 0; position: relative;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}
.ind_timebox .animal .ttbox{
  left: calc(50% - 180px); padding:0px 0; position: absolute; bottom: 40px;
}
.ind_timebox .animal .ttbox .btn{ width: 100%; margin:20px 0 0px 0px; 
display: flex;
    justify-content: flex-end;
}
@media only screen and (min-width: 0px) and (max-width: 900px){
.ind_timebox {
  margin:20px 0 0px 0px;
}
}
.ind_timebox .animal .a01{
  width: 266px; height: 185px; background:url('../../archive/images/dog.png') ; display: block;
  background-size: 100%;
    background-position: center;
    background-repeat: no-repeat;
}
.ind_timebox .animal .a02{
  width: 74px; height: 84px; background:url('../../archive/images/rabbit.png') ; display: block;
  background-size: 100%;
    background-position: center;
    background-repeat: no-repeat;
}
@media only screen and (min-width: 0px) and (max-width: 380px){
.ind_timebox .animal .a01{
  width: 236px; height: 164px; 
}
.ind_timebox .animal .a02{
  width: 44px; height: 52px; 
}
}
.ind_timebox .bg{
  width: 100%; background: #ebe8e7; padding: 40px 0 60px 0;
}

.ind_time {
  text-align: center; line-height: 1.5; margin: 20px 0 0 0;
}
.ind_time .ind_time-body {
  display: flex;
  flex-wrap: wrap;
}
.ind_time .ind_time-body .hours li {
  font-size: 14px;
  color: #776861; 
  font-weight: 600;
}
.ind_time .ind_time-body ul {
  width: calc(100% / 8);
  font-size: 13px;
  color: #333; 
  font-weight: 600;
  padding: 0; margin: 0; list-style: none;
}
.ind_time .ind_time-body ul li {
  height: 360px;
  padding: 0; margin: 0; list-style: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-color: #bbb3b0;
}
.ind_time .ind_time-body ul li:nth-child(even) {
    background:#ebe8e7;
}
.ind_time .ind_time-body ul li a {
  display: block;
  color: #353535;
}
.ind_time .ind_time-body ul li:nth-last-child(2) {
  background-color: #ebe8e7;
}
.ind_time .ind_time-body li.day {
  background-color: #776861;
  color: #fff;
  font-weight: 700;
  height: 55px;
}

@media only screen and (min-width: 0px) and (max-width: 767px) {
.ind_time .ind_time-body > ul {
    width: 100%;
    font-size: 15px;
  }
  .ind_time .ind_time-body ul.hours {
    display: none;
  }
  .ind_time .ind_time-body > ul > li {
    height: auto;
    padding: 15px 0;
  }
  .ind_time .ind_time-body > ul > li:before {
    content: attr(data-time);
    font-weight: 700;
    color: #776861;
  }
  .ind_time .ind_time-body > ul li.day {
    padding: 0;
  }  
}  


/* 定義區塊 */
.box-1{ max-width:1160px; width: 90%; margin:0px auto; padding:0px 0; height:auto; }
.box-2{ width: 100%; margin:0px auto; padding:0px 0; height:auto; background: #f4f0ef;}
.main_top{
  height:auto; overflow: hidden; padding: 158px 0px 0px 0px; display: block;
}
@media only screen and (min-width: 951px) and (max-width: 1200px) {
.main_top{
  padding: 140px 0px 0px 0px;
}
} 
@media only screen and (min-width: 0px) and (max-width: 950px) {
.main_top{
  padding: 130px 0px 0px 0px;
}
}
.content { width: 100%; margin: 6% auto; height: auto; overflow: hidden;}
.content02 { width: 100%; margin: 0 auto 6% auto; height: auto; overflow: hidden;}
.content03 { max-width:1160px; width: 90%; margin: 0 auto; padding: 50px 0 30px 0; height: auto; overflow: hidden;}
.left{ width:280px; margin:0px 0px 0px 0; float:left; position: relative; padding: 100px 0 0 0;}
.left .a01{
  width: 200px; height:97px; background:url('../../archive/images/dog02.png') ; display: block;
    background-position: center;
    background-repeat: no-repeat;
    position: absolute;
    top: 17px;right: 20px;
    z-index: 1;
}
.left .a02{
  width: 74px; height: 84px; background:url('../../archive/images/rabbit.png') ; display: block;
  background-size: 100%;
    background-position: center;
    background-repeat: no-repeat;
}
.right{ width:calc(100% - 330px); margin:60px 0px 0px 50px; float:right; }

@media only screen and (min-width: 0px) and (max-width: 1100px) {
.left{ display: none; }
.right{ width:100%; margin:30px 0px 0px 0px;}
}

.user_editor{ width:100%; height:auto; overflow: hidden; position: static !important;}
.user_editor img{ max-width:100% !important; height:auto !important;  }
.user_editor table{ width:100% !important;  }
.line-height{ line-height:2;}

.text_center{text-align:center;}
.text_right{text-align:right;}

/* pagetop */
.pagetop_box{ width: auto; position: fixed; bottom:15%; right: 15px; }
.pagetop_box li{ width: 61px; display: block; margin: 10px 0 0 0; padding: 0; list-style: none;
display: flex;
  justify-content: center;
  align-items: center;
}
.pagetop_box li img{ width: 100%; }
.pagetop_box li li:last-child { background: #4575c0; }
@media only screen and (min-width: 0px) and (max-width: 900px){
.pagetop_box li{ width: 51px; }
}  

/* title */
.title01{ width: 100%;}
.title01 h2{
  width: 100%; font-size: 22px; color: #333; font-weight: 600; padding: 0; margin: 0; 
}
.title01 h3{
  width: 100%; font-size: 13px; color: #aaa; font-weight: 600; padding: 0; margin: 5px 0 0 0;
}

.title02 {
  clear: both; text-align: center;
}
.title02 h2 {
  position: relative;
  display: inline-block;
  font-weight: normal;
  padding: 0 10px 10px 10px;
  font-size: 48px;
  letter-spacing: 1;
  font-weight: bold;
  color: #333; 
  border-bottom: 3px solid #776861;
}
.title02 h2:after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -3px;
  width: 50%;
  height: 3px;
  background: #4575c0;
}
.title02 h3{
  width: 100%; font-size: 16px; color: #bbb3b0; font-weight: 600; padding: 0; margin: 5px 0 0 0;
}
.title03 { display: flex; align-items: center; justify-content: space-between;}
.title03 h2{
  font-size: 24px; color: #776861; font-weight: 600; padding: 0; margin: 0; 
}
.title03 .selet{
  display: flex; 
    justify-content: flex-end;
}
.title04{ display: flex;}
.title04 h2{ display: flex; font-size: 22px; color: #fff; font-weight: 600; padding: 0 20px 0 35px; margin: 0; position: relative; background: #f6ad3c; border-radius: 30px;}
.title04 h2:before { content: ''; width: 13px; height: 11px; background:url('../../archive/images/news_icon.png') no-repeat; display: block;  position: absolute; left: 15px; top:15px; }
.title05 {
  border-bottom: 1px #ddd dotted; padding: 0 0 10px 0; margin: 0 0 10px 0; 
}
.title05 h2{
  font-size: 28px; color: #1864db; font-weight: 600; padding: 0; margin: 0; 
}
.title06{ display: flex; border-bottom: 2px dotted #ccc;}
.title06 h2{ display: flex; font-size: 22px; color: #1864db; font-weight: 600; padding: 0 0px 0 15px; margin: 0; position: relative; }
.title06 h2:before { content: ''; width: 13px; height: 11px; background:url('../../archive/images/news_icon02.png') no-repeat; display: block;  position: absolute; left: 0px; top:15px; }
.title07{ display: inline-block; background: #f6ad3c; font-weight: 600;color: #fff;  padding:0px 15px; margin: 0 5px 0 0; border-radius: 20px;}
.title08 h3 {
    font-size: 24px;
    line-height: 1.2;
    border-left: 7px solid #4575c0;
    padding-left: 15px;
}
@media only screen and (min-width: 0px) and (max-width: 900px){
.title02 h2 {
  font-size: 30px;
}
}  

/* banner */
.index-banner {
  width: 100%; height: auto;
  margin: 0px;
  padding: 0px 0 0 0;
}
.index-banner img {
  width: calc( 100% - 50px); border-radius: 20px; box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.1); margin:0px 0 15px 0;
}
.index-banner .slick-prev:before, .index-banner .slick-next:before { font-family: 'Font Awesome 5 Free';
  font-weight: 900; color: #fff; opacity: 1; font-size: 24px;}
.index-banner .slick-prev:before{ content: "\f104" }
.index-banner .slick-next:before{ content: "\f105" }
.index-banner .slick-prev{ width: 58px; height: 58px; top: 43%; left:21%; background: #4575c0; z-index: 9; border-radius: 100%; border: 2px solid #4575c0; }
.index-banner .slick-next{ width: 58px; height: 58px; top: 43%; right:23%; background: #4575c0; z-index: 9; border-radius: 100%; border: 2px solid #4575c0;}

.index-banner .slick-prev:hover,
.index-banner .slick-prev:focus,
.index-banner .slick-next:hover,
.index-banner .slick-next:focus
{
    background: #fff; 
}
.index-banner .slick-prev:hover:before, .index-banner .slick-next:hover:before,
.index-banner .slick-prev:focus:before, .index-banner .slick-next:focus:before 
{ color: #4575c0; }

.index-banner .slick-dots li.slick-active button:before
{
    opacity: .75;
    color: #4575c0;
}
@media only screen and (min-width: 0px) and (max-width: 1110px){
.index-banner img {
  width: 100%; border-radius: 0px; box-shadow: none;
}
}  
@media only screen and (min-width: 0px) and (max-width: 1800px){
.index-banner .slick-prev{ left:1%; }
.index-banner .slick-next{ right:1%; }
} 
@media only screen and (min-width: 0px) and (max-width: 768px){
.index-banner .slick-prev{ width: 38px; height: 38px; top: 50%; }
.index-banner .slick-next{ width: 38px; height: 38px; top: 50%; }
} 


/* page-banner */
.page-banner {
  background-size: cover;
  position: relative;
  width: 100%;
  height: 450px;
  margin-top: 0;
  padding: 0;
  background-position: center;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.page-banner .banner_ttbox {
  position: absolute;
  top: 40%;
  width: 40%;
}
.page-banner .banner_ttbox h2 {
  color: #fff;
  font-size: 40px;
  font-weight: 600;
  letter-spacing: 2px;
  color: #111;
  margin: 0 0 5px 0;
  
} .page-banner .banner_ttbox h3 { font-size: 16px; font-weight: 300;
letter-spacing: .8px; color: #6b6969; }

@media only screen and (min-width: 0px) and (max-width: 1000px) {
  .page-banner {
    height: 30vh; justify-content: center;
  }
  .page-banner .banner_ttbox {
  top: 40%;
  width: auto;
  text-align: center;
}
  .page-banner h2 {
    font-size: 28px;
  }
}

/* 麵包屑 */
.breadbox {
  margin: 0px 0 0px 0;
  padding: 15px 0 0px 0;
  width: 100%;
}
.breadbox02 {
  margin: 0px 0 0px 0;
  padding: 15px 0 15px 0;
  width: 100%;
  background: #f4f0ef;
}
.bread-crumbs {
  max-width:1160px; width: 90%;
  margin: 0px auto;
  display: flex;
  align-items: center;
}

.bread-crumbs li {
  display: inline-block;
  font-size: 14px;
  color: #888;
  font-weight: 600;
}

.bread-crumbs li a {
  color: #888;
}

.bread-crumbs li a:hover {
  text-decoration:underline;
}
.bread-crumbs li .home{
  width: 18px; height: 18px; background:url('../../archive/images/icon_home.svg') ; display: inline-block;
    background-position: center;
    background-repeat: no-repeat;

}
.bread-crumbs li:after {
    display: inline-block;
    content: '';
    height: 6px;
    width: 6px;
    border: 1px solid #888;
    border-left-width: 0;
    border-top-width: 0;
    -webkit-transform: translate(0, -50%) rotate(-45deg);
    -ms-transform: translate(0, -50%) rotate(-45deg);
    transform: translate(0, -50%) rotate(-45deg);
    margin: 0px 15px 0 15px;
}

.bread-crumbs li:last-child:after {
  display: none;
}

/* 分類 */
.category{ width:100%; margin:30px auto 0px auto; text-align:center }
.category li{ width: auto; margin:0px 0 12px 0px; padding:13px 20px 13px 20px; list-style: none; letter-spacing: 1px; border-radius: 30px;
color: #333; font-weight: 600; background: #c9c3c0; box-shadow: 2px 3px 5px rgba( 0,0,0,0.1); text-align: center; display: inline-block;
}
.category li a{ color:#444; }
.category li.current, .category li:hover{ color:#FFF; background:#1864db; }
.category li.current a, .category li:hover a{ color:#FFF; }
@media only screen and (min-width: 0px) and (max-width: 950px) {
.category{ display: none; }
} 
/* -關於我們----------------------------------------------------------------------------------------------------*/
.about { }
.about .addbox{ border-radius: 15px; background: #f1f7fc; padding: 20px; width: 100%; margin: 0 0 20px 0;
  display: block; height: auto; overflow: hidden; font-weight: 600;}
.about .addbox .map{ width:50%; float: left; }
.about .addbox .map iframe{ width:100%; height: 300px; }
.about .addbox .info{ width:50%; float: right; padding: 10px 0px 0px 20px; color: #333; line-height: 1.5; }
.about .addbox .info a{ color: #333; }
.about .addbox .info .call, .about .addbox .info .calendar{ width:100%; padding: 0 0 10px 23px; display: flex;
align-items: flex-start; position: relative; }
.about .addbox .info .call dd, .about .addbox .info .calendar dd{ width:80px; float: left;}
.about .addbox .info .call dt, .about .addbox .info .calendar dt{ width:80px; width:calc(100% - 80px); float: left;}
.about .addbox .info .call:before { content: ''; width: 14px; height: 16px; background:url('../../archive/images/call02.png') no-repeat; display: block; position: absolute; left: 0px; }
.about .addbox .info .calendar:before { content: ''; width: 14px; height: 16px; background:url('../../archive/images/calendar02.png') no-repeat; display: block;  position: absolute; left: 0px;}
.about .addbox a:hover{ color:#1864db;}
@media only screen and (min-width: 0px) and (max-width: 800px) {
.about .addbox .map{ width:100%; }
.about .addbox .info{ width:100%; padding: 10px 0px 0px 0px; }
}

.about_doctor {  margin:30px 0 30px 0px; width:100%; 
display: flex;
  justify-content: center;
  align-items: center;
}
.about_doctor .icon{  border-radius: 100%; font-size: 22px; color: #fff;  font-weight: bold; margin: 0 0px 0 0; width: 110px; height: 110px;
 background: #f6ad3c; text-align: center;
 display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.about_doctor p{  margin: -5px 0 0 0; width: 100%}
.about_doctor .icon img{  width: 40px;}
.about_doctor .selectbox{  width:auto;
display: flex;
  justify-content: center;
  align-items: center;
}
.about_doctor .selectbox li{  width:auto; padding: 0; list-style: none; margin: 0 0px 0 30px;}
.about_doctor .selectbox li:last-child{  margin: 20px 0 0 30px; }
.about_doctor .selectbox li h2{  font-size: 18px; font-weight: bold; color: 222; }
@media only screen and (min-width: 701px) and (max-width: 960px) {
.about_doctor {   display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.about_doctor .selectbox{  width:100%; margin: 30px 0px 0 0;}
}
@media only screen and (min-width: 0px) and (max-width: 760px) {
.about_doctor {   display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.about_doctor .selectbox{  display: block; margin: 0px 0px 0 0; width:100%; }
.about_doctor .selectbox li{  width:100%; margin: 0 0px 0 0px; padding: 20px 0 0 0; }
.about_doctor .selectbox li:last-child{  margin: 0px 0 0 0px; text-align: center;}
.about_doctor .selectbox .input-style01{  width:100%;}
}

.about_doctor05 {  margin:30px 0 30px 0px; width:100%; 
display: flex;
  justify-content: center;
  align-items: center;
}
.about_doctor05 .icon{  border-radius: 100%; font-size: 22px; color: #fff;  font-weight: bold; margin: 0 0px 0 0; width: 110px; height: 110px;
 background: #f6ad3c; text-align: center;
 display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.about_doctor05 p{  margin: -5px 0 0 0; width: 100%}
.about_doctor05 .icon img{  width: 40px;}
.about_doctor05 .selectbox{  width:auto;
display: flex;
  justify-content: center;
  align-items: center;
}
.about_doctor05 .selectbox li{  width:auto; padding: 0; list-style: none; margin: 0 0px 0 30px;}
.about_doctor05 .selectbox li:last-child{  margin: 20px 0 0 0px; }
.about_doctor05 .selectbox li h2{  font-size: 18px; font-weight: bold; color: 222; }
.about_doctor05 .selectbox li .time{  width:auto;
display: flex;
  justify-content: center;
  align-items: center;
}
.about_doctor05 .selectbox li .time .input-style03{ width:130px; }
.about_doctor05 .selectbox li .time span{  margin: 0 10px 0 10px;}  
@media only screen and (min-width: 0px) and (max-width: 1310px) {
.about_doctor05 {  display: block; text-align: center;}
.about_doctor05 .icon{  display: inline-block; padding: 15px 0 0 0;}
.about_doctor05 .selectbox{  width:100%; text-align: left; margin: 10px 0 0 0px;}
}
@media only screen and (min-width: 701px) and (max-width: 950px) {
.about_doctor05 {   display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.about_doctor05 .selectbox{  width:100%; margin: 30px 0px 0 0;}
}
@media only screen and (min-width: 0px) and (max-width: 1100px) {
.about_doctor05 {   display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.about_doctor05 .selectbox{  display: block; margin: 0px 0px 0 0; width:100%; }
.about_doctor05 .selectbox li{  width:100%; margin: 0 0px 0 0px; padding: 20px 0 0 0; }
.about_doctor05 .selectbox li:last-child{  margin: 0px 0 0 0px; text-align: center;}
.about_doctor05 .selectbox .input-style01{  width:100%;}
.about_doctor05 .selectbox li .time .input-style03{ width:100%; }
}

.about_doctor02 {  margin:0px 0 0px 0px; width:100%; }
.about_doctor02 ul{  margin:40px 0 30px 0px; padding: 0; list-style: none;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.about_doctor02 ul:after {
    content: "";
    width:calc(100% / 3 - 2%);
}
.about_doctor02 ul li{  margin:0px 0 30px 0px; padding:15px; list-style: none; width:calc(100% / 3 - 2%); height: auto; overflow: hidden;
  border: 1px solid #ddd; border-radius: 5px; box-shadow: 2px 3px 5px rgba( 0,0,0,0.1);

}
.about_doctor02 ul li .pic{  width:100%; float: left;}
.about_doctor02 ul li .pic img{ width:100%; border-radius: 5px; transition:all .3s ease-in-out;}
.about_doctor02 ul li:hover .pic img{
  transform:scale(1.1,1.1)
}
.about_doctor02 ul li .txtbox{ width:100%;; float: left; padding: 0 0 0 0px; line-height: 1.5; margin:10px 0 10px 0px;

}
.about_doctor02 ul li .txtbox .list dd{ width: auto; margin:0px 0 5px 0px; padding:4px 10px 4px 10px; list-style: none; border-radius: 30px;
color: #fff; font-weight: 600; background: #595757; text-align: center; display: inline-block; font-size: 14px; line-height: 1;
}
.about_doctor02 ul li .txtbox h2{  margin:0px 0 0px 0px; padding: 0; width:100%; font-size: 22px;  font-weight: 600; color: #222; line-height: 1.3;}
.about_doctor02 ul li .txtbox h3{  margin:0px 0 0px 0px; padding: 0; width:100%; color: #666; font-weight:normal; font-size: 16px; }
.about_doctor02 ul li .txtbox p{  margin:0px 0 0px 0px; padding: 0; width:100%; color: #666;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}
@media only screen and (min-width: 651px) and (max-width: 1000px) {
.about_doctor02 ul:after {
    content: "";
    width:calc(100% / 2 - 2%);
}
.about_doctor02 ul li{ width:calc(100% / 2 - 2%); }

}
@media only screen and (min-width: 0px) and (max-width: 650px) {
.about_doctor02 ul{ display: block;}
.about_doctor02 ul li{ width:100%; }
}

.about_doctor03 {  margin:0px 0 0px 0px; width:100%; }
.about_doctor03 ul{  margin:40px 0 30px 0px; padding: 0; list-style: none; height: auto; overflow: hidden;}
.about_doctor03 ul .pic{  width:40%; float: left;}
.about_doctor03 ul .pic img{ width:100%; border-radius: 5px; }
.about_doctor03 ul .txtbox, .about_doctor03 ul .txtbox02{ width:calc(100% - 40%); float: left; padding: 0 0 0 30px; line-height: 1.5; margin:0px 0 0px 0px;
}
.about_doctor03 ul .txtbox .list dd{ width: auto; margin:0px 0 5px 0px; padding:8px 15px 8px 15px; list-style: none; border-radius: 30px;
color: #fff; font-weight: 600; background: #595757; text-align: center; display: inline-block; font-size: 16px; line-height: 1;
}
.about_doctor03 ul .txtbox02 .exp{ width: 100%; margin:30px 0 0px 0px; padding: 0; line-height: 1.5;}
.about_doctor03 ul .txtbox02 .exp .title08 {
    margin:0px 0 20px 0px; 
}
.about_doctor03 ul .txtbox02 .time dd{ width: auto; margin:0px 0 5px 0px; padding:8px 15px 8px 15px; list-style: none; border-radius: 5px;
color: #333; font-weight: 600; text-align: center; display: inline-block; font-size: 16px; line-height: 1; border: 1px solid #ddd;
}
.about_doctor03 ul .txtbox02 .time dd a{ color: #333; }
.about_doctor03 ul .txtbox02 .time dd:hover a{ color: #fff; }
.about_doctor03 ul .txtbox02 .time dd:hover { background: #4575c0; border: 1px solid #4575c0;}
.about_doctor03 .exp02{ width: 100%; margin:30px 0 0px 0px; padding: 0; height: auto; overflow: hidden; line-height: 1.5;}
.about_doctor03 .exp02 .title08 {
    margin:0px 0 20px 0px; 
}

@media only screen and (min-width: 0px) and (max-width: 800px) {
.about_doctor03 ul .txtbox02{ width:100%; padding: 0 0 0 0px; }
}

@media only screen and (min-width: 0px) and (max-width: 768px) {
.about_doctor03 ul .pic{  width:100%; }
.about_doctor03 ul .txtbox, .about_doctor03 ul .txtbox02{ width:100%; padding: 0 0 0 0px; }
}

.about_doctor04 {  margin:0px 0 0px 0px; width:100%; }
.about_doctor04 ul{  margin:10px 0 30px 0px; padding: 0; list-style: none; height: auto; overflow: hidden; border-bottom: 2px dotted #ccc;}
.about_doctor04 ul li{  margin:0px 0 0px 0px; padding: 15px 0; list-style: none; height: auto; overflow: hidden; border-top: 2px dotted #ccc;}
.about_doctor04 ul li .txtbox{ width:100%; height: auto; overflow: hidden;}
.about_doctor04 ul li .txtbox .date{ width: 110px; float: left; display: block; font-size: 12px; color: #fff; position: relative; padding: 3px 0px 3px 30px; background: #776861; border-radius: 15px;}
.about_doctor04 ul li .txtbox .date:before { content: ''; width: 13px; height: 11px; background:url('../../archive/images/news_icon.png') no-repeat; display: block;  position: absolute; left: 10px;}
.about_doctor04 ul li .txtbox p{ width: calc(100% - 110px); float: left; display: block; font-size: 18px; color: #212121; font-weight: 600; padding: 0 0 0 20px;}
.about_doctor04 ul li .txtbox02{ width:100%; color: #666; height: auto; overflow: hidden; margin: 10px 0; line-height: 1.5;
overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.about_doctor04 ul li:hover p{ color:#1864db;}
.about_doctor04 ul li:hover .date{ background:#1864db;}
@media only screen and (min-width: 0px) and (max-width: 700px) {
.about_doctor04 ul li .txtbox p{ width:100%; padding: 15px 0 0 0px;}
}

/* -門診時間----------------------------------------------------------------------------------------------------*/
.time_list { margin:50px 0 0px 0px; height: auto; overflow: hidden; }
.time_list .time-slider {
  width: 100%;
  margin: 0;
  padding: 0px;
  list-style: none; 
  position: relative;
}

.time_list .time-slider .slick-prev:before, .time_list .time-slider .slick-next:before { font-family: 'Font Awesome 5 Free';
  font-weight: 900; color: #fff; opacity: 1; font-size: 24px;}
.time_list .time-slider .slick-prev:before{ content: "\f104" }
.time_list .time-slider .slick-next:before{ content: "\f105" }
.time_list .time-slider .slick-prev{ width: 50px; height: 50px; top:45px; left: -10px; z-index: 9;}
.time_list .time-slider .slick-next{ width: 50px; height: 50px; top:45px; right: -10px; z-index: 9;}
@media only screen and (min-width: 0px) and (max-width: 920px) {
.time_list .time-slider {
  margin: 22px 0px 0px 0px;
}
.time_list .time-slider .slick-prev:before, .time_list .time-slider .slick-next:before { background: #f6ad3c; padding: 3px 10px; }
.time_list .time-slider .slick-prev{ top:0px; left: -8px;}
.time_list .time-slider .slick-next{ top:0px; right: -8px;}

.time_list .time-slider .slick-prev:before, .time_list .time-slider .slick-next:before { font-size: 16px;}
.time_list .time-slider .slick-prev:before{ content: "\f104上一周" }
.time_list .time-slider .slick-next:before{ content: "下一周\f105" }
.time_list .time-slider .slick-prev{ width: 100px; }
.time_list .time-slider .slick-next{ width: 100px; }
} 

/* -專業分科----------------------------------------------------------------------------------------------------*/
.division { margin:50px 0 0px 0px; height: auto; overflow: hidden;}

.division02 {  margin:0px 0 0px 0px; width:100%; }
.division02 ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    list-style: none;
    margin: 20px 0 0px 0px; padding: 0; list-style: none;
}
.division02 ul li {
    display: block;
    border: 1px solid #ccc; padding: 10px 10px; margin: 0 10px 10px 0;
    background: #fff;
    border-radius: 5px;
}
.division02 ul li a{
    color: #222; font-weight: 600; font-size: 18px;
}
.division02 ul li:hover{
    background: #1864db; border: 1px solid #1864db;
}
.division02 ul li:hover a{
    color: #fff; 
}

.division03{ margin:0px 0 0px 0px; width:100%; height:auto; overflow: hidden;
}
.division03 ul{ margin:0 auto; padding:0px; width:100%; list-style: none; height:auto; overflow: hidden;
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
}
.division03 ul:after {
    content: "";
    width:calc(100% / 5); 
}
.division03 ul li{ margin:0px 0px 0px 0px; padding: 20px; width:calc(100% / 5); list-style: none; height:auto; overflow: hidden;
text-align: center;  transition: transform 1s;
display: flex;
justify-content: center;
align-items: center;
border-bottom: 1px solid #e5e5e5;
}
.division03 ul li a{ width:140px; height:140px; padding: 10px; border-radius: 100%; display: block; color: #333; font-size: 20px; font-weight: bold;
display: flex; 
justify-content: center;
align-items: center;
box-shadow: 0px 0px 10px rgba( 0,0,0,0.1); position: relative;
background-image: linear-gradient(135deg, #fdfcfb 0%, #e2d1c3 100%);
}
.division03 ul li a span{ width:100%; margin: 0 auto; padding: 10px 15px; 
}
.division03 ul li a:hover { background: #f6ad3c; color: #fff;}
.division03 ul li:hover a:after {
    content: '';
    width: 12px;
    height: 12px;
    background: url('../../archive/images/arrow01.png') no-repeat;
    display: block;
    position: absolute;
    right: 15px;
    top: calc(50% - 6px);
}
@media only screen and (min-width: 661px) and (max-width: 1200px){
.division03 ul li{ width:calc(100% / 4);  }
}
@media only screen and (min-width: 661px) and (max-width: 900px){
.division03 ul li{ width:calc(100% / 3);  }
}
@media only screen and (min-width: 501px) and (max-width: 660px){
.division03 ul li a span{ padding: 0px; }
.division03 ul li a{ width:100%; height:auto; border-radius: 30px; }
.division03 ul li{ width:calc(100% / 2);  }
}
@media only screen and (min-width: 0px) and (max-width: 500px){
.division03 ul li a span{ padding: 0px; }
.division03 ul li a{ width:100%; height:auto; border-radius: 30px; }
.division03 ul li{ margin:0px 0px 0px 0px; width:100%; border-bottom:none; padding: 10px 10px 10px 10px;}
}

/* -醫療設備----------------------------------------------------------------------------------------------------*/
.pd{ margin:0px 0 30px 0px; width:100%; }
.pd ul{ margin:30px 0 0px 0px; padding: 0; width:100%; list-style:none;
display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.pd ul:after {
    content: "";
    width:calc(100% / 3 - 2%);
}
.pd li{ margin:20px 0 0px 0; padding:0px 0px 20px 0px; width:calc(100% / 3 - 2%); list-style:none; transition: all 0.6s;}

.pd li .pic{ margin:0px 0px 0px 0px; padding:0px 0px 8px 0px; width:100%; position: relative; overflow: hidden;}
.pd li .pic img{ width:calc(100% - 10px); box-shadow: 10px 8px #ebe8e7; transition:all .3s ease-in-out;}
.pd li:hover .pic img{
  transform:scale(1.1,1.1)
}
.pd li .date{ width:100%; height:auto; color: #1864db; font-size: 13px; padding:0px 0px 0 0px; margin:13px auto 0px auto; line-height: 1.5;
}
.pd li h2{ width:100%; height:auto; font-size: 18px; color: #000; padding:0px 0px 0 0px; margin:0px auto 0px auto; font-weight: bold; line-height: 1.5;
}
.pd li p{ width:100%; height:auto; color: #666; padding:0px 0px 0 0px; margin:10px auto 0px auto; line-height: 1.5;
}
.pd li p a{ color: #494949;}
.pd li p a:hover{ color: #e68395; }
@media only screen and (min-width: 651px) and (max-width: 1000px) {
.pd ul:after {
    content: "";
    width:calc(100% / 2 - 2%);
}
.pd li{ padding:0px 0px 20px 0px; width:calc(100% / 2 - 2%); }

}
@media only screen and (min-width: 0px) and (max-width: 650px) {
.pd ul{ display: block;}
.pd li{ width:100%; }
}

/* -醫療資訊----------------------------------------------------------------------------------------------------*/
.info {  margin:0px 0 0px 0px; width:100%; }
.info ul{  margin:40px 0 0px 0px; padding: 0; list-style: none;}
.info ul li{  margin:0px 0 30px 0px; padding:15px; list-style: none; width:100%; height: auto; overflow: hidden;
  border: 1px solid #ddd; border-radius: 5px; box-shadow: 2px 3px 5px rgba( 0,0,0,0.1);
}
.info ul li .pic{ width:200px; float: left;}
.info ul li:nth-child(2n+0) .pic{ float: right;}
.info ul li .pic img{ width:100%; border-radius: 5px; transition:all .3s ease-in-out;}
.info ul li:hover .pic img{
  transform:scale(1.1,1.1)
}
.info ul li .txtbox{ width:calc(100% - 200px); float: left; padding: 0 0 0 20px; margin:10px 0 10px 0px;}
.info ul li:nth-child(2n+0) .txtbox{ padding: 0 20px 0 0px; }
.info ul li .date{ width: 110px; display: block; font-size: 12px; color: #fff; position: relative; padding: 3px 0px 3px 30px; background: #776861; border-radius: 15px;}
.info ul li .date:before { content: ''; width: 13px; height: 11px; background:url('../../archive/images/news_icon.png') no-repeat; display: block;  position: absolute; left: 10px;}
.info ul li .txtbox h2{  margin:5px 0 0px 0px; padding: 0; width:100%; font-size: 22px;  font-weight: 600; color: #222; line-height: 1.3;}
.info ul li .txtbox p{  margin:5px 0 0px 0px; padding: 0; width:100%; color: #666; line-height: 1.5; 
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

@media only screen and (min-width: 0px) and (max-width: 650px) {
.info ul li .pic{ width:100%;}
.info ul li .txtbox{ width:100%; padding: 0 0 0 0px; margin:10px 0 0px 0px;}
}

/* -最新消息----------------------------------------------------------------------------------------------------*/
.news{ margin:0px 0 30px 0px; width:100%; }
.news ul{ margin:30px 0 0px 0px; padding: 0; width:100%; list-style:none;
display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.news ul:after {
    content: "";
    width:calc(100% / 3 - 2%);
}
.news li{ margin:20px 0 0px 0; padding:15px; width:calc(100% / 3 - 2%); list-style:none; transition: all 0.6s; 
  border: 1px solid #ddd; border-radius: 5px; box-shadow: 2px 3px 5px rgba( 0,0,0,0.1); }

.news li .pic{ margin:0px 0px 0px 0px; padding:0px 0px 8px 0px; width:100%; position: relative; overflow: hidden;}
.news li .pic img{ width:100%; transition:all .3s ease-in-out;}
.news li:hover .pic img{
  transform:scale(1.1,1.1)
}
.news li .date{ width:100%; height:auto; color: #1864db; font-size: 13px; padding:0px 0px 0 0px; margin:13px auto 0px auto; line-height: 1.5;
}
.news li h2{ width:100%; height:auto; font-size: 18px; color: #000; padding:0px 0px 0 0px; margin:0px auto 0px auto; font-weight: bold; line-height: 1.5;
}
.news li p{ width:100%; height:auto; color: #666; padding:0px 0px 0 0px; margin:10px auto 0px auto; line-height: 1.5;
overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
.news li p a{ color: #494949;}
.news li p a:hover{ color: #e68395; }
@media only screen and (min-width: 651px) and (max-width: 1000px) {
.news ul:after {
    content: "";
    width:calc(100% / 2 - 1.5%);
}
.news li{ width:calc(100% / 2 - 1.5%); }

}
@media only screen and (min-width: 0px) and (max-width: 650px) {
.news ul{ display: block;}
.news li{ width:100%; }
}

.news_view {
  width: 100%;
  height: auto;
  overflow: hidden;
  margin: 30px 0 0px 0px;
  padding: 0px;
}
.news_view .auther {
  width: 100%;
  padding: 0px 0px 0px 0px;
  margin: 0px 0px 10px 0px;
  font-weight: 600;
  display: flex;
  justify-content: flex-end;
}
.news_view .auther a{
  color: #333;
}
.news_view .auther a:hover{
  color: #1864db;
}
.news_view .sbox {
  width: 100%;
  padding: 15px 0px 15px 0px;
  margin: 0px 0px 20px 0px;
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
}
.news_view .sbox .date{ width: 110px; display: block; font-size: 12px; color: #fff; position: relative; padding: 3px 0px 3px 30px; background: #776861; border-radius: 15px; font-weight: 600;}
.news_view .sbox .date:before { content: ''; width: 13px; height: 11px; background:url('../../archive/images/news_icon.png') no-repeat; display: block;  position: absolute; left: 10px;}
.news_view .sbox h2 {
  width: 100%; display: block;
  margin: 5px 0px 0px 0px;
  padding: 0px;
  font-size: 28px;
  color: #222;
  font-weight: bold;
  line-height: 1.5;
}
.news_view .btn {
    width: 100%;
    border-top: 1px solid #ddd;
    margin: 30px 0 0px 0px;
    padding: 20px 0px 0px 0px;
    display: flex;
    justify-content: center;
}

/* -聯絡我們--------------------------------------------------------------------------------------------------*/
.contact {
  width: 100%;
  height: auto;
  overflow: hidden;
  margin: 30px auto 0 auto;
  padding: 0px 0;
}
.contact .txtbox {
  width: 100%;
  font-size: 16px;
  color: #333;
  line-height: 2;
  margin: 0px 0px 30px 0px;
  padding: 0px 0px 20px 0px;
  font-weight: 600;
  text-align: center;
  border-bottom: 1px #ddd dotted;
}
.contact .btn {
  border-top: 1px #ddd dotted;
    width: 100%;
    margin: 30px 0 0px 0px;
    padding: 20px 0px 0px 0px;
    display: flex;
    justify-content: center;
}
@media only screen and (min-width: 0px) and (max-width: 900px) {
.contact {
  margin: 0px auto 0 auto;
}
}

.contact_apply {
  width: 100%;
  height: auto;
  overflow: hidden;
  margin: 0px auto 0 auto;
  padding: 0px 0;
}
.contact_apply .txtbox{
  width: 100%;
  margin: 30px auto 0 auto;
  padding: 0px 0;
}
.contact_apply .title06{ margin: 0px auto 10px auto;}
@media only screen and (min-width: 0px) and (max-width: 900px) {
.contact_apply .category{
  margin: 0px auto 0 auto;
}
}

.form_apply { border: 1px solid #ddd; border-top: none; 
}
.form_apply td {
    text-align:center;
}
.form_apply thead { padding: 10px 0px;  }
.form_apply thead td { padding: 10px 10px; background: #5a5858; border-top: 1px solid #ddd; border-right:1px solid #ddd; font-weight: 600; color: #fff;}
.form_apply thead td:last-child { border-right:none;}
.form_apply tbody tr:nth-child(even) {
    background:#f3f3f3;
}
.form_apply tbody td { padding: 10px 10px; border-right:1px solid #ddd;}
.form_apply tbody td:last-child { border-right:none;}

blockquote {
    margin: 30px auto 0px auto;
    position: relative;
    padding: 20px 10px 20px 32px;
    box-sizing: border-box;
    
    color: #464646;
    background: #ebe8e7;
}
blockquote .title03{
    margin: 0px auto 10px auto;
}
blockquote:before{
    display: inline-block;
    position: absolute;
    top: 0px;
    left: 0px;
    content: "\f10d";
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    color: #ebe8e7;
    font-size: 20px;
    line-height: 1;
    z-index: 2;
}

blockquote:after{
    position: absolute;
    content: '';
    left: 0;
    top: 0;
    border-width: 0 0 50px 40px;
    border-style: solid;
    border-color: transparent #ffffff;
}

blockquote p {
    position: relative;
    padding: 0;
    margin: 10px 0;
    z-index: 3;
}

.accordion-container {
    position: relative;
    width: 100%;
    outline: 0;
    cursor: pointer
}
.accordion-container .article-title {
    display: block;
    position: relative;
    margin:0 0 10px 0;
    padding: 13px 20px 13px 35px; height:auto; overflow: hidden; 
    font-size: 18px;
    font-weight: normal;
    color: #4a4a4a;
    cursor: pointer;
    border: 2px dotted #ccc; border-radius: 5px;

    -webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}

.accordion-container .article-title:hover,
.accordion-container .article-title:active,
.accordion-container .content-entry.open .article-title {
    background-color: #1864db;
    color: #fff;
}

.accordion-container .article-title:hover i:before,
.accordion-container .article-title:hover i:active,
.accordion-container .content-entry.open i {
    color:#fff;
}

.accordion-container .content-entry i {
    position: absolute;
    top: 8px;
    left: 12px;
    font-style: normal;
    font-size: 1.25em;
    color: #0079c1;
}

.accordion-container .content-entry i:before {
    content: "+ ";
}

.accordion-container .content-entry.open i:before {
    content: "- ";
}
.accordion-content {
    display: none;
    padding: 0px 20px 30px 30px;
    line-height: 1.5; 
}
.accordion-container,
#description {
    width: 100%;
    margin: 40px auto 0 auto;
}
@media only screen and (min-width: 0px) and (max-width: 900px) {
.accordion-container,
#description {
  margin: 0px auto 0 auto;
}
}

.space01 { margin: 0px 0px 5px 0px; width: 100%; height: auto; overflow: hidden;}

/* -隱私權政策--------------------------------------------------------------------------------------------------*/
.privacy { margin-bottom: 30px; }
.privacy:last-child{ margin:0px 0 0px 0px;}
.privacy_txt ul {
    margin: 10px 0px 0px 0px; padding: 0; list-style: none;}
.privacy_txt ul li {
      list-style: none;
      padding-left:56px;
      position: relative;
      color: #000000; }
.privacy_txt ul li:before {
        display: block;
        content: "";
        width: 5px;
        height: 5px;
        border-radius: 100%;
        background-color: #4575c0;
        position: absolute;
        top: 14px;
        left: 42px;
        margin: auto; }

/* -網站導覽--------------------------------------------------------------------------------------------------*/
.site {
  width: 100%;
  margin: 0 0 -50px 0;
  padding: 0px 0px 0 0px;
  height: auto;
  overflow: hidden;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.site:after {
    content: "";
    width:calc(100% / 4 - 20px);
}
.site ul {
  width: calc(100% / 4  - 20px);
  float: left;
  margin: 0 0 50px 0;
  padding: 0;
  list-style: none;
  vertical-align: text-top;
}

.site ul .tt {
  width: 100%;
  text-align: left;
  font-weight: bold;
  position: relative;
  color: #1864db;
  font-size: 28px;
  padding: 0 0 0 20px;
  margin: 0 0 8px 0;
}
.site ul .tt:before { content: ''; width: 13px; height: 11px; background:url('../../archive/images/news_icon02.png') no-repeat; display: block;  position: absolute; left: 0px; top:10px; }

.site ul .tt a {
  color: #1864db;
}

.site ul .tt a:hover {
  color: #da1518;
}

.site ul li {
  width: 100%;
  margin: 0 0px 0px 0;
  padding: 0 0 0 22px;
  list-style: none;
  font-size: 18px;
  color: #222;
  line-height: 1.5;
  text-align: left;
  font-weight: bold;
}

.site ul li a {
  color: #222;
}

.site ul li a:hover {
  color: #da1518;
}

.site ul .lv02 {
  width: 100%;
  margin: 0 0px 0px 0;
  padding: 0 0 0 40px;
  line-height: 2;
}

.site ul .lv02 dd a {
  font-size: 15px;
  color: #666;
}

@media only screen and (min-width: 501px) and (max-width: 750px) {
  .site ul .tt {
    font-size: 22px;
  }
  .site:after {
    width:calc(100% / 3 - 20px);
}
  .site ul {
    width: calc(100% / 3 - 20px);
  }
}

@media only screen and (min-width: 401px) and (max-width: 500px) {
  .site ul .tt {
    font-size: 22px;
  }
  .site:after {
    width:calc(100% / 2 - 20px);
}
  .site ul {
    width: calc(100% / 2 - 20px);
  }
}
@media only screen and (min-width: 0px) and (max-width: 400px) {
  .site ul .tt {
    font-size: 22px;
  }
  .site:after {
    width:100%;
}
  .site ul {
    width: 100%;
  }
}

/* -button---------------------------------------------------------------------------------------------------*/
.btn-style01 {
  width: 170px;
  padding: 8px 0px 8px 20px;
  margin: 0px 0px 0px 0px;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  font-weight: bold;
  color: #fff;
  background: #1864db;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
  border: 1px solid #1864db;
  position: relative;
  border-radius: 20px;
}
.btn-style01:hover {
  background: #f1b65c; border: 1px solid #f1b65c;
}
.btn-style01:after { content: ''; width: 12px; height: 12px; background:url('../../archive/images/arrow01.png') no-repeat; display: block;  position: absolute; right: 15px; top: 10px;}

.btn-style02 {
  width: auto;
  padding: 8px 30px 8px 30px;
  margin: 0px 0px 0px 0px;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  font-weight: bold;
  color: #fff;
  background: #1864db;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
  border: 1px solid #1864db;
  position: relative;
  border-radius: 20px;
}
.btn-style02:nth-child(2) {
  color: #fff;
  background: #776861;
  border: 1px solid #776861;
  margin: 0px 0px 0px 10px;
}
.btn-style02:hover {
  background: #f6ad3c; border: 1px solid #f6ad3c; 
}
.btn-style03 {
  width: auto;
  padding: 8px 30px 8px 30px;
  margin: 0px 0px 0px 0px;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  font-weight: bold;
  color: #fff;
  background: #ff8695;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
  border: 1px solid #ea7b7b;
  position: relative;
  border-radius: 20px;
}
.btn-style03:hover {
  background: #1864db; border: 1px solid #1864db; 
}

.btn-style04 {
  width: 170px;
  padding: 8px 0px 8px 20px;
  margin: 0px 0px 0px 0px;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  font-weight: bold;
  color: #fff;
  background: #776861;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
  border: 1px solid #776861;
  position: relative;
  border-radius: 20px;
}
.btn-style04:hover {
  background: #f1b65c; border: 1px solid #f1b65c;
}
.btn-style04:after { content: ''; width: 12px; height: 12px; background:url('../../archive/images/arrow01.png') no-repeat; display: block;  position: absolute; right: 15px; top: 10px;}

.btn-style05 {
  width: 170px;
  padding: 8px 0px 8px 20px;
  margin: 0px 0px 0px 10px;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  font-weight: bold;
  color: #776861;
  background: none;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
  border: 1px solid #776861;
  position: relative;
  border-radius: 20px;
}
.btn-style05:hover {
  background: #f1b65c; border: 1px solid #f1b65c; color: #fff;
}
.btn-style05:after { content: ''; width: 12px; height: 12px; background:url('../../archive/images/arrow02.png') no-repeat; display: block;  position: absolute; right: 15px; top: 10px;}
.btn-style05:hover:after { background:url('../../archive/images/arrow01.png') no-repeat;}

.btn-style06 {
  padding: 5px 10px 5px 10px;
  margin: 0px 0px 0px 10px;
  text-decoration: none;
  display: inline-block;
  font-size: 13px;
  font-weight: bold;
  color: #776861;
  background: none;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
  border: 1px solid #776861;
  position: relative;
  border-radius:5px;
}
.btn-style06:hover {
  background: #776861; color: #fff;
}



/*頁碼*/
div.page {
  font-size: 14px; 
  padding: 0px;
  margin:0px 0px 0px 0px; text-align:center;
  width:100%; height:auto; overflow: hidden;
}
div.page a {
  padding: 3px 8px; margin: 2px; color: #666; background: #FFF; text-decoration: none; border:1px solid #ddd; border-radius: 5px; display:inline-block;
}
div.page a:hover {
  color: #fff; background-color: #776861
}
div.page .current {
  padding: 3px 8px; color: #fff; background: #776861; border-radius: 5px;
}

/*404*/

.e404box {
  width: 90%;
  max-width: 700px;
  background: #FFF;
  padding: 50px 30px;
  margin: 10% auto 0 auto;
  display: block;
  border-radius: 5px;
  -moz-box-shadow: 3px 3px 2px rgba(0%, 0%, 0%, 0.1);
  -webkit-box-shadow: 3px 3px 2px rgba(0%, 0%, 0%, 0.1);
  box-shadow: 0 0 40px rgba(0%, 0%, 0%, 0.1)
}

.e404 {
  width: 100%;
  display: block;
  padding: 0;
  height: auto;
  overflow: hidden;
  text-align: center;
}

.e404 .pic {
  width: 100%;
}

.e404 .pic img {
  width: 180px;
}

.e404 .textbox {
  width: 100%;
  margin: 10px 0px 0px 0px;
  height: auto;
  overflow: hidden;
}

.e404 .textbox dd {
  width: 100%;
  display: block;
  margin: 5px 0px;
  padding: 0;
  list-style: none
}

.e404 .textbox dd.error {
  font-family: Helvetica, sans-serif;
  font-size: 40px;
  font-weight: 700;
  color: #333;
  margin: 25px 0 0;
  vertical-align: top
}

.e404 .textbox dd.text {
  font-size: 14px;
  color: #333;
  line-height: 2
}

.e404 .textbox dd.text a {
  color: #1864db
}

.e404 .textbox dd.topbtn {
  vertical-align: top;
  margin: 18px 0;
}

.e404 .textbox dd a.btn {
  outline: none;
  border-radius: 3px;
  font-size: 14px;
  text-align: center;
  color: #ffF;
  padding: 8px 20px;
  background: #f6ad3c;
  border: 1px solid #f6ad3c;
  text-decoration: none;
  vertical-align: top;
  
  border-radius: 20px;
}

.e404 .textbox dd .btn:hover {  
  border: 1px solid #1864db;
  background: #1864db;
}