html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
}

main {
    display: block;
}

body {
    font: 62.5%/1  "微軟正黑體", Microsoft JhengHei, Arial, Helvetica, sans-serif  ;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    text-size-adjust: 100%;
	transition:all 0.3s;
	letter-spacing: 0.14em;
	word-spacing:0.16rem ;
}

details{ margin: 1em 0}
details summary{ font-weight: bold; color: rgb(50, 135, 44); cursor: pointer;}
details summary .open{display: none}
details summary .close{display: inline}
details[open] summary .open{display: inline}
details[open] summary .close{display: none}
details summary:hover, details summary:focus{ color: #004CA7}


body.font-size-s {
    font-size: 56.3%;
}

body.font-size-l {
    font-size: 68.8%;
}



.over-x{
	width: 100%;
	overflow-x: auto;
}

.noscript{
	float:left; width:100%; font-size:1.5em; text-align:center; line-height:120%; padding:10px 0;
}
a {
    color: #1b6395;
    text-decoration: none;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

a:hover,
a:focus {
    text-decoration: none;
    color:#32872c;
}

a,
button,
textarea,
select,
input {
    -webkit-appearance: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
}

a:focus,
button:focus,
textarea:focus,
select:focus,
input:focus{ outline: 2px dotted #FD0004}

img {
    border: none;
    vertical-align: middle;
    max-width: 100%;
    height: auto;
}

sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}

sup {
    top: -0.5em;
}

sub {
    bottom: -0.25em;
}
.zoomBox{
	position:relative;
	overflow:hidden;
	background: #fff;
	/*background-image: url(../images/no-pic.jpg);
	background-position: center;
	background-size: cover*/
}
	
.zoomBox .zoom-pic {
 	position:absolute;
	width:100%;
	height:100%;
	transition:all 0.5s;
	/*background-position:center;
	background-size: cover;*/
	left: 0; top:0;
 	object-fit: cover;       /* 核心！類似 background-size: cover */
    object-position: center; /* 圖片置中 */
}

a:hover .zoomBox .zoom-pic, a:focus .zoomBox .zoom-pic, .zoomBox:hover .zoom-pic{
	transform:scale(1.1)}

/** Layout **/
#wrapper {
    position: relative;
    float: left;
    width: 100%;
    margin: 0 auto;
    padding: 0;
    overflow: hidden;
}
 

.ellipsis-1 {
    position: absolute;
    bottom: 0;
    right: 0;
}

.fill {
    position: absolute;
    height: 100%;
    width: 100%;
}

.ellipsis {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.ellipsis-2,
.ellipsis-3,
.ellipsis-4,
.ellipsis-5,
.ellipsis-6,
.ellipsis-7 {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
}

.ellipsis-2 {
    -webkit-line-clamp: 2 !important;
}

.ellipsis-3 {
    -webkit-line-clamp: 3 !important;
}

.ellipsis-4 {
    -webkit-line-clamp: 4 !important;
}

.ellipsis-5 {
    -webkit-line-clamp: 5 !important;
}

.ellipsis-6 {
    -webkit-line-clamp: 6 !important;
}

.ellipsis-7 {
    -webkit-line-clamp: 7 !important;
}


.sr-only,
.sr-only-focusable,
.hide-panel {
    position: fixed;
    width: 1px;
    height: 1px;
    color: #000;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
	
}

.sr-only-focusable:active,
.sr-only-focusable:focus {
    /*position: static;*/
    font-size: 0.8rem;
}
.sr-only-focusable:active,
.sr-only-focusable:focus {
 	z-index:1000000;
	left:0;
	top:0;
	width: auto;
	display: inline-block;
 	padding:6px;
	background-color:rgba(0,0,0,0.6);;
    height: auto;
	font-size:1em;
    margin: 0;
    overflow: visible;
    clip: auto;
	color:#fff;
	font-weight:bold
 }
.acKey,
.acKey a {
    color: transparent;
    font-size: 0.8rem;
}

.acKey:hover,
.acKey:focus,
.acKey a:hover,
.acKey a:focus {
    color: #32872C;
}

.container {
    width: 100%;
    margin: 0 auto;
}

.row {
    margin-right: -10px;
    margin-left: -10px;
}

.row2 {
    margin-right: 10px;
    margin-left: 10px;
}

.remark {
    color: #C30;
    padding-top: 5px;
    margin-bottom: -5px;
    padding-left: 10px;
    box-sizing: border-box
}

.bbfont {
    font-family: 微軟雅黑;
    font-weight: bold;
}

.left-part {
    float: left;
}

.right-part {
    float: right;
}

.container {
    width: 100%;
    max-width: 1300px;
    margin: 0 auto;
    padding: 0;
}

.center{
	text-align:center;}

.fff {
    color: #fff;
}

.font-black {
    color: #000;
}

.font-blue {
    color: #00818f;
}

.font-green {
    color: #288722;
}

.font-yellow {
    color: #a06c13;
}

.font-orange {
    color: #c75300;
}

.font-red {
    color: #D82B12;
}

.font-gray {
    color: #666
}

@media screen and (max-width:990px) {
    .pc-mode {
        display: none !important;
    }

    .container {
        width: calc(100% - 120px);
    }
}

@media screen and (max-width:768px) {
 
    .container {
        width: calc(100% - 60px);
    }
}

@media screen and (min-width:991px) {
    .sp-mode {
        display: none !important;
    }

    .container {
        width: calc(100% - 120px);
    }
}

@media screen and (min-width:1300px) {
    .container {
        max-width: 1300px;
    }
}

/** header **/
#header {
    width: 100%;
    margin: 0 auto;
    background-color: #fff;
    position: fixed;
	left: 0;
	top: 0;
    z-index: 9;
	box-sizing:border-box;
	transition: all 0.5s
}
 



@media screen and (min-width:991px) {
	.fix_down #header:after{
		content: ""; display: block; width: 100%; height: 105px; position: absolute; top: 0; left: 0; z-index: 0;
		background: linear-gradient(to bottom,  rgba(0,36,0,0.25) 0%,rgba(0,36,0,0) 100%); 
 	}
	.fix_down #topHead .logo a {
        width: 322px;
        height: 105px;
        background-size: auto 105px;
    }
}

 

