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

/*===============================================
                    整體設定
=================================================*/

body {
	font-family: "Microsoft JhengHei UI", "Microsoft JhengHei UI Light", "微軟正黑體" !important;
}

/*內容區主架構*/

#content {
    overflow: visible;
	background-image: url(../images/page_content_bg.jpg);
	background-repeat: repeat;
	background-position: left top;
}

.content-wrap {
	padding-top: 0px;
    padding-bottom: 0;
}

.section.topmargin-lg {
    margin: 0 !important;
	padding: 0;
    background-color: #fff;
}

h1, h2, h3, h4, h5, h6 {
    font-family: "Microsoft JhengHei UI", "Microsoft JhengHei UI Light", "微軟正黑體";
}

a, a:hover {
    text-decoration: none;
    transition: all .3s;
}

@media (min-width: 1185px){

#wrapper .container {
    width: 1155px;
}

}

@media (max-width: 767px){

.container, #header.full-header .container, .container-fullwidth {
    width: 100% !important;
}

}

/*===============================================
                  無障礙TAB框設定
=================================================*/


:focus {
    outline: 2px solid #ff0000 !important;
}

/*===============================================
                    回上層按鈕
=================================================*/

.stretched #gotoTop {
    width: 83px;
    height: 100%;
    bottom: 95px;
    background-color: transparent;
}

#gotoTop .top {
	height: 70%;
	background-image: url(../images/page_top_bg.png);
	background-repeat: repeat-y;
	background-position: left top;
}

/*===============================================
                    無障礙設定
=================================================*/

/*首頁內容導盲磚*/

.box_content #content_alt {
    color: #555;
    position: absolute;
    left: 0;
    top: 0;
}

/*內頁左方導盲磚*/

#is_left a.left_sitemap {
    color: #555;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
}

/*內頁右方導盲磚*/

#path #content_alt{
    color: #000;
    background-color: transparent;
}

/*===============================================
                    上方區塊
=================================================*/

/*上方主區塊*/

#header {
    height: auto;
	background-color: #ffc708;
    border-bottom: 0px solid #F5F5F5;
   
}

#header-wrap {
	height: auto;
	position: relative !important;
}


#header .container {
    width: 1500px;
}

@media (max-width: 1530px){

#header .container {
    width: 100% !important;
}
	
}	

@media (max-width: 991px){

#header {
	background-image: none;
}

#header-wrap {	
    box-shadow: 0px 4px 8px rgba(128, 128, 128, 0.1);
}



}

/*===============================================
                rwd按鈕區塊
=================================================*/

div#primary-menu-trigger {
    color: #fff;
    border-radius: 10px;
    top: 11px;
}


/*===============================================
                 rwd按鈕樣式
=================================================*/

/*rwd按鈕*/

#primary-menu-trigger {
    z-index: 99;
}

#primary-menu-trigger {
    color: #fff;
}

@media (max-width: 530px){

#primary-menu-trigger {
    top: 12px;
}

}

/*===============================================
                 上方logo區塊
=================================================*/

/*上方logo區塊*/

#logo {
    z-index: 10;
    margin: 0;
    padding: 23px 0;
}

#logo img {
    max-width: 100%;
    max-height: 81px;
}

@media (max-width: 1200px){

#logo img {
    height: auto;
    max-height: inherit;
}

}

@media (max-width: 991px){

#logo {
	width: 100%;
    position: relative;
	padding: 11px 0 !important;
	height: auto;
}

#logo img {
    height: 45px;
}

}

/*===============================================
                 上方快速選單
=================================================*/

/*上方快速選單-主區塊*/

#fast_menu {
    padding: 18px 0;
}

@media (min-width: 991px){

#fast_menu li{	
    padding: 0 4px;
}	

/*上方快速選單-連結文字樣式*/

#primary-menu #fast_menu > li > a {
    width: 90px;
    font-size: 15px;
    color: #fff;
    background-color: #ff9900;
    padding: 33px 10px;
    text-align: center;
    text-transform: initial;
    background-repeat: no-repeat;
    background-position: left center;
    border-radius: 99px;
	transition: all .3s;
}

#primary-menu #fast_menu > li > a:hover {
    background-color: #ff8d00;
}

#primary-menu #fast_menu > #list_01 > a {
    color: #000;
    background-color: transparent;
}

}	


@media (max-width: 991px){

/*上方快速選單*/

#fast_menu {

}


#primary-menu #fast_menu li {
    width: 25%;
    float: left;
    padding: 0 2px;
    border: 0px solid #EEE;
	padding-bottom: 5px;
}

#primary-menu #fast_menu li a {
	font-size: 20px;
	color: #fff;
	background-color: #09b1c8;
	text-align: center;
	background-image: none !important;
	font-family: "Microsoft JhengHei UI", "Microsoft JhengHei UI Light", "微軟正黑體";
}


}

@media (max-width: 480px){

#primary-menu #fast_menu li {
    width: 50%;
}
}

/*===============================================
                 banner選單
=================================================*/


@media (min-width: 991px){

/*banner選單-主區塊*/

#banner_menu {
	display: none;
}

}







