﻿body
{	
	color: #000000;
}

/*頂端功能*/
#divPageTop 
{
    color: #006835;
	background-color: #ddf0dd;
    font-weight:bold;
}
#divPageTop #top_menu a {
	color: #006835;
    text-decoration: none;    
}

.BannerLogo
{
	background: url('top-bg.png') no-repeat left center;	
}

/*搜尋區塊*/
#divSearch {
	background-color: rgba(240,250,252,0.8);	
}
#divSearch #divSearchBar #divSearchButton input[type="submit"]
{
	color: #FFFFFF;
	background-color: #757575;
}

/*主選單*/
#divMenu .nav > li > a:hover,
#divMenu .nav > li > a:focus {
    font-weight:bold;
    color: #006835;
    background-color: #ddf0dd;    
}
#divMenu .navbar-expand-lg {
	background-color: #006835;	
}
#divMenu .navbar-expand-lg .navbar-nav > li > a {	
    font-weight:bold;
    color: #fff;    
}

#divMenu .navbar-expand-lg .navbar-nav > li:hover > a,
#divMenu .navbar-expand-lg .navbar-nav > li:focus > a {	
    font-weight:bold;
    color: #006835;
    background-color: #ddf0dd;    
}
#divMenu .navbar-expand-lg .navbar-nav > li:hover {
	background-color: #ddf0dd;
}

#divMenu .dropdown-menu{
    background-color: #ddf0dd;
}
#divMenu .dropdown-menu > li > a {
    color: #000000;    
}
#divMenu .dropdown-menu > li > a:hover,
#divMenu .dropdown-menu > li > a:focus {
	color: #333333;
	background-color: #a9cead;
}

/*內容*/
.div-content {
    border-top: 3px solid #006835;
    border-bottom: 3px solid #006835;    
}

/* 麵包屑 Path */
#divPath .container
{
	color: #000000;
	background: #f2f5f3;
}
#divPath a {
	color: #000000;
}
#divPath a:hover,
#divPath a:focus {
	color: #000000;
}
#divPath .a_print,
#divPath .a_print:hover
{
	color: #000000;	
}

/*單元標題*/
#divSubject {
    background: url('dashline.gif') repeat-x bottom left;
}
#divSubject h1 {	
    color: #034ea1;    
}

/*回上一頁、回頁首*/
.aBack, .aBack:hover, .aBack:visited,
.aPageTop, .aPageTop:hover, .aPageTop:visited {   
    color: #FFFFFF;
    background-color: #008477;    
}


/* 內頁左側選單 */
#divLeftMenu {
    border: 1px solid #cbcbcb;
    border-bottom: 2px solid #006835;    
}
#divLeftMenu .menu_title {
	border-top: 4px solid #006835;	
	background: #ecebec;
}
#divLeftMenu .menu_title a {
	color: #006835;
}
#divLeftMenu .menu_list li a
{
	background: none;	
	color: #000000;    
}
#divLeftMenu .menu_list li:hover,
#divLeftMenu .menu_list li:focus,
#divLeftMenu .menu_list li.selected {
	background-color: #006835;
}
#divLeftMenu .menu_list li:hover a,
#divLeftMenu .menu_list li:focus a,
#divLeftMenu .menu_list li.selected a {
	color: #ffffff;
}


/*FatFooter*/
#divFatFotoer .container {
    background-color: #ddf0dd;    
}
#divFatFotoer dl dt,
#divFatFotoer dl dt a {
    color: #006835;
}
#divFatFotoer dl dd,
#divFatFotoer dl dd a {
	color: #333333;
}


/*頁尾資訊*/
#divPageBottom .container
{	
	background-color: #EAEAEA;
}
#divPageBottom .info
{	
	color: #000000;
}
#divPageBottom .info a
{
	color: #1467cd;
}

/*首頁跑馬燈*/
#divMessage {
    background-color: #e5dfff;
    color: #000000;
    font-weight: bold;
    padding: 10px 30px 10px 20px;
    position: relative;
}

    #divMessage .bx-viewport {
        background: none;
    }

        #divMessage .bx-viewport .ImporantMessage li {
            background-image: url(icon-speaker.png);
            background-repeat: no-repeat;
            padding-left: 25px;
        }

    #divMessage .bx-play-pause {
        position: absolute;
        right: 0;
        top: 10px;
        z-index: 1;
    }

        #divMessage .bx-play-pause > a.bx-toggle-button {
            width:30px;
            height:30px;
            display:block;
            background-position:center;
            background-size:cover;
        }

         #divMessage .bx-play-pause > a.is-play{
             background-image: url(bt-play.png);
         }

         #divMessage .bx-play-pause > a.is-pause{
             background-image: url(bt-pause.png);
         }



/*首頁各區塊*/
.esip-home-item {
    margin: 10px 0;
    border: solid 1px #ddf0dd;
    border-radius: 10px;
}

