@charset "utf-8";
/* CSS Document */

/* *{
    border: 0.5px #ff0000 solid;
} */

/* .container{
    border: 1px #ff4d2e solid;
} */
/* .col-md-12{
    border: 1px #2eff51 solid;
} */





/****** 浮動定位標籤 ******/
.dots {
    position: fixed;
    right: 0;
    top: 50%;
    list-style-type: none;
    padding: 0;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 2;
    display: none;/*0908*/
}
.dots li a {
    display: block;
    margin: 0;
    position: relative;
    transition: all 0.2s;
	width: 50px;
    height: 50px;
	cursor: pointer;
}
.dots li a img {
    width: 50px;
    height: 50px;
    transition: all 0.2s;
    transform: scale3d(1, 1, 1);
}
.dots li a:hover img {
    transform: scale3d(0.8, 0.8, 1);
}
.dots.at-top a .label {
    background: none;
    right: 30px;
    opacity: 1;
    pointer-events: all;
	display: none;
}
.dots li a:hover .label {
    background: rgba(22, 22, 22, 0.9);
    opacity: 1;
    right: 50px;
	display: inline-block;
}
.dots li a .label {
    border-radius: 10px;
	font-size: 0.9375em;
    font-weight: normal;
    position: absolute;
    white-space: nowrap;
    padding: 5px 10px;
    right: 30px;
    opacity: 0;
    pointer-events: none;
    text-align: right;
    top: 50%;
    transform: translateY(-50%);
    transition-property: all;
    transition-duration: 0.2s;
}s
.dots li:last-child {
    display: none;
}

/* *****content_0916********/
main{
    margin-bottom: 30px;
}

