@charset "utf-8";
body {-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;margin:0px;padding:0px;font:13px/1.4em Arial,PMingLiU,sans-serif;background-color:#045271; color:#333;}
img{border:0px none;object-fit: cover;}
ul,ol{margin:0;padding:0;overflow:hidden;list-style-type:none;}
div{margin:0;padding:0;}
a{text-decoration:none; color:#2EA3D8;}
a:hover{text-decoration:underline;}
.clear{clear:both;}
.nobr{
	white-space: nowrap;
}
#area{margin:0px auto;max-width:990px;font-size:13px; line-height:1.4em;}
/* header */
#header{position:relative; color:#feffff; padding:3px 0px;}
#header a{color:#feffff;}
#header a:hover{ text-decoration:none;}
#header .txt{position:absolute;top:0px;left:0px;}
#header .search{position:absolute;top:35px;right:5px;}
#header .bar{position:absolute;bottom:3px;right:5px;}
#share{position:absolute;top:45px;right:3px; line-height:1.3em;}
#share img{float:left; margin:0px 5px 0px 0px;}
#masthead{display:none;}
/* menu */
#menu{
	 height:50px;}
#menu .item{background-image: url(../images/bg.png);
	background-repeat: no-repeat;
	background-position: center 0px;}
#menu ul{}
#menu li{
	padding:0px 2px 0px 0px;float:left;
	background-image: url(../images/menu.gif);
	background-repeat: repeat-y;
	background-position: right top;}
#menu a{
	padding:0px 20px;
	display:block;
	background-image: url(../images/bg.png);
	background-repeat: no-repeat;
	background-position: 0px 0px;
	background-size: auto 49em;
	height:2.19em;
	text-decoration: none;
	color:#feffff;
	font-size:1.25em;
	line-height:2.19em; font-weight:bold;
}
/* #events #menu .events a,
#menu .events a:hover{background-position: 0px -2.19em;} */
#about #menu .about a,
#members #menu .members a,
#media #menu .media a,
#pataabout #menu .pataabout a,
#courses #menu .courses a,
#menu a:hover{
	background-position: -10px -2.19em;}
/* content */
#content{display: flex;background-color:#FFF; overflow: hidden;}
#contenttop{background-image: url(../images/bg.png);
	background-repeat: no-repeat;
	background-position: center -70px;
	height:6px;}
#contentbottom{background-image: url(../images/bg.png);
	background-position: center -94px;
	height:6px;}


/* main */
#main{flex:1 1 680px;}
#main .box{ margin:0px 20px;}
#main h1{ margin:7px 0px 5px 0px; padding:3px 5px; font-size:1.6em; color:#333; border-bottom:2px solid #dde3e9;font-family:Arial,'Microsoft JhengHei', Helvetica, sans-serif;}
#main h2{ margin:10px 0px 5px 0px; padding:0px 5px; font-size:1.25em; color:#333;}
#main h3{ margin:10px 0px 5px 0px; padding:0px 5px; font-size:1.15em; color:#4a92bf;}
#main h3 a{color:#4a92bf;}
#main h3 a:hover{color:#4a92bf;}
#main p{ margin:0px 0px; padding:0px 5px 10px 5px;}
#breadcrumb{padding:0px 5px;font-size:14px; color:#666; line-height:1.4em;/*  float: left;  */font-family:Arial,'Microsoft JhengHei', Helvetica, sans-serif;}
#breadcrumb a{color:#2EA3D8;}
#main .list{ border-bottom:1px  dashed #ccc;padding:5px 0px;}
#main ul{ padding:0px 5px 10px 5px;}
#main ul li{ padding:3px 5px 3px 15px; background-image:url(../images/icon.png); background-repeat:no-repeat; background-position:0px -79px;}


/* Start Highlight */
#highlight {
	margin:15px 0px 0px;
	padding:0px;
	width:100%;
	height:360px;
	position:relative;
}
#highlight .bg1,
#highlight .bg2,
#highlight .bg3,
#highlight .bg4{display: none;}