.esip-home-item-title {
    padding: 8px 0;
    text-align: center;
    background-color: #ddf0dd;
    color: #006835;
    font-weight: bold;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

.esip-home-item-content {
    padding: 10px 0;
}

/*首頁影音*/
.divVideos {
    margin: 10px auto;
    position:relative;
}

    .divVideos .bx-wrapper {
        margin: 0;
        padding: 0 45px;
    }

        .divVideos .bx-wrapper .bx-viewport {
            background: none;
        }

    .divVideos .bx-prev {
        display: block;
        position: absolute;
        opacity: .15;
        transition: opacity 0.3s ease;
        z-index: 9999;

    }

    .divVideos .bx-next {
        display: block;
        position: absolute;
        opacity: .15;
        transition: opacity 0.3s ease;
        z-index: 9999;
        right:0;
    }

    .divVideos:hover .bx-prev,
    .divVideos:hover .bx-next,
    .divVideos .bx-prev:focus,
    .divVideos .bx-next:focus {
        opacity: 1 !important;
    }

    .divVideos .bx-play-pause {
        position: absolute;
        left: 10px;
        top: -10px;
        z-index: 1;
    }

        .divVideos .bx-play-pause > a.bx-pause-play {
            margin: 0 5px;
            color: #59615e;
        }


    .divVideos .VideoItems {
        display: block;
        opacity: 1;
        pointer-events: auto;
        transform: translate3d(0,0,0);
    }

        .divVideos .VideoItems .VideoItem {
            width: 90%;
            margin: 0 auto;
        }

    .divVideos .ImgItem .img-shadow {
        margin: 0 auto;
        margin-bottom: 8px;
        padding: 5px;
        border-radius: 0;
        box-shadow: 0 10px 10px #c6cdcb;
    }

        .divVideos .ImgItem .img-shadow img {
            max-height: 95%;
            max-width: 95%;
            width: auto;
            height: auto;
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto;
        }

        .divVideos .ImgItem .img-shadow span {
            display: none;
        }

        .divVideos .ImgItem .img-shadow a {
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto;
            width: 100%;
            height: 100%;
            display: block;
            border-radius: 3px;
            background-position: center;
            background-size: cover;
            color: transparent;
        }

    .divVideos .ImgItem .img-desc {
        clear: both;
        color: #59615e !important;
        margin:  5px auto 0 auto;
        text-align: left;
        line-height: 140%;
        font-size: 90%;
        min-height: 1em;
        height:auto;
    }

        .divVideos .ImgItem .img-desc a {
            color: #009dec;
            text-decoration: none;
            position: static;
        }

    .divVideos .ImgItem .img-shadow a:hover .video-play-circle {
        display: none;
    }

    .divVideos .ImgItem .img-shadow .video-play-circle {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
        text-align: center;
        opacity: 0.5;
        color: #FFFFFF;
        background: #333333;
    }

        .divVideos .ImgItem .img-shadow .video-play-circle i,
        .divVideos .ImgItem .img-shadow .video-play-circle svg {
            font-size: 300%;
        }

    .divVideos .ImgItem .img-date {
        font-size: 90%;
        color: #59615e;
    }

    .divVideos .VideoItems .prev-next-button {
        position: absolute;
        top: 40%;
        display: block;
        background: none;
        border: none;
        -webkit-appearance: none;
        transform: translate3d(0,-50%,0);
        opacity: .5;
        color: #000;
        font-size: 2rem;
        padding: 5px;
    }

        .divVideos .VideoItems .prev-next-button.prev {
            z-index: 4;
            left: 0;
        }

        .divVideos .VideoItems .prev-next-button.next {
            right: 0;
        }

    .divVideos .bannerlink {
        position: relative;
        margin-right: 10px;
        margin-bottom: 10px;
        text-decoration: none;
        color: #006fa4;
    }

/*首頁入口網*/
.divPortals {
    padding: 5px;
    text-align: center;
}

    .divPortals .portal-item {
        margin: 10px;
        text-align: center;
        display: inline-block;
    }

    .divPortals a img {
        width: 100%;
    }

/*誠信指引專區*/
.divGuides {
    margin: 10px auto;
    position:relative;
}



    .divGuides .bx-prev {
        display: block;
        position: absolute;
        opacity: .15;
        transition: opacity 0.3s ease;
        z-index: 9999;

    }

    .divGuides .bx-next {
        display: block;
        position: absolute;
        opacity: .15;
        transition: opacity 0.3s ease;
        z-index: 9999;
        right:0;
    }

    .divGuides:hover .bx-prev,
    .divGuides:hover .bx-next,
    .divGuides .bx-prev:focus,
    .divGuides .bx-next:focus {
        opacity: 1 !important;
    }

    .divGuides .bx-wrapper {
        margin: 0;
        padding: 0 45px;
    }

        .divGuides .bx-wrapper .bx-viewport {
            background: none;
        }

    .divGuides .GuideItems {
        display: block;
        opacity: 1;
        pointer-events: auto;
        transform: translate3d(0,0,0);
    }

        .divGuides .GuideItems .GuideItem {
            width: 90%;
            margin: 0 auto;
        }

        .divGuides .GuideItems .GuideItem .ImgItem{
            width:150px;
            margin:0 auto;
        }

        .divGuides .GuideItems .GuideItem .ImgItem a{
            display:inline-block;
        }

        .divGuides .GuideItems .GuideItem .ImgItem a img{
            box-shadow: 0 2px 10px 0 rgb(0 0 0 / 15%);
        }

    .divGuides .ImgItem .img-desc {
        clear: both;
        width: 99%;
        color: #59615e !important;
        margin: 5px auto 0 auto;
        text-align: left;
        line-height: 140%;
        font-size: 90%;
        min-height: 1em;
        height:auto;
    }

        .divGuides .ImgItem .img-desc a {
            color: #009dec;
            text-decoration: none;
            position: static;
        }

    .divGuides .ImgItem .img-date {
        font-size: 90%;
        color: #59615e;
    }

    .divGuides .GuideItems .prev-next-button {
        position: absolute;
        top: 40%;
        display: block;
        background: none;
        border: none;
        -webkit-appearance: none;
        transform: translate3d(0,-50%,0);
        opacity: .5;
        color: #000;
        font-size: 2rem;
        padding: 5px;
    }

        .divGuides .GuideItems .prev-next-button.prev {
            z-index: 4;
            left: 0;
        }

        .divGuides .GuideItems .prev-next-button.next {
            right: 0;
        }

/*相關連結*/
#divHomeLinks 
{	
	background-color: #FFFFFF;
}
#divHomeLinks .divOuterContainer
{
	border: none;
	padding: 10px 45px;	
}
#divHomeLinks .tabs {	
	display:none;
}
#divHomeLinks .outer-links a
{
	margin-bottom: 10px;
	display: block;
}