.content{
    max-width: 1170px;
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

/****** 活動看板_0916 ******/
.activity{
    background-image: url(../images/tab-back-img.png);
    padding-top:30px;
}

.activity-banner {
    float: left;
    width: 100%;
	margin: 0 0 45px 0;
}

.activity-banner .carousel-indicators {
    bottom: -35px;
	left: 0;
    height: auto;
    margin-left: 0;
    margin-bottom: 0;
    text-align: center;
    z-index: 1;
    width: 100%;
}
.activity-banner .carousel-indicators li {
    width: 14px;
    height: 14px;
    background: #aaa;
    border-radius: 15px;
    border: none;
	margin: 3px;
}
.activity-banner .carousel-indicators li.active {
    background: #f05f78;
	width: 14px;
    height: 14px;
    margin: 1px;
	margin: 3px;
}
.activity-banner .carousel-indicators li a {
    display: block;
    width: 100%;
    height: 100%;
}
.activity-banner .carousel-indicators li a span {
    display: none;
}
.activity-banner .carousel-inner .item a {
    display: block;
}
.activity-banner .carousel-inner .item a img {
    width: 100%;
}
.activity-banner .carousel-control:focus {
    outline: 5px auto -webkit-focus-ring-color;
    border: 1px dotted #000000;
}

.activity-banner .text {
    background: rgba(0, 0, 0, 0.75);
    color: #fff;
    padding: 15px;
    position: absolute;
    bottom: 0;
    width: 100%;
	font-size: 1.125em;
    font-weight: bold;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.activity-banner .text:hover {
	color: #f05f78;
}

/****** 公告資訊&衛生新聞 ******/
.announcement {
    background: url(../images/announcement-back.png) no-repeat right bottom;
    background-size: cover;
    min-height: 510px;
    float: left;
    width: 100%;
    margin-right: auto;
    margin-left: auto;
}

.announcement h2{
    text-align: center;
    color: #4f63a3;/*#414141 0908*/
    line-height: 45px;
    font-weight: bold;/*0908*/
}

.announcement-tab{
    background-color: #fff;
    box-shadow:10px 5px 15px -10px #cccccc;
    margin-bottom: 30px;
}

.announcement-tab li{
    margin-bottom:10px;
    padding: 15px;
    border-bottom:1px #dfdfdf solid;
    display: flex;
    flex-direction:column;
}

.announcement-tab li>a{
    /* Add 0914 */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}

.announcement .more{
    text-align: end;
    padding-bottom: 15px;
}

.announcement .more img{
    padding:5px;
}

.announcement .department{
    color: #4e8acf;
    margin-left:5px;
}

.announcement .date{
    color: #f78195;
    margin-right:5px;
}

.announcement a{
    color:#4f63a3;
    font-weight: bold;
    /* margin: 5px; */
}


.health-news{
    background-color: #fff;
    box-shadow:10px 5px 15px -10px #cccccc;
}

.health-news li{
    margin-bottom:10px;
    padding: 15px;
    border-bottom:1px #dfdfdf solid;
    display: flex;
    flex-direction: column;
}

.health-news li>a{
    /* Add 0914 */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}

.health-news .more{
    text-align: end;
}



.health-news .department{
    color: #4e8acf;
    margin-left:5px;
}

.health-news .date{
    color: #f78195;
    margin-right:5px;
}

/* 1102修改start */
.health-news a{
    color:#323232;
    font-weight: bold;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    /* margin: 5px; */
}

.health-news .more a{
    color:#4f63a3;
    font-weight: bold;
    /* margin: 5px; */
}

/* 1102修改end */

.announcement a:hover{
    color:#f78195;
    /* margin: 5px; */
}


/****** 衛生主題 ******/
.health {
    min-height: 750px;
    float: left;
    width: 100%;
    margin-right: auto;
    margin-left: auto;
    background: url(../images/health-back-fulls.png);/*0909*/
    background-repeat: no-repeat;/*0909*/
    background-position:bottom;/*0909*/
    background-size: 100%;
    background-size: cover;
}

.health h2{
    text-align: center;
    color: #4f63a3;/*#414141 0908*/
    line-height: 45px;
    font-weight: bold;/*0908*/

}

.health .btn-group{
    margin-bottom:50px;
}

.health .btn-group button{
    background-color:#f78195;
    width: 350px;
    height: 50px;
    color: #fff;
    font-size: 1.25em;
    text-align: left;
}

/* =====收合==== */

/* 1101修改start */
.panel-default > .panel-heading{
    background-color:#f78195;
    width: 300px;
    /* height: 50px; */
    color: #fff;
    font-size: 1.25em;
    /* text-align: left; */
    border-radius:10px;
    margin: -1px -3px; 
}
/* 1101修改end */

.panel-title a{
    width: 100%;
    display:flex;
    justify-content: space-between;
}

.panel-title a:hover{
    text-decoration: none;
}

.panel-default > .panel-heading > .panel-title>.top >h4{
    width: 60%;
    margin: 0;
}

.panel-default > .panel-heading > .panel-title>.top.collapsed >span .collapse-up{
    display: none;
    margin: -10px 0 0 110px;
}

.panel-default > .panel-heading > .panel-title>.top>span .collapse-up{
    /* display:block; */
    margin: -10px 0 0 110px;
}

.panel-default > .panel-heading > .panel-title>.top.collapsed >span .collapse-down{
    display: block;
    margin-left: 90px;
}

.panel-default > .panel-heading > .panel-title>.top>span .collapse-down{
    display: none;
    margin-left: 90px;
}



.panel-default{
    background-color:#ffffff;
    max-width: 300px;
    width: 100%;
    color: #fff;
    font-size: 1.25em;
    font-weight: bold;
    border:2px #f78195 solid;
}

.panel-body{
    padding: 0;
}

.panel-body li{
    margin:5px;
}

.panel-body a{
    font-size: 1em; 
    width: 100%;
    padding:0 0 0px 5px;
    display: flex;
    flex-direction: row; 
}
_:-moz-panel-body a{
    font-size: 1em;
    margin: 0px;
    width: 100%;
    padding:0 0 15px 5px;
    display: flex;
    flex-direction: row;
}
.panel-body a:hover{
    color: #f78195;
    text-decoration: none;
}

.panel-body a span{
    padding:5px 2px;
    top: 4px;
}
.panel-body a .panel-content{
    text-align: left;
    /* background-color: #aaa; */
}

/* 0915 */
.panel-group {
    /* display: flex; */
    /* flex-wrap: wrap; */
    /* justify-content: space-around; */
    position: relative;
}

.panel-group .panel{
    margin: 10px 3%;
    display: inline-grid;
}



/****** 徵才&影音專區 ******0909*/
.recruit{
    min-height: 450px;
    float: left;
    width: 100%;
    margin-right: auto;
    margin-left: auto;
    /* text-align: center; */
    background: #fffdea;
}


.recruit .row{
    min-height:450px;
    /* text-align: center; */
}

.recruit h2{
    text-align: center;
    color: #4f63a3;/*#414141 0908*/
    line-height: 45px;
    font-weight: bold;/*0908*/
}
.recruit .more{
    text-align: end;
    padding-bottom: 15px;
}

.recruit .more img{
    padding:5px;
}

.recruit-tab{
    background-color: #fff;
    display: flex;
    flex-direction: column;
    margin-bottom: 45px;
}

.recruit-tab a{
    color:#4f63a3;
    margin: 10px 0;
    padding: 10px;
    font-weight: bold;
}

.recruit-tab .department{
    color: #4e8acf;
    margin-left:5px;
}

.recruit-tab .date{
    color: #f78195;
    margin-right:5px;
}

.recruit-tab li{
    margin-bottom:10px;
    padding: 10px;
    border-bottom:1px #dfdfdf solid;
}

.youtube-tab iframe{
    min-width:500px;
    height: 310px;
}

.embed-container {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    max-width: 100%;
  }

.embed-container iframe,
.embed-container object,
.embed-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

/****** FB粉絲專區 ******/
.fb-tab{
    min-height: 400px;
    float: left;
    width: 100%;
    margin-right: auto;
    margin-left: auto;
    text-align: center;
    background: url(../images/fb-back_04.png);
    background-position: bottom;
    background-repeat: no-repeat;
    background-size: cover;
}


.fb-tab .bg-left .bg-right{
    min-height: 0px;
}

.fb-tab h2{
    text-align: center;
    color: #4f63a3;/*#414141 0908*/
    line-height: 45px;
    font-weight: bold;/*0908*/
}

.fb-tab .fb-page{
    margin: 10px 29%;
}
/* 這個元素內嵌在 iframes 裡，有可能造成部分 layout 變形，所以請把它隱藏 */
#fb-root {
    display: none;
}

/* 讓所有容器的寬度都變成 100% */
.fb_iframe_widget, .fb_iframe_widget span, .fb_iframe_widget span iframe[style] {
    /* width: 95% !important; */
    margin:0 9px;
}

.fb_iframe{
    width: 450px!important;
    margin:0 auto;
}
/****** 小廣告 ******/
.small-banner {
    float: left;
    width: 100%;
    margin: 50px 0;
}
.small-banner > .carousel-control {
    width: 30px;/*19px 0908*/
    height: 35px;/*30px 0908*/
    text-shadow: none;
    opacity: 1;
}
.small-banner > .carousel-control.left {
    background: url(../images/icon-prev.png) no-repeat;
    filter: none;
    top: calc(60% - 33px);/*50% 0908*/
}
.small-banner > .carousel-control.right {
    background: url(../images/icon-next.png) no-repeat;
    filter: none;
    top: calc(60% - 33px);/*50% 0908*/
}
.small-banner > .carousel-inner {
    width: 95%;
    margin: 0 auto;
}
.small-banner > .carousel-inner > .active.left, .small-banner > .carousel-inner > .prev {
    left: -16.6667%;
}
.small-banner > .carousel-inner > .active.right, .small-banner > .carousel-inner > .next {
    left: 16.6667%;
}
.small-banner > .carousel-inner > .left, .small-banner > .carousel-inner > .prev.right, .small-banner > .carousel-inner > .active {
    left: 0;
}
.small-banner > .carousel-inner > .item > .col-md-2 a {
    display: block;
    height: 80px;/*0908*/
    margin: 25px auto;
}
.small-banner > .carousel-inner > .item > .col-md-2 a img {
    width: 100%;
    height: 100%;
    border: 1px solid #cfcfcf;
}
.small-banner > .more a {
    float: right;
    margin-top: 15px;
    color: #517d88;
}


/****** Fat-Footer ******/
.fat-footer {
    float: left;
    width: 100%;
    background:#e2e7f9; /*#f5f4f4 0907*/
    position: relative;
	margin-top: -1px;
}
.fat-footer a[data-toggle=collapse] {
    position: absolute;
    top: -45px;/*-20px 0907*/
    background-color: #ffffff00;
    left: 0;
    color: #4f63a3; /* fff 0907*/
	font-size:0.9375em;
    font-weight: bold;
    padding: 25px 20px;
    background: url(../images/index-wave.png)no-repeat;
    width: 100%;
    text-align: center;
    background-size: cover;
}
#fat-footer-info {
    float: left;
    width: 100%;
}
#fat-footer-info > li {
    float: left;
    color: #323232;
    font-size:1.25em;
    font-weight: bold;
    text-align: left;
    width: calc(99% / 5);/*/6 0907*/
    margin: 30px 0;
    /* line-height: 10px; */
    padding: 10px 0px;
}
#fat-footer-info > li:last-child {
    margin-right: 0;
}
#fat-footer-info > li > a {
    color: #323232;
    /* line-height: 50px; */
}
#fat-footer-info > li > ul > li {
	font-size:0.9em;
    font-weight: normal;
    padding: 6px 0;
}
#fat-footer-info > li > ul > li > a {
    color: #323232;
}
#fat-footer-info > li > a:hover, #fat-footer-info > li > ul > li > a:hover {
    color: #C54F61;
    text-decoration: none;
}



