/*============================================*/	
/* Reset */
*,
*:after,
*:before {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;}
	
ul{ margin:0; padding:0;}

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

.clearfix:after {
	clear: both;}
/* end Clearfix*/



html, body, body a,body p,body span,body h1,body h2,body h3,body h4,body h5,body h6, li, table{
  font-family: 'Arial', "蘋果儷中黑","微軟正黑體","Microsoft JhengHei","微軟雅黑體","Microsoft YaHei" !important;}


body.subpage-bg{ background: url(../img/inner-bg.jpg) repeat center;}


nav.desktop-nav{ position: absolute; z-index: 99; width: 100%; height: 65px; background: #dcc942;}
nav.desktop-nav.page-nav{ position: relative;}

nav.desktop-nav .main-links{ display: block; width: 80%; margin: 0px auto 20px; text-align: right; padding-top: 15px;}
nav.desktop-nav .main-links li{ display: inline-block; margin: 0px 20px;}
nav.desktop-nav .main-links li a{ font-size: 16px; letter-spacing: 0.1em; color: #473d2c; line-height:16px; font-weight:bold;}
nav.desktop-nav .main-links li span{ display:block; font-size:12px; line-height:16px; letter-spacing:0; color:rgba(111,127,48,1)}
.nav-logo{ position: absolute; z-index: 10000; left: 20px; top: 4px; display: flex;}

.nav-logo a.logo-text,
.nav-logo a.logo-text:hover{ display: inline-block; margin: 0; line-height: 1.4em; font-size: 15px; font-weight:bold; padding-top: 8px; padding-left: 10px; color: #000;}


.home-btn{ background: url(../img/nav-logo.png) no-repeat center; display: block;  width: 50px; height: 50px; background-size: cover;  z-index: 999;}

.mobile-toggle{ position: absolute; right: 20px; top: 8px; z-index: 10000;}



.hamburger__icon, .hamburger__icon:before, .hamburger__icon:after{ background: #473d2c; height: 3px; width: 30px; border-radius: 6px;}

.main-title:before{ content: ''; display: inline-block; width: 90px; height: 100px; background: url(../img/title-frog.png) no-repeat center; background-size: cover; vertical-align: middle;}
/*== bg-video setting ==*/

.index-bg{ position: fixed; 
    position: fixed;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -100;
    transform: translateX(-50%) translateY(-50%);
    background: url('../img/index-bg.jpg') no-repeat;
    background-size: cover;}

.stopfade { 
   opacity: .5;
}
/*== end bg-video setting ==*/


/*==  index setting ==*/


.main-title-wrapper{position: relative; z-index: 80; top: 100px; width: 100%; margin: 0 auto; background: none; padding: 0 40px; overflow: hidden;}
.main-title-wrapper.index-title .left{ float: left; width: 50%; max-width: 700px;}
.main-title-wrapper .right{ float: right; width: 50%; max-width: 800px; position: relative; height: 100%;}
.main-title-wrapper.index-title .mobile-title{ display: none;}

.main-title-wrapper .left img,
.main-title-wrapper .right img,
.compass-wrapper img{ width: 100%; height: auto;}

.compass-wrapper { width: 100%; position: relative;}
.compass-wrapper #mask{ position: absolute; z-index: 29;}
.compass-wrapper #compass{ position: absolute; z-index: 19}
.compass-wrapper #compass-bg{ position: relative; z-index: 9}

.main-title-wrapper .right #main-title{ position: relative; bottom: 0; right: 0;}

.index-title .main-btn { position: absolute; width: auto; z-index: 999; left: 45%; margin-left: -120px; top: 54%;}
.index-title .main-btn a{ font-size:18px; display: block; font-weight:bold; letter-spacing:0; background: rgba(121,29,29,1); color:#fff; padding: 8px 10px; border-radius: 10px; box-shadow: 0 0 6px rgba(0,0,0,0.4);}
.index-title .main-btn a i{color:#fff; font-size:20px;}

/*== end indexsetting ==*/




/*--subpage-title--*/


.page-banner{ width: 100%; display: flex; position: relative; top: 60px; background: url('../img/index-bg.jpg') no-repeat; background-size: cover; height: 500px; overflow: hidden;}
.page-banner .left{ width: 50%;}
.page-banner .left .compass-wrapper{ top: -35%; left: -15%; max-width: 540px;}
.page-banner .right{ width: 50%;}
.page-banner .right img{ width: 100%; height: auto; position: relative; top: 4%; max-width: 600px; display: block; margin: 0 40px 0 auto;}

.page-wrapper.has-banner{margin-top: 60px;}

.page-wrapper a{ word-wrap: break-word;}

.inner-title h3{ font-size: 26px; color: #33502c; font-style: italic; margin-bottom:10px;}
.inner-title h4{ font-size: 18px; color: #333; font-weight: bold; margin-bottom:10px;}

.title-bg{ padding: 10px 20px; margin: 10px auto; text-align: center; font-size: 20px; letter-spacing: 0.1em; line-height: 1em;}
.bg-light-green{ background: #768144; color: #fff;}
.bg-deep-green{ background: #33502c; color: #fff;}


.subpage-title.left{ position: absolute; left: 20px; top:100px; width: 110px; z-index: 8000;}
.subpage-title.right{ position: absolute; right: 20px; top:100px; width: 70px; z-index: 8000;}
.subpage-title.left img,
.subpage-title.right img{ width: 100%; height: auto;}

section.page-wrapper{ max-width: 1100px; margin:  0 auto; padding: 40px 40px; background: none;}


.pagination-wrapper{ margin-bottom: 4em;}

/*--history-page--*/

.history-wrapper .each-item h5{ margin:15px auto 5px;}


/*-0328 add history-detail --*/

.video_content h4.stitle {
    text-align: center; margin: 2em auto 1em;}

.video_content ul {
    margin-bottom: 30px;
}

.video_content ul a {
    text-decoration: none;
}

.video_content ul li {
    position: relative;
    width: 22%;
    min-width: 200px;
    height: auto;
    min-height: 100px;
    margin: 30px 0 30px 2%;
    padding: 0;
    display: inline-block;
    overflow: hidden;
    text-align: center;
    background-color: #FFF;

    box-shadow: 1px 1px 2px 2px rgba(10%, 10%, 10%, 0.1);
}

.video_content p {
    padding: 10px 0;
    font-size: 13px;
    line-height: 1.5em;
}

.video_content ul li .v01 {
    width: 100%;
    min-width: 200px;
    height: auto;
    min-height: 160px;
    position: relative;
}

.video_content ul li .v02 {
    opacity: 0;
    filter: alpha(opacity=0);
}

.video_content ul li:hover .v02 {
    position: absolute;
    width: 100%;
    min-width: 200px;
    height: auto;
    min-height: 160px;
    left: 0;
    top: 0;
    display: block;
    z-index: 1000;
    background: url(../img/mp3_img.jpg) no-repeat center center;
    background-size: cover;

    opacity: 1;
    filter: alpha(opacity=100);
    -webkit-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    -ms-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    transition: all 0.2s linear;
}

.video_content ul li .v03 {
    opacity: 0;
    filter: alpha(opacity=0);
}

.video_content ul li:hover .v03 {
    position: absolute;
    width: 100%;
    min-width: 200px;
    height: auto;
    min-height: 160px;
    left: 0;
    top: 0;
    display: block;
    z-index: 1000;
    background: url(../2016images/mp3_img2.jpg) no-repeat center center;
    background-size: cover;

    opacity: 1;
    filter: alpha(opacity=100);
    -webkit-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    -ms-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    transition: all 0.2s linear;
}



/*--end history-page--*/

/*--judge-page--*/

section.judge-wrapper{ background: none; max-width: 1600px;}
section.judge-wrapper .row{max-width: none;}

.owl-theme .owl-nav{position: absolute; top: 50%; width: 100%; margin-top: -60px;}

.judge-wrapper .owl-carousel .owl-nav button.owl-prev{ background: url(../img/arrow-l.svg) no-repeat center; width: 30px; height: 108px; position: absolute; left: 27%;}
.judge-wrapper .owl-carousel .owl-nav button.owl-next{ background: url(../img/arrow-r.svg) no-repeat center; width: 30px; height: 108px; position: absolute; right: 27%;}
.judge-wrapper .owl-carousel .owl-nav button span{ display: none;}

.judge-wrapper .owl-carousel .owl-stage-outer:before{ content: ''; position: absolute; top: 0; left: 0; height: 100%; width: 33.33%; z-index: 999;
/* ==bg color== */
background: -moz-linear-gradient(left, rgba(255,220,0,0.8) 50%, rgba(255,220,0,0.3) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left, rgba(255,220,0,0.8) 50%,rgba(255,220,0,0.3) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, rgba(255,220,0,0.8) 50%,rgba(255,220,0,0.3) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ccffdc00', endColorstr='#4dffdc00',GradientType=1 ); /* IE6-9 */
}
.judge-wrapper .owl-carousel .owl-stage-outer:after{ content: ''; position: absolute; top: 0; right: 0; height: 100%; width: 33.33%; z-index: 999;
/* ==bg color== */
background: -moz-linear-gradient(left, rgba(255,220,0,0.3) 0%, rgba(255,220,0,0.8) 50%); /* FF3.6-15 */
background: -webkit-linear-gradient(left, rgba(255,220,0,0.3) 0%,rgba(255,220,0,0.8) 50%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, rgba(255,220,0,0.3) 0%,rgba(255,220,0,0.8) 50%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4dffdc00', endColorstr='#ccffdc00',GradientType=1 ); /* IE6-9 */
}

/*--end judge-page--*/
/*--apply-page & signup-page--*/

.apply-wrapper{ margin-top: 3em;}
.apply-wrapper h1{ color: #000; font-size: 20px; margin-top: 2em;}
.apply-wrapper p,
.apply-wrapper li{ color: #000; font-size: 16px;}

.apply-wrapper ul{ margin-bottom: 35px; padding-left: 20px;}
.apply-wrapper ul.number-list{ list-style: decimal;}

.radius-bg{ background: #fff; border-radius: 40px; font-size: 22px; font-weight: bold; display: inline-block; padding: 2px 20px; margin-bottom: 10px;}

.apply-wrapper h5{ margin: 10px auto; color: #000; font-size: 16px;}
.apply-wrapper h6{ color: #000; font-size: 15px; font-weight: normal;}

.signup-btn{ font-size: 40px; border-radius: 40px; display: block; background: #fff; text-align: center; font-weight: bold; letter-spacing: 0.1em; margin: 2em auto;}

/*--end apply-page & signup-page--*/

/*-- news-wrapper --*/

.news-wrapper{ margin-top: 3em;}

.news-wrapper .each-news{ margin: 2em auto;}

.news-wrapper .each-news .news-img{ width: 45%; float: left;}
.news-wrapper .each-news .news-img img{ width: 100%; height: auto;}

.news-wrapper .each-news .news-info{ width: 55%; float: left; padding-left: 30px;}
.news-wrapper .each-news .news-info h1{ font-size: 20px; margin: 0 auto 10px; line-height: 1.4em; color: #000;}
.news-wrapper .each-news .news-info .date{font-size: 14px; color: #000;}
.news-wrapper .each-news .news-info .radius-bg{ border-radius:20px; padding: 15px 20px;   font-size: 14px; margin-top: 10px; color: #000; font-weight: normal;}


/*-- end news-wrapper --*/

/*--footer--*/

footer.footer-index{ position: fixed; bottom: 0; z-index: 99; width: 100%; padding: 20px 40px 40px; background: rgba(111,127,48,0.4); display: flex; align-items: center;}

footer .unit-wrapper{ display: flex; flex-wrap: wrap; max-width: 1200px;}
footer .unit-wrapper a{ display: inline-block; height: 20px; margin: 6px;}
footer .unit-wrapper a img{ width: 100%; height: auto; max-width: 460px;}



footer .social-wrapper{ margin: 0 0 0 auto;}
footer .social-wrapper .fb-btn{ display: flex; align-items: center; line-height: 1.4em; color: #ccc; min-width: 280px;}
footer .social-wrapper .fb-btn span{ display: flex; flex-wrap: wrap;}

footer .social-wrapper .fb-btn:before{ content: '\f082'; font-family: 'FontAwesome'; display: block; font-size: 3em; padding-right: 8px;}
footer .social-wrapper a:hover {color: #fff;}


footer.footer-page{ position: relative;  width: 100%; padding: 20px 40px 40px; background: rgba(111,127,48,0.4);}

footer .footer-frog{ position: absolute; right: 40px; bottom: 10px; width: 180px;}
footer .footer-frog img{ width: 100%; height: auto;}

/*-- RWD setting --*/
/*-- RWD setting --*/

@media all and (max-width: 1280px) { .nav-logo a.logo-text{ display: none;} }

@media all and (max-width: 1200px) {
    .subpage-title.left{ width: 70px;}
    .subpage-title.right{ width: 50px;}
    section.page-wrapper{ width: calc(100% - 140px); }
    
    section.page-wrapper.judge-wrapper{ width: 100%;}
    
    
}/*--end 1200px--*/

@media all and (max-width: 998px) {
    nav.desktop-nav .main-links{ display: none;}
    .nav-logo a.logo-text{display: block;}
    
    .page-banner{ height: 300px;}
    
    /*--footer--*/
    footer.footer-index{ padding: 10px 20px;}
    footer .unit-wrapper{ width: 50%;}
    footer .unit-wrapper a{ margin-bottom: 10px;}
    footer .unit-wrapper a
    footer .social-wrapper{ margin-top: 90px; width: 40%; text-align: right;}
}/*--end 998--*/


@media all and (max-width: 767px) {
    
    .main-title-wrapper{ padding: 0 20px;}
    .main-title-wrapper.index-title{ width: 100%; top: 70px; position: relative; height: 100%;}
    
    .main-title-wrapper.index-title .left{ float: none; width: 100%; max-width: 100%; }
    .main-title-wrapper.index-title .right{float: none; width: 100%; max-width: 480px; margin: 20px 0 160px auto;}
    
    .index-title .main-btn{  top: calc(100% - 240px);     margin-left: 0px; left:3%; }
    
    .index-title .main-btn a{font-size:16px;}
   footer.footer-index{ position: relative;}
   footer.footer-index,
   footer.footer-page{ display: block;}
   footer .social-wrapper{ margin: 15px 0 10px;}
   footer .social-wrapper a{ font-size: 12px;}
   
    
    
    
/*--news-page 767--*/

.news-wrapper .each-news{ max-width: 480px;}
.news-wrapper .each-news .news-img{ width: 100%; float: none;}
.news-wrapper .each-news .news-info{ width: 100%; float: none; padding-left: 0;}
.news-wrapper .each-news .news-info h1{ font-size: 16px; margin-bottom: 10px;}
.news-wrapper .each-news .news-info .radius-bg{ margin-top: 0;}
    

footer.footer-page{  padding: 20px 20px 40px;} 
footer .unit-wrapper a{ margin: 5px 0;}
footer .unit-wrapper a img{ width: 100%; height: auto;}

footer .footer-frog{ width: 120px;}

    

}/*--end 767--*/


@media all and (max-width: 639px) {

    .inner-title h3{ font-size: 18px;}
    .inner-title h4{ font-size: 14px;}
    .apply-wrapper p, .apply-wrapper li{ font-size: 16px; margin: 6px 0;}
    
    .page-banner{ height: 200px;}
    
    section.page-wrapper{ width: 100%; padding-left: 20px; padding-right: 20px;  }
    
    .signup-btn{ margin: 20px auto;}
   
/*--judge-sliser 639--*/    
    
section.page-wrapper.judge-wrapper{ max-width: 480px; padding: 40px 0;}
    
.judge-wrapper .owl-carousel .owl-nav button.owl-prev{ left: 4%;}
.judge-wrapper .owl-carousel .owl-nav button.owl-next{ right: 4%;}
.judge-wrapper .owl-carousel .owl-nav button span{ display: none;}

.judge-wrapper .owl-carousel .owl-stage-outer:before,
.judge-wrapper .owl-carousel .owl-stage-outer:after{ 
    display: none;
}
/*--end judge-sliser 639--*/  
     
    
}/*--end 580--*/

    
@media all and (max-width: 480px) {

    .nav-logo{ left: 16px;}
    .nav-logo a.logo-text{ font-size: 12px; padding-top: 10px;}
    .compass-wrapper{ max-width: 100%; margin: 20px 0;}

    /*--footer 480--*/
    footer .unit-wrapper{ width: 90%; max-width: 340px;}
    footer .unit-wrapper a{ height: auto; margin-bottom: 5px;}
    
    footer .footer-frog{z-index: -1; width: 100px; right: 10px; bottom: 40px;}
    
    
    /*--0328 add history-detail--*/
    /*Video*/
    .video_content h4.stitle {
        line-height: 1.8em;
        font-size: 18px;
    }
    .video_content ul {
        padding: 0;
        list-style: none;
    }
    .video_content .sbox {
        position: relative;
        width: 100%;
        margin-top: -5px;
        padding: 5px 20px;
        left: -8px;
        border: 1px solid #3888be;
        height: auto;
        top: -3px;
        line-height: 1.8;
    }
    .video_content ul li {
        position: relative;
        width: 46%;
        min-width: 100px;
        height: auto;
        min-height: 50px;
        margin: 30px 0 30px 2%;
        padding: 0;
        display: inline-block;
        overflow: hidden;
        text-align: center;
        background-color: #FFF;
        box-shadow: 1px 1px 2px 2px rgba(10%, 10%, 10%, 0.1);
    }
    

}/*--end 480--*/

/*-- Animation setting --*/
/*-- Animation setting --*/

{
  -webkit-transition: all 0.4s ease; 
  -moz-transition: all 0.4s ease; 
  -ms-transition: all 0.4s ease; 
  -o-transition: all 0.4s ease;
  transition: all 0.4s ease;}


{
	-webkit-transition: all 0.2s ease; 
	-moz-transition: all 0.2s ease; 
	-ms-transition: all 0.2s ease; 
	-o-transition: all 0.2s ease;
	transition: all 0.2s ease;}
    
    
@-webkit-keyframes rotating /* Safari and Chrome */ {
  from {
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes rotating {
  from {
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -ms-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
.rotating {
  -webkit-animation: rotating 80s linear infinite;
  -moz-animation: rotating 80s linear infinite;
  -ms-animation: rotating 80s linear infinite;
  -o-animation: rotating 80s linear infinite;
  animation: rotating 80s linear infinite;
}
.table td p{margin-bottom:0;}
        .table td h2{ text-align:center; margin-bottom:0; font-size:24px;}
        .table td h3{margin-bottom:0; font-size:20px;}
        .table-bordered>tbody>tr>td, .table-bordered>tbody>tr>th, .table-bordered>tfoot>tr>td, .table-bordered>tfoot>tr>th, .table-bordered>thead>tr>td, .table-bordered>thead>tr>th {border:1px solid #333;}
        .light-green{background:#a7b36e;}
        .light-deep-green{background:#768144; color:#fff;}
        .wideblock{background:rgb(255,255,255, 0.5); border:2px dashed #768144; position:relative; display:block; padding:20px; border-radius:20px;}
        .wideblock p{margin-bottom:0;}
          hr{margin-bottom:10px; border-top: 1px dashed #768144;}
       .wideblock h4{margin-bottom:0; font-size:22px;} 
       .wideblock img{max-width:100%}
       .white{background:#fff !important;}   
/*information*/
.art_ifo{display:block; overflow:hidden; width:100%; padding:8px 0; border-bottom:1px solid #000;border-top:1px solid #000; margin:.25rem 0 3.5rem; line-height:1;}
.art_date{ font-size:1.125rem; color:#666; display:inline-block; margin-right:.25rem;}
.authors{float:right; }
.art_author{font-size:1.125rem; color:#666; float:right; margin-left: 12px;}
.authors_m{display:none; }
.master_page{display:block; width:100%; letter-spacing:0;}
.master_page h3{ font-size: 24px;
line-height: 45px;
color:#728f33;
padding-bottom: 8px;
margin-bottom: 24px;
border-bottom: 1px solid #b9cdae;}            
ul.fixul{list-style-type:none}
ul.fixul li{display:inline-block; color:#fff;font-size:0.9rem;}
ul.fixul li a{ color:#fff;font-size:0.9rem;}
ul.fixul li::after {
  content: "|";
  margin: 0 5px;
}
ul.fixul li:last-child::after {
  content: "";
  margin: 0;
}