#eventHL {
	margin:0 25px;
	padding:0;
	height:360px;position: relative;
	overflow:hidden;border-radius: 8px;
}
#eventHL .elements {height:360px;overflow:hidden;position:relative;}
#eventHL .elements .detail {height:360px;float:left; background-color:#CCC; position:relative;}
#eventHL .imgDisplay {margin:0 0 36px 0;padding:0;}
#eventHL img{height: 360px;width: 100%;}
#highlight .headline {
	position:absolute;
	bottom:80px;
	left:0px;
	width:100%;
	height:30px;
	background:url(../images/bg30a.png);
}
#highlight .headline .pages {}
#highlight .headline .pages a {
	display:block; width:30px; height:30px; line-height:30px; text-align:center;
	background-image: url(../images/pages.png);
	background-repeat: no-repeat;}
#highlight .headline .pages ul {float:right;margin:0;padding:0;list-style-type:none;}
#highlight .headline .pages ul li { font-weight:bold;float:left;margin:0;padding:0;background:none; font-size:15px;}
#highlight .headline .pages ul li.sprline {}
#highlight .headline .pages ul li a {
	color:#FFF;
	background-position: -60px -30px;
}
#highlight .headline .pages ul li a:hover,
#highlight .headline .pages ul li a.active{ text-decoration:none;
	background-position: -60px 0px;}
#highlight .headline .pages a.previous {float:right;
	background-position: 0px 0px;}
#highlight .headline .pages a.previous:hover {text-decoration:none;
	background-position: 0px -30px;}
#highlight .headline .pages a.next {float:right;
	background-position: -30px 0px;}
#highlight .headline .pages a.next:hover {text-decoration:none;
	background-position: -30px -30px;}
#eventHL .txt{ position:absolute; z-index:3;bottom:0px; background:url(../images/bg70.png); color:#FFF;height:70px; padding:5px 10px; width:100%;}
#eventHL h5 {
	margin:0 0 5px;
	padding:0 12px;
	font-size:16px;
	line-height:1.4em;
	width:360px;
}
#eventHL h5 a { color:#FC0;}
#eventHL p {color:#fff;
	margin:0;
	padding:0 12px;
	font-size:13px;
	line-height:1.4em;
}
#eventHL a{color:#fff;
}
/* new */
#news{ margin:10px 30px 10px 30px; padding:0px; line-height:1.5em;}
#news .list{position:relative; padding:10px 0px;}
#news h3{ margin:0px 0px 5px 0px; }
#news p{margin:0px;padding:0 5px;}
#news p::after{content:"";display:inline-block;width: 7.1em;height: 1em;}
#news a{color:#333;}
#news .more{margin:0px; padding:5px 0px;}
#news .list .more{ position: absolute; bottom:0px; right:0px;}
#news .more a{color:#2ea3d8; font-weight:bold;}
#news .list .more a{font-weight: normal;}
#news .more a:hover{}
#about #main p {
	font-size: 1.15em;
	line-height: 1.8em;
}
#media .list_l{ padding: 0px 0px 10px 0px;overflow:hidden;}
#media .list_l .pic{display:flex;}
#media .list_l img{/* width:510px; */ width: 10%;flex: 1 1 auto;height:370px;}
#media .list_l ul{flex:0 0 120px;}
#media .list_l li{ background:none; padding:0; margin:0 0 3px 0; overflow:hidden;}
#media .list_l li img{width:120px; height:90px;vertical-align: middle;}
#media .list_s{ float:left;overflow:hidden; width:320px; padding: 0px 0px 10px 0px;}
#media .list_s img{width:310px;height:225px;}
#media .list_s ul{padding:0;margin:0;}
#media .list_s li{ background:none; padding:0; margin:3px 3px 0px 0px; overflow:hidden; float:left;}
#media .list_s li img{width:75px; height:50px;}
#members #main h3 { margin: 10px 0 0 5px;}
#members #main .list{float:left;width:50%;border:0px none;}
/* side */
#side{flex: 0 0 280px;margin:8px 20px 8px 0px;}
#side .box{
	position:relative;
	margin:8px 0px 20px 0px;
	padding:0px 0px;
	border-left:1px solid #dddddd;
	border-right:1px solid #dddddd;}
#side .box h2{ font-size:1.25em; line-height:1.5em; margin:0px; padding:0px 0px 5px 10px;border-bottom: 1px solid #dddddd;}
#side .box img{ position:relative;margin: 0 -20px 0 -20px;}
#side .box li{ padding:2px 0px 2px 20px;
	background-image: url(../images/icon.png);
	background-repeat: no-repeat;
	background-position: 5px 10px;border-bottom: 1px dotted #eeeeee;}