@media (max-width: 991px){
	
#primary-menu > #banner_menu {

}	

#primary-menu #banner_menu > li {
    width: 100%;
    float: left;
    border: 0px solid #EEE;
    margin-bottom: 5px !important;
}

#primary-menu #banner_menu > li > a {
    font-size: 20px;
    color: #fff;
    text-align: center;
    background-color: #ff930c;
    display: block;
    font-family: "Microsoft JhengHei UI", "Microsoft JhengHei UI Light", "微軟正黑體";
}


}



/*===============================================
                上方區塊(下滑後樣式)
=================================================*/

/*上方區塊-主架構*/

#header.sticky-header:not(.static-sticky) #header-wrap {
    background-color: rgba(255, 199, 8, 0.9);
}

body.top-search-open #primary-menu ul {
    opacity: 0;
}

#header.sticky-header:not(.static-sticky), #header.sticky-header:not(.static-sticky) #header-wrap, #header.sticky-header:not(.static-sticky):not(.sticky-style-2):not(.sticky-style-3) #logo img {
    height: auto;
}

/*下滑後的logo區塊*/

#header.sticky-header:not(.static-sticky) #logo{
    /*display: none;*/
}


/*下滑後的上方快速選單*/

#header.sticky-header:not(.static-sticky) #primary-menu #fast_menu {
    /*display: none;*/
}

/*下滑後的banner選單*/


@media (max-width: 1200px){
	
#header.sticky-header:not(.static-sticky) #logo {
    width: 30%;
    padding: 33px 0;
}

#header.sticky-header:not(.static-sticky) #logo img {
    width: 100%;
    height: auto;
}
	
}


/*===============================================
                 內頁主框架
=================================================*/

#content.page_content {

}

#content.page_content .container {

}

/*===============================================
                 上方圖片選單
=================================================*/


/*上方圖片選單-主區塊*/

#top_img_menu {
    width: 100%;
    position: absolute;
    padding: 45px 0;
    z-index: 9;
}

#top_img_menu .container {
    max-width: 1000px;
    position: relative;
}

/*上方圖片選單-列表樣式*/

#top_img_menu .row {

}


/*上方圖片選單-連結文字樣式*/

#top_img_menu a {
    font-size: 42px;
    color: #fff;
    line-height: 1.05em;
    text-align: center;
    font-family: "標楷體", "微軟正黑體";
    transition: all .3s;
    padding: 0 22%;
    display: block;
    background-image: url(../images/img_banner_button_01.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 100%;
}

#top_img_menu li > a:hover {

}

#top_img_menu a .text {
    padding: 30px 0;
    padding-top: 85px;
	text-shadow: 2px 2px 2px rgba(0,0,0,0.3);
}

/*上方圖片選單-文字樣式(動態圖片)*/

#top_img_menu a::before {
	width: 100%;
	content: "";
	display: table;
	clear: both;
	background-repeat: no-repeat;
	background-position: center top;
	position: absolute;
	top: -10px;
	left: 0;
}

#top_img_menu a:hover:before {
    animation-name: draw-an;
    animation-duration: 3s;
    -webkit-animation: draw-an .8s 500;
}

@keyframes draw-an {
  0% {
    margin-top: 0px; }
  50% {
    margin-top: -15px; }
  100% {
    margin-top: 0px; } 
}


/*上方圖片選單-個別文字樣式*/

#top_img_menu #list_02 a {
    background-image: url(../images/img_banner_button_02.png);
}

#top_img_menu #list_03 a {
    background-image: url(../images/img_banner_button_03.png);
}

#top_img_menu #list_04 a {
    background-image: url(../images/img_banner_button_04.png);
}

/*上方圖片選單-個別文字樣式(動態圖片)*/

#top_img_menu #list_01 a::before {
    height: 84px;
	background-image: url(../images/img_banner_icon_01.png);
}

#top_img_menu #list_02 a::before {
    height: 88px;
	background-image: url(../images/img_banner_icon_02.png);
}

#top_img_menu #list_03 a::before {
    height: 98px;
    top: -20px;
	background-image: url(../images/img_banner_icon_03.png);
}

#top_img_menu #list_04 a::before {
    height: 115px;
    top: -28px;
	background-image: url(../images/img_banner_icon_04.png);
}

@media (max-width: 991px){

#top_img_menu {
    display: none;
}
	
}	

/*===============================================
                 內頁banner
=================================================*/

#page_banner {
    position: relative;
}

#page_banner #oc-slider {
    padding: 0 !important;
}


/*===============================================
                 內頁右方區塊
=================================================*/

#box_center_content {
    width: 100%;
    background-color: #fff;
    border-radius: 15px;
    padding: 20px 30px;
    padding-bottom: 200px;
    z-index: 1;
    margin-bottom: 45px;
    background-image: url(../images/is_content_bg_03.png);
    background-repeat: no-repeat;
    background-position: center bottom;
}

/*上稿內容區塊-主區塊*/

#is_content {
    min-height: 450px;
    font-size: 28px;
    color: #333;
}

@media (max-width: 1199px){
	
#box_center_content {
	width: 100%;
	border: 0px solid #dddddd;
	margin-bottom: 30px;
}	

}