#header > h1 {
    position: fixed;
    width: 1px;
    height: 1px;
    color: #000;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
}

#header.sp-fix {
     left: 0;
    top: 0;
    z-index: 999;
    background: #FFF;
    -webkit-box-shadow: 0 2px 7px rgba(0%, 0%, 0%, 0.3);
    -moz-box-shadow: 0 2px 7px rgba(0%, 0%, 0%, 0.3);
    box-shadow: 0 2px 7px rgba(0%, 0%, 0%, 0.3);
}

#header .hdContainer {
    width: 100%;
    margin: 0 auto;
    padding: 0;
    box-sizing: border-box;
	position:relative;
	max-width:1300px;
}

#navMenu .container {
    max-width: none;
}

/* ----- topHead ----- */
#topHead {
    position: absolute;
    width: 100%; height: 100px;
 	height:55px;
 }

#topHead .logo a {
    display: block;
    width: 27vw;
    float: left;
    position: absolute;
    height: 8vw;
    background: url(../images/logo.png) left top no-repeat;
    background-size: auto 8vw;
    left: 0;
    top: 0;
    z-index: 3;
	
}
 

@media screen and (max-width: 990px) {
    #wrapper {
        padding-top:0;
    }
 
 
}

/* ----- addon ----- */
.addon {
    float: right;
    width: 100%;
 }

.addon > ul {
    float: right;
    list-style: none;
	position:relative;
	z-index:1
	
}

.addon > ul > li {
    float: left;
    font-size: 1.5em;
    text-align: left;
	position:relative;
}
.addon > ul > li .h_bx{ display:block}
 
.addon > ul > li > a {
    color: #fff;
    display: inline-block;
	padding:0 6px;
	text-shadow: 0 0 2px rgba(0,0,0,0.3);
	font-weight:bold;
 }
 
.addon > ul > li > a:hover span,
.addon > ul > li > a:focus span {
    font-size: 100%;
 	color:#FF9;
	text-decoration:underline;
}
 

.addon > ul > li > a.acKey {
    color: transparent;
    margin: 0;
	text-shadow:none !important;
}

.addon > ul > li > a:hover,
.addon > ul > li > a:focus {
    color: #ff8000;
}

.addon .textsize a {
    display: inline-block;
    border: 1px solid #666;
    margin: 0 1px 0 0;
    border-radius: 50%;
     vertical-align: top;
}

.addon .textsize a i {
    display: block;
    width: 30px;
    height: 30px;
    font-size: 0;
    vertical-align: top;
    border-radius: 50%;
    box-sizing: border-box;
    background-repeat: no-repeat;
    background-position: 0 top;
    background-size: 100% auto;
}

.addon .textsize a.ts-on i {
    background-color: #666;
    background-position: 0 bottom
}

.addon .textsize a:hover,
.addon .textsize a:focus,
.addon .textsize a:active {
    background: #F4F4F4;
}

.addon .textsize a.ts-on {
    background: #666;
}
 
 .addon .textsize a i.sizeS {
    background-image: url(../images/home/top_head_font_s.svg);
    *background-image: url(../images/home/top_head_font_s.png);

}

.addon .textsize a i.sizeM {
    background-image: url(../images/home/top_head_font_m.svg);
    *background-image: url(../images/home/top_head_font_m.png);
}

.addon .textsize a i.sizeL {
    background-image: url(../images/home/top_head_font_L.svg);
    *background-image: url(../images/home/top_head_font_L.png);
}