/****** 小廣告列表頁 ******/
ul.smallbn li {
    width: calc(100%/3 - 10px);
    margin: 0 5px 10px 5px;
	text-align: center;
}
ul.smallbn li:last-child {
    margin: 0 5px 10px 5px;
}
.smallbn img {
    max-width: 100%;
}
.smallbn-title {
	font-size: 1.25em;
    font-weight: bold;
    line-height: 30px;
    padding: 5px 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}



/****** 相關圖片輪播 ******/
.list-pages {
    margin: 20px 0 30px 0;
    text-align: left;
}
.list-pages .pages-text {
	/*overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;*/
	margin: 10px 0;
}
.list-pages img {
    width: 100%;
    cursor: pointer;
    object-fit: cover;
    object-position: center;
}
.list-pages .slick-slide{
    padding: 0 10px;
}

.list-pages .slick-prev,.list-pages .slick-prev:hover,.list-pages .slick-prev:focus{
	background: url(../images/carousel-prev01.jpg)no-repeat center left!important;
    width: 35px;
    height: 42px;
	z-index: 1;
	opacity: 0.8;
	left: 0;
    top: 45%;
}
.list-pages .slick-next,.list-pages .slick-next:hover,.list-pages .slick-next:focus{
	background: url(../images/carousel-next01.jpg)no-repeat center left!important;
    width: 35px;
    height: 42px;
	z-index: 1;
	opacity: 0.8;
	right: 0;
    top: 45%;
}
.list-pages .slick-prev:before,.list-pages .slick-next:before {
	display: none;
}