@media (max-width: 600px){

#is_content {
    font-size: 21px;
}
	
}



/*===============================================
                 網頁路徑區塊
=================================================*/

/*網頁路徑區塊-主區塊*/

#path {
    padding: 25px 0;
}


/*網頁路徑區塊-列表樣式*/

#path ul {
    text-align: left;
    list-style-type: none;
    margin: 0;
}

#path li {
    font-size: 21px;
    color: #f38118;
    display: inline-block;
}

#path ul > li + li + li:before {
    content: "\003E";
	padding: 0 5px;
}

/*網頁路徑區塊-連結文字樣式*/

#path .home {

}

#path li a {
    color: #fff;
    padding: 0 7px;
    background-color: #f38118;
    display: inline-block;
    border-radius: 11px;
}

#path li a:hover {
    background-color: #f06812;
}	

/*===============================================
                 內頁主標題區塊
=================================================*/

/*內頁主標題-主區塊*/

#is_title {

	
}

/*內頁主標題-標題文字樣式*/

#is_title h3 {
    font-size: 45px;
    color: #f38118;
    letter-spacing: 1px;
    padding: 10px 0;
    border-bottom: 2px solid #fe9704;
    margin-bottom: 45px;
}

/*===============================================
                 網站導覽頁面
=================================================*/

/*網站導覽頁面-說明文字區塊*/

.sitemap_page .text_box {
    margin-bottom: 40px;
}

/*網站導覽頁面-列表樣式*/

.sitemap_page #list_box ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sitemap_page li {
    margin-bottom: 10px;
}

/*網站導覽頁面-連結文字樣式*/

.sitemap_page li a {
    color: #4b99a1;
    line-height: 1em;
    padding: 7px 20px;
    display: inline-block;
    background-color: #fbfef2;
    border: 1px solid #ccdcc6;
    border-top-left-radius: 27px;
    border-bottom-right-radius: 27px;
}

.sitemap_page li a:hover {
    background-color: #dff2e0;
}

@media (max-width: 767px){

/*網站導覽頁面-圖片區塊*/

#img_box {
    text-align: center;
    margin-bottom: 40px;
}

.sitemap_page li a {
    text-align: center;
    display: block;
}

}

/*===============================================
                 認識我們頁面
=================================================*/

/*認識我們頁面-文字區塊*/

.about_page .text_box {
    margin-bottom: 50px;
}

/*認識我們頁面-圖片區塊*/

.about_page .img_box {
    margin-bottom: 50px;
}

.about_page .img_box img {
    width: 100%;
}

/*===============================================
                 業務介紹頁面
=================================================*/

.business_page h4 {
    font-size: 1.1em;
    margin-bottom: 15px;
}

/*===============================================
                 好站連結頁面
=================================================*/

/*好站連結頁面-列表區塊*/

.link_page .ipost {
    border: 1px solid #c8c8c8;
}

/*好站連結頁面-圖片區塊*/

.link_page .img_box {
    overflow: hidden;
}

.link_page img {
    transition: all 1s;
}


.link_page img:hover {
    transform: scale3d(1.1,1.1,1.1);
}

/*好站連結頁面-標題文字樣式*/

.link_page .title_box {
    font-size: 20px;
    text-align: center;
    padding: 10px;
    color: #fff;
    background-color: #25a7a1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/*===============================================
                 下方區塊
=================================================*/

/*下方主區塊*/

#footer {
    border-top: 0px solid rgba(0,0,0,0.2);
    background-color: #f38118;
	margin: 0 !important;
}

#footer #copyrights {
	padding: 40px 0;
    background-color: transparent;
}

#footer .container {

}

/*下方區塊-上稿內容區塊*/

#footer_text {
	font-size: 16px;
    color: #fff;
	margin: 0;
}

#footer_text a, #footer_text span{
	color: #fff !important;
	text-decoration: none;
}

/*下方區塊-上稿內容區塊*/

#footer_text .content {

}


@media (max-width: 991px){

#footer_text .content {
    text-align: center;
}

}



/*===============================================
                   讀取頁面設定
=================================================*/

@media (min-width: 992px){

body:not(.no-transition) #wrapper, .animsition-overlay {
	animation-duration: 0s!important;
    opacity: 1 !important;
}

.css3-spinner {
    display: none;
}

#wrapper.fadeIn{
    -webkit-animation-name: wrapper_fadeIn;
    animation-name: wrapper_fadeIn;
}

}

@-webkit-keyframes wrapper_fadeIn {
	0% {
		opacity: 1;
	}

	100% {
		opacity: 1;
	}
}

@keyframes wrapper_fadeIn {
	0% {
		opacity: 1;
	}

	100% {
		opacity: 1;
	}
}

#wrapper.fadeOut{
    -webkit-animation-name: wrapper_fadeOut;
    animation-name: wrapper_fadeOut;
}

@-webkit-keyframes wrapper_fadeOut {
	0% {
		opacity: 1;
	}

	100% {
		opacity: 1;
	}
}

@keyframes wrapper_fadeOut {
	0% {
		opacity: 1;
	}

	100% {
		opacity: 1;
	}
}