@media screen and (min-width: 991px) {
	.addon { 
		position: absolute;
		left: 0;
		z-index: 2;
		height: 40px;
		width: calc(100% - 94px);
		border-bottom-right-radius: 100px;
		background-color: #fff;
		box-sizing: border-box;
		text-align: right;
		padding-right: 20px;
		padding-top: 6px;
		font-family: arial
 	}
	.addon > ul#addonLink{ display: inline-block}	
	.addon > ul#addonLink > li{ margin-left:6px; font-size: 1.4em;}
 	.addon > ul#addonLink > li > a{
		color: #666;
 		font-family: arial;
		font-weight: normal;
		padding :7px 20px 7px 40px;
		border-radius: 15px;
		display:inline-block;
 		background-position:14px  center; 
		background-repeat:no-repeat; 
		background-size: 1.1em;
		line-height:1;
		text-shadow: none
		}
	
	.addon > ul#addonLink > li > a#ti_1{background-image:url(../images/topicon_home.svg);}
	.addon > ul#addonLink > li > a#ti_2{background-image: url(../images/topicon_sitemap.svg);}
	.addon > ul#addonLink > li > a#ti_3{background-image: url(../images/topicon_contact.svg);}
	.addon > ul#addonLink > li > a#ti_4{background-image: url(../images/topicon_project.svg);}
	.addon > ul#addonLink > li > a.on{color: #1b6395}
	.addon > ul#addonLink > li > a#ti_1.on{background-image:url(../images/topicon_home-on.svg); }
	.addon > ul#addonLink > li > a#ti_2.on{background-image:url(../images/topicon_sitemap-on.svg); }
	.addon > ul#addonLink > li > a#ti_3.on{background-image: url(../images/topicon_contact-on.svg);}
	.addon > ul#addonLink > li > a#ti_4.on{background-image: url(../images/topicon_project-on.svg);}
	
	.addon > ul#addonLink > li > a#ti_4{ background-color: #1b6395; color: #fff; font-weight: bold; border-top-right-radius: 0; border-bottom-right-radius: 50px;background-image: url( ../images/topicon_project-w.svg);}
	.addon > ul#addonLink > li > a#ti_4:hover, .addon > ul#addonLink > li > a#ti_4:focus{ background-color: #d3eda6; color: #000; background-image: url(../images/topicon_project.svg);  }
	

	.addon > ul#addonLink > li > a:hover, .addon > ul#addonLink > li > a:focus{ color:#36942f; font-weight: bold}	
	.addon > ul > li > a.acKey{
		border:0;}
	.addon .acKey{ position:absolute; left:-15px; top:8px;}		
	.addon > ul > li > a{ position:relative;}
 
}


#addon-sp {
    float: left;
    width: 100%;
}

#addon-sp > ul {
    float: left;
    width: 100%;
    list-style: none;
}

#addon-sp > ul > li {
    float: left;
    width: calc(100% / 2);
}

#addon-sp > ul > li span {
    display: none;
}



#addon-sp > ul > li > a {
    float: left;
    width: 100%;
    height: 100%;
    color: #FFF;
    font-size: 1.5em;
    text-align: center;
    vertical-align: middle;
    padding: 15px 0;
    background: #666;
    box-sizing: border-box;
    border-right: 1px solid #333;
    border-bottom: 1px solid #333;
    border-top: 1px solid rgba(255, 255, 255, 0.3);
	border-left: 1px solid rgba(255, 255, 255, 0.3);
}


@media screen and (max-width: 990px) {
    #addon-sp > ul > li span {
        display: inline-block;
    }
#addon-sp > ul > li.ss{ width:40px}
#addon-sp > ul > li.ss a{
	background-color:#444}
	
	
	#addon-sp > ul > li > a#ti_4{ background-color:#444 }
	#addon-sp > ul > li > a#ti_4:hover, #addon-sp > ul > li > a#ti_4:focus{ background-color: #000}
 
	
	
}

#addon-sp > ul > li > a:hover,
#addon-sp > ul > li >  a:focus {
    background: #000;
}


@media screen and (max-width: 320px) {
    #addon-sp > ul > li >  a {
        font-size: 1.3em;
    }
}

/* ----- target-menu ----- */
#target-menu-sp {
    float: left;
    width: 100%;
    background: #FFF;
}

@media screen and (min-width: 991px) {
    #target-menu {
        display: inherit;
        float: left;
        width: 100%;
        position: relative;
        z-index: 3;
    }
}
@media screen and (min-width: 768px) {
	#addon-sp > ul > li {
    float: left;
    width: calc(100% / 4);
}
}
/* ----- searchBtn ----- */
.searchBtn .lookBtn {
    position: absolute;
    top: 7.5px;
    right: 50px;
    z-index: 2;
 
}

.searchBtn .lookBtn a {
     text-align: center;
	text-indent: -9999em;
	border-radius: 50%
}


/*開啟*/
.searchBtn .lookBtn a span.open-search{ background:rgba(0,0,0,0.5) url(../images/search/header_search.svg) no-repeat 50% 50%; display: block}
 
.searchBtn:hover .lookBtn a span.open-search,
.searchBtn .lookBtn a:hover span.open-search,
.searchBtn .lookBtn a:focus span.open-search {background:rgba(0,0,0,0.8) url(../images/search/header_search.svg) no-repeat 50% 50%;}
/*關閉*/


.searchBtn .lookBtn a span.close-search{ background:rgba(0,0,0,0.5)  url(../images/search/header_search_X.svg) no-repeat 50% 50%; }

/*點擊顯示*/
.searchBtn .lookBtn a span.open-search{ display: block}
.searchBtn .lookBtn a span.close-search{ display: none }
.searchBtn .lookBtn a.open span.open-search{ display: none !important}
.searchBtn .lookBtn a.open span.close-search{ display: block !important}

 
.searchBtn:hover .lookBtn a span.close-search,
.searchBtn .lookBtn a:hover span.close-search,
.searchBtn .lookBtn a:focus span.close-search {background:rgba(0,0,0,0.8)  url(../images/search/header_search_X.svg) no-repeat 50% 50%;}