/*1027新增*/
.floor .nav-tabs {
	border-bottom: 2px solid #517d88;
}
.add-info {
    margin: 20px 0;
    line-height: 30px;
	font-size:1.125em;
    font-weight: bold;
}
.floor_block {
	background-color: #ebebeb;
    padding: 15px;
    float: left;
    width: 100%;
}
.floor_block ul {
	list-style: none;
	padding: 0;
}
.floor_block ul li {
	background-color: #FFF;
    padding: 10px 15px;
	margin-bottom: 10px;
	font-weight: bold;
	font-size:1.125em;
}
.floor_block ul li span {
    padding: 10px 15px;
    text-align: center;
	border-radius: 8px;
    color: #fff;
    display: inline-block;
    margin: 0 20px;
	font-size:0.9444em;
    font-weight: bold;
    min-width: 70px;
}
.floor_block ul li .post-title {
    width: calc(100% - 120px);
    display: inline-block;
    vertical-align: middle;
}
.block_title {
	font-size:1.25em;
    text-align: center;
    margin: 0 0px 15px;
    font-weight: bold;
}

.block_title > h4 {
	font-size: 1em;
    margin: 0;
    font-weight: bold;
}

.pink_tag {
    background:#c54f61;
}
.blue_tag {
	background: #517d88;
}



/*=============tab================ */
.table {
    border: 1px solid #eef2e4;
    padding: 0;
    margin: 0;
    font-family: Verdana, "微軟正黑體", "新細明體";
}

