/*------------------------------------*\
    MAIN
\*------------------------------------*/
/* global box-sizing */
*,
*:after,
*:before {
	-moz-box-sizing:border-box;
	box-sizing:border-box;
	-webkit-font-smoothing:antialiased;
	font-smoothing:antialiased;
	text-rendering:optimizeLegibility;
}
/* html element 62.5% font-size for REM use */
html {
	font-size:62.5%;
}
body {
	/*
    john 2019.12.30 edit
    font-family:'Microsoft Regular';*/
    font-family: 'Proxima Nova', Helvetica, '微軟正黑體', 'Microsoft JhengHei', sans-serif;
    color:#000;
	font-size:16px;
	line-height:26px;
	    overflow-x: hidden;
}
/* clear */
.clear:before,
.clear:after {
    content:' ';
    display:table;
}
.clear:after { clear:both;}

.clear {*zoom:1; clear:both;}

img {max-width:100%;	vertical-align:bottom;}

a {	color:#000;	text-decoration:none;}

a:hover {text-decoration:none; color:inherit;}

a:focus {outline:0;text-decoration:none;}

a:hover, a:active {	outline:0;}

input:focus, textarea:focus, button:focus {	outline:0;	border:0;}

ul,li,h1,h2,h3,h4 {list-style-type:none;margin:0;padding:0}

p:not(:last-child){margin-bottom:25px;}

p:last-child{margin-bottom:0px;}

@font-face {
	font-family:'Microsoft Regular';
	src:url('../fonts/Microsoft JhengHei.ttf');
    font-weight:normal;
    font-style:normal;
}

@font-face {
	font-family:'Microsoft Bold';
	src:url('../fonts/Microsoft JhengHei Bold.ttf');
    font-weight:normal;
    font-style:normal;
}



strong{font-family:'Microsoft Bold', sans-serif;}

/*------------------------------------*\
	        HEADER
\*------------------------------------*/

/*2020 1.13 john edit */
/*.logo {    margin-bottom: -23px;  }*/
.logo {    margin-bottom: -10px;  }

.header .row {    align-items: center;  }

.top-header {   padding:15px 0 0;       background: url(../image/topbar.jpg) no-repeat;    background-size: cover;  }

.menu-row {background: #954fdc url(../image/left-bg.png);  border-top: 2px solid #6600cc;  background-repeat: no-repeat;   background-size: 16% 100%;    background-position: top left;  }

.nav_area ul li{display:inline-block;padding: 0px 15px; }

.nav_area > ul > li {line-height:40px;}

.nav_area ul li a {    color: #fff;    font-size: 20px;    display: inline-block;	text-transform:uppercase;  font-family:'Microsoft Bold'; }

ul.sub-menu {    position: absolute;    background: #fff;    z-index: 555;	text-align:left;	}

ul.sub-menu li a {    color: #000;    line-height: 35px;    font-weight: 700;    padding: 5px 25px;    font-size: 14px;    display: block;    text-transform:capitalize;    border-bottom: 1px solid #6600cc;  }

ul.sub-menu li:hover a {color:#6600cc; } 

ul.sub-menu li{	display:block; padding:0;}

nav.nav_area ul li i {    font-size: 10px; }

.footer  {  background:#f9f9f9;   border-top:7px solid #6b08ce;   padding: 50px 0 15px 0; }

.copyright {font-size:14px;      padding-top: 15px; }

.contact-data span {  display: block;    padding-right: 15px;    font-weight: 700;    padding: 5px 0; }  

.contact-data i {    color: #6600cc;    font-size: 18px;    padding-right: 10px;  }

h3.widget-title {    font-size: 28px;    color: #6600cc;    font-weight: 700;      padding-bottom: 15px;   }

.foot {
    width: 100%;
    max-width: 100%;
}

.copyright {    font-size: 14px;    padding-top: 15px;    border-top: 1px solid #d9d9d9;      margin-top: 25px;    }

.address {    border-left: 2px solid #6600cc;    padding-left: 30px;  }

.flogo {    display: flex;   }

.flogo span {    display: inline-block;    padding: 0 25px;  }

.content {
    background: url(../image/content-bg.jpg);
    background-size: cover;
    background-position: center;
}




/*------------------------------------*\
	        MAIN
\*------------------------------------*/

.home-content {
    padding: 50px 0 20px 0;
	background:url(../image/home-bg.png) no-repeat center;
	background-size:cover;
}


.home-banner .item h2 {
    position: absolute;
    text-align: center;
    bottom: 0;
    width: 100%;
    color: #000;
    background: rgba(255, 255, 255, 0.68);
    padding: 15px 0;
    font-size: 22px;
    font-weight: 700;
   
}
.home-banner .item {    position: relative;  }

.home-banner .owl-dots {    position: absolute;    bottom: 20PX;    right: 8%;  }



.home-banner  .owl-theme .owl-dots .owl-dot span {background:#fff;}

.home-banner .owl-theme .owl-dots .owl-dot.active span, .home-banner .owl-theme .owl-dots .owl-dot:hover span {    background: #545454;  }

.event-slider.owl-theme .owl-nav {    margin-top: 10px;    position: absolute;    top: 45%;    width: 100%;   }
.event-slider.owl-theme .owl-nav button {
    position: absolute;
    top: 40%;
    height: 35px;
    width: 35px;
    background: #6b08ce;
    margin: 0;
    border-radius: 100%;
    font-size: 24px;
    color: #fff;
}
.event-slider {    max-width: 90%;    margin: 0 auto;  }
.event-slider.owl-theme .owl-nav .owl-prev {    left: -45px;   }
.event-slider.owl-theme .owl-nav .owl-next {    right: -45px;   }
.event-slider.owl-theme .owl-nav {
    margin-top: 10px;
    position: absolute;
    top: 40%;
    width: 100%;
    max-width: 1170px;
    margin: 0 auto;
	left: 50%;
    transform: translateX(-50%);
}

.event-section {    background: rgba(119, 29, 211, 0.37);    padding: 0 0 50px 0;    }
.title-bg {
    background: url(../image/title-bg.png);
    background-repeat: no-repeat;
    background-position: center;
    display: table;
    margin: 0 auto;
    background-size: 100%;
    padding: 15px 150px;
    color: #fff;
	margin-bottom:50px;
}

h2.section-title {    font-size: 36px;    font-weight: 700; color:#4c22a3;  }

.event-item {    position: relative; margin-bottom:40px; }

.event-item h3 {position: absolute; bottom: 0; width: 100%; color: #fff;  background: rgba(0, 0, 0, 0.58); padding: 10px 10px; font-size: 16px; text-align:center; }

a.bg-btn {
    display: inline-block;
    font-size: 20px;
    background: #ffcc00;
    padding: 10px 35px;
    border-radius: 25px;
    color: #fff;
    font-weight: 700;
    transition: all .3s;
}

a.bg-btn:hover {background:#7113d1;}

.news-section {    padding: 10px 0 50px 0;  }

span.down-arrow {    font-size: 40px;    margin-bottom: 50px;    display: block;    color: #4c22a3;   }

.news-item {  background: #fff;  border-top: 5px solid #6600cc;  box-shadow: 0 0 10px #868686;   margin-bottom: 25px;   }

.news-item h3 {    font-size: 15px;    padding: 15px;    font-weight: 700;   }

.news-item h5 {    color: #6600cc;    font-weight: 700;    font-size: 14px;    padding: 0 15px 15px;  }

.event-list .news-item{border-top:0;}

.filter-part.full-box select {    width: 47%;   }
.title-bg h2 {    color: #fff;  }

.news-item:hover {
    box-shadow: 0 0 20px #868686;
}

.event-item:hover {
    opacity: .75;
}



/*------------------------------------*\
	        bottom to top 
\*------------------------------------*/
#button {
  display: inline-block;
  background-color: #999999;
  width: 50px;
  height: 50px;
  text-align: center;
  border-radius: 100%;
  position: fixed;
  bottom: 30px;
  right: 30px;
  transition: background-color .3s, 
    opacity .5s, visibility .5s;
  opacity: 0;
  visibility: hidden;
  z-index: 1000;
}
#button::after {
 content: "\f106";
  font-family: 'Font Awesome 5 Free';
    font-weight: 900;
  font-style: normal;
  font-size: 30px;
  line-height: 45px;
  color: #fff;
}
#button:hover {  cursor: pointer;  background-color: #6600cc;  }
#button:active {  background-color: #6600cc;  }
#button.show {  opacity: 1;  visibility: visible;  }

label.toggle-sidemenu {     display: block;   background: #781ed3;   color: #fff;    padding: 10px 15px;    margin-bottom: 25px;    width: 100%;  } 
label.toggle-sidemenu span {    display: inline-block;     width: 94%;  }



.pagination {    display: block;    margin: 0;  }
.pagination .link {    background: #797979;    color: #fff;  }
.pagination a {display: inline-block; height: 30px; width: 30px; vertical-align: middle; text-align: center; line-height: 30px; margin: 0 4px;  }
.pagination a.active {    background: #6600cc;    color: #fff; }
.pagination a i {    height: 30px;    line-height: 30px; }


/*------------------------------------*\
	        SUBPAGE
\*------------------------------------*/

.space-bot{padding-bottom:50px;}
.sub-banner img{ width:100%; }

.table-data table td, .table-data table th {    padding: 10px 15px;    border: 1px solid #ddd;     font-weight: 700; }
.table-data table {    background: #fff;    margin: 0 auto;  width: 100%; }

.table-data table th{background:#a86ee3; color:#fff;  text-align:center; font-size:18px; font-weight:700;     padding: 10px 0; }
.table-data table td:first-child {    width: 100px;    font-size: 15px;    font-weight: 700;    color: #a86ee3;  }
.filter-part select {  background: #fff;   width: 250px;   padding: 8px 15px;    font-weight: 700;    margin: 0 10px 25px;  }
.filter-part button {   background: #fff200;    border: 0;    color: #771dd3;    font-weight: 700;    padding: 8px 30px;      font-size: 18px;  }

  



.blog-details {     box-shadow: 0 0 10px #ddd;  background: #fff;    padding: 40px 30px;    border-top: 10px solid #ad77e4;}  
.blog-details .flex-direction-nav a.flex-prev {    left: -50px;   }
.blog-details .flex-direction-nav a.flex-next {    right: -50px;   }
.blog-details .flex-direction-nav .flex-disabled {    opacity: 1 !important; z-index: 1; }
.blog-details .flex-direction-nav a:before {font-size:40px;margin-top:2px;}
.blog-details .flex-direction-nav a {
    display: block;
    height: 45px;
    width: 45px;
    background: #ad77e4;
    border-radius: 100%;
    line-height: 45px;
    text-align: center;
	font-family: 'Font Awesome 5 Free';
    font-weight: 900;
}

.blog-details #carousel .flex-direction-nav a {    background: transparent;   }

#carousel .flex-direction-nav a:before {    color: #ad77e4;      font-size: 46px; }
#carousel {    margin-top: 25px;   }

.blog-details h2 {  font-size: 24px;   font-weight: 700;    padding-bottom: 10px;  }
.blog-details h4 {    color: #781fd3;    font-weight: 700;    margin-bottom: 25px;    border-bottom: 2px solid;    padding-bottom: 25px;   }
.blog-details p {    font-size: 14px;    font-weight: 700;   }

.edetails h2{ border-bottom: 2px solid #ad77e4; margin-bottom:25px; }
.edetails a{ color:#7c09f0; } 


.comm-item { margin-bottom: 30px;   background: #fff;    padding: 20px 15px;    border-top: 5px solid #781fd3;      box-shadow: 0 0 10px #a5a5a5;  }
.comm-item h3 {    font-size: 21px;    font-weight: 700;    padding: 15px 0 5px;  }
a.orange-btn { background: #781fd3;  color: #fff; font-size: 21px; font-weight: 700; padding: 8px 15px;  display: inline-block;   margin: 10px 0;  }
a.orange-btn:hover{background:#ac75e5;color:#781fd3}


.article {    background: #fff;    padding: 15px;    border-top: 5px solid #954fdc;      margin-bottom: 25px;    box-shadow: 0 0 10px #ccc; }
h2.blog-title {    font-size: 18px;    color: #333333;    font-weight: 700;    margin-bottom: 10px;  }
.title-div p {    margin-bottom: 10px; font-size:14px;   font-weight: 700;    line-height: 20px;  }

h4.date {    color: #954fdc;    font-weight: 700;   }
.auto {    margin: auto;   }
.right-part {    display: table;    width: 100%;  padding:0; }
.right-part > div {    display: table-cell;    vertical-align: middle;   }
.btn-div {    width: 130px;   }
.more-btn {    display: inline-block;    background: #999999;    color: #fff;    padding: 8px 25px;    font-size: 16px;    transition: all .5s;    text-align: center;    font-weight: 700;   border-radius:25px; }

ul.sidemenu li { background: url(../image/side-item.png);  margin: 0px 0 25px 0;  padding: 15px 25px;  background-size: 100% 60px;  background-repeat:no-repeat;     font-weight: 700;  }
ul.sidemenu li:hover{color:#fff;}
ul.sidemenu li:before {content: ''; display: inline-block;  width: 15px;  height: 10px; background: url(../image/left-icon.png) no-repeat; margin-right: 5px; }

.padd30 {    padding: 30px 0;  }
.blog-img {
    padding: 0 15px 0 0;
}
.edetails a.more-btn {    color: #fff;   }

/*------------------------------------*\
	        MIN WIDTH
\*------------------------------------*/

@media(min-width:992px){
.nav_area ul li:hover ul.sub-menu {	display:block;}

.nav_area > ul > li ul.sub-menu {
    transform-origin: 50% 0;
    transform: scaleY(0) translateZ(0);
    opacity: 0;
    transition: transform 0.3s, opacity 0.3s;
    display: block;
}

.nav_area > ul > li:hover ul.sub-menu {    transform: scaleY(1) translateZ(0);      opacity: 1;  }
	
ul.menu{display:block !important; }

.nav_area > ul > li ul.sub-menu {    transform-origin: 50% 0;    transform: scaleY(0) translateZ(0);    opacity: 0;    transition: transform 0.3s, opacity 0.3s;    display: block; }

.nav_area > ul > li:hover ul.sub-menu {    transform: scaleY(1) translateZ(0);    opacity: 1;  }

span.arrow{display:none; color:#fff;}

label.toggle {    display: none;  }

nav.nav_area {  padding-left: 10%;  }

}


@media(min-width:768px){
label.toggle-sidemenu {    display: none;  }

ul.sidemenu {    display: block !important;  }

}


/*------------------------------------*\
	        MAX WIDTH
\*------------------------------------*/
.wrapper {
    overflow-x: hidden;
}

@media (max-width:1200px){

	.nav_area > ul > li {padding-right:5px;}	
	.home-banner .owl-dots {
    position: relative;
    bottom: 0;
    right: 0;
    background: #b5b5b5;
    margin-top: 0 !important;
}
	nav.nav_area {
    padding-left: 5%;
}
.nav_area ul li a{font-size:19px;}
}


@media (max-width:991px){	

	
	.header .row {    flex-wrap: nowrap;    }
	
	.logo-side {    width: 80%;  }
	
	ul.menu {    display: none; position:absolute; width:100%; left:0;  text-align: left;    background:#6600cc;  z-index:2;    padding: 15px 10px;}	

	.menu-side {    position: absolute;    top: 0;    left: 0;    width: 100%;  }	
	
	.lang span {    height: 25px;    line-height: 25px;     text-align: center; }
	
	.nav_area ul li a {    line-height: 40px;    font-size: 14px; color:#fff; }
	
	nav.nav_area ul li{display:block;     position: relative; }
	
	span.arrow {
    position: absolute;
    right: 10px;
    color: #fff;
    top: 10px;
    width: 40px;
    text-align: center;
    height: 30px;

	}
	
	ul.sub-menu {    display: none;    position: relative;  background: none;	}
	
	ul.sub-menu li {    padding: 0;  }
	
	ul li .sub-menu li a { padding:0;border-bottom:1px solid #fff }
	ul li .sub-menu li a:hover{color:#000}
	.lang:before {margin-left:-15px; height:30px;  }
	
	.top-header {    padding: 5px 0;  }
	.logo {    margin-bottom: 0;  }
	.header{position:relative;}
	
	.toggle {
    color: #6600cc;
    font-size: 22px;
    position: absolute;
    right: 15px;
    display: block;
    text-align: right;
    bottom: 15px;
	}


	ul.sidemenu li {padding:5px 10px;}

	.right-part > div {
    display: table;
}
.right-part .btn-div {
    margin-top: 15px;
}

/*join 2020-2-11 delete*/
    /*.table-data table td,.table-data table tr{display:block;width:100% !important}*/
    .table-data table td,.table-data table tr{display:grid;}
	.table-data table tr.hide-mobile{display:none;}
}


@media (max-width:767px){
	
	.toggle { bottom:30px; }
	.sub-banner img {object-fit: cover;  }
	.footer {    font-size: 13px;  }
	.right-part > div {    display: block;  }
	
	.blog-img {    text-align: center;    margin: 0 auto 25px;  }
	.address {    border-left: 0;    padding-left: 15px;    margin-top: 30px;  }
	.sidemenu {    display: none;   }
	.pagination {text-align:center;}
	.home-banner .owl-dots {    position: relative;  bottom: 0;  right: 0;  background: #b5b5b5;   margin-top: 0 !important;	}
	.home-banner .item img {    height: 300px;    object-fit: cover;  }
	.home-banner .item h2 {		font-size:18px;  }
	.title-bg{width:100%;  padding: 10px 15px;}
	h2.section-title {    font-size: 26px;  }	
	.event-slider {    max-width: 80%;   }
	.news-item {    margin: 0 auto 30px;    text-align: center;max-width:280px;  }
	.event-item h3 {font-size:14px;}
	
	.table-data table { width: 100%;font-size:13px; }
	
	.table-data table td:first-child{ font-size:13px;  }
	.btn-div {    width: 100%;    text-align: center;    margin: 25px 0 15px;  }
	.filter-part * {    display: block;    width: 100% !important;    max-width: 80% !important;    margin: 0 auto 30px !important;  }
	.comm-item{max-width:300px;margin:0 auto 30px;}
	.blog-details .flex-direction-nav a.flex-next {
    right: -40px;
	}
	.blog-details .flex-direction-nav a.flex-prev {
		left: -40px;
	}
	
}


@media (max-width:500px){
	.comm-item{padding:0;}
	.comm-item h3 {
    font-size: 14px;
    padding: 15px 10px 5px;
	}
	a.orange-btn{font-size:14px;}
	
	
}

/*分頁css*/
.pagination {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
    flex-wrap: wrap;
  padding: 0;
  margin: 15px 0 30px 0;
  list-style: none;
}
.pagination .page-link {
position: relative;
  display: block;
  padding: 8px 15px;
  font-family:'Lato', Mukta, sans-serif;
  line-height: 1.25;
  color: #575758;
  background-color: #fff;
  -webkit-transition: background 300ms ease-in-out, color 300ms ease-in-out;
  -o-transition: background 300ms ease-in-out, color 300ms ease-in-out;
  transition: background 300ms ease-in-out, color 300ms ease-in-out;
  margin-right: 8px;
}

.pagination .page-link:hover,.pagination .page-item.prev .page-link,.pagination .page-item.next .page-link {
background: #797979;
color: #ffffff;
text-decoration: none;
}

.pagination .page-item.active .page-link {
background: #0c69bb;
color: #ffffff;
}
/*分頁css結束.   這個一般都有。*/

#wrap .select_area { display:inline-block; vertical-align:top; width:100%; max-width:120px; vertical-align:top; background-color:#ffffff; border-radius:2px; position:relative; cursor:pointer; }
#wrap .select_area:before { position:absolute; right:15px; top:50%; content:""; width:0; height:0; border-style:solid; border-width:7px 6px 0 6px; border-color:#3256a0 transparent transparent transparent; transform:translateY(-50%); }
#wrap .select_area select { width:100%; height:32px; padding-left:10px; padding-right:40px; background-color:transparent;  border:1px solid #cccccc; box-sizing:border-box; border-radius:2px; position:relative; font-size:13px; color:#000000; -webkit-appearance:none; appearance:none; outline:none; }

#wrap .multipage { padding-top:34px; margin:0 -7px; font-size:20px; text-align:right; clear:both; }
#wrap .multipage a { display:inline-block; zoom:1; *display:inline; vertical-align:top;  margin:0 2px; text-align:center; line-height:12px; font-size:14px; color:#000000; transition:all 0.2s ease; }
#wrap .multipage a.row,
#wrap .multipage a.back,
#wrap .multipage a.next { width:26px; margin:0 7px; background-color:#797979; color:#ffffff; }
#wrap .multipage a.onpage,
#wrap .multipage a:hover { background-color:#048ed6; color:#ffffff; }
#wrap .multipage .select_area { display:none; }

@media screen and (max-width: 980px){
/* desktop to ipad */


#wrap .multipage { text-align:center; }
#wrap .multipage a { display:none; }
#wrap .multipage .select_area { display:inline-block; }
}

.active-success{
    color: #790ee6;
}
.active-success a{
    color: #790ee6;
}
/* SORTABLE CONTENT */
.content_detail .content_item { margin-bottom:42px; }
.content_detail .content_item .content{ background: #FFF; }/* . john 2019.12.30 add*/
.content_detail .content_subtitle { font-size:23px; color:#048ed6; font-weight:700; margin-bottom:16px; }

.content_detail .content_img { font-size:0; margin:0 -8px; display:block; }
.content_detail .content_img .col_1,
.content_detail .content_img .col_2,
.content_detail .content_img .col_4 { display:inline-block; vertical-align:top; padding:0 8px 10px 8px; box-sizing:border-box; text-align: center; }
.content_detail .content_img .col_1 img,
.content_detail .content_img .col_2 img,
.content_detail .content_img .col_4 img { max-width:100%; height:auto; box-shadow:2px 2px 5px rgba(0,0,0,0.3); }
.content_detail .content_img .col_1 { width:100%; }
.content_detail .content_img .col_2 { width:50%; }
.content_detail .content_img .col_4 { width:25%; }

.content_detail .content_desc { line-height: 1.5em; }
.content_detail .content_desc iframe { max-width:100%; box-sizing:border-box; }
.content_detail .content_desc img { max-width:100%; box-sizing:border-box; }
.content_detail .content_desc ul,
.content_detail .content_desc ol { display:block; xmargin:1em 0; xpadding-left:40px; padding-left:20px; margin: 0; }
.content_detail .content_desc ul { list-style-type:disc; }
.content_detail .content_desc ul ul { list-style-type:circle; margin-top: 10px; }
.content_detail .content_desc ol { list-style-type:decimal; }
.content_detail .content_desc li { padding-bottom: 6px; }
.content_detail .content_download_file_list { display: table; }
.content_detail .content_download_file_list .content_download_file_icon { display: table-cell; vertical-align: middle; }
.content_detail .content_download_file_list .content_download_file { display: table-cell; vertical-align: middle; padding-left: 10px; }
.content_detail .content_download_file_list .content_download_file a { color:#048ed6;  }
.content_detail .content_download_file_list .content_download_file a:hover { color:#3256a0; }


.content_detail .main-content{padding:30px 0 40px;}
.content_detail .inner-nav{border-bottom:1px solid #e6e6e6; padding-bottom:15px; margin-bottom:30px; font-size:18px; color:#a3a3a3}
.content_detail .baoming-title{ color:#4f81bd; font-size:22px; font-weight:bolder}
.content_detail .orange-line{ background-color:#f27a57 ; height:6px; max-width:80px; margin:10px 0px 20px;}
.content_detail .baoming1,.baoming2,.baoming3{ background-color:#f4f4f4; border-bottom:#d0d0d0 solid  5px; margin:30px 0;border-radius:5px; padding:30px 30px;border-top:#d0d0d0 solid 1px; border-left:#d0d0d0 solid 1px;border-right:#d0d0d0 solid 1px;}
.content_detail .main-content .col-md-6 .img-responsive { max-width: none;width: 100%;}
.content_detail .bm-dt-name{ background-color:#f27a57; color:#FFFFFF; font-size:24px; line-height:48px; padding-left:20px;}
.content_detail .bm-content{ text-indent:2em; font-size:16px; padding:3px 0px; color:#565656}
.content_detail .reg-way{ border-top:#d0d0d0 dashed thin; padding:10px 0;}
.content_detail .rg-left-text{ float:left;color:#4f81bd; font-size:18px; font-weight:bold}
.content_detail .rg-right-text{ float:left;font-size:18px; color:#565656}
.content_detail h4{margin: 0px;padding: 0px;}
.content_detail .rg-right-text a{color: #565656;}

/*聯網學苑圖片*/
@media (max-width:960px) {
    .content_detail .content_item .col-md-6 img{
        max-height: 250px;
        width: 100%;
    }
}