@media screen and (max-width: 991px) {
	.searchBtn .lookBtn a span.open-search{ background:#32872c  url(../images/search/header_search.svg) no-repeat 50% 50%;}
	
}
@media screen and (min-width: 991px) {
   .searchBtn .lookBtn {
     top: 23px;
    right: 20px;
 }
}
.searchBtn .lookBtn a span {
        float: left;
        display: block;
        width: 60px;
        height: 60px;
        font-size: 0;
        text-align: center;
		border-radius: 50%
    }


/* ----- searchZone ----- */
.searchZone {
	position: absolute;
	top:102px;
	right: 0;
	z-index:2;
	width: 35%;
	text-align: center;	
	margin: 0 auto;
	background:#D3EDA6 ;backdrop-filter: blur(5px);
	box-sizing: border-box;
	padding-left: 40px; padding-right: 30px;
	border-bottom-left-radius: 150px;
	display: none;
}

.searchZone .container{
	width:100%; max-width:100%}
.searchZone .search {
 	width: 100%;
	text-align: center;	
	margin: 0 auto;
}
.searchZone.open .search {
	display: block;
 
}


.searchZone .box {
	position:relative;
	width: 100%;
	padding:15px 50px 15px  0;
 	background:none;
	box-sizing:border-box;
	-webkit-transition: .3s;
		    transition: .3s;
	-webkit-transition: all 200ms ease;
			transition: all 200ms ease;
}
.searchZone .keyWd {
	width: 100%;
	color:#fff100;
	font-size:15px;
	line-height:125%;
	text-align:left;
	padding:0 0 20px 5px;
	box-sizing:border-box;
}
.searchZone .keyWd a {
	color:#FFF;
	text-decoration:none;
	margin:0 5px 0 0;
}

.searchZone .keyWd a:hover, .searchZone .keyWd a:focus{
	color:#fff100}
.searchZone .box a.advanced{
	
 	height: 40px;
	width: 40px;
	position: absolute;
	border-radius: 50%;
	text-indent: -9999em;
 	background-color: #5AA654;
	background-image: url(../images/search/header_search_X.svg);
	transform: rotate(45deg);
	background-repeat: no-repeat;
	background-size: contain;
	overflow: hidden;
 	right: 0;
	top: 15px
	
}

.searchZone .box a.advanced:hover, .searchZone .box a.advanced:focus{ background-color: #000}
.searchZone .keyWd a.advanced {
	float:right;
	color:#fff;
	font-size:15px;
	line-height:15px;
	text-align:center;
	vertical-align:middle;
	text-decoration:none;
	padding:5px 20px;
	border-radius: 10px;
	background: none;
	border:1px solid #fff;
	box-sizing:border-box;
}

.searchZone .keyWd a.advanced:hover, .searchZone .keyWd a.advanced:focus{
	background-color:#fff;
	color:#000;}

.searchZone .search-txt {
	width: 100%;
	color:#666;
	font-family:"微軟正黑體", Microsoft JhengHei, Helvetica, sans-serif;
	font-size:18px;
	line-height:40px;
	padding:0 55px 0 30px;
	border-radius: 60px;
	background-color: #fff;
	border:none;	
 	box-sizing:border-box;
 }
.searchZone .search-txt:focus, .searchZone .search-txt:hover{
	background-color:#f9ffc0}
.searchZone .search-txt[placeholder]{ color: #666; }
.searchZone .search-txt::-webkit-input-placeholder { color: #666; }
.searchZone .search-txt:-moz-placeholder { color: #666; }
.searchZone .search-txt::-moz-placeholder { color: #666; }
.searchZone .search-txt:-ms-input-placeholder { color: #666;}
 

.searchZone .search-btn {
	position:absolute;
	top:15px;
	right:50px;
	display:block;
	width:40px;
	height:40px;
	border-radius:50%;
	background:#5AA654 url(../images/search/header_search.svg) no-repeat 50% 50%;
	background-size: cover;
	margin: 0;		
	border:none;
	text-indent:-9999px;
	cursor:pointer;
}
.searchZone .search-btn:hover, .searchZone .search-btn:focus{
	background-color:#000}
/* ----- keyWd ----- */

.searchZone .keyWd {
    width: 100%;
    color: #fff100;
    font-size: 1.5em;
    line-height: 125%;
    text-align: left;
    padding: 0 0 20px 5px;
    box-sizing: border-box;
	font-weight:bold;
}

.searchZone .keyWd a {
    color: #FFF;
    text-decoration: none;
    margin: 0 5px 0 0;
	font-weight:bold;
	
}

.searchZone .keyWd a:hover,
.searchZone .keyWd a:focus {
    color: #fff100;
}

.searchZone .keyWd a.advanced {
    float: right;
    color: #fff;
    font-size: 1em;
    line-height: 15px;
    text-align: center;
    vertical-align: middle;
    text-decoration: none;
    padding: 5px;
    background: none;
    border: 1px solid #fff;
    box-sizing: border-box;
    margin-top: 8px;
}
 
.searchZone .keyWd a.advanced:hover,
.searchZone .keyWd a.advanced:focus {
    background-color: #fff;
    color: #000;
}

 	
@media screen and (max-width: 1434px) {
	#topHead .logo a {
		width: 322px;
        height: 105px;
        background-size: auto 105px;
	}	
}

@media screen and (max-width: 1200px) {
.searchZone:after{
	height:8vmin}	
	
	}

@media screen and (max-width: 990px) {
	
	#topHead { background: #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);}
	#topHead .logo a{
		width: 195px;
		height: 55px;
		background: url(../images/logo-s.png) 10px center no-repeat;
		background-size: 85%;
	}
	.searchZone{
		top:100%;
		border-radius: 0;
		padding: 0 15px;
		width: 100%;
		box-shadow: 0 5px 5px rgba(0,0,0,0.4)
 		
	}
	.searchBtn .lookBtn a span {
		display: block;
		width: 40px;
		height: 40px;
		border-radius: 50%
	}
}


@media screen and (max-width: 800px) {
	#snavs{}
	.searchZone:after{ height:55px;}
}
	
@media screen and (max-width: 650px){
	
	.searchZone:after{ height:10vw;}
	.searchBtn .lookBtn a:focus{ outline: none !important }
}	
	
	
@media screen and (max-width: 480px) {
	
	.searchZone:after{ height:37px;}
 
    .searchZone .box {
        width: 100% ;
    }

    .searchZone .search-txt {
 
        padding: 0 45px 0 10px;
    }
 

    .searchZone .keyWd a {
        width: 100%;
        margin-right: 0;
    }

    .searchZone .keyWd a.advanced {
        margin-top: 10px;
        background: #fff;
        color: #000;
    }

    .searchZone .keyWd a.advanced:hover,
    .searchZone .keyWd a.advanced:focus {
        color: #fff;
        background: #000;
        border: 1px solid #fff;
    }
}
 
@media screen and (max-width: 420px) {

	.container { width: calc(100% - 40px); }
    .searchBtn .lookBtn a span {
        width: 40px;
        height: 40px;
    }
}

@media screen and (min-width: 991px) {

    .searchZone .search {
        padding:0 10px;
    }
}

 
 
/** main **/
#main {
    width: 100%;
    margin: 0 auto;
}



/** footer **/
#footer {
    position: relative;
    width: 100%;
    margin: 0 auto;
    padding-top: 60px;
	background-color:#d3eda6;
	color:#4d4d4d;
}

#footer:before{
	content: "";
	display: block;
	position: absolute;
	left: 0; top: 1px;
	transform: translateY(-100%);
	width: 100%;
	height: 0;
	padding-bottom: 4vw;
	background: url(../images/sitemap-top.png) center bottom no-repeat; background-size: 100% 100%;
}


#footer .company{float:left;width:305px;}

#footer .fotlogo{ display:block; opacity:0.5; margin-bottom:30px;}
#footer .fotlogo:hover, #footer .fotlogo:focus{ opacity:1;}

#footer .com_li{ display:block; list-style:none; padding:0;}

#footer .com_li li{ display:block; margin-bottom:7px; line-height:27px; font-weight:bold; font-size:1.4em; padding-left:33px; position:relative; background-position:left top; background-repeat:no-repeat; background-size:27px;}
#footer .com_li li a{ color:#fff;}
#footer .com_li li a:hover{ text-decoration:underline;}
#footer .com_li li a:hover, #footer .com_li li a:focus{ color:#F99 !important; text-decoration:underline;}
#footer .com_li li.ic1{ background-image: url(../images/footer-com-li-1.png);}
#footer .com_li li.ic2{ background-image: url(../images/footer-com-li-2.png);}
#footer .com_li li.ic3{ background-image: url(../images/footer-com-li-3.png);}
#footer .com_li li.ic4{ background-image: url(../images/footer-com-li-4.png);}


#footer .fat-nav{float:right;width:calc(100% - 320px); box-sizing:border-box; display:flex; justify-content:flex-end; list-style:none;-webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;}



#footer .fat-nav > li{ display:block;   padding-left:15px; width:calc(100% / 7)}
#footer .fat-nav > li:nth-child(5){ min-width:160px;}
#footer .fat-nav > li a{ display:block; color:#fff; line-height:1.5; font-weight: bold;}
#footer .fat-nav > li a:hover, #footer .fat-nav > li a:focus{ text-decoration:underline;} 

#footer .fat-nav > li > a{ font-size:2em; margin-bottom:10px;}
#footer .fat-nav > li > ul{ display:block; padding:0; list-style:none;}
#footer .fat-nav > li > ul > li{ display:block; margin-bottom:6px;}
#footer .fat-nav > li > ul > li > a{ display:block; font-size:1.5em; padding-left:1.2em; position:relative; }
#footer .fat-nav > li > ul > li > a:before{ content:''; display:block; width:15px; height:15px; opacity:0.5; position:absolute; left:0; top:2px; background:url(../images/footer-list-dots.svg) center 60% no-repeat; background-size:contain;}


.F_ESCI{ display: flex; justify-content: space-between; box-sizing: border-box; padding: 20px 30px; background: rgba(255,255,255,0.7); border-radius: 30px; margin-bottom: 30px;}
.F_ESCI dt{ width: 213px; font-size: 2.5em; font-weight: bold; color: #32872c; padding-left: 45px; position: relative; box-sizing: border-box}
.F_ESCI dt:before{ content: ""; display: block; width: 33.5px; height: 28.5px; position: absolute; left: 0; top: -2px;   background: url(../images/footer-tit-ico.svg) center no-repeat; background-size: contain;}
.F_ESCI dt:after{ content: ""; display: inline-block; width: 6px; height: 1em; margin-left: 9px; background: url(../images/footer-tit-ico-next.svg) center no-repeat; background-size: contain; vertical-align: middle}



.F_ESCI dd{
	width: calc(100% - 158px);
	display: block;
	text-align: left;
	font-size: 1.7em;
	font-family: arial;
	border-left: 1px dashed #32872c;
	 
}
.F_ESCI dd a{ display: inline-block; color: #4d4d4d; padding: 0 11px; border-right: 1px dashed #32872c; margin: 5px 0;  box-sizing: border-box}

.F_ESCI dd a:hover, .F_ESCI dd a:focus{ color: #32872c; transform: translateY(-3px)}

#footer .Project{ display: inline-block; font-size:1.7em; color: #000; font-family: arial; padding-left:23px; line-height: 1.5; background: url(../images/comTitle.svg) left center no-repeat; background-size: 18px; margin-left: 25px}

#footer .Project:hover, #footer .Project:focus{ color:#32872c; font-weight: bold}

@media screen and (max-width:768px) {
	.F_ESCI{ display: block;  }
	.F_ESCI dt, .F_ESCI dd{ width: 100%; }
	.F_ESCI dt{ margin-bottom: 15px;}
	.F_ESCI dd{ font-size: 1.55em}
}

@media screen and (max-width:600px) {
	.F_ESCI dd{ border-left: 0;}
	.F_ESCI dd a{ display: block; width: 100%; border-right: 0; padding: 10px 0; border-top: 1px dashed #32872c; padding-right: 20px; background: url(../images/footer-tit-ico-next.svg) calc(100% - 10px) center; background-size: 5.5px auto; background-repeat: no-repeat; margin: 0}
	.F_ESCI dd a:hover, .F_ESCI dd a:focus{ transform: none; font-weight: bold}
	.F_ESCI dt{ padding-right: 40px}
	.F_ESCI dt:after{ 
		position: absolute;
        right: 22px;
        top: 5px;
        transform: rotate(90deg) translateY(-50%);	}
}

@media screen and (max-width:1425px) {
#footer .fat-nav > li{
	width:calc(100% / 3.5); min-width:none; margin-bottom:15px;}	
 	
	}
/* ----- fatfooter ----- */
.fatfooter {
    width: 100%;
    margin: 0 auto;
}

.fatfooter .fat-nav {
    width: 100%;
    padding: 0;
    margin: 0px auto 40px 0;
    overflow: hidden;
}
.fatfooter .fat-nav a{ color:#000}

.fatfooter .fat-nav ul{ list-style:none;}

.fatfooter .fat-nav > ul {
    float: left;
    width: calc(100% + 20px);
    list-style: none;
    margin: 0px -10px;
}

.fatfooter .fat-nav > ul > li {
    float: left;
    width: calc(100% / 7);
    padding: 0 10px;
    box-sizing: border-box;
}
 /*LV1*/
.fatfooter .fat-nav > ul > li > a {
     font-size: 2em;
    width: 100%;
    display: block;
    margin-bottom: 28px;
    font-weight: bold;
	color:#000;
	position:relative;
}

.fatfooter .fat-nav > ul > li > a:after{
	content:'';
	display:block;
	width:22px; height:3px; background:#8ad5dd; position:absolute; left:0; bottom:-12px;}

.fatfooter .fat-nav > ul > li > a:hover,
.fatfooter .fat-nav > ul > li > a:focus {
 	color:#32aac5;
}

.fatfooter .fat-nav > ul > li > ul {
    list-style: none;
}

.fatfooter .fat-nav > ul > li > ul > li {
    margin-top: 10px; position:relative
}
 
@media screen and (max-width:1350px) {
	#footer .company{width:235px;}
	#footer .fat-nav{width:calc(100% - 235px)}
	/*#footer .fat-nav > li { margin-left: 15px;}*/
 }
@media screen and (max-width:1100px) {
 	#footer .fat-nav{width:calc(100% - 300px)}	
	
#footer .fat-nav > li > ul{ display:none}
#footer .fat-nav > li:hover > ul{ display:block;}
#footer .fat-nav{flex-wrap:  wrap }
#footer .fat-nav > li{ width:calc(33.3% - 16px);}	
	}
	
@media screen and (max-width:820px) {
#footer .fat-nav > li {
    width: calc(50% - 17px);
}
#footer .fat-nav {
    width: calc(100% - 268px);
}		
}
@media screen and (max-width:643px) {
#footer .fat-nav > li {
    width: calc(100% - 17px); margin-bottom:10px;
}
#footer .fat-nav > li > a {
    font-size: 1.7em;
    margin-bottom: 6px;
}	
}
/* ----- copyright ----- */
.copyright {
    width: 100%;
    color: #fff;
    background: #fff;
    color: #4d4d4d;
    position: relative;
    margin-top: 95px;
    padding-bottom: 40px;
	padding-top: 15px
}

.copyright:before{
	content:'';
	display:block;
	width:100%;
	height:0;
	padding-bottom: 4vw;
	position:absolute;
	top:1px; left:0;
	transform: translateY(-100%);	
	background:url(../images/copt-top-w.png) center bottom repeat-x;
	background-size: 100% 100%;
	z-index:1}



.copyright .container {
    position: relative;
}

 
.copyright dl .box-L{ float: left; width: calc(100% - 300px)} 

.copyright dl .box-R{ float: right; margin-top: 60px} 

.copyright dl .box-L .f_logo, .copyright dl .box-L .dot_li{	display: inline-block}

.copyright dl .box-L .f_logo{ margin-right: 4vw}

.copyright dl .box-L .dot_li{ list-style: none; vertical-align: bottom}
.copyright dl .box-L .dot_li li{ display: block; font-family: arial; color: #4d4d4d ; line-height: 1.5; padding-left: 20px; background: url(../images/comTitle.svg) left top no-repeat; background-size: 14px; margin-top: 12px}

.copyright dl .box-L .dot_li a{color: #4d4d4d ;}
.copyright dl .box-L .dot_li a:hover, .copyright dl .box-L .dot_li a:focus{ color:#32872c; font-weight: bold}

.copyright dl .box-R a{ display: inline-block;}

.copyright dl .box-R a:hover, .copyright dl .box-R a:focus, .copyright dl .box-L .f_logo:hover, .copyright dl .box-L .f_logo:focus{ transform: translateY(-5px)}

#footer .last {
    color:  #fff;
    font-size: 1.5em;
    padding: 15px 0;
	background-color: #32872c
}

#footer .last a { color: #FFF; display:inline-block}
#footer .last .left{ float:left}
#footer .last .right{ float:right}
#footer .last a:hover,
#footer .last a:focus {
    text-decoration: underline; 
}


 
 
@media screen and (max-width: 1200px) {
    #footer .last .right_info, #footer .last .rwd_icon {
        float: none;
		display:block;
		text-align:center;
		margin:8px 0;
    }
	#footer .last{
		padding:11px 0;}
	
}
/*share+gotop*/
#qMenu {
    position: fixed;
    display: none;
    right: 0px;
    bottom: 30px;
    margin-top: -105px;
    z-index: 1111;
    cursor: pointer;
	background: #1b6395;
	padding: 20px 10px;
	border-bottom-left-radius:40px;
	border-top-left-radius: 40px;
}
 
#qMenu ul {
    display: block;
    width: 40px;
	list-style: none;
}
#qMenu ul li{
	margin:3px 0;}
	
#qMenu ul li,
#qMenu ul li a {
    display: block;
    width: 40px;
    height: 40px;
    border-radius: 100%;
    padding: 0;
	overflow: hidden
}
#qMenu ul li a {
    background-position: center;
    background-repeat: no-repeat;
	text-indent:-9999em;
    background-size: contain;
	background-color: rgba(0,0,0,0.15);
	box-sizing: border-box;
}

#qMenu ul li a:focus{ box-shadow: 0 0 5px rgba(255,255,255,0.6)} 

#qMenu ul li a.icon-print {
    background-image: url(../images/social/share-print.svg);
  }