th{
    background-color:#f78195;/*#83b5dd 0915*/
    font-weight: bold;
    font-size: 100%;
    color: #fff;
    height: 30px;
    text-align: center;
}

.table td, .table th, .table {
    padding: 8px;
}

.list_a {
    background-color: #fff;
    color: #000;
    padding: 2px;
    height: 40px;
}

.list_a:hover {
    background-color: #ffb8c7;
}

.list_a > td{
    padding: 10px;
}

.list_b {
    background-color:#ffecef;/*#c2e7ff 0915*/
    color: #000;
    padding: 2px;
    height: 40px;
}

.list_b:hover {
    background-color: #ffb8c7;
}

/*================字體大中小=============*/
#content .word a {
    display: inline-block;
    background-color: #fff;
    border:1px solid #000;
    padding: 6px 0;
    color: #000;
    line-height: 12px;
    font-weight: bold;
    width: 25px;
    text-align: center;
}

#content .word .trigger{
    display: inline-block;
    background-color: #ccc;
    padding: 6px 0;
    color: #fff;
    line-height: 12px;
    font-weight: bold;
    width: 25px;
    text-align: center;
}


/*=================home_up=============== */
#home_update {
    text-align: left;
    clear: both;
}

#home_nav {
    line-height: 35px;
    text-align: right;
    clear: both;
}

#home_nav .btn_01 {
    background-color:#da6c7f ;/*#70a9d8 0915*/
    word-break: break-word !important;
}

#home_nav a {
    color: #fff;
    text-decoration: none;
    margin: 5px;
    padding: 5px 20px;
    border-radius: 3px;
}

/* ============內頁RWD=========== */

@media (max-width: 520px){
    .home_bg h2{
        width: 50%;
    }
    

    .root {
        clear: both;
        float: left;
        padding: 2px;
        box-sizing: border-box;
        font-size: 0.75em;
        color: #6b6b6b;
        margin: 10px 0;
    }

    .root_block {
        width: 100%;
        margin: 0 auto;
        overflow: hidden;
    }

    .list_nonedisplay {
        display: none;
    }

    #l_unit {
        display: none;
    }

    #home_nav {
        line-height: 35px;
        text-align: right;
        clear: both;
        margin: 20px 20px -40px 20px;
    }

    #home_nav .btn_01 {
        margin: 0px;
    }

}



/**** 內頁CSS ****/

@media (max-width: 1199px) {
.video_block ul li {
    width: calc( 100% / 2 - 13px);
}
.contact_blocktitle~ul li {
	width: calc( 100% / 3 - 10px);
}
}

@media all and (transform-3d), all and (-webkit-transform-3d) {
.small-banner > .carousel-inner > .item.active.left, .small-banner > .carousel-inner > .item.prev {
    -webkit-transform: translate3d(-16.6667%, 0, 0);
    transform: translate3d(-16.6667%, 0, 0);
    left: 0;
}
.small-banner > .carousel-inner > .item.active.right, .small-banner > .carousel-inner > .item.next {
    -webkit-transform: translate3d(16.6667%, 0, 0);
    transform: translate3d(16.6667%, 0, 0);
    left: 0;
}
.small-banner > .carousel-inner > .item.left, .small-banner > .carousel-inner > .item.prev.right, .small-banner > .carousel-inner > .item.active {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    left: 0;
}
}

/***20200526 html5***/
.vrss_tb{
	    padding-left: 30px;
		width: 100%;
		border-spacing: 0px;
		margin: 0 auto;
}
iframe{
	border: 0
}
iframe.vJmap {
    width: 100%;
    height: 300px;
	border: 0
}
.vpd_L10{
	padding-left: 10px;
}
.vpd_L50{
	padding-left: 50px;
}
.vpd_L37{
	padding-left: 37px;
}
.post-titleV {    
	width: calc(100% - 130px);    
	display: inline-block;    
	vertical-align: middle;
}

.vJlocation_pic{
text-align: center;
padding-top: 15px;
}

.vJlocation_pic img{
width: 100%;
}

/* .fixchrome{
	margin-top: 20px;
}
@media screen and (-webkit-min-device-pixel-ratio:0) { 
.fixchrome {
    margin-top: 20px;
    border-top: none !important;
}
  } */