@charset "UTF-8";

html { height: 100%; }
body {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 500;
  line-height: 1.8;
  color: #4d4643;
  text-align: left;
  background-color: #fff;
  font-family: arial,"Microsoft JhengHei","微軟正黑體",sans-serif !important;
}
.new-title {
   text-align: left;
  padding-bottom: 0px;
}
.new-title h2 {
  font-weight: 700;
  font-size: 32px;
  line-height: 60px;
  margin-bottom: 20px;
  text-transform: uppercase;
  position: relative;
}
.new-title h2::after {
  content: '';
  position: absolute;
  display: block;
  width: 125px;
  height: 5px;
  background: #9676d7;
  bottom: 0;
  left: calc(5% - 65px);
}
.abDui{ list-style-type:cjk-ideographic; margin: 20px;}
.team h3{  color:#6660f3; font-weight: bold; font-size:32px;}

.abDui2{ list-style-type: disc; margin: 20px;}
.s1{ color: #0b8db3;}
.s2{ color: #ac0909;}
.s3{ color:  #524dc0;font-weight: bold;}
.sb{ font-weight: bold;}

.iconLink a{padding: 8px;background-color:#6660f3;color:#fff;border-radius:6px;box-shadow:none; border: solid 0px #6660f3; margin-right:2px;margin-top:20px;}
.iconLink a:hover{color:#fff;background-color:#A9A9A9; text-decoration:none;}
.iconLink1 a{padding: 10px;background-color:#0884c5;color:#fff;border-radius:6px;box-shadow:none; border: solid 0px #3a59e4;margin-right: 10px; }
.iconLink1 a:hover{color:#fff;background-color:#A9A9A9; text-decoration:none;}
.iLink{text-align:center; margin-top:30px;}


/*index_news*/
.new_n {padding: 0; margin: 0; border: 0px #000 solid; margin-bottom: 20px; }
.k-header{display: none;}
.k-grid table{ width:100% }
.new_n .k-grid tr td { margin: 0;border-bottom: 1px #7d7d7d dotted ;padding: 20px 0px 0 20px; position: relative; vertical-align:top;}
.new_n2 .k-grid tr td { border-bottom: 1px #7d7d7d dotted;position: relative; vertical-align:top; padding:10px;}
.new_n .k-grid tr td span,.new_n2 .k-grid tr td span{color: #805bcb;margin: 0;}
.new_n .k-grid tr td span::before {
  content: '';
  position: absolute;
  display: block;
  width: 7px;
  height: 7px;
  background: #8560db;
  border-radius:15px;
  top: 31px;
  left:7px;
}
.new_n .k-grid tr td a{
    color: #0848a4;
    margin: 0;
}
.new_n .k-grid tr td a:hover{ color: #3e5a84;}
/*news*/
.new_n2 .k-grid tr td span::before {
  content: '';
  position: absolute;
  display: block;
  width: 7px;
  height: 7px;
  background: #8560db;
  border-radius:15px;
  top: 20px;
  left:5px;
  right:20px;
}
.ml-10{padding-left:10px!important;}
.mr-10{padding-right:10px!important;}
.ra-section{border: 0px solid #000;}
.k-widget {
  -webkit-box-shadow: none;
  box-shadow: none;
}
.k-pager-wrap {
  color: #333;
  border: 0px solid #000;
  background-color: #fff !important;
  margin-top:30px;
}
.k-grid-content {
    position: relative;
    width: 100%;
    overflow: auto;
    overflow-x: auto;
     overflow-y: none; 
}
.new_title{color: #4d4643; font-weight: bold; font-size: 22px;line-height: 200%;border-bottom:1px #004080 solid;padding: 8px; padding-left:20px; }
.viewnew_div{border:0px #000 solid;min-height:550px;box-shadow: 0 4px 16px rgb(0 0 0 / 10%); padding:20px}
.viewnew-meta{ margin-bottom: 2.0rem;text-align: right;color: #545454;font-size:1.0rem;padding:0px}
.viewnew-meta li {margin-left: 1.688rem;display: inline-block;}
.viewnew_imgdiv{ margin:20px; padding:0px 20px;}
.viewnew_img{ margin:20px 0; max-width:1150px}
.download-box{margin-top: 1.875rem;}
.title_list {color: #666; font-size: 0.85em;line-height: 200%; margin-bottom: 40px; }
.title_list1 {color: #666; font-size: 0.85em;line-height: 200%; margin-bottom: 10px; }
/*#timeline-section{
    text-align: center;
}*/

.timeline{
    position: relative;
    max-width:90vw;
    margin:0 auto;
     border:0px solid #56332e;
}
.timeline::after{
    content:'';
    position: absolute;
    width: 0px;
    border:3px solid #56332e;
    top:0;
    height: 100%;
    left:13%;
    margin-left: -3px;
    background-color: #56332e;
}
#timeline-section .container{
    padding: 50px; 
}
.container1{
    width:65%;
    margin:0 auto;
    border:0px solid #56332e;
}

/* same */

#timeline-section .right .content, #timeline-section .left .content{
    position: relative;
    width: 75%;
    border:0px solid #000;
    
}

#timeline-section .right .time, #timeline-section .left .time{
    position: relative;
    width: 120px;
    font-weight: bolder;  
     border: 0px solid #000;
}

#timeline-section .right .time span, #timeline-section .left .time span {
    color: #56332e;
    position: absolute;
    top:0px;
    border: 0px solid #000;
    left:0px;
}

#timeline-section .right .time span:before, #timeline-section .left .time span:before{
    content:'';
    position: absolute;
    width: 25px;
    height: 25px;
    background-color: #87615b;
    border: 4px solid #56332e;
    border-radius: 50%;
    z-index: 1;
}
/* left section */

#timeline-section .left .content{
    padding-right:30px;
    left:0;
}
#timeline-section .left .time{
    left:12%;
}
#timeline-section .left .time span:before{
    text-align: left;
    left: -30px;
}
#timeline-section .left .time span{
    left:30px;
}

/* right section */

#timeline-section .right .content{
    padding-left:30px;
    left:12%;
}
#timeline-section .right .time{
    left: 12%;
   text-align: right;
}

#timeline-section .right .time span:before{
    text-align: right;
    left: 90px;
}

#timeline-section .right .time span {
    left:-105px;
    border: 0px solid #000;
    top:0px;

}
.newstyle{width:90%;list-style-type: none; margin-bottom:20px;}
.newstyle li{width:100%;border: 0px solid #000;float: left;text-align:left; }
.con{ width:95%; margin:20px auto;}
.con1{ width:95%; margin:20px auto; min-height:430px}
.con p,.con1 p{margin:0; padding:0}
.con1 ul{list-style-type:none;}
.r_table,.r_table1,.r_table2,.d_table{ border-collapse:collapse; width:100%}
.r_table td,.r_table2 th{ border:1px solid #969696;}
.r_table1 td{padding:5px}
.r_table2 td{ border:1px solid #969696; height:70px; line-height: 150%;}
.d_table th{ height:40px; }
.d_table td{ border-bottom:1px solid #e2e2e2;height:55px; }
.tdc3{background: #d8f1f7;border:1px solid #969696;height:40px;}
.tdc2{width:9%}
.tdcl-l{border-top-left-radius:20px;background: #807ce0; color:#fff}
.tdcl-r{border-top-right-radius:20px;background: #807ce0;color:#fff}
.tdcl{background: #807ce0;color:#fff}
.style01{color: #524dd3;font-weight:bold;font-size: 1.3rem;line-height: 1.5;  }
.style01-s{font-size: .95rem; }
.r_table2tdbg{background: #f2f7fa;}
.fontcn{text-align:center;}
.fontrig{text-align:right;margin:0px}
.pabout{margin-top:20px;line-height: 220%; }
.paboutimg{margin-left:100px}
.mtl{margin-left:40px}

.banner_mask {
  margin-right: 0px;
  overflow: hidden;
  border:solid 0px #000;
  margin-left:0px;
}

.banner_mask ul {
  width: 100%;
  list-style: none;
}

.banner_mask ul li {
  width:250px;
  margin:10px;
  border:solid 1px #cac9c8;
  padding:10px;
  float:left;
  text-align: center;
}

.banner_mask ul li img {
   border:solid 0px #000; 
   display: block;
   width:230px;
}


/*rwd-table*/
.rwd-table {
		 	 background: #fff;
		 	 overflow: hidden;
		 	  min-width: 100%;
			}

			.rwd-table tr:nth-of-type(2n){
			  background: #eee;
			}
			.rwd-table th, 
			.rwd-table td {
			  margin: 0.5em;
			}

			.rwd-table th {
			  display: none;
			}

			.rwd-table td {
			  display: block;
			  text-align: left;
			}

			.rwd-table td:before {
			  content: attr(data-th) " : ";
			  font-weight: bold;
			  width: 52px;
			  display: inline-block;
			  text-align: right;
			  margin-right:3px;
			}
.rwd-table th {background:#e1e2ff;}
			.rwd-table th, .rwd-table td:before {
			  color: #1f5b9d;
			  font-weight: bold;
			  text-align: center;
			}
			
 .txcnter{text-align: left!important;}
   
   /*act photo*/ 
   .filters-group {
    display: table;
    margin: 0 auto 50px;
    text-align: center;
}
   .filters-group button.active{
   margin: 0 15px 10px;
    padding: 14px 25px;
    cursor: pointer;
    font-size: 18px;
    line-height: 22px;
    font-weight: 500;
    background-color: #474edd;
    color: #ffffff;
    border: 1px solid #474edd;
    border-radius: 3px;
}
   .filters-group button{
    margin: 0 15px 10px;
    padding: 14px 25px;
    cursor: pointer;
    font-size: 18px;
    line-height: 22px;
    font-weight: 500;
    background-color: #898989;
    color: #ffffff;
    border: 0px solid #282828;
    border-radius: 3px;
}
.faq-group button{
    margin: 10px;
    padding: 10px;
    cursor: pointer;
    font-size: 16px;
    line-height: 20px;
    font-weight: 500;
    background-color: #898989;
    color: #ffffff;
    border: 0px solid #282828;
    border-radius: 3px;
}
.faq-group button.active{
    margin: 10px;
    padding: 10px;
    cursor: pointer;
    font-size: 16px;
    line-height: 20px;
    font-weight: 500;
   background-color: #474edd;
    color: #ffffff;
    border: 1px solid #474edd;
    border-radius: 3px;
}

.img-fluid {width:360px;height: 240px;}
  .viewact_img{ margin:20px 0; width:500px;} 
  .viewact_txt{ display: flex; flex-direction: column; justify-content: center; padding-left:20px;} 
   
@media (min-width: 790px) and (max-width: 1024px) {
	 .viewnew_imgdiv{ margin:10px; padding:0px 10px;}
     .viewnew_img{ margin:20px 0; width:75vw;}
     
}
@media (min-width: 300px) and (max-width: 780px) {
.new_n .k-grid tr td { margin: 15px 0;border-bottom:1px #c0c0c0 dashed;padding: 0px 0 0 5px; position: relative;vertical-align: top;}
.new_n .k-grid tr td span{color: #8569e0;margin-left: 0px;}
.new_n .k-grid tr td span::before {
  display: none;
}
section {
  padding: 15px;
  overflow: hidden;
}
   .timeline{
    position: relative;
    max-width:95vw;
    margin:0 auto;
     border:0px solid #56332e;
}
 .timeline::after{
        left:110px;
    }
    #timeline-section .container{
        padding-left: 10px;
    }
    #timeline-section .left .content, #timeline-section .right .content{
        width: 70%;
        padding-right:0px;
        padding-left: 5px;
        left:34%;
        text-align: left;
         border: 0px solid #000;
    }

    #timeline-section .left .time, #timeline-section .right .time{
        left:30px;
        right: 0;
    }
    #timeline-section .left .time span, #timeline-section .right .time span {
        left:-23px;
    }
    #timeline-section .right .time span:before,#timeline-section .left .time span:before{
        text-align: right;
        left: 80px;
    }
    .newstyle{width:90vw;list-style-type: none; padding:0px; margin:0 auto;}
    .newstyle li{width:90%;border: 0px solid #000;float: left;text-align: center; }
    .banner_mask ul li {
      width: 73vw;
      margin:5px;
      border:solid 1px #cac9c8;
      padding:0px;
      text-align: center;
    }
    
    .banner_mask ul li img {
      border:solid 0px #cac9c8;
       display: block;
       padding:10px;
    }
    .paboutimg{margin:0px auto; width:90vw; margin-bottom:20px; display: block; }
   
    .breadcrumbs h2 {
    color: #fff;
    font-weight: bold;
    font-size: 32px;
    margin-top: 70px;
    text-align: left;
    text-shadow: #6b6c6c 0.1em 0.1em 0.2em;
     margin-left: 20px; 
}
    .iconLink1 a{background-color:#6290c8;color:#fff;line-height: 21px;padding:5px;}
    .viewnew_imgdiv{ margin:10px; padding:0px 10px;}
     .viewnew_img{ margin:20px 0; width:70vw;}
.tdc2 {
    width: 32%;
} 
.container1{
    width:100%;
    margin:0 auto;
    border:0px solid #56332e;
}
  .viewact_img{ margin:10px 0; width:70vw;} 
}

@media (min-width: 480px) {
	/*rwd-table */
	.rwd-table{border:solid 1px #cac9c8;}
			  .rwd-table td:before {
			    display: none;
			  }
			 .rwd-table th, .rwd-table td {
			    display: table-cell;
			    border-left:solid 1px #cac9c8;
			     padding: 0.5em !important;
			     vertical-align: middle;  
			  }
			  .rwd-table th:first-child, 
			  .rwd-table td:first-child {
			    padding-left: 0;
			  }
			  .rwd-table th:last-child, 
			  .rwd-table td:last-child {
			    padding-right: 0;
			  }
			  
			  .w10{width:10%}
			  .w45{width:45%}
			    .txcnter{text-align: center!important;}
			}
@media (min-width: 300px)  and (max-width: 380px){

	 .timeline::after{
        left:80px;
    }
 #timeline-section .left .content, #timeline-section .right .content{
        width: 70%;
        padding-right:0px;
        padding-left: 5px;
        left:35%;
        text-align: left;
         border: 0px solid #000;
    }	
	  #timeline-section .left .time, #timeline-section .right .time{
        left:30px;
        right: 0;
    }
    #timeline-section .left .time span, #timeline-section .right .time span {
        left:-50px;
    }
    #timeline-section .right .time span:before,#timeline-section .left .time span:before{
        text-align: right;
        left: 80px;
    }
    
    .tdc2{width:30%;vertical-align: top;}
}