#qMenu ul li a.icon-mail {
    background-image: url(../images/social/share-mail.svg);
  }

#qMenu ul li a.icon-fb {
    background-image: url(../images/social/share-fb.svg);
  }

#qMenu ul li a.icon-line {
    background-image: url(../images/social/share-line.svg);
  }
 
	
#qMenu ul li a.icon-tt {
    background-image: url(../images/social/share-TT.svg);
  }

#qMenu ul li a#goTop {
    background-image: url(../images/social/share-gotop.svg);
 }
#qMenu ul li a#goTop:hover, #qMenu ul li a#goTop:focus {
     background-color:#000;
}

#qMenu ul li a#share_btn {
    background-image: url(../images/social/share-share.svg);
 	position:relative;
}

 
#qMenu ul li a#share_btn .close{ display: none}
#qMenu ul li a#share_btn .open{ display: block}
#qMenu ul li a#share_btn.open .close{ display: block}
#qMenu ul li a#share_btn.open .open{ display: none}
 
#qMenu ul li a#share_btn.open{
 	text-align:center;
	 background-color: rgba(0, 0, 0, 0.5);
	background-image: url(../images/social/share-close.svg)
   	}

#qMenu ul li a#share_btn.open:hover, #qMenu ul li a#share_btn.open:focus{ background-color: #000}
 
	
#qMenu ul li a:hover,
#qMenu ul li a:focus {
    background-color: rgba(0, 0, 0, 0.7);
}

 #footer .last .right.visited{position: relative;}
