body {
    font-family: "微軟正黑體", "Helvetica Neue", Helvetica, Arial, sans-serif, "Microsoft JhengHei";
    font-size: 15px;
    line-height: 1.5;
    color: #333333;
    background-color: #fff;
}

/*---------------------------------------------
home
-----------------------------------------------*/

.home,#home,html {
    position: relative;
    height: 100%;
}
.home #home .slogan-area {
    vertical-align: middle;
    display: table;
    width: 100%;
    height: 100%;
    background: url(../images/main.jpg) no-repeat;
    background-size: cover;
    background-position: center;
}
.home-footer {position: absolute; bottom: 0; left: 0; right: 0; z-index: 999;}
.slogan-img {position: relative; width: 50%; margin: 0 auto;margin-top: 10%;}
.slogan-img .slogan-bg {position: absolute; left: 0; top: 0; z-index: 0;}
.slogan-img img {width: 80%; max-width: 100%; height: auto; margin-left: 6%;}
.page-link {position: absolute; left: 0; right: 0; margin: 0 auto; bottom: 15%; text-align: center; margin-left:-60px;}
.page-link li {list-style-type:none;display: inline-block;text-align: center;margin: 30px; }
.page-link li a {width: 180px; height: 80px; font-size: 19px;padding-top: 10px;  font-weight: bold; text-shadow:2px 2px 2px #000000; color: #ffffff; display: block;border:4px solid #fbb03b;}
.page-link li:hover a {text-decoration: none;}
.page-link li:hover {
   -webkit-transform: translateY(-20px);
   -moz-transform: translateY(-20px);
   -o-transform: translateY(-20px);
   -ms-transform: translateY(-20px);
   transform: translateY(-20px);
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 100;
   -webkit-transition: all 0.2s linear;
   -moz-transition: all 0.2s linear;
   -o-transition: all 0.2s linear;
   -ms-transition: all 0.2s linear;
   transition: all 0.2s linear;
   background-color: rgba(251,176,59, 0.8);
}

/*.idp-logo {width: 110px; height: 60px; border-radius: 10px; background-color: #ffffff; padding: 5px;
  -webkit-box-shadow: 1px 1px 5px 2px #cccccc;
  -moz-box-shadow: 1px 1px 5px 2px #cccccc;
  box-shadow: 1px 1px 5px 2px #cccccc;
position: absolute; left: 0; z-index: 99; right: 0; margin: 0 auto;}
.idp-logo img {margin-top: 0px; width: 100%; height: auto;}*/

#footer {background-color: #ffffff; padding: 10px 0 5px 0;}
#footer a {color: #c1272d;}
.icon-idp {
    width: 142px;
    height: 44px;
    background-image:url(../images/idp.png);
}
.icon-cheers {
    width: 82px;
    height: 34px;
    background-image:url(../images/cheers.png);
    margin-right: 5px;
}

.icon-fb {
    width: 32px;
    height: 32px;
    background-image:url(../images/fb.png);
}
.icon-gplus {
    width: 32px;
    height: 32px;
    background-image:url(../images/google.png);
}
[class^="icon-"], [class*="icon-"] {
    position: relative;
    top: -2px;
    display: inline-block;
    vertical-align: middle;
    color: transparent;
    text-shadow: none;
    background-color: transparent;
    border: 0;
    background-repeat: no-repeat;
    background-size: 100%;
}
/*---------------------------------------------
category
-----------------------------------------------*/

.navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.open>a:focus, .navbar-default .navbar-nav>.open>a:hover {
    color: #fff;
    background-color: #f15a24;
}
.nav>li>a {width: 100%;}
.pagebg {
    background-image: url(../images/page_bg.jpg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
}
.main-nav a {font-size: 16px;margin-right: 10px;}
.main-nav,.navbar-header {background-repeat: repeat; background-image: url(../images/nav_bg.jpg);}
.navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:focus, .navbar-default .navbar-nav>.active>a:hover,.navbar-default .navbar-nav>.active {
    color: #fff;
    background-color: #f15a24;
}
.navbar-default {
    background-color: transparent;
   border-color: transparent;
}
.navbar-default .navbar-nav>li>a,.navbar-default .navbar-nav>li:hover>a {
    color: #fff;
}
.navbar-default .navbar-collapse, .navbar-default .navbar-form,.dropdown-menu {border: none;}

.dropdown-menu>li>a:focus, .dropdown-menu>li>a:hover {
    color: #ffffff;
    text-decoration: none;
    background-color: transparent;
}
.dropdown-menu>li>a:visited {color: #ffffff;}
.dropdown-menu>li>a {color: #fcfcfc;}
.navbar-default .navbar-nav>li:hover {color: #fff;background-color: #f15a24;}
.dropdown-menu {background-color: #f15a24; min-width: 178px;}

.top {background: url(../images/top.jpg) no-repeat; background-size: cover; height: 238px; margin-top: 50px;}
.title {position: relative; display: inline-block;}
.title img {height:210px; width: auto; margin-top: 10px;}
.slogan {position: absolute;left: 0; top: 0;z-index: 1;}
.slogan-bg {mix-blend-mode: multiply;}
.list {position: relative;margin-bottom:30px;overflow: hidden;}
.img-cover {display:block; max-width:100%; width:100%; height:auto; }
.caption {position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    vertical-align: middle;
    margin: auto;
    width: 100%;
    height: 100%;
    text-align: center;}
.main{padding-bottom:70px;}
.main.event{padding-bottom:20px;}
.page-title img {height: 80px; width: auto; margin:80px 0 40px 0; }
.page-title h2 {
  margin:80px 0 40px 15px;
  /*background-repeat: repeat; 
  background-image: url(../images/reb_bg.jpg); */
  border: 3px solid #f9c134;
  background-color:#f9c134;
  font-size: 21px; 
  padding: 6px 12px; 
  color: #ffffff;
  display: inline-block;
  text-shadow:1px 1px 2px #555555;
  border-radius:8px;
  }


  .thumbnail .page-caption {
    padding: 9px;
    color: #333;
   }
  .page-caption {opacity: 0.7;}
  .page-caption h3 {font-size: 18px;margin-top: 5px; line-height: 24px;height: 50px;}
  .page-caption img {width: 70px; height: auto; display: block;margin: 0 auto;}
  .thumbnail:hover {text-decoration:none; }
  .thumbnail:hover .page-caption {opacity: 1;}
  .thumbnail.activity-link .page-caption h3 {color: #f15a24;}
  .thumbnail.activity-link {border-color:#f9c134; background-color:rgba(249,193,52, 0.3);}
  .thumbnail.activity-link:hover {border-color:#f15a24;} 

/*---------------------------------------------
 article
-----------------------------------------------*/
.article-title {text-align: center;}
.article-title h1 {font-size: 29px; margin-top: 80px; line-height: 36px;}
.practical-area h1 {font-size: 29px;line-height: 36px}
.article-title img {max-width: 100%; height: auto; margin: 10px auto;}
.hr {border-top: 1px solid #f9c134;}
p {margin: 25px 0;}
article h3 {font-size: 18px;}
.other-link {list-style-type:circle;}
.article-area {margin-bottom: 30px;}
.act-img img {max-width: 100%; height: auto; width: 100%;}
.content {font-size: 17px;}
.content p {margin:10px 0; }

/*-----------------------------------------------
img hover
------------------------------------------------*/
.view-first p img {width: 70px; height: auto;}
.view-first h3 {
  margin-top: 28%;
  background-repeat: repeat; 
  background-image: url(../images/reb_bg.jpg); 
  font-size: 21px; 
  padding: 6px 12px; 
  color: #ffffff;
  display: inline-block;
  }
.view-first img {
   -webkit-transition: all 0.2s linear;
   -moz-transition: all 0.2s linear;
   -o-transition: all 0.2s linear;
   -ms-transition: all 0.2s linear;
   transition: all 0.2s linear;
}
.view-first .mask {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=100);
   opacity: 100;
   background-color: rgba(0,0,0,0);
   -webkit-transition: all 0.4s ease-in-out;
   -moz-transition: all 0.4s ease-in-out;
   -o-transition: all 0.4s ease-in-out;
   -ms-transition: all 0.4s ease-in-out;
   transition: all 0.4s ease-in-out;
}

.view-first .mask:hover {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   background-color: rgba(0,0,0,0.7);
   -webkit-transition: all 0.4s ease-in-out;
   -moz-transition: all 0.4s ease-in-out;
   -o-transition: all 0.4s ease-in-out;
   -ms-transition: all 0.4s ease-in-out;
   transition: all 0.4s ease-in-out;
}

.view-first p {
   -webkit-transform: translateY(20px);
   -moz-transform: translateY(20px);
   -o-transform: translateY(20px);
   -ms-transform: translateY(20px);
   transform: translateY(20px);
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   -webkit-transition: all 0.2s linear;
   -moz-transition: all 0.2s linear;
   -o-transition: all 0.2s linear;
   -ms-transition: all 0.2s linear;
   transition: all 0.2s linear;
   margin-top: 20px;
}
.view-first:hover img {
   -webkit-transform: scale(1.1,1.1);
   -moz-transform: scale(1.1,1.1);
   -o-transform: scale(1.1,1.1);
   -ms-transform: scale(1.1,1.1);
   transform: scale(1.1,1.1);
}

.view-first:hover .mask {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
}
.view-first:hover h2,
.view-first:hover p,
.view-first:hover a.info {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
   -webkit-transform: translateY(0px);
   -moz-transform: translateY(0px);
   -o-transform: translateY(0px);
   -ms-transform: translateY(0px);
   transform: translateY(0px);
}
.view-first:hover p {
   -webkit-transition-delay: 0.1s;
   -moz-transition-delay: 0.1s;
   -o-transition-delay: 0.1s;
   -ms-transition-delay: 0.1s;
   transition-delay: 0.1s;
}

.speaker img {margin: 20px auto;}
.clear {
    clear: both;
}
.page-title.event h3 {text-align: center;font-size: 21px;color: #e36c0a;}
.page-title.event {margin-top: 20px; border-top: 2px dotted #cccccc;}
h3.text-danger {margin-top: 0;}
.event-info p {margin:10px 0; }
.speaker-info {min-height: 0px; margin-top: 40px;}
p {margin: 10px 0;}
.event-img {max-width: 600px; margin: 10px auto; width: 100%;}
.event-btn {text-align: center; margin-top: 20px;}
.event-btn .btn {margin:5px;}
.event {font-size: 16px;line-height: 1.6;}
.event img {margin-bottom: 20px;}
.event-title {background: #e36c0a; color: #ffffff;}
.event-table table {background: #ffffff;}
.rest {text-align: center; color: #666666;}
.event-btn {margin-bottom: 30px;}
/*---------------------------------------------
rwd
-----------------------------------------------*/
@media (max-width: 1400px) {

.slogan-img {position: relative; width: 60%; margin: 0 auto;margin-top: 10%;}
.slogan-img img {width: 100%; max-width: 100%; height: auto; margin-left: 0;}

}

@media (max-width: 922px) {

#footer span {display: block; margin:0 auto 8px auto; }
.page-link {position: absolute; left: 0; right: 0; margin: 0 auto; bottom: 30%; text-align: center; margin-left:-60px;}
h3.text-danger {margin-top: 20px;}
.speaker-info {min-height: 0px;}
}

@media (max-width: 767px) {
.navbar-default .navbar-nav .open .dropdown-menu>li>a:focus, .navbar-default .navbar-nav .open .dropdown-menu>li>a:hover {
    color: #ffffff;
    background-color: transparent;}
.navbar-default .navbar-nav .open .dropdown-menu>li>a {
    color: #ffffff;}
.navbar-default .navbar-toggle:focus, .navbar-default .navbar-toggle:hover {
    background-color: transparent;
}
.navbar-default .navbar-toggle {
    border-color: transparent;
}
.navbar-default .navbar-toggle .icon-bar {
    background-color: #ffffff;width: 30px;height: 3px;
}
.top {text-align: center; height: auto;padding-bottom: 10px;}
.title img {width: 100%; height: auto;}
.main-nav,.navbar-header {background-image: url(../images/nav_bgm.jpg);}
.page-title {overflow: hidden;}
.page-title img {height: 70px;}

.slogan-img {width: 90%;}
.slogan-img img {width: 100%; max-width: 100%; height: auto; margin-left: 0%;}
.page-link {position: relative;  text-align: center; width: 160px; margin: 0 auto; left: -40px; top:250px;}
.page-link li {margin: 10px auto;}
.page-link li a {width: 160px; height: 70px; font-size: 17px;padding-top: 5px;} 
.home-footer {position: relative; bottom: 0; left: 0; right: 0; z-index: 999;}
.other-link-area {padding-top: 20px;}
.article-title h1 {font-size: 25px; margin-top: 80px; line-height: 32px;}
.practical-area h1 {font-size: 25px;line-height: 32px}
.view-first p {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 100;
}
.view-first .mask p img {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
}


}

@media (max-width: 500px) {
  .slogan-img {width: 98%;}
  .page-link {position: relative;margin: 0 auto; left: -40px; top:180px;}

}