@charset "utf-8";
/* CSS Document */
body {font-size:16px;color:#fff;background:#fff url(../images/bg.jpg);font-family:"微軟正黑體", Arial;width: 100%;}
img {border: 0;transition: all 0.3s;}
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, form, input, textarea, p, th, td {margin:0; padding:0; -webkit-text-size-adjust:none;}
table{border-collapse:collapse; border-spacing:0;}
a{text-decoration: none;transition: all 0.3s;cursor: pointer;}
input , select , textarea , button {outline: none;transition: all 0.3s;font-family:"微軟正黑體", Arial;}
div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {border: 0; outline: 0;vertical-align: baseline;background: transparent;}
ol, ul{list-style:none;}
button{cursor: pointer;transition:all .3s;}



*:focus {outline: 1px dashed #ccc;}
/*-----accesskey-----*/
a[accesskey] {position: absolute;}
#AU[accesskey] {left: -1px;}
#AF[accesskey] {left: -5px;font-size: 15px;color: #777;top:19px;}
#AL[accesskey] {left: -12px;font-size: 15px;color: #eee;font-weight: normal;}
/*-----gotop-----*/
.othersBtn a {width:40px;height:40px;transition: all .3s;-webkit-transition: all .3s;right: 20px;bottom: 20px;background:#69778d; border-radius:50%;}
.fixedBtn {display: table;position: fixed;color: #FFF; z-index: 999;font-size: 20px; text-align: center;padding-top: 3px;box-sizing: border-box;}
.othersBtn a:hover{background:#8b9aaf;}

#all.active{position:fixed; left:0; top:0; width:100%; height:100%;}

/* header */
#header{position:fixed; left:0; top:0; width:100%; background:#fff; z-index:99999;height: 88px;}
#header > .wrap{width:96%; max-width:1320px; margin:0 auto; padding-top:10px;}
#header > .wrap:after{content:""; display:block; clear:both;}

#logo{float:left; width:312px; height:52px; margin-top:10px; background:url(../images/logo.png); text-indent:-9999px; cursor:pointer;transition: all 0.3s;}
#logo:hover{opacity: .7;transition: all 0.3s;}

#header > .wrap .function{float:right;position: relative;}
#header > .wrap .function:after{content:""; display:block; clear:both;}
#header > .wrap .function > *{float:right;}

#header > .wrap .function .link .lang{display:inline-block;margin-left: 25px;}
#header > .wrap .function .link .lang span{padding-left: 10px; }
#header > .wrap .function .link .lang a{margin-left: 10px;}

#header > .wrap .function .link{margin:3px 20px 0 20px;}
#header > .wrap .function .link a{display:inline-block;margin-left: 20px;text-align:left;transition:all .3s;font-size: 15px;color: #000;opacity: .6;}
#header > .wrap .function .link a:hover{opacity:1;}

.goindex{display: block;width: 312px;height: 52px;}

#navigation{float:right;width: 76%;}
#navigation:after{content:""; display:block; clear:both;}
#navigation li{float:left; width:10%; text-align:center;}
#navigation li:last-child{width:8%;}
#navigation li:nth-child(8){width:12%;}
#navigation li > a{display:block; border-bottom:4px solid transparent; font-size:16px; color:#000; line-height:40px;font-weight: 900;padding-top: 10px;}
#navigation li:hover > a{border-bottom-color:#CCC;}
#navigation li .sub-menu{position:absolute; left:0; top:100%; display:none; width:100%; background:rgba(255,255,255,.9); border-top:1px solid #777;}
#navigation li:hover .sub-menu{display:block;}
#navigation li .sub-menu .wrap{max-width:100%; margin:0 auto; padding:15px 0; font-size:15px; color:#717171; text-align:center;}
#navigation li .sub-menu .wrap a{display:inline-block; color:#717171;margin: 5px 0;}
#navigation li .sub-menu .wrap a:before{content:"|"; display:inline-block; margin:0 20px;}
#navigation li .sub-menu .wrap a:first-child:before{display:none;}
#navigation li .sub-menu .wrap a:hover{color:#000;}
#navigation li .sub-menu .wrap a:hover:before{color:#717171;}

#navigation li .sub-menu .wrap .list{display: inline-block;vertical-align: middle;margin-right:5px;}
#navigation li .sub-menu .wrap .list2{display: inline-block;vertical-align: middle;width:470px}
#navigation li .sub-menu .wrap .list select{padding:8px 5px;}
#navigation li .sub-menu .wrap .list2 input{ width:400px;display: inline-block;vertical-align: middle;padding:8px 5px;}
#navigation li .sub-menu .wrap .list2 button{display: inline-block;vertical-align: middle;width:50px;padding:10px 5px;color:#fff;background:#455a75;border: 0;}
#navigation li .sub-menu .wrap .list2 button:hover{background: #5c7ca0;}

/* mobile */
#mask{position:fixed; left:0; top:0; display:none; width:100%; height:100%; background:rgba(0,0,0,.8); z-index:999999;}
#mobi-btn{position:relative; float:none !important; display:none; width:40px; height:40px; border:1px solid #ccc; vertical-align:middle;}
#mobi-btn:before ,
#mobi-btn:after ,
#mobi-btn b{content:""; position:absolute; left:7px; width:25px; height:3px; background:#ccc; border-radius:3px;}
#mobi-btn:before{top:10px;}
#mobi-btn:after{top:18px;}
#mobi-btn b{top:26px; text-indent:-9999px;}

#mobile{position:absolute; left:-250px; top:0; width:250px; min-height:100%; background:#FFF; z-index:9999999;display: none;}
#mobile .lang{padding:10px;text-align:center;}
#mobile .lang a{display:inline-block; padding:0 20px; font-size:16px; color:#666;}
#mobile .lang span{color: #666; }

#mobile .link{padding:10px; background:#8192aa;}
#mobile .link a{display:block;color:#fff;padding: 5px 10px; box-sizing: border-box;}

#mobile .wrap{background: #eee;}

#mobile .menu li > a ,
#mobile .group h2{display:block; padding:0 20px; background:#fff; border-bottom:1px solid #DDD; font-size:17px; color:#333; line-height:45px; font-weight:normal;}
#mobile .menu li .sub-menu ,
#mobile .group ul{display:none;}
#mobile .menu li .sub-menu a ,
#mobile .group li a{display:block; padding:10px 30px; border-bottom:1px dashed #DDD; font-size:15px; color:#666; line-height:20px;}
#mobile .link .lang{display: none;}

/* ft-nav */
#ft-nav{ position:relative;background:#333333 url(../images/f_bg.png); margin:0;padding:30px 0;width: 100%;font-size: 0;}
#ft-nav .wrap{margin:0 auto;max-width: 1320px;width:100%;}
#ft-nav > a{ width:77px; height:37px; background:#333333 url(../images/f_bg.png); position:absolute;top:-37px;cursor:pointer;right: 300px}
#ft-nav > a:before{content:""; display:block; position:absolute; width:55px; height:15px; left:22%; margin-left:-8px; top:47%; margin-top:-4.5px; background:url(../images/footer_arrow.png) no-repeat top;}
#ft-nav > a.active:before{ background-position:bottom center;}
#ft-nav:after{content:""; display:block; clear:both;}

#ft-nav .wrap > li{ width:14%; display: inline-block;vertical-align: top; padding:20px 10px; box-sizing:border-box;position:relative;}
#ft-nav .wrap > li > .h3 { margin-bottom:28px;display:block; font-size:16px; font-weight:bold;color: #fff;}
#ft-nav .wrap > li > .h3 > a{ transition:all .3s; -webkit-transition:all .3s;color:#fff;}
#ft-nav .wrap > li > ul > li{padding-bottom:8px ;}
#ft-nav .wrap > li > ul > li > a{ display:block; color:#ccc; font-size:15px; line-height:20px; transition:all .3s; -webkit-transition:all .3s;}
#ft-nav .wrap > li > ul > li > a:hover, #ft-nav .wrap > li > .h3 > a:hover{ color:#c7b299;transition:all .3s; -webkit-transition:all .3s;}

/* info */
.info{margin-top: 88px; color: #333;}

.tabs_top{
	padding: 0;
	margin: 0 0 30px 0;
}



.tabs_top ul li {
    text-align: center;
    background-color: #f2f2f2;
    float: left;
    margin: 0 0 0 0.5%;
}

.tabs_top ul li span a{
    position: relative;
    display: block;
    background-color: #69778d;
    color: #fff;
    font-size: 18px;
    font-weight: 900;
}


.tabs_top ul li span a {
    display: block;
    line-height: 1.6;
    padding: 6px 25px;
}


.tabs_top ul li span.tabs_yes a{
    background-color: #455a75;
    color: #ffffff;
}

.tab_tool{
	border: 1px #fff solid;
    display: block;
    float: right;
    text-align: center;
    margin-right: 0.5%;
}

.tab_more{
    font-size:1.3em;
    color: #fff;
    display: block;
    padding: 5px 13px 6px 13px;
}




.tabs_content{
    position: relative;
    margin-top: 30px;
}

.tabs_content{
    display: block;
    margin: 0 auto;
}

.tabs_content a:focus{
    border: 1px dashed red;
}

.active3{
    display: block;
    margin: 0 auto;
}





.tabs_content .content_list{
    float: left;
    width: 32.33333%;
    margin: 0 0.5%;
}
.tabs_content .content_list2 {
    float: left;
    width: 64.66666%;
    margin: 0 0.5%;
}


.tabs_content .content_list a {
    display: block;
    overflow: hidden;
    margin: 0 auto;
    background-color: #f2f2f2;
    position: relative;
    text-align: -webkit-center;
}


.tabs_content .content_list2 a {
    width:48%;float:left; margin-right:2%
}


.tabs_content .content_list h5 {
    padding: 10px;
    font-size: 16px;
    color: #000;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 92%;
    text-align: left;
}


.tabs_content .content_list a img {
    display: block;
    width: auto;
    margin: 0;
    height: 275px;
}


.clearfix:before, .clearfix:after {
    content: "";
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}


/**************訊息專區***********************/

/*公告訊息*/



.notice , .news{
	background-color: #fff;
	
	width: 47%;

}

.notice{
	margin: 0 1% 0 0.5%;
	float: left;
}

.news{
	margin: 0 0.5% 0 1%;
	float: right;
}



.n_title{
	background-color: #69778d;
	color: #fff;
	
}

.n_title .n_t{
	float: left;
	font-size: 21px;
	font-weight: 700;
	padding: 5px 0 5px 25px;
}

.n_title  .more{
	background-color: #455a75;
	float: right;
    font-size: 1.3em;
    color: #fff;
    display: block;
    padding: 7px 13px;
}


.n_content{
	padding: 0px 40px;
}

.n_list .l_i{
	border-bottom: 1px solid #ddd;
    line-height: 1.6;
    padding: 20px 0px;	
}

.n_list  .l_i_last{
	border-bottom:none;
    line-height: 1.6;
    padding: 15px 0px;	
}


.n_list .l_i_t {
    color: #455a75;
    font-size: 18px;
    font-weight: 900;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-left: -24px;
    padding-left: 25px;
    background-image: url('../images/list_i.png');
    background-repeat: no-repeat;
    background-position: 5px;

}




.n_list .l_i p {

    color: #777;
    font-size: 16px;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #777;
    font-size: 16px;
    overflow: hidden;
    max-height: 53px;
}


b{
	font-size: 16px!important;
    color: #777;
}

/*相關連結*/

.links {
    width: 100%;
    margin: 0 auto;
    padding: 40px 0 75px 0;
    border-top: 3px solid #bbb;
}

.info-slider{
    position: relative;
}

.info-slider .wrap {
    max-width: 1320px;
    width: 100%;
    margin: 0 auto;
}


.info-slider h2 {
    color: #fff;
    font-size: 21px;
    display: table;
    background-color: #8c6239;
    padding: 10px 55px;
    margin: 0 0 20px 0;
}





/*新聞訊息*/



/* footer */
.footer{background:#333333 url(../images/f_bg.png); margin:0;padding:30px 0;width: 100%;font-size: 0;border-top: 1px solid #ccc;}
.footer .footer_info{margin:0 auto;max-width: 1320px;width:100%;font-size:15px;color: #ccc;position:relative;}
.footer .footer_info .logo{background: url(../images/logo2.png);background-repeat: no-repeat;width: 234px;height: 123px;display: inline-block;padding-right: 30px;vertical-align: middle;}
.footer .footer_info .logo:hover{opacity: .7;transition:all .3s; -webkit-transition:all .3s;}
.footer .footer_info ul{display: inline-block;vertical-align: middle;padding-left: 30px;border-left: 1px solid #ccc;}
.footer .footer_info ul li{padding-bottom:8px; }
.footer .footer_info ul li a{display: inline-block;vertical-align: middle;color: #ccc;}
.footer .footer_info ul li span{padding: 0 10px;}
.footer .footer_info ul li a.xx{background: #69778d;text-align: center;padding: 2px 8px;border-radius: 50%;margin-left:10px;color: #fff;}
.footer .footer_info ul li a.xx:hover{background: #496082;}
.footer .footer_info ul li a:hover{color: #fff;transition:all .3s; -webkit-transition:all .3s;}
.footer .footer_info ul li p{display: inline-block;vertical-align: -1px;}

.footer .footer_info .bot{display: inline-block;vertical-align: middle;position: absolute;right: 0;bottom: 0;}
.footer .footer_info .bot a{display: inline-block;vertical-align: bottom;margin-right: 10px;}
.footer img:hover{opacity: .7;transition: all 0.3s;}

/* nav */
nav {background: #e6e6e6;position: fixed;right: -300px;top: 130px;-moz-transition: right 0.2s linear;-o-transition: right 0.2s linear;-webkit-transition: right 0.2s linear;transition: right 0.2s linear;width: 300px;z-index: 9;}
nav #menuToggle {background: #455a75;display: block;position: relative;height: 40px;left: -50px;width: 50px;color: #fff;transition: all 0s;}
nav #menuToggle p{-webkit-writing-mode: vertical-rl;writing-mode: vertical-rl;position: absolute;height: 257px;font-size: 22px;width: 50px;/*right: 10px;*/background-color: #455a75;top: 40px;font-weight: 900;padding:35px 10px 0 0px;box-sizing: border-box; letter-spacing: 6px;transition: all 0s;}
nav #menuToggle span {background: white;display: block;height: 10%;left: 19%;position: absolute;top: 55%;width: 58%;}
nav #menuToggle span:before, nav #menuToggle span:after {background: white;content: '';display: block;height: 100%;position: absolute;top: -250%;-moz-transform: rotate(0deg);-ms-transform: rotate(0deg);-webkit-transform: rotate(0deg);transform: rotate(0deg);width: 100%;}
nav #menuToggle span:after {top: 250%;}
nav ul{margin-top: -40px;}
nav ul li{}
nav .title, nav .list{display: inline-block;vertical-align: middle;}
nav .title{width: 33%;color: #fff;font-weight: 900;font-size: 16px;background: #1c1f25;padding: 15px 10px;}
nav .list{width: 50%;padding-left: 10px;}
nav .list select, nav .list input{width: 100%;padding: 5px;box-sizing: border-box;}
nav button{text-align: center;width: 100%;border: 0;background: #333333;color: #fff;font-weight: 900;font-size: 17px; padding: 10px;cursor: pointer;}
nav button i{padding-left: 10px;}
nav button:hover{background: #777;}

.open {right: 0;}
.open #menuToggle span {background: transparent;left: 10%;top: 45%;}
.open #menuToggle span:before, .open #menuToggle span:after {background: white;top: 6px;-moz-transform: rotate(45deg);-ms-transform: rotate(45deg);-webkit-transform: rotate(45deg);transform: rotate(45deg);right: -5px;}
.open #menuToggle span:after {-moz-transform: rotate(-45deg);-ms-transform: rotate(-45deg);-webkit-transform: rotate(-45deg);transform: rotate(-45deg);}

nav #menuToggle:hover, nav #menuToggle:hover p{background: #5c7ca0;transition: all 0s;}

#menuToggle .navClosed {-moz-transition: background 0.1s linear;-o-transition: background 0.1s linear;-webkit-transition: background 0.1s linear;transition: background 0.1s linear;}
#menuToggle .navClosed:before, #menuToggle .navClosed:after {-moz-transition: top 0.2s linear 0.1s, -moz-transform 0.2s linear 0.1s;-o-transition: top 0.2s linear 0.1s, -o-transform 0.2s linear 0.1s;-webkit-transition: top 0.2s linear, -webkit-transform 0.2s linear;-webkit-transition-delay: 0.1s, 0.1s;transition: top 0.2s linear 0.1s, transform 0.2s linear 0.1s;}
#menuToggle .navOpen {-moz-transition: background 0.1s linear 0.2s;-o-transition: background 0.1s linear 0.2s;-webkit-transition: background 0.1s linear;-webkit-transition-delay: 0.2s;transition: background 0.1s linear 0.2s;}
#menuToggle .navOpen:before, #menuToggle .navOpen:after {-moz-transition: top 0.2s linear, -moz-transform 0.2s linear;-o-transition: top 0.2s linear, -o-transform 0.2s linear;-webkit-transition: top 0.2s linear, -webkit-transform 0.2s linear;transition: top 0.2s linear, transform 0.2s linear;}
#menuToggle i{display: none;}



@media screen and (min-width:1000px){	
	.links .owl-dot{
		display: none!important;
	}
}


@media screen (min-width:1200px) and (max-width:1300px){

    #navigation {
        float: right;
        width: 73%;
    }

    #navigation li {
    float: left;
    width: 11.5%;
    text-align: center;
    }   

}



@media screen and (max-width:1200px){	
	#mobile .link a#AU[accesskey]{display: none;}
	/* header */
	#header > .wrap{padding:15px 0;}
	#header > .wrap .function{margin-top:5px;}
	#header > .wrap .function .lang ,
	#header > .wrap .function .link{display:none;}
	#header > .wrap .function form{float:none; display:inline-block;}
	#logo{margin:0;}
	#navigation{display:none;}
	/* mobile */
	#mobi-btn{display:inline-block;}
    #mobile{display:inline-block;}
	
	#ft-nav .wrap, .footer .footer_info{width:95%;}
	
	#menuToggle .navClosed, .open #menuToggle span:before, .open #menuToggle span:after, #menuToggle span:before, #menuToggle span:after{display: none;}
	#menuToggle p{display: none;}
	nav #menuToggle{left:-40px;width: 40px;}
	#menuToggle i{display: block; font-size: 20px;position: absolute;text-align: center;top: 9px;width: 100%;}
	#menuToggle {position: relative;}
}

@media screen and (max-width:970px){
	.footer .footer_info .bot{position: inherit;text-align: center;width: 100%;margin-top: 20px;}
	.footer .footer_info .bot a{display: inline-block;vertical-align: middle;}
}

@media screen and (max-width:768px){
	
	
	#ft-nav, .footer .footer_info ul li p{display: none;}
	.footer .footer_info{text-align: center;}
	.footer .footer_info .logo{display: block;padding: 0;margin: 0 auto 20px auto;}
	.footer .footer_info ul{border: 0;padding: 0;}
	.footer .footer_info ul li span{display: block;font-size: 0;}


    .tabs_content > .content_list:nth-child(3){
        display: none;
    }

    .tabs_content .content_list{
        width: 49%;
    }

    .notice, .news {
        background-color: #fff;
        width: 100%;
    }

    .news {
        margin-top: 20px;
    }
	.tabs_content .content_list{
    float: left;
    width: 96%;
    padding:1%
    }
	.tabs_content .content_list2 a{
    float: left;
    width: 99%;
    padding:1%; margin-bottom:2%;
    }
}
@media screen and (max-width:767px){
	#logo {margin: 7px;width: 250px;height: 42px;background: url(../images/logo_m.png);}
}


@media screen and (max-width:320px){
	nav{width: 270px;right: -270px;}
	nav .title{padding: 13px 10px;}
	nav #menuToggle p{height: 258px;}
	
}



@media screen and (max-width:1000px){   
    
   
}