#footer .last .right.visited:before{ 
	content: ""; display: block; width: 1.56em; height: 1.25em; position: absolute; left: -1.8em; top: 50%; 
	transform: translateY(-50%); opacity: 0.5; background: url(../images/footer-ico-visited.svg) center no-repeat ; 
	background-size: contain}


#footer #s_ad{ padding: 30px 0; background: #f2f2f2; box-sizing: border-box;}

#footer #s_ad .ad_sw{ display: flex; justify-content: space-between;}

#footer #s_ad .ad_sw span{ display: inline-block; }
#footer #s_ad .ad_sw span img{ height: 60px; width: auto; border-radius: 30px}

 
@media screen and (max-width: 990px) {
	#footer .last .right.visited:before{ display: none}
	#footer {
		padding-bottom: 0;
	}
	#footer .last .left, #footer .last .right{
		width:100%; text-align:center; line-height:1.5}

	#footer .last .left{ margin-bottom:10px;}	
}
 
@media screen and (max-width: 875px) {
	.copyright dl .box-L{ width: 100%}
	.copyright dl .box-R{ float: left; width: 100%; margin-top: 25px;}
}

@media screen and (max-width: 800px) {
	#footer #s_ad .ad_sw span{ display: block; width: 33.33%; padding: 0 5px; box-sizing: border-box;}
	#footer #s_ad .ad_sw span img{ width: 100%; height: auto}
	
}