#side .box li a{ color:#333;
	display:block;
	position:relative;
}#side .box li a:hover{color:#2ea3d8;}
#side .bg1,
#side .bg2,
#side .bg3,
#side .bg4{
	background-image: url(../images/bg.png);
	background-repeat: no-repeat; position:absolute;}
#side .bg1{ top:-7px;left:-1px; right:7px;height:8px; background-position:left -100px;}
#side .bg2{ top:-7px; right:-1px;height:8px;width:8px; background-position:right -100px;}
#side .bg3{ bottom:-7px; left:-1px;right:7px; height:8px;background-position:left bottom;}
#side .bg4{ bottom:-7px; right:-1px; background-position:right bottom;width:8px;height:8px;}


/* footer */
#footer{color:#FFF; margin:0px 0px; padding:5px 10px; font-size:12px;text-align:center;}

#footer .nobr{ margin:0 2em 0 0;}

@media screen and (max-width: 800px), projection and (orientation: landscape){
body{font-family:Arial,'Microsoft JhengHei', Helvetica, sans-serif;}
#area{width:95%;font-size:16px;}
#header .bar{ font-size:13px;}
#header .logo{ width:40%; max-width:167px;}
#share{ display:none;}
	#eventHL{margin: 0;border-radius:0;}
#masthead{display: block; position: absolute; font-size:2em; top:0.2em; right:0.2em;}
#masthead .fb_chan{float:left;
    background:url(../images/fb_chan.png);
	opacity:0.8;
    display:block; 
	font-size:0.9em;
	margin:0.05em 0.05em 0 ;
    width: 1em;
    height: 1em;border:1px solid #CCC;
    border-radius: 0.2em;
    text-indent: -9999px;
	background-size:1em auto;}
#masthead .fb_chan:hover{opacity:1;}
#masthead #sharebar{float:left;}
#masthead .sharebar{
    display:block; float:left;
	font-size:0.9em;
	margin:0.05em 0.1em 0 ;
    width: 1em;
    height: 1em; border:1px solid #CCC;
    background: rgba(0,0,0,0.6) url(../images/topbar.png);
    border-radius: 0.2em;
    text-indent: -9999px;
	background-size:1em auto;background-position:0 -1em;}
#masthead .sharebar:hover{ background-color:rgba(0,0,0,1)}

#masthead .navbar{position:absolute; top:1.1em; right:0.05em; background:rgba(0,0,0,0.4);border-radius:0.2em; padding:0 0 0.08em; width:1em; overflow:hidden;}
#masthead .navbar li{ font-size:0.8em; margin:0.1em 0.1em 0 0.1em;}
#masthead .navbar li a{ display:block;background:url(../images/shareicon.png);background-size:1.01em auto; font-size:1em; width:1em; height:1em;border-radius:0.2em;text-indent:-9999px;}
#masthead .navbar li a:hover{}

#masthead .navbar .fb a{background-position:0 0;}
#masthead .navbar .t a{background-position:0 -1.02em;}
#masthead .navbar .p a{background-position:0 -2.03em;}
#masthead .navbar .w a{background-position:0 -3.04em;}
#masthead .navbar .g a{background-position:0 -4.05em;}

#menu{ height:auto;}
#menu .item { background:none;}
#menu li{ float:none; margin:0.2em 0; background:none;}
#menu a { border-radius:0.3em;text-align: center;}
	
	
#contenttop,
#contentbottom{display:none;}
#content{border-radius:0.5em;display: block;}
#main { float:none; width:auto;}

#news { margin:1em;}
#media .list_l .pic{display: block;}
#media .list_l img{ float:none; width:100%; height:auto;}
#media .list_l ul{ padding:0;position:relative; float:none;}
#media .list_l li{float:left; width:25%; margin:0;}
#media .list_l li img{width:95%; height:auto;}
#side { float:none;width:auto;margin:1em;}
#side .box img{width:100%;margin: 0 -10px;}
#breadcrumb{font-size:1em;margin-top:0.5em;}
/* footer */
#footer{padding:0.5em 1em; font-size:1em;text-align: left;}
#footer .nobr{ margin:0; display:block;}
}

@media screen and (max-width: 550px){
#area{font-size:16px;}
	#members #main .list{float:none;width: auto;}
}