.table-files{
    border: solid 1px #e0e0e0;
}

.table-files .th-filesText, .table-files .th-filesKind {
    display: table-cell;
    text-align: center;
    color: #333333;
    background-color: #e0f2f1;
    line-height: 200%;
    font-weight:bold;
}

.table-files .td-filesText, .table-files .td-filesKind {
    display: table-cell;
    background-color: #fff;
    padding: 5px 0px;
    line-height: 200%;
}

.detail_table {
    border: 1px solid #e0e0e0;
}
.detail_table th{
    background-color: #e0f2f1;
    color: #333333;
    white-space: nowrap;
    text-align: center;
    padding: 0.5em 0px;
}

@media print {
    
}

@media (hover: none), (pointer: coarse) {
    .divVideos .bx-prev,.divVideos .bx-next,
    .divGuides .bx-prev,.divGuides .bx-next{
        opacity: 1 !important;
    }
}

@media screen and (max-width:500px) {
    .divPortals a img {
        width: 100% !important;
    }
}

/* mobile xs */
@media screen and (max-width: 767px) {
	.BannerLogo
	{
		background: url('banner_logo.png') no-repeat left center;
		height: 110px;
	}

	/*主功能選單*/	
    #divMenu .navbar-expand-lg .navbar-nav > li > a {
        color: #FFFFFF;
    }    
	#divMenu .navbar-nav
	{	
		background-color: #006835;
	}
    #divMenu .navbar-nav .open .dropdown-menu {     
        background: #ffffff;
    }

    .divVideos .ImgItem .img-shadow {
        width: 100%;
        height: 280px;
        margin: 10px auto;
    }

    .divVideos .ImgItem .img-desc{
        width:100%;
    }

    .divVideos .ImgItem .img-shadow .video-play-circle {
        line-height: 300px;
    }

    .divPortals a img {
        width: auto;
    }       	
}

@media screen and (max-width: 991px) {
    #divMenu .navbar-nav {
        background-color: #006835;
    }
}

/* tablet sm */
@media screen and (min-width: 768px) and (max-width: 991px) {
    .BannerLogo
	{
		background: url('top-bg.png') no-repeat left center;	
	}


    .divVideos .ImgItem .img-shadow {
        width:300px;
        height: 180px;
    }

    .divVideos .ImgItem .img-desc{
        width:300px;
        margin:0 auto;
    }

    .divVideos .ImgItem .img-shadow .video-play-circle {
        line-height: 210px;
    }
}

/* desktop md */
@media screen and (min-width: 992px) and (max-width: 1170px) {
    .BannerLogo
	{
		background: url('top-bg.png') no-repeat left center;	
	}
}

/* large-desktop lg */
@media screen and (min-width: 1171px) {
    .BannerLogo
	{
		background: url('top-bg.png') no-repeat left center;	
	}
}

@media screen and (min-width:1200px) {
    .divVideos .ImgItem .img-shadow {
        height: 130px;
        width:180px;
    }

    .divVideos .ImgItem .img-desc{
        width:180px;
        margin:0 auto;
    }

    .divVideos .ImgItem .img-shadow .video-play-circle {
        line-height: 160px;
    }
}

@media screen and (min-width: 992px) and (max-width: 1199px) {
    .divVideos .ImgItem .img-shadow {
        width:250px;
        height: 180px;
    }

    .divVideos .ImgItem .img-desc{
        width:250px;
        margin:0 auto;
    }

    .divVideos .ImgItem .img-shadow .video-play-circle {
        line-height: 210px;
    }
}