@media screen and (max-width: 600px) {
	#footer{ padding-top: 40px}
	#footer .last{  padding-top:20px}
	.copyright dl .box-L .f_logo{ 
		margin: 0 auto 30px auto;
        display: block;
        text-align: center;}
	
  	.copyright .box-L{ margin-bottom:5px;}
	.copyright{ margin-top: 50px; padding-top: 30px}
	.copyright dl .box-L .dot_li{ display: block; border-top:1px dashed #ccc }
	.copyright dl .box-L .dot_li li{ display: block; padding-bottom: 10px; border-bottom: 1px dashed #ccc}
	.copyright dl .box-R { text-align: center}
	.copyright dl .box-R a { display: inline-block;  width: 100px;}
	.copyright dl .box-L .dot_li li{ padding-left: 0; background: none; text-align: center}
	
	#qMenu{
		padding: 20px 10px;
    	border-bottom-left-radius: 40px;
    	border-top-left-radius: 40px;
		background: rgba(27,99,149,0.5)
	}
	#qMenu ul li a{ background-color: rgba(0, 0, 0, 0.5);}
	#qMenu ul li a:hover, #qMenu ul li a:focus{ background-color: #000}  
 		
}
@media screen and (max-width: 480px) {
	#footer .company, #footer .fat-nav, #footer .fat-nav > li, .copyright .box-L .fotLogo2 { width:100%;}
	#footer .fat-nav > li{ margin-left:0;}
	#footer .fat-nav{ margin-top:15px;}
	.copyright .box-L .fotLogo2{ margin-right:0; margin-bottom:10px;}
}
	
/*20230301*/ 

.right_f_btns{ display:block; position:fixed; right:0; top:60px;z-index:10} 

.right_f_btns a{ display:block; margin:5px 0; box-sizing:border-box; border-radius:10px 0  0 10px  ; padding:15px 10px; background-color:#d8b8bb; -webkit-writing-mode: vertical-lr; writing-mode: vertical-lr; color:#333; font-size:1.6em; text-shadow:1px 1px 0.5px rgba(255,255,255,0.5) }

.right_f_btns a:hover, .right_f_btns a:focus{
	background-color:#000; color:#fff; text-shadow:none;}

@media screen and (min-width: 991px) and (max-width: 1250px){
.right_f_btns{top:110px;} 	
	}
/*PRINT*/


@page {
    size: landscape;
    margin: 1cm;
}

@media print {
 
    * {
        -webkit-print-color-adjust: exact;
    }

    /*顯示背景圖*/


    body,
    html {
        margin: 0 !important;
        padding: 0 !important;
        font-size: 62.5%;
        width: 100%;

    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        page-break-after: avoid;
        page-break-inside: avoid;
    }

    h1 + p,
    h2 + p,
    h3 + p {
        page-break-before: avoid;
    }

    a {
        page-break-inside: avoid
    }

    blockquote,
    table,
    pre {
        page-break-inside: avoid;
    }

    ul,
    ol,
    dl {
        page-break-before: avoid;
    }

    img {
        max-width: 100% !important;
    }

    img,
    #gallery li,
    .LR .all_list a {
        page-break-after: avoid;
        page-break-inside: avoid;
    }

    #gallery li {
        width: calc(25% - 12px) !important;
        margin: 10px 5px !important;
    }

    .container {
        max-width: 100% !important;
        width: 100% !important
    }

 
    #goTop,
    #header,
    #footer,
 
    }

 

}


@keyframes rotate {
    0% {
        -webkit-transform: rotate(0deg) scale(1);
        transform: rotate(0deg) scale(1);
    }

    50% {
        -webkit-transform: rotate(180deg) scale(0.8);
        transform: rotate(180deg) scale(0.8);
    }

    100% {
        -webkit-transform: rotate(360deg) scale(1);
        transform: rotate(360deg) scale(1);
    }
}

@-webkit-keyframes rotate {
    0% {
        -webkit-transform: rotate(0deg) scale(1);
        transform: rotate(0deg) scale(1);
    }

    50% {
        -webkit-transform: rotate(180deg) scale(0.8);
        transform: rotate(180deg) scale(0.8);
    }

    100% {
        -webkit-transform: rotate(360deg) scale(1);
        transform: rotate(360deg) scale(1);
    }
}

@keyframes opty {
    from {
        transform: scale(1);
        -ms-transform: scale(1);
        -sand-transform: scale(1);
        -moz-transform: scale(1);
        -webkit-transform: scale(1);
        -o-transform: scale(1);
    }

    to {
        transform: scale(0.8);
        -ms-transform: scale(0.8);
        -sand-transform: scale(0.8);
        -moz-transform: scale(0.8);
        -webkit-transform: scale(0.8);
        -o-transform: scale(0.8);
    }
}

@-webkit-keyframes opty {
    from {
        transform: scale(1);
        -ms-transform: scale(1);
        -sand-transform: scale(1);
        -moz-transform: scale(1);
        -webkit-transform: scale(1);
        -o-transform: scale(1);
    }

    to {
        transform: scale(0.8);
        -ms-transform: scale(0.8);
        -sand-transform: scale(0.8);
        -moz-transform: scale(0.8);
        -webkit-transform: scale(0.8);
        -o-transform: scale(0.8);
    }
}