@charset "utf-8";
/* CSS Document */
.pageHeader {
    width: 100%;
    margin: 0 0 0px 0px auto;
    padding: 30px 0 0px 0px;
}
.pageHeader h1 {
    float: left;
    margin: 0px 0 20px 0px;
    position: relative;
}
.pageHeader h1 img {
    height: 70px;
}
.pageHeader h1:after {
    width: 1px;
    position: absolute;
    height: 45px;
    display: inline-block;
    content: '';
    background: #7f7f7e;
    margin: 20px 0 0 30px;
}
.pageHeader h2 {
    float: left;
    margin: 0px 0 0px 65px;
}
.pageHeader h2 img {
    height: 70px;
}
.pageHeader .link {
    float: right;
}
.pageHeader .link ul {
    margin: 0 0 0 0px;
    padding: 0;
    list-style: none;
    width: 100%;
}
.pageHeader .link ul li {
    margin: 0 0 0 8px;
    padding: 0;
    list-style: none;
    font-size: 15px;
    line-height: 25px;
    color: #929292;
    font-family: 'Open Sans';
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    align-content: flex-end;
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end;
}
.pageHeader .link ul li a {
    line-height: 25px;
    color: #929292;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    align-content: flex-end;
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end;
}
.pageHeader .link ul li img {
    margin: 0 6px 0 0;
    height: 21px;
}
.pageHeader .link .user {
    width: 100%;
    float: right;
    margin: 20px 0 0px 0;
}
.pageHeader .link .user .login {
    float: right;
    background: #86979f;
    font-size: 14px;
    line-height: 24px;
    height: 24px;
    color: #FFF;
    padding: 0 15px;
}
.pageHeader .link .user .login a {
    color: #FFF;
}
.pageHeader .link .user .icon {
    float: right;
    margin: 0 0 0px 20px;
    display: block;
    width: 17px;
    height: 23px;
    background: url(../images/user_icon.svg) no-repeat;
}
.pageHeader .menubox {
    width: 100%;
    height: auto;
    margin: 0px 0 0px 0;
    padding: 0 0 0 88px;
     display: flex; 
	flex-wrap:wrap;
    /* flex-direction: row; */
     justify-content: space-between; 
	
	    align-items: flex-start;
}
.pageHeader .menubox .language {
    width: auto;
    float: right;
    margin: 10px 0 0px 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.pageHeader .menubox .language li {
    margin: 0 0 0 20px;
    padding: 0;
    list-style: none;
    font-size: 18px;
    float: right;
}
.pageHeader .menubox .language li a {
    color: #808080;
}
.pageHeader .menubox .language li:hover:after {
    width: 110%;
    height: 2px;
    display: block;
    content: '';
    background: #808080;
    margin: 8px 0 0 0;
}
.pageHeader .menubox .language li.current:after {
    width: 110%;
    height: 2px;
    display: block;
    content: '';
    background: #808080;
    margin: 8px 0 0 0;
}
.pageHeader .menubox .mobile_menu {
    display: none;
    ;
}

@media only screen and (min-width: 0px) and (max-width: 1100px) {
.pageHeader .menubox .mobile_menu {
    width: auto;
    font-size: 18px;
    color: #333;
    font-family: 'Open Sans';
    display: flex;
    position: absolute;
    right: 5%;
    top: 20px;
    justify-content: flex-start;
    align-items: center;
}
.pageHeader .menubox .mobile_menu img {
    padding: 0 10px 0 0px;
}
.pageHeader .menubox .mobile_menu a {
    color: #333;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
.pageHeader .menubox .mobile_menu a:hover {
    color: #008dd1;
}
}

@media only screen and (min-width: 0px) and (max-width: 360px) {
.pageHeader .menubox .mobile_menu {
    font-size: 0px;
}
}

@media only screen and (min-width: 0px) and (max-width: 1400px) {
.pageHeader .menubox {
    padding: 0 0 0 0px;
}
}

@media only screen and (min-width: 0px) and (max-width: 1110px) {
.pageHeader .link ul li {
    font-size: 0px;
}
.pageHeader .link ul li:last-of-type img {
    margin: 0 0px 0 0px;
}
}

@media only screen and (min-width: 0px) and (max-width: 1100px) {
.pageHeader {
    padding: 20px 0 0px 0px;
}
.pageHeader h1 {
    margin: 0px 0 10px 0px;
}
.pageHeader h1 img {
    height: 50px;
}
.pageHeader h1:after {
    height: 40px;
    background: #7f7f7e;
    margin: 11px 0 0 15px;
}
.pageHeader h2 {
    margin: 0px 0 0px 35px;
}
.pageHeader h2 img {
    height: 50px;
}
.pageHeader .link, .pageHeader .menubox .language {
    display: none;
}
}

@media only screen and (min-width: 0px) and (max-width: 610px) {
.pageHeader h2 {
    display: none;
}
.pageHeader h1:after {
    display: none;
}
}
.m_language {
    width: 100%;
    margin-top: 20px;
    text-align: center;
    display: block;
}
.m_language span a {
    padding: 5px 10px;
    text-decoration: none;
    display: inline-block;
    font-size: 13px;
    color: #fff;
    background: #157ebb;
    border-radius: 100%;
}
.m_language span a:hover {
    background: #7db343;
    color: #fff;
}
.m_language .current a {
    background: #7db343;
    color: #fff;
}
/* page-banner */
.page-banner:not(*:root) {
    height: calc(100vh - 180px);
}
.page-banner {
    position: relative;
    width: 100%;
    height:calc(100vh - 180px);
    overflow: hidden
}
.page-banner .for_PC {
    width: 100%;
    height:calc(100vh - 180px);
    margin-top: 0;
    background-size: cover;
    background-position: center;
    box-shadow: 0px 0px 10px rgba(0,0,0,0.2) inset;
    position: absolute; 
}

.page-banner .for_mobile {
  display: none;
}
.page-banner .page-title-inner {
    position: absolute;
    top: 30%;
    width: 100%;
    display: block;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.page-banner .page-title-inner h1 {
    color: #fff;
    text-align: center;
    font-size: 58px;
    font-weight: bold;
    letter-spacing: 2px;
    text-shadow: rgba(0, 0, 0, 0.4) 5px 5px 10px;
    display: block;
    width: 100%;
    font-family: 'Open Sans';
    margin: 0px 0 20px 0;
}
.page-banner .page-title-inner h2 {
    color: #fff;
    text-align: center;
    font-size: 30px;
    letter-spacing: 1px;
    text-shadow: rgba(0, 0, 0, 0.4) 3px 3px 5px;
    display: block;
    width: 100%;
    font-family: 'Open Sans';
    font-style: italic;
    font-weight: 400;
    margin: 0px 0 80px 0;
}
.page-banner .page-title-inner h3 {
    color: #4a4b4b;
    text-align: center;
    font-size: 24px;
    letter-spacing: 1px;
    display: block;
    background: rgba(255, 255, 255, 0.6);
    padding: 15px 35px;
    box-shadow: rgba(0, 0, 0, 0.5) 5px 5px 10px;
}
.blue,.blue02{
    width: 445px;
    height: 100%;
    position: absolute;
    clip-path: polygon(0 0, 100% 0%, 53% 100%, 0% 100%);
    background-color: rgba(31, 242, 255, .8);
}
.blue02{
	clip-path: polygon(47% 0, 100% 0%, 100% 100%, 0 100%);
	right: 0
}
.dot_squ{
    width:170px;
    height:170px;
    margin: 53px 0 0 95px;
}
.blue02 .dot_squ{
    position: absolute;
    right: 65px;
    bottom: 92px;
}
.banner_icon{
    width: calc( 29vw - 10px );
    position: absolute;
    bottom: 95px;
    left: 94px;
}
.mob_banner_icon{
    display:none;
    width: 40vw;
    bottom: 10%;
    position: absolute;
    left: 10%;
}

@media only screen and (min-width: 0px) and (max-width: 1800px){
    .banner_icon{/* bottom:50px */}
}
@media only screen and (min-width: 0px) and (max-width: 1500px){
    .blue, .blue02{width:30%}
}

@media only screen and (max-width: 1100px) and (min-width: 0px) {
.page-banner {
    height: calc(100vh - 130px);
}
.dot_squ{width: 30%;margin: 40px 0 0 35px;height: auto;}
.blue02 .dot_squ{margin: auto;bottom: 40px;right: 35px;}
.blue{width: 30%;clip-path: polygon(0% 0%, 100% 0%, 0% 50%, 0% 100%);}
.blue02{width: 30%;clip-path: polygon(100% 50%, 100% 0%, 100% 100%, 0% 100%);}
.banner_icon{width: 40%;left: 7%;margin: 0 auto;}
}

@media only screen and (min-width: 481px) and (max-width: 800px) {
.page-banner .page-title-inner h1 {
    font-size: 40px;
    white-space: nowrap;
}
.page-banner .page-title-inner h2 {
    font-size: 26px;
    white-space: nowrap;
    margin: 0px 0 40px 0;
}
.page-banner .page-title-inner h3 {
    font-size: 16px;
    padding: 15px 35px;
}

}

@media screen and (max-width:767px){
	.blue, .blue02,.banner_icon{display: none}
	.mob_banner_icon{display:block}
	.mob_banner_icon img{width:100%}
	.img_box .mob_banner_icon{
	    bottom: -20vh;
	}
	
}
@media only screen and (min-width: 0px) and (max-width: 480px) {
.page-banner .page-title-inner h1 {
    font-size: 24px;
    white-space: nowrap;
    letter-spacing: 1px;
}
.page-banner .page-title-inner h2 {
    font-size: 18px;
    white-space: nowrap;
    margin: 0px 0 40px 0;
}
.page-banner .page-title-inner h3 {
    font-size: 16px;
    padding: 15px 35px;
}
}
@media only screen and (min-width: 0px) and (max-width: 767px){
.page-banner .for_PC {
  display: none;
}
.page-banner .for_mobile {
  display:block;
  width: 100%;
}
.page-banner .for_mobile img {
  width: 100%;
}
}
/* 麵包屑 */
.breadbox {
    width: 100%;
    margin: 0px 0px 0px 0px;
    padding: 20px 0px 0px 0px;
    position: absolute;
    bottom: 0;
    /* background: rgba(0, 189, 255, 0.7); */
}
.breadbox02 {
    width: 100%;
    margin: 0px 0px 0px 0px;
    padding: 20px 0px 0px 0px;
    position: absolute;
    bottom: 0;

    background: rgba(0, 189, 255, 0.7);
    min-height: 66px;
}
.breadbox .bread {
    width:1378px;
    margin: 0px auto;
}
.breadbox .bread ul {
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 88px;
    list-style: none;
}
.breadbox .bread li {
    color: #FFF;
    text-decoration: none;
    width: 250px;
    float: left;
    list-style: none;
    padding: 23px 0px 22px 20px;
    margin: 0px 5px 0px 0px;
    font-size: 20px;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -ms-flex-line-pack: center;
    align-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    background-color: rgba(255, 255, 255, .9);
}
.breadbox .bread li:hover{
    background-color:rgb(207, 252, 255)
}
.breadbox .bread li:last-of-type {
    /* margin: 0px 0px 0px 0px; */
}
.breadbox .bread li:before {
    content: '';
    display: inline-block;
    width: 18px;
    height: 27px;
    margin: 0px 20px 0px 0px;
    background: url(../images/bread_icon_dark_blue.svg) no-repeat;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% auto;
}
.breadbox .bread li.current:before {
    content: '';
    display: inline-block;
    width: 18px;
    height: 27px;
    margin: 0px 20px 0px 0px;
    background: url(../images/bread_icon_dark_blue.svg) no-repeat;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% auto;
}
.breadbox .bread li a {
    color: #003d6d;
}
.breadbox .bread li.current {
    background-color:rgb(207, 252, 255)
}
.breadbox .bread li a:hover {
   
}
.bread02 {
    width: calc( 100% - 20px );
    margin: 0px auto;
    text-align: center;
    /* background-color: #1ff2ff; */
    display: flex;
    position: relative;
    justify-content: center;
    line-height: 1.6;
}
.bread02 ul {
    margin: 0px 0px 0px 0px;
    padding: 6px 0px 7px 0px;
    list-style: none;
}
.bread02 li {
    color: #003d6d;
    text-decoration: none;
    display: inline-block;
    list-style: none;
    padding: 0px 0px 0px 0px;
    margin: 0px 0px 0px 0px;
    font-size: 17px;
}
/* .bread02:before,.bread02:after{
    content:'';
    display:block;
    width: 10px;
    height: 39px;
    position: absolute;
    left: -7px;
    top: 0px;
    background-color: #1ff2ff;
    clip-path: polygon(0 20%, 75% 0, 75% 80%, 0% 100%);
}
.bread02:after{
    right: -9px;
    left:inherit;
    clip-path: polygon(100% 22%, 0% 0, 0% 76%, 100% 100%);
} */
.bread02 li:after {
    content: '〉';
    display: inline-block;
    margin: 0px 0px 0px 10px;
    font-size: 18px;
    color: #1B3059;
}
.bread02 li:last-child:after {
    display: none;
    

}
.bread02 li a {
    color: #003d6d;
}
.bread02 li a:hover {
    color: #008ACE;
}

@media only screen and (min-width: 0px) and (max-width: 1100px) {
.bread02 {
    margin: 20px auto 0px auto;
}
}

@media only screen and (min-width: 0px) and (max-width: 1400px) {
.breadbox {
    padding: 15px 0px 0px 0px;
}
.breadbox .bread {
    width: 90%;
}





.breadbox .bread ul {
    padding: 0px 0px 0px 0px;
}
.breadbox .bread li {
    font-size: 16px;
    /* padding: 0px 0px 15px 0px; */
}
.breadbox .bread li:before {
    width: 7px;
    height: 9px;
    margin: 0px 8px 0px 0px;
}
.breadbox .bread li.current:before {
    content: '';
    display: inline-block;
    width: 7px;
    height: 9px;
    margin: 0px 2px 0px 0px;
}
.breadbox .bread li:hover:before {
    width: 7px;
    height: 9px;
    
}

}

@media only screen and (min-width: 0px) and (max-width: 768px) {
.breadbox .bread {
    width: 87%;
}
.breadbox .bread li {
    width: calc(100% / 2);
    float: left;
    font-size: 14px;
    padding: 15px 0px 15px 10px;
    margin: 0;
}
}
/* 定義區塊 */
.inpage_box{
    max-width: 1340px;
    width: 95%;
    margin: 0 auto;
}
.box-1 {
    width: 1340px;
    margin: 0px auto;
    padding: 0px 0;
    height: auto;
}
.box-2 {
    width: 1220px;
    margin: 0px auto;
    padding: 0px 0 0px 0;
    height: auto;
     overflow: hidden; 
}
.box-3 {
    width: 1200px;
    margin: 0px auto;
    padding: 0px 0;
    height: auto;
    overflow: hidden;
}
.box-4 {
    width: 920px;
    margin: 0px auto;
    padding: 0px 0;
    height: auto;
    overflow: hidden;
}
.box-4-2 {
       max-width: 920px;
    width: 90%;
    margin: 0px auto;
    padding: 0px 0;
    height: auto;
    overflow: hidden;
}
.box-5 {
    width: calc(1220px + 100px);
    margin: 0px auto;
    padding: 0px 0 0px 0;
    height: auto;
    overflow: hidden;
}
.box-6 {
    width: 920px;
    margin: 0px auto;
    padding: 0px 0 0px 0;
    height: auto;
    overflow: hidden;
}
.box-7 {
    width: 760px;
    margin: 0px auto;
    padding: 0px 0 0px 0;
    height: auto;
    overflow: hidden;
}
.box-8 {
    max-width: 1470px;
    width: 90%;
    margin: 0px auto;
    padding: 0px 0 0px 0;
    height: auto;
}
.content {
    width: 100%;
    margin: 60px auto;
    height: auto;
    overflow: hidden;
}
.box-9{
    width:100%;
    position:relative;
    display: flex;
    align-items: center;
}
.box-9:before,.box-9:after{
    content:'';
    display:block;
    width:50%;
    height:100%;
    position:absolute;
    background-color: #1ff2ff;
    transform-origin: left;
    transform:skewY(5deg);
    bottom: 0px;
    z-index:-1;
    padding: 20px 0;
}
.box-9:after{
    right:0;
    transform-origin:right;
transform:skewY(-5deg);
}
@media only screen and (min-width: 0px) and (max-width: 1400px) {
.box-1, .box-2, .box-5 {
    width: 90%;
}
}

@media only screen and (min-width: 0px) and (max-width: 1400px) {
.box-3 {
    width: 85%;
}
.box-9{
    margin-top:50px
}
}

@media only screen and (min-width: 0px) and (max-width: 1260px) {
.box-4, .box-6 {
    width: 90%;
}
}

@media only screen and (min-width: 0px) and (max-width: 1000px) {
.box-7 {
    width: 90%;
}
}
.left {
    margin: 60px auto;
    width: calc( 26% + 30px );
    height: auto;
    overflow: hidden;
    padding: 0px 0px 0px 68px;
    float: left;
}
.right {
    margin: 60px 0 0px 30px;
    width: calc(74% - 60px);
    height: auto;
    overflow: hidden;
    padding: 0px 35px 0px 30px;
    float: left;
}

@media only screen and (min-width: 0px) and (max-width: 1100px) {
.left {
    display: none;
}
.right {
    margin: 60px 0 0px 0px;
    width: 100%;
    padding: 0px 0px 0px 0px;
}
}

@media only screen and (min-width: 1101px) and (max-width: 1400px) {
.left {
    width: 22%;
    padding: 0px 0px 0px 0px;
}
.right {
    width: calc(78% - 60px);
}
}
.title01 {
    width: 100%;
    padding: 0px 0px;
    margin: 0px 0px 10px 0px;
    font-size: 27px;
    color: #003d6d;
    letter-spacing: 1px;
    font-family: Raleway;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
}
.title01:after {
    content: '';
    display: inline-block;
    width: 85px;
    height: 2px;
    background: #003d6d;
    margin: 14px 0px 0px 25px;
}

@media only screen and (min-width: 0px) and (max-width: 600px) {
.title01:after {
    display: none;
}
}
.title02 {
    width: 100%;
    padding: 0px 0px 10px 0px;
    margin: 0px 0px 0px 0px;
    font-size: 17px;
    color: #1B3059;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    border-bottom: 1px solid #1b3059;
}
.title02 h1 {
    padding: 0px 0px 0px 0px;
    margin: 0px 0px 0px 20px;
}
.title02:before {
    content: '';
    display: block;
    width: 36px;

    height: 36px;
    background-image: url(../images/icon_load.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% auto;
}
.title03 {
    width: 100%;
    text-align: center;
    padding: 0px 0px;
    margin: 10px 0px 30px 0px;
    font-size: 17px;
    color: #1B3059;
}
.title04 {
    width: 100%;
    padding: 0px 0px 10px 0px;
    margin: 0px 0px 0px 0px;
    position: relative;
    display: flex;
    justify-content: space-between;
}
.title04:before {
    width: 100%;
    content: '';
    padding: 0;
    margin: 0px 0px 0px 0px;
    height: 1px;
    background: #003d6d;
    position: absolute;
    bottom: 0;
}
.title04 h1 {
    width: 100%;
    padding: 0px 0px;
    margin: 0px 0px 5px 0px;
    font-size: 22px;
    color: #1B3059;
    letter-spacing: 1px;
}
.title05 {
    width: 100%;
    text-align: right;
    padding: 0px 60px 0px 0px;
    margin: 30px 0px 20px 0px;
    font-size: 17px;
    color: #1B3059;
}

@media only screen and (min-width: 0px) and (max-width: 770px) {
.title05 {
    padding: 0px 20px 0px 0px;
}
}
.user_editor {
    width: 100%;
    height: auto;
    overflow: auto;
    position: static !important;
}
.user_editor img {
    max-width: 100% !important;
    height: auto !important;
}
.user_editor table {
    width: 100% !important;
}
.text_center {
    text-align: center;

}
.text_right {
    text-align: right;
}
.line-height {
    line-height: 1.6;
}
.line-height02 {
    line-height: 1;
}
.drop-shadow {
    -webkit-filter: drop-shadow(2px 2px 10px rgba(0, 0, 0, 0.4));
    filter: drop-shadow(2px 2px 10px rgba(0, 0, 0, 0.4));
}
.box-shadow {
    display: block;
    width: 100%;
    height: 30px;
    margin: 0px 0px 0px 0px;
    background: url(../images/box_shadow.svg) no-repeat center top;
    background-size: 100% auto;
}
.box-shadow02 {
    display: block;
    width: 100%;
    height: 40px;
    margin: 0px 0px 0px 0px;
    background: url(../images/box_shadow02.svg) no-repeat;
    background-size: 100% auto;
}
.cool-link::after {
    content: '';
    display: block;
    margin: -5px 0 0 0;
    width: 0;
    height: 2px;
    background: #000;
    transition: width .5s;
}
.cool-link:hover::after {
    width: 100%;
    transition: width .5s;
}
.cer_item_line {
    display: block;
    width: calc(100% - 50px);
    background: #B2B2B2;
    height: 1px;
    margin: 40px auto 0px auto;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}
/* -首頁------------------------------------------------------------------------------------------------------*/
.index_itembox {
    margin: 130px 0 0px 0px;
    padding: 0px;
    width: 100%;
}
.squ_sha{
     width: calc( 100% / 3 - 40px ) !important;
     margin: 0 20px;
     position: relative;
     height: 350px !important;
     padding-top: 20px;
}
.squ_sha:after{
    content:'';
    display:block;
    position:absolute;
    width:100%;
    height: 100%;
		-webkit-clip-path:polygon(50% 42%, 100% 29%, 100% 77%, 50% 100%, 0% 77%, 0% 31%);
    clip-path: polygon(50% 42%, 100% 29%, 100% 77%, 50% 100%, 0% 77%, 0% 31%);
    background-color: #e2e1e2;

    z-index: -1;
    bottom: 1px;
}
.squ_sha:before{
    content:'';
    display:block;
    position:absolute;
    width:100%;
    height: 95%;
    -webkit-clip-path:polygon(50% 0%, 100% 23%, 100% 75%, 50% 100%, 0% 75%, 0% 23%);
    clip-path: polygon(50% 0%, 100% 24%, 100% 75%, 50% 100%, 0% 75%, 0% 24%);
    background-color: #cccccc00;
    z-index: -1;
    top: 5px;
}
.index_itembox li {
    margin: 0px 0 0px 0px;
    padding: 0px;
    width:100% !important;
    height: 95%;
    list-style: none;
    float: left;
	    -webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    position: relative;
}
.index_itembox li .pic {
    margin: 0px 0 0px 0px;
    padding: 0px;
    width: 100%;
    position: relative;
}



.index_itembox li .pic img {
    height: 100%;
}
.index_itembox li .titlebox {
    margin: 0px 0 0px 0px;
    padding: 30px 30px 20px 30px;
    width: 100%;
    height: 100%;
    text-align: center;
    editor/#1c93ce+1,0e598a+100 */
    background: #1c93ce; /* Old browsers */
    background: -moz-linear-gradient(left, #1c93ce 1%, #0e598a 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left, #1c93ce 1%,#0e598a 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right, #1c93ce 1%,#0e598a 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1c93ce', endColorstr='#0e598a',GradientType=1 ); /* IE6-9 */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0px;
    transition:all .5s;
}

.index_itembox li .titlebox:before {
    content: '';
    width: 50px;
    height: 50px;
    display: block;
    position: absolute;
    background: #fff;
    bottom: 0;
    left: 0;
    clip-path: polygon(0 0, 0% 100%, 100% 100%);
    -webkit-clip-path: polygon(0 0, 0% 100%, 100% 100%);
    margin: 0 0 -1px -1px;
}
.squ_sha:hover .titlebox {
    background: #b8ec0300;
}
.squ_sha:hover .titlebox h2,.squ_sha:hover .titlebox h1,.squ_sha:hover .titlebox h3{
   opacity: 0;
}
.squ_sha:hover:after,.squ_sha:hover:before{
    background-color:#6ac5d8

}
.index_itembox li .titlebox h1 {
    font-size: 28px;
    color: #fff;
    font-family: 'Open Sans';
    font-weight: normal;
    width: 100%;
    line-height: 1;
    margin: 0px 0 10px 0px;
}
.index_itembox li .titlebox h2 {
    font-size: 23px;
    color: #fff;
    width: 100%;
    line-height: 1;
    margin: 0px 0 7px 0px;
}

.index_itembox li .titlebox h3 img {
    width: 50px;
    -webkit-filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.6));
    filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.6));
    margin-bottom: 40px;
}
.index_itembox .slick-prev:before, .index_itembox .slick-next:before {
    font-size: 0;
}
.index_itembox .slick-prev, .index_itembox .slick-next {
    width: 22px;
    height: 36px;
    background-image: url("../images/arrow.png");
    background-repeat: no-repeat;
    background-size: auto 100%;
    top: 47.5%;
}
.index_itembox .slick-prev {
    background-position: 0px top;
    left: -40px;
    transition: all 0.6s;
}
.index_itembox .slick-next {
    background-position: -22px top;
    right: -40px;
    transition: all 0.6s;
}
.index_itembox .slick-prev:hover, .index_itembox .slick-prev:focus, .index_itembox .slick-next:hover, .index_itembox .slick-next:focus {
    transform: translate(0px, -10px);
}
/*.down_list .slick-track, .down_list .down_item {
    width: 98% !important;
}*/
@media only screen and (max-width: 1200px){
.squ_sha{
    /* height: 440px !important; */
    /* padding-top: 0; */
   } 
}
 
@media only screen and (max-width: 1000px){
    .index_itembox li{
        /* width: 353px !important; */
    }
}


@media only screen and (min-width: 0px) and (max-width: 770px) {
    .squ_sha{
    }
.index_itembox {
    /* margin: 60px 0 0px 0px; */
    padding: 0px 40px;
    width: 100%;
}
}
@media only screen and (max-width: 700px){
    .squ_sha{
        height:440px !important
    }
}


@media only screen and (min-width: 0px) and (max-width: 599px) {
    .squ_sha{
        /* width: 270px !important; */
        height: 320px !important;
    }
.index_itembox li:nth-child(1), .index_itembox li:nth-child(2) {
    margin: 0px 1px 0px 0px;
    /* width: calc(100% / 3 - 1px) !important; */
}
	.index_itembox li .titlebox h1{font-size: 19px}{
		font-size: 19px
	}
}
.index_videobox {
    margin: 0px 0 0px 0px;
    padding: 30px 0px 60px 0px;
    width: 100%;
}
.ind_video {
    margin: 15px 10px 0px 10px;
    padding: 0px 0px 0px 0px;
    width: 100%;
    list-style: none;
    display: block;
    float: left;
    outline: none;
}
.ind_video .pic {
    width: 100%;
    position: relative;
}
.ind_video .pic img {
    width: 100%;
}
.ind_video .pic .zoom {
    display: none;
}
.ind_video:hover .pic .zoom {
    position: absolute;
    content: '';
    display: block;
    width: 50px;
    height: 50px;
    background-image: url(../images/icon_paly.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% auto;
    position: absolute;
    left: calc(50% - 25px);
    top: calc(50% - 25px);
}
.ind_video:hover .pic:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.5);
}
.ind_video h1 {
    margin: 0px 0px 15px 0px;
    width: 100%;
    font-size: 22px;
    color: #003d6d;
    text-align: center;
    letter-spacing: 1px;
}
.shortcut {
    width: 100%;
    margin: 0px auto 0 auto;
    padding: 0px 20px;
}
.shortcut .slick-prev:before, .shortcut .slick-next:before {
    font-size: 0;
}
.shortcut .slick-prev, .shortcut .slick-next {
    top: 56%;
    -webkit-appearance: none;
	width: 20px;
	height:30px;
	
}
.shortcut .slick-prev {
    left: -25px;
    transition: all 0.6s;
}

.shortcut .slick-prev:before {
    content: "\f053";
    display: inline-block;
    /* margin: 0px 0px 0px 15px; */
    font-size: 30px;
    color: #ffffff;
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    -webkit-appearance: none;
}
.shortcut .slick-next {
    right: -25px;
    transition: all 0.6s;
}
.shortcut .slick-next:before {
    content: "\f054";
    display: inline-block;
    /* margin: 0px 0px 0px 15px; */
    font-size: 30px;
    color: #ffffff;
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    -webkit-appearance: none;
}
.shortcut .slick-prev:hover, .shortcut .slick-prev:focus, .shortcut .slick-next:hover, .shortcut .slick-next:focus {
    transform: translate(0px, -10px);
    -webkit-appearance: none;
}

@media only screen and (min-width: 0px) and (max-width: 1280px) {
.shortcut {
    padding: 0px 20px;
}
}
/* news */
.ind_book .left_bookbox h2{
    font-family: inherit;
    /* font-weight: 600; */
    color: #003d6d;
    font-size: 30px;
}
.ind_book .left_bookbox h1{
    color: #003d6d;
    margin: 10px 0;
}
.index_newsbox {
    margin: 60px 0 40px 0px;
    padding: 0px 0px 0px 0px;
    width: 100%;
    height: auto;
    /* overflow: hidden; */
    position: relative;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.ind_book .left_bookbox{
    
margin-top: 0;
}
.ind_book .left_bookbox h2:after{
    display:none
}
.index_newsbox ul {
    /* margin: 0px 68px 0px 0px; */
    padding: 0px 0px 0px 0px;
    width: calc(38%);
    float: left;
}
.index_newsbox ul:nth-child(2) {
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    width: calc( 63% - 70px );
    float: left;
}
.index_newsbox h3 {
    margin: 30px 0 0px 0px;
    padding: 0px 0px 0px 0px;
    text-align: center;
}
.index_newsbox h3 img {
    width: 320px;
}

@media only screen and (min-width: 1024px) and (max-width: 1280px) {
.index_newsbox ul {
    margin: 0px 30px 0px 0px;
    width: calc(50% - 30px);
}
.index_newsbox ul:nth-child(2) {
    margin: 0px 0px 0px 30px;
    width: calc(50% - 30px);
}
}

@media only screen and (min-width: 0px) and (max-width: 1023px) {
.index_newsbox ul {
    margin: 0px 0px 0px 0px;
    width: 100%;
}
.index_newsbox ul:nth-child(2) {
    margin: 50px 0px 0px 0px;
    width: 100%;
}
}

@media only screen and (min-width: 0px) and (max-width: 400px) {
.index_newsbox h3 img {
    width: 280px;
}
}
.index_news {
    width: 100%;
    height: auto;
    overflow: hidden;
    margin: 10px 0px 0px 0px;
}
.index_news li {
    border-bottom: 1px dotted #003d6d;
    height: auto;
    overflow: hidden;
    width: 100%;
    padding: 12px 0px 13px 0px;
    list-style: none;
    line-height: 1.5;
}
.index_news li b {
    width: 90px;
    margin: -1px 10px 0 0;
    float: left;
    line-height: 25px;
    padding: 0 0px;
    background: #fff;
    color: #003d6d;
    font-size: 13px;
    text-align: center;
    clip-path: polygon(90% 0, 100% 50%, 90% 100%, 0% 100%, 0 51%, 0% 0%);
    font-family: Arial;
    font-weight: normal;
}
.index_news li p {
    width: calc(100% - 115px);
    float: left;
    color: #003d6d;
    font-size: 16px;
}
.index_news li:hover b {
    background: #b8ec03;
}

@media only screen and (min-width: 0px) and (max-width: 420px) {
.index_news li p {
    width: 100%;
    display: block;
    margin: 10px 0 0 0;
}
}
.nmore {
    padding: 6px 15px;
    margin: 0px 0px 0px 0px;
    text-decoration: none;
    display: inline-block;
    font-size: 12px;
    font-family: Arial;
    color: #1B3059;
    border: 1px solid #1B3059;
    text-align: center;
    position: absolute;
    right: 0;
    bottom: 10px;
}
.nmore:hover {
    background: #1B3059;
    color: #fff;
}
.nmore a {
    color: #1B3059;
}
/* 認證 */
.cerbox {
    /* position: absolute; */
    width: 1150px;
    left: calc(50% - 575px);
    bottom: -50px;
    margin: 0 auto;
}

@media only screen and (min-width: 0px) and (max-width: 1023px) {
.cerbox {
    position: relative;
    left: 0;
    bottom: 0;
    margin: 0px auto;
    height: auto;
    overflow: hidden;
    width: 100%;
}
}
.shortcut02 {
    width: 80%;
    margin: 30px auto 50px auto;
    position: relative;
    padding: 0 50px;
}
.shortcut02 .owl-nav {
    position: absolute;
    top: 30%;
    left: 0;
    right: 0;
}
.shortcut02 .owl-prev {
    position: absolute;
    left: -60px;
    display: block !important;
    border: 0px solid black;
    font-size: 0;
}
.shortcut02 .owl-next {
    position: absolute;
    right: -40px;
    display: block !important;
    border: 0px solid black;
    font-size: 0;
}
.shortcut02 .owl-prev i {
    width: 30px;
    height: 50px;
    display: block;
    background-image: url("../images/ind_arrow01.svg");
    background-repeat: no-repeat;
    background-size: auto 100%;
}
.shortcut02 .owl-next i {
    width: 30px;
    height: 50px;
    display: block;
    background-image: url("../images/ind_arrow02.svg");
    background-repeat: no-repeat;
    background-size: auto 100%;
}
.ind_cer {
    margin: 0px 7px 0px 7px;
    padding: 0px 0px;
    display: inline-block;
    text-align: center;
}
.ind_cer .pic {
    width: 100%;
}
/* -choose--------------------------------------------------------------------------------------------------*/
.choose_box {
    margin: 450px 0 0px 0px;
    padding: 0px;
    width: 100%;
    height: auto;
    overflow: hidden;
    position: relative;
}
.choose_box ul {
    width: 100%;
    margin: 0 auto;
    padding: 0px;
    list-style: none;
    margin-top: 200px;
    position: relative;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 100px;
}
.choose_box ul li {
    margin: 0px 0 0px 0px;
    padding: 0px;
    list-style: none;
    width: 100%;
}
.choose_box .c01 {
    margin: 0px 0 0px 0px;
    width: calc( 100% / 3 );
    margin-bottom: 30px;
    padding: 0 35px;
}
.choose_box .c02 {
    margin: 0px 0 0px 0px;
    width: calc( 100% / 3 );
    padding: 0 35px;
}
.choose_box .c03 {
    margin: 0px 0 0px 0px;
    width: calc( 100% / 3 );

    padding: 0 35px;
    padding-top: 28px;
    position:relative
}
.choose_box .c03:before,.choose_box .c03:after{
    content:'';
    display:block;
    width:2px;
    height: 200px;
    background-color:#27a9e0;
    position:absolute;
    left:0;
    bottom: 11%;
}
.choose_box .c03:after{
    left:unset;
    right:0
}
.choose_box .c04 {
    margin: 0 auto;
    max-width: 1120px;
    width: 90%;
    z-index: 1;
    margin-bottom: 50px;
}
.ind_box01{
    max-width: 1060px;
    width: 90%;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
}
.ind_bac{
    width:100%;
    position:absolute;
    z-index:-1;
}
.ind_bac img{
    width:100%
}
.ctitbox {
    margin: 0px auto;
    padding: 0px;
    width: auto;
    text-align: center;
    position: absolute;
    left: 0;
    right: 0;
}
.ctitbox h1 {
    font-size: 70px;
    color: #003d6d;
    font-weight: 600;
    font-family: 'Raleway';
}
.ctitbox h2 {
    font-size: 50px;
    color: #003d6d;

    font-weight: 400;
    letter-spacing: 10px;
    margin-bottom: 15px;
}
.ctext {
    margin: 0px 0 0px 0px;
    padding: 0px;
    width: auto;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
}
.ind_tit{
    font-size:30px;
    color:#003d6d
}
.c04 .ctext:before,.c04 .ctext:after{
    content:'';
    display:block;
    position:absolute;
    width: 26%;
    height: 2px;
    background-color: #003d6d;
}

.c04 .ctext:after{
    right:0
}
.ctext .icon {
    margin: 30px 0px 30px 0px;
    padding: 0px;
}
.ctext .icon img {
    width: 80px;
}
.ctext h1 {
    margin: 0px 0px 15px 0px;
    padding: 0px;
    font-size: 22px;
    color: #fff;
    text-shadow: rgba(0, 0, 0, 0.5) 5px 5px 10px;
}
.ctext p {
    margin: 0px 0px 15px 0px;
    padding: 0px;
    font-size: 20px;
    color: #1B3059;
}
.ctext h2 {
    margin: 0px 0px 15px 0px;
    padding: 0px;
    font-size: 23px;
    color: #1B3059;
}
.ctext h3 {
    margin: 0px 0px 15px 0px;
    padding: 0px;
    font-size: 28px;
    color: #1B3059;
    font-family: 'Estrangelo Edessa';
}
.ctext h4 {
    margin: 0px 0px 15px 0px;
    padding: 0px;
    font-size: 22px;
    color: #1B3059;
}
.ctext .cmore {
    padding: 18px 25px;
    margin: 0px 0px 30px 0px;
    text-decoration: none;
    display: inline-block;
    font-size: 18px;
    font-family: Arial;
    color: #454644;
    border: 1px solid #a2a2a1;
}
.ctext .cmore:hover {
    background: #a2a2a1;
    color: #fff;
}
.ctext .cmore a {
    color: #454644;
}

@media only screen and (min-width: 0px) and (max-width: 1023px) {
.ctitbox {
    position: relative;
    margin: 60px 0px 30px 0px;
    left: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.ctitbox h2 {
    margin: 20px 0px 8px 0px;
}
.choose_box {
    margin: 200px 0 0px 0px;
    padding: 0px;
}
.choose_box ul {
    margin: 0px 0 50px 0px;
}
.choose_box ul li {
    width: 100%;
    margin: 0px 0 0px 0px;
}
}
@media only screen and (min-width: 0px) and (max-width: 768px) {
.ctitbox h1 {
font-size: 30px;
}
.ctitbox h2 {
font-size: 30px;
}
.ctitbox{margin-top:20px}

}



@media only screen and (min-width: 0px) and (max-width: 1000px) {
.choose_box .c01 {
    width: 100%;
}
.choose_box .c02 {
    width: 100%;
}
.choose_box .c03 {
    width: 100%;
    border-left: 0;
    border-right: 0;
    border-top: 2px solid #27a9e0;
    border-bottom: 2px solid #27a9e0;
    margin-bottom: 40px;
    padding-bottom: 35px;
}
.choose_box .c03:before, .choose_box .c03:after{
    display:none
}
.choose_box .c04 {
    width: 90%;
}
.c04 .ctext:before, .c04 .ctext:after{
    width:15%
}
}
@media screen and (max-width: 767px){
	.c04 .ctext:before, .c04 .ctext:after{
		display: none
	}
}
@media only screen and (min-width: 0px) and (max-width: 500px) {
.ctext p {
    font-size: 18px;
}
.choose_box{
    margin-top:120px
}
	.ctext h3{
		font-size: 21px
	}
}
/* -關於我們--------------------------------------------------------------------------------------------------*/
.a_box {
    margin: 0px 0 0px 0px;
    padding: 0px;
    width: 100%;
    height: auto;
    overflow: hidden;
    position: relative;
}
.a_box .a_left {
    margin: 0px;
    padding: 0;
    float: left;
    width: 625px;
}
.a_box .a_right {
    margin: 60px 0px 0px 0px;
    padding: 0;
    float: right;
    width: calc(100% - 625px);
}
.a_box .a_right img {
    width: 100%;
}
.a_box .btn_box {
    margin: 0px 0 80px 0px;
    width: 100%;
    height: auto;
    overflow: hidden;
    position: absolute;
    bottom: 0;
}

@media only screen and (min-width: 0px) and (max-width: 1200px) {
.a_box .a_left {
    width: 100%;
}
.a_box .a_right {
    margin: 0px 0px 0px 0px;
    width: 60%;
}
}
.a_box02 {
    margin: -20px 0 0px 0px;
    padding: 0px;
    width: 100%;
    height: auto;
    overflow: hidden;
}
.a_box02 .rd_box {
    margin: 0px 0 0px 0px;
    padding: 0px 0 0px 0px;
    width: 100%;
    height: auto;
    overflow: hidden;
    display: inline-flex;
    justify-content: flex-start;
}
.a_box02 .text_box {
    margin: 0px 0 0px 0px;
    padding: 0px 70px 30px 80px;
    width: 100%;
    height: auto;
    overflow: hidden;
}
.a_box03 {
    margin: 0px 0 0px 0px;
    padding: 0px;
    width: 100%;
    height: auto;
    overflow: hidden;

}
.a_box03 .a_left {
    margin: 0px;
    padding: 0;
    float: left;
    width: auto;
}
.a_box03 .a_right {
    margin: 0px 0px 0px 100px;
    padding: 45px 0px 0px 0px;
    float: left;
    width: auto;
}
.a_title {
    margin: 0px 0 0px 0px;
    width: 100%;
}
.a_title h1 {
    font-size: 60px;
    color: #2180EC;
    font-style: normal;
    font-weight: 700;
    font-family: 'Open Sans';
    width: 100%;
    line-height: 1;
}
.a_title h2 {
    font-size: 46px;
    color: #9CC925;
    font-style: normal;
    font-weight: 700;
    font-family: 'Open Sans';
    width: 100%;
    padding: 0px 0px 0px 150px;
    margin: 10px 0px 30px 0px;
    line-height: 1;
}
.a_btn {
    padding: 10px 30px 12px 30px;
    margin: 0px 0px 0px 0px;
    width: auto;
    text-align: center;
    text-decoration: none;
    float: left;
    font-size: 20px;
    color: #fff;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
    border: 3px solid #37aced;
    -webkit-border-top-left-radius: 20px;
    -webkit-border-bottom-left-radius: 20px;
    -moz-border-radius-topleft: 20px;
    -moz-border-radius-bottomleft: 20px;
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
    background: #2a9bef; /* Old browsers */
    background: -moz-linear-gradient(top, #2a9bef 0%, #42a3eb 27%, #207cca 49%, #1d93bd 75%, #165783 99%, #165783 99%, #4ba3c7 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #2a9bef 0%, #42a3eb 27%, #207cca 49%, #1d93bd 75%, #165783 99%, #165783 99%, #4ba3c7 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #2a9bef 0%, #42a3eb 27%, #207cca 49%, #1d93bd 75%, #165783 99%, #165783 99%, #4ba3c7 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2a9bef', endColorstr='#4ba3c7', GradientType=0 ); /* IE6-9 */
}
.a_btn:nth-child(2) {
    padding: 10px 30px 12px 30px;
    margin: 0px 0px 0px 0px;
    width: auto;
    text-align: center;
    text-decoration: none;
    float: left;
    font-size: 20px;
    color: #fff;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
    border: 3px solid #4f4f4f;
    border-radius: 0px;
    -webkit-border-top-right-radius: 20px;
    -webkit-border-bottom-right-radius: 20px;
    -moz-border-radius-topright: 20px;
    -moz-border-radius-bottomright: 20px;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
    background: #424243; /* Old browsers */

    background: -moz-linear-gradient(top, #424243 0%, #687184 28%, #2b2d31 49%, #181818 75%, #030303 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #424243 0%, #687184 28%, #2b2d31 49%, #181818 75%, #030303 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #424243 0%, #687184 28%, #2b2d31 49%, #181818 75%, #030303 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#424243', endColorstr='#030303', GradientType=0 ); /* IE6-9 */
}
.a_customer {
    margin: 0px 0 50px 0px;
    padding: 40px 50px 30px 50px;
    width: calc(100% / 3);
    border-radius: 20px;
    position: relative;
    background: red; /* Old browsers */
    background: -moz-linear-gradient(top, #86c8f7 0%, #3d98ca 28%, #3d98ca 46%, #3386b1 50%, #1b71a4 75%, #1aa5d1 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #86c8f7 0%, #3d98ca 28%, #3d98ca 46%, #3386b1 50%, #1b71a4 75%, #1aa5d1 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #86c8f7 0%, #3d98ca 28%, #3d98ca 46%, #3386b1 50%, #1b71a4 75%, #1aa5d1 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#86c8f7', endColorstr='#1aa5d1', GradientType=0 ); /* IE6-9 */
    box-shadow: rgba(0, 0, 0, 0.3) 5px 5px 10px;
}
.a_customer:nth-child(2) {
    margin: 0px 0 50px 0px;
    padding: 40px 55px 30px 55px;
    width: calc(100% / 3);
    border-radius: 22px;
    position: relative;
    background: #aad674; /* Old browsers */
    background: -moz-linear-gradient(top, #aad674 0%, #9ad442 28%, #8ebf3f 46%, #7ba22d 50%, #5c9f2e 75%, #7fc040 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #aad674 0%, #9ad442 28%, #8ebf3f 46%, #7ba22d 50%, #5c9f2e 75%, #7fc040 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #aad674 0%, #9ad442 28%, #8ebf3f 46%, #7ba22d 50%, #5c9f2e 75%, #7fc040 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#86c8f7', endColorstr='#1aa5d1', GradientType=0 ); /* IE6-9 */
    box-shadow: rgba(0, 0, 0, 0.3) 5px 5px 10px;
}
.a_customer h1 {
    font-size: 20px;
    color: #020202;
    line-height: 1.6;
}
.a_customer p {
    font-size: 16px;
    color: #fff;
    line-height: 1.6;
}
.a_customer:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-left: 8px solid rgba(0,0,0,0.2);
    border-radius: 20px;
}
.a_customer02 {
    margin: 0px 0 0px 0px;
    padding: 30px 70px 30px 70px;
    width: 100%;
    border-radius: 20px;
    font-size: 16px;
    color: #000;
    position: relative;
    height: auto;
    overflow: hidden;
    background: #aad674; /* Old browsers */
    background: -moz-linear-gradient(top, #aad674 0%, #9ad442 28%, #8ebf3f 46%, #7ba22d 50%, #5c9f2e 75%, #7fc040 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #aad674 0%, #9ad442 28%, #8ebf3f 46%, #7ba22d 50%, #5c9f2e 75%, #7fc040 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #aad674 0%, #9ad442 28%, #8ebf3f 46%, #7ba22d 50%, #5c9f2e 75%, #7fc040 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#86c8f7', endColorstr='#1aa5d1', GradientType=0 ); /* IE6-9 */
}
.a_customer02:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-left: 8px solid rgba(0,0,0,0.2);
    border-radius: 20px;
    border-right: 8px solid rgba(0,0,0,0.2);
    border-radius: 20px;
}
.a_customer02 a {
    color: #000;
}
.a_customer02 .textbox {
    margin: 0px 40px 0px 0px;
    padding: 0px;
    width: calc(50% - 40px);
    float: left;
    position: relative;
}
.a_customer02 .textbox:nth-child(2) {
    margin: 0px 0 0px 40px;
    padding: 0px;
    width: calc(50% - 40px);
    float: left;
    position: relative;
}
.a_customer02 .textbox .tt {
    margin: 0px 0 0px 0px;
    padding: 0px;
    width: 100%;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -ms-flex-line-pack: center;
    align-content: center;

    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}
.a_customer02 .textbox .tt img {
    margin: 0px 18px 0px 0px;
    width: 33px;
}

@media only screen and (min-width: 0px) and (max-width: 350px) {
.a_customer02 .textbox .tt img {
    margin: 5px 5px 0px 0px;
    width: 20px;
}
}

@media only screen and (min-width: 0px) and (max-width: 980px) {
.a_box02 .rd_box {
    display: flex;
    flex-direction: column;
}
.a_customer {
    margin: 0px 0 10px 0px;
    padding: 30px;
    width: 100%;
}
.a_customer:nth-child(2) {
    margin: 0px 0 10px 0px;
    padding: 30px;
    width: 100%;
}
.a_box02 .text_box {
    padding: 30px 30px 30px 30px;
    width: 100%;
}
.a_title h1 {
    font-size: 40px;
}
.a_title h2 {
    font-size: 30px;
    padding: 0px 0px 0px 90px;
    margin: 10px 0px 30px 0px;
}
.a_btn {
    padding: 6px 20px 10px 20px;
    font-size: 20px;
    -webkit-border-top-left-radius: 10px;
    -webkit-border-bottom-left-radius: 10px;
    -moz-border-radius-topleft: 10px;
    -moz-border-radius-bottomleft: 10px;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}
.a_btn:nth-child(2) {
    padding: 6px 20px 10px 20px;
    font-size: 20px;
    border-radius: 0px;
    -webkit-border-top-right-radius: 10px;
    -webkit-border-bottom-right-radius: 10px;
    -moz-border-radius-topright: 10px;
    -moz-border-radius-bottomright: 10px;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
}
.a_box03 .a_right {
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 30px 0px;
    width: 100%;
}
.a_customer02 {
    padding: 30px 30px 30px 30px;
}
.a_customer02 .textbox {
    margin: 0px 0px 0px 0px;
    width: 100%;
}
.a_customer02 .textbox:nth-child(2) {
    margin: 30px 0 0px 0px;
    width: 100%;
}
}

@media only screen and (min-width: 0px) and (max-width: 450px) {
.a_title h1 {
    font-size: 40px;
    text-align: left;
}
.a_title h2 {
    font-size: 30px;
    padding: 0px 0px 0px 0px;
    text-align: left;
}
}
.about02 {
    position: relative;
    width: 100%;
    height: auto;
}
.about_bg {
    width: 100%;
    position: absolute;
    z-index: -2;
    height: 100%;
    margin-top: 0;
    background-size: cover;
    background-position: center;
    background: url(../images/about_bg.gif) no-repeat;
}
.a_title02 {
    margin: 0px 0 0px 0px;
    width: 100%;
    text-align: center;
}
.a_title02 h1 {
    padding: 3px 50px 6px 50px;
    margin: 0px 0px 0px 0px;
    text-align: center;
    display: inline-block;
    font-size: 20px;
    color: #fff;
    border-radius: 10px;
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
    background: #2d9ff1; /* Old browsers */
    background: -moz-linear-gradient(top, #2d9ff1 0%, #44a7ed 32%, #1894ba 66%, #165d88 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #2d9ff1 0%, #44a7ed 32%, #1894ba 66%, #165d88 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #2d9ff1 0%, #44a7ed 32%, #1894ba 66%, #165d88 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2d9ff1', endColorstr='#165d88', GradientType=0 ); /* IE6-9 */
}
.a_title02 h2 {
    font-size: 26px;
    color: #1B3059;
    font-family: 'Estrangelo Edessa';
    font-style: normal;
    width: 100%;
    padding: 0px 0px 0px 0px;
    margin: 30px 0px 0px 0px;
}
.a_title_box {
    margin: 0px 0 0px 0px;
    width: 100%;
    text-align: center;
    background: #fff;
    padding: 40px 20px;
    height: auto;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}
.a_title_box li {
    font-size: 21px;
    color: #1B3059;
    padding: 0;
    margin: 0 8% 0 8%;
    list-style: none;
    display: flex;
    justify-content: center;
    align-items: center;
}
.a_title_box li img {
    margin: 0 10px 0 0;
    width: 70px;
}
.a_box04 {
    margin: 0px auto 60px auto;
    padding: 0px;
    width: 95%;
    height: auto;
    overflow: hidden;
    display: flex;
    align-items: stretch;
}
.a_box04 ul {
    margin: 0px -70px 0px 0px;
    padding: 35px 130px 35px 180px;
    width: calc(50% + 50px);
    height: auto;
    overflow: hidden;
    display: inline-block;
    -webkit-clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 25% 50%, 0% 0%);
    clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 25% 50%, 0% 0%);
    background: #0fc458;
}
.a_box04 ul:nth-child(2) {
    margin: 0px 0 0px -70px;
    padding: 35px 130px 35px 180px;
    width: calc(50% + 50px);
    height: auto;
    overflow: hidden;
    display: inline-block;
    -webkit-clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 25% 50%, 0% 0%);
    clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 25% 50%, 0% 0%);
    background: #0fb5da;
}
.a_box04 ul h1 {
    margin: 0px 0 10px 0px;
    padding: 0px;
    width: 100%;
    color: #1B3059;
    font-family: 'Estrangelo Edessa';
    font-size: 24px;
    line-height: 1.3;
}
.a_box04 ul p {
    margin: 0px 0 0px 0px;
    padding: 0px;
    width: 100%;
    font-size: 16px;
    color: #fff;
    line-height: 1.6;
}
.a_box05 {
    margin: 30px auto 0px auto;
    padding: 0px;
    width: 100%;
    border: 3px solid #cbcbcb;

    border-radius: 10px;
    background: #fff;
}
.cus {
    width: 100%;
}
.cus ul {
    width: 100%;
    text-align: center
}
.cus ul li {
    display: inline-block;
    width: calc(100% / 6 - 4px);
    position: relative;
    margin: 30px 0;
    padding: 0;
    vertical-align: text-top
}
.cus ul li img {
    width: 87px;
    padding: 0 0 0 15px
}
.cus ul li p {
    display: inline-block;
    width: 100%;
    padding: 0 0 0 0px;
    font-size: 16px
}
.cus ul li:before {
    content: '';
    display: block;
    width: 12px;
    height: 16px;
    background-image: url(../images/play-button.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% auto;
    position: absolute;
    left: 0px;
    top: 30px;
}
.cus ul li:first-of-type:before {
    content: '';
    background: none
}
.down_item li{
    width: calc(100% / 3 - 20px);
    margin: 0px 10px;
    padding: 0px 0 0px 0;
    list-style: none;
    position: relative;
    display: block;
    float: left;
}
@media only screen and (max-width: 720px) and (min-width: 501px){
    .down_item li {
        width: calc(100% / 2 - 20px);
    }
}
@media only screen and (max-width: 500px) and (min-width: 0px){
    .down_item li {
        width: 100%;
        margin: 0px 0px 20px 0px;
    }
}
@media only screen and (min-width: 0px) and (max-width: 1200px) {
.a_box04 {
    width: 100%;
}
.a_box04 ul {
    margin: 0px 0px 0px 0px;
    padding: 40px;
    width: 50%;
    clip-path: polygon(0 0, 100% 0%, 100% 100%, 0% 100%);
    -webkit-clip-path: polygon(0 0, 100% 0%, 100% 100%, 0% 100%);
}
.a_box04 ul:nth-child(2) {
    margin: 0px 0 0px 0px;
    padding: 40px;
    width: 50%;
    clip-path: polygon(0 0, 100% 0%, 100% 100%, 0% 100%);
    -webkit-clip-path: polygon(0 0, 100% 0%, 100% 100%, 0% 100%);
}
.a_box05 {
    padding: 0px 30px 0px 0px;
}
}

@media only screen and (min-width: 0px) and (max-width: 767px) {
.a_title_box li {
    display: flex;
    flex-direction: column;
}
.a_box04 {
    display: flex;
    flex-direction: column;
}
.a_box04 ul {
    width: 100%;
}
.a_box04 ul:nth-child(2) {
    width: 100%;
}
.bread02:before, .bread02:after{display:none}
.bread02 li{line-height:25px}
   ul.tabs li{margin-bottom: 10px !important;}
}

@media only screen and (min-width: 771px) and (max-width: 980px) {
.cus ul li {
    width: calc(100% / 4 - 4px);
}
}

@media only screen and (min-width: 480px) and (max-width: 770px) {
.cus ul li {
    width: calc(100% / 3 - 4px);
}
}

@media only screen and (min-width: 0px) and (max-width: 479px) {
.cus ul li {
    width: calc(100% / 2 - 4px);
}
}
/* -得獎認證--------------------------------------------------------------------------------------------------*/
.cer_bg {
    margin: 0px 0 0px 0px;
    padding: 30px 0px;
    width: 100%;
    background-image: url(../images/certification_bg.gif);
    position: relative;
    background-size: cover;
    background-position: center;
}
.cer_bg .ttbox {
    margin: 0px 0 0px 0px;
    padding: 0px 0px;
    width: 100%;
}
.cer_bg:before {
    content: '';
    top: 207px;
    padding: 0px 0px 0px 0px;
    width: calc(50% - 380px - 30px);
    height: 13px;
    background: #007ad0;
    display: block;
    clip-path: polygon(0 0, 100% 0%, 95% 100%, 0% 100%);
    position: absolute;
}
.cer_bg:after {
    content: 'PRODUDLY PRESENTED TO';
    top: 40px;
    right: 0;
    padding: 0px 0px 0px 0px;
    width: 55%;
    height: 130px;
    display: block;
    position: absolute;
    clip-path: polygon(20% 0%, 100% 0%, 100% 100%, 0% 100%);
    font-family: 'Arial Rounded MT Bold';
    font-style: bold;
    font-size: 18px;
    color: #fff;
    letter-spacing: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #009add; /* Old browsers */
    background: -moz-linear-gradient(left, #009add 0%, #0077ce 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left, #009add 0%, #0077ce 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right, #009add 0%, #0077ce 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#009add', endColorstr='#0077ce', GradientType=1 ); /* IE6-9 */
}
.cer_bg .ttbox .stt {
    margin: 0px 0 0px 0px;
    padding: 0px 0px;
    width: auto;
}
.cer_bg .ttbox .stt .icon {
    margin: 0px 0 0px 100px;
}
.cer_bg .ttbox .stt .icon img {
    width: 165px;
    height: 155px;
}
.cer_bg .ttbox .stt h1 {
    margin: 0px 0 0px 0px;
    padding: 0px 0px;
    font-family: 'Chairdrobe';
    font-size: 66px;
    color: #0083fa;
    letter-spacing: 15px;
}
.cer_bg .ttbox .stt02 {
    margin: 10px 0 0px 0px;
    padding: 0px 0px;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
}
.cer_bg .ttbox .stt02 h2 {
    display: inline-block;
    font-family: 'Champagne & Limousines Thick';
    font-size: 22px;
    color: #0083fa;
    letter-spacing: 5px;
    font-weight: 800;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
}
.cer_bg .ttbox .stt02 h2:after {
    content: '';
    display: inline-block;
    width: 215px;
    height: 2px;
    background: #0083fa;
    margin: 12px 20px 0px 20px;
}
.cer_bg .ttbox .stt02 h3 {
    display: inline-block;
    font-size: 20px;
    color: #0083fa;
}
.cer_bg .ttbox .stt02 h4 {
    display: inline-block;
    margin: -36px 0 0 25px;
}
.cer_bg .ttbox .stt02 h4 img {
    display: block;
    width: 25px;
    height: 72px;
}

@media only screen and (min-width: 0px) and (max-width: 910px) {
.cer_bg .ttbox .stt .icon {
    margin: 0px 0 0px calc(50% - 320px);
}
.cer_bg:before, .cer_bg:after {
    display: none;
}
.cer_bg .ttbox .stt {
    text-align: center;
}
.cer_bg .ttbox .stt02 {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
}

@media only screen and (min-width: 0px) and (max-width: 800px) {
.cer_bg .ttbox .stt h1 {
    font-size: 40px;
}
.cer_bg .ttbox .stt .icon {
    text-align: center;
    margin: 0px 0 0px 0px;
}
.cer_bg .ttbox .stt .icon img {
    width: 120px;
    height: 113px;
}
}

@media only screen and (min-width: 0px) and (max-width: 760px) {
.cer_bg .ttbox .stt02 h2 {
    display: none;
}
.cer_bg .ttbox .stt02 h4 {
    display: none;
}
}
/* cer_item */
.cer_item {
    width: 100%;
    margin: 0px auto 0 auto;
    padding: 0px 30px 0px 30px;
}
.cer_item .slick-prev:before, .cer_item .slick-next:before {
    font-size: 0;
}
.cer_item .slick-prev, .cer_item .slick-next {
    width: 22px;
    height: 36px;
    background-image: url("../images/arrow.png");
    background-repeat: no-repeat;
    background-size: auto 100%;
    top: 47.2%;
}
.cer_item .slick-prev {

    background-position: 0px top;
    left: -25px;
    transition: all 0.6s;
}
.cer_item .slick-next {
    background-position: -22px top;
    right: -25px;
    transition: all 0.6s;
}
.cer_item .slick-prev:hover, .cer_item .slick-prev:focus, .cer_item .slick-next:hover, .cer_item .slick-next:focus {
    transform: translate(0px, -10px);
}
.cer_pd {
    margin: 0px 0 50px 0px;
    width: 100%;
}
.cer_pd li {
    margin: 40px 10px 40px 10px;
    padding: 20px;
    width: calc(100% / 3 - 20px);
    text-align: center;
    list-style: none;
    display: block;
    float: left;
    transition: all 0.6s;
}
.cer_pd li:hover {
    transform: translate(0px, -10px);

    box-shadow: 2px 2px 10px rgba(0,0,0,0.3);
    border-radius: 10px;
}
.cer_pd li .date {
    margin: 0px 0px 15px 0px;
    width: 100%;
    color: #0083fa;
    font-size: 15px;
    font-family: 'Open Sans';
}
.cer_pd li .date:before {
    display: inline-block;
    content : '✓';
    width : 20px;
    color : #0083fa;
    font-size : 15px;
    line-height : 18px;
    text-align : center;
}

.cer_pd li .no {
    margin: 0px 0px 12px 0px;
    width: 100%;
    color: #0083fa;
    font-size: 15px;
}

.cer_pd li .txt {
    margin: 0px 0px 12px 0px;
    width: 100%;
    color: #231815;
    font-size: 16px;
    line-height: 1.5;
}
.cer_pd li .pic {
    margin: 0px 0px 0px 0px;
    width: 100%;
}
.cer_pd li .pic img {
    width: 100%;
    border: 2px solid #0083fa;
    border-radius: 10px;
}

@media only screen and (min-width: 481px) and (max-width: 768px) {
.cer_pd li {
    margin: 20px 10px 30px 10px;
    padding: 0px 0px 20px 0px;
    width: calc(100% / 2 - 20px);
}
}

@media only screen and (min-width: 0px) and (max-width: 480px) {
.cer_pd li {
    width: 100%;
    margin: 20px 0 30px 0;










}
}
.cer_pd02 {
    margin: 0px 0 50px 0px;
    width: 100%;
}
.cer_pd02 li {
    margin: 40px 10px 45px 10px;
    padding: 20px;
    width: calc(100% / 2 - 20px);
    text-align: center;
    list-style: none;
    display: block;
    float: left;
    transition: all 0.6s;
}
.cer_pd02 li:hover {
    transform: translate(0px, -10px);
    box-shadow: 2px 2px 10px rgba(0,0,0,0.3);
    border-radius: 10px;
}
.cer_pd02 li .date {
    margin: 0px 0px 15px 0px;
    width: 100%;
    color: #0083fa;
    font-size: 15px;
    font-family: 'Open Sans';
}
.cer_pd02 li .date:before {
    display: inline-block;
    content : '✓';
    width : 20px;
    color : #0083fa;
    font-size : 15px;
    line-height : 18px;
    text-align : center;
}
.cer_pd02 li .no {
    margin: 0px 0px 12px 0px;
    width: 100%;
    color: #0083fa;
    font-size: 15px;
}
.cer_pd02 li .txt {
    margin: 0px 0px 12px 0px;
    width: 100%;
    color: #231815;
    font-size: 16px;
    line-height: 1.5;
}
.cer_pd02 li .pic {
    margin: 0px 0px 0px 0px;
    width: 100%;
}
.cer_pd02 li .pic img {
    width: 100%;
    border: 2px solid #0083fa;
    border-radius: 10px;
}

@media only screen and (min-width: 481px) and (max-width: 768px) {
.cer_pd02 li {
    margin: 20px 10px 30px 10px;
    padding: 0px 0px 20px 0px;
    width: calc(100% / 2 - 20px);
}
}

@media only screen and (min-width: 0px) and (max-width: 480px) {
.cer_pd02 li {
    width: 100%;
    margin: 20px 0 30px 0;
}
}
.cer_view {
    margin: 30px 0 60px 0;
    width: 100%;
    height: auto;
    overflow: hidden;
}
.cer_view .date {
    margin: 0px 0 8px 0px;
    width: 100%;
    font-size: 17px;
    color: #1B3059;
    font-family: Arial;
}
.cer_view .ctt {
    margin: 0px 0 12px 0px;
    width: 100%;
    font-size: 17px;
    color: #1B3059;
    line-height: 1.5;
}
.cer_view .cbox {
    margin: 0px 6px 6px 6px;
    width: calc(100% - 12px);
    border: 2px solid #c8e9f2;
    padding: 80px;
    position: relative;
    line-height: 1.6;
}
.cer_view .t01 {
    top: -6px;
    left: 0;
    width: 198px;
    height: 12px;
    background: #c8e9f2;
    display: block;
    position: absolute;
}
.cer_view .t02 {
    top: -6px;
    left: -6px;
    width: 12px;
    height: 62px;
    background: #c8e9f2;
    display: block;
    position: absolute;
}
.cer_view .t03 {
    bottom: 0;
    right: -6px;
    width: 12px;
    height: 60px;
    background: #c8e9f2;
    display: block;
    position: absolute;
}
.cer_view .t04 {
    bottom: -6px;
    right: -6px;
    width: 204px;
    height: 12px;
    background: #c8e9f2;
    display: block;
    position: absolute;
}
.cer_view .cbox .pic {
    margin: 0px 0 20px 0px;
    width: 100%;
    border: 1px solid #c8e9f2;
    border-radius: 5px;
}
.cer_view .cbox .pic img {
    width: 100%;
    border-radius: 5px;
}
.cer_view .cbox02 {
    margin: 6px 6px 6px 6px;
    width: calc(100% - 12px);
    border: 2px solid #c8e9f2;
    padding: 44px;
    position: relative;
}
.cer_view .cbox02 .cer_list {
    margin: 0px 0px 20px 0px;
    width: 100%;
    border-bottom: 1px dashed #c8e9f2;
    padding: 0px 0px 10px 0px;
}
.cer_view .cbox02 .cer_list:last-of-type {
    margin: 0px 0px 0px 0px;
    width: 100%;
    border-bottom: none;
    padding: 0px 0px 0px 0px;
}
.cer_view .cbox02 .txt {
    width: 100%;
    padding: 10px;
}
.cer_view .cbox02 .pic {
    margin: 0px 0 0px 0px;
    width: 100%;
    padding: 10px;
}
.cer_view .cbox02 .pic img {
    width: 100%;
}
.cer_view .cbox02 .name {
    width: 100%;
    padding: 0px 10px 10px 10px;
    font-size: 16px;
    color: #1B3059;
    text-align: right;
}
.cer_view .cbox02 .icon {
    width: 100%;
    padding: 0px 10px 0px 10px;
    display: inline-flex;
    justify-content: flex-end;
    align-content: center;
    align-items: center;
}
.cer_view .cbox02 .icon .download {
    font-size: 15px;
    color: #fff;
    border-radius: 25px;
    padding: 5px 15px;
    display: inline-flex;
    justify-content: flex-start;
    align-content: center;
    align-items: center;
    background: #33cdff;
    position: relative;
}
.cer_view .cbox02 .icon .download:hover {
	background:#b8ec03; 
}
.cer_view .cbox02 .icon .download:before {
    content: '';
    width: 18px;
    height: 18px;
    background-image: url(../images/icon_download.svg);
    background-position: left;
    background-repeat: no-repeat;
    background-size: 100% auto;
}
.cer_view .cbox02 .icon .download span {
    padding: 0px 0 0px 10px;
}
.cer_view .cbox02 .icon .view {
    font-size: 15px;
    color: #fff;
    border-radius: 25px;
    padding: 5px 15px;
    margin: 0 5px 0 0px;
    display: inline-flex;
    justify-content: flex-start;
    align-content: center;
    align-items: center;
    background: #33cdff;
    position: relative;
}
.cer_view .cbox02 .icon .view:before {
    content: '';
    width: 18px;
    height: 18px;
    background-image: url(../images/icon_view.svg);
    background-position: left;
    background-repeat: no-repeat;
    background-size: 100% auto;
}
.cer_view .cbox02 .icon .view:after {
    content: '';
    position: absolute;
    margin: 0 0 0 23px;
    width: 1px;
    height: 18px;
    background: #fff;
}

.cer_view .cbox02 .icon .view span {
    padding: 0px 0 0px 15px;
}
.cer_view .cbox02 .icon .view:hover {
	background:#b8ec03; 
}
@media only screen and (min-width: 0px) and (max-width: 800px) {
.cer_view .cbox {
    padding: 20px;
}
.cer_view .cbox02 {
    padding: 20px;
}
}
.cer_box {
    margin: 0px 0 0px 0;
    width: 100%;
    height: auto;
    overflow: hidden;
}
.cer_ttbox {
    margin: 0px 0 0px 0;
    width: 100%;
    text-align: center;
}
.cer_ttbox h1 {
    margin: 0px 0 0px 0;
    padding: 0;
    text-align: center;
    width: 100%;
    font-size: 30px;
    color: #3E3A39;
    font-weight: bold;
    letter-spacing: 5px;
}
.cer_ttbox h2 {
    margin: 0px 0 20px 0;
    padding: 0;
    text-align: center;
    width: 100%;
    font-size: 30px;
    color: #3E3A39;
    font-family: 'Jott44WideNormal';
}
.cer_ttbox h3 {
    margin: 0px 0 0px 0;
    padding: 0;
    width: 100%;
    position: relative;
}
.cer_ttbox h3:before {
    content: '';
    position: absolute;
    z-index: -1;
    display: block;
    top: 6px;
    left: 0;
    width: 40%;
    height: 3px;
    background: #03acc2;
}
.cer_ttbox h3:after {
    content: '';
    position: absolute;
    z-index: -1;
    display: block;
    top: 6px;
    right: 0;
    width: 40%;
    height: 3px;
    background: #03acc2;
}
.cer_ttbox h3 .spanbox {
    margin: 0px 0 0px 0;
    padding: 0px 10px;
    width: auto;
    background: #fff;
    display: inline-block;
}
.cer_ttbox h3 span {
    margin: 0px 8px 0px 8px;
    padding: 0;
    width: 10px;
    height: 10px;
    background: #A5B8C6;
    border-radius: 50%;
    display: inline-block;
}
.cer_list {
    margin: 60px 0 60px 0;
    width: 100%;
    height: auto;
    overflow: hidden;
}
.cer_list ul {
    margin: 0px 0 0px 0;
    padding: 0;
    list-style: none;
    width: 100%;
}
.cer_list ul li {
    margin: 0px 0 40px 0;
    padding: 0;
    list-style: none;
    width: calc(100% / 2);
    text-align: center;
    float: left;
}
.cer_list ul li .pic {
    margin: 0px auto 20px auto;
    padding: 0;
    width: 160px;
    height: 220px;
    background-image: url(../images/cer_pic_bg.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% auto;
}
.cer_list ul li .pic img {
    width: 90px;

    margin: 30px 0 0 0;
}
.cer_list ul li h1 {
    font-size: 15px;
    color: #231815;
    margin: 5px 0 0px 0;
    width: 100%;
    line-height: 1.5;
}
.cer_list ul li h2 {
    color: #231815;
    font-size: 15px;
    line-height: 1.5;
    margin: 5px 0 0px 0;
    width: 100%;
}
.cer_list ul li .more {
    padding: 8px 15px;
    margin: 10px 0px 0px 0px;
    text-decoration: none;
    display: inline-block;
    font-size: 12px;
    font-family: Arial;
    color: #0088CC;
    border: 1px solid #0088CC;
    text-align: center;
}
.cer_list ul li .more:hover {
    background: #0088CC;
    color: #fff;
}

@media only screen and (min-width: 0px) and (max-width: 500px) {
.cer_list ul li {
    width: 100%;
}
}
.cer_list02 {
    margin: 60px auto 0px auto;
    width: 90%;
    height: auto;
    overflow: hidden;
}
.cer_list02 ul {
    margin: 0px 0 60px 0;
    padding: 0;
    list-style: none;
    width: 100%;
    height: auto;
    overflow: hidden;
}
.cer_list02 ul .picbox {
    margin: 0px 0 0px 0;
    padding: 0;
    list-style: none;
    text-align: center;
    float: left;
    width: 420px;
    position: relative;
}
.cer_list02 ul .picbox .pic {
    margin: 0px 0px 20px 100px;
    padding: 0;
    width: 220px;
    height: 160px;
    background-image: url(../images/cer_pic_bg02.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% auto;
}
.cer_list02 ul .picbox .pic img {
    width: 90px;
    margin: 30px 0 0 -60px;
}
.cer_list02 ul .picbox h1 {
    font-size: 16px;
    color: #231815;
    margin: 10px 0 0px 0px;
    width: 100%;
    font-family: Arial;
}
.cer_list02 ul .picbox h2 {
    font-size: 16px;
    color: #231815;
    margin: 10px 0 0px 0px;
    width: 100%;
}
.cer_list02 ul .spanbox {
    margin: 72px 0px 0px 325px;
    float: left;
    position: absolute;
}
.cer_list02 ul span {
    margin: 0px 8px 0px 8px;
    padding: 0;
    width: 10px;
    height: 10px;
    background: #A5B8C6;
    border-radius: 50%;
    display: inline-block;
}
.cer_list02 ul .textbox {
    width: calc(100% - 420px);
    float: left;
    margin: 0px 0 0px 0px;
    border: 1px solid #27a9e0;
    border-radius: 5px;
    background-color: #f4f4f4;
    box-shadow: 0 1px 3px rgba(0,0,0,.03);
    padding: 25px 25px;
    position: relative;
    font-size: 16px;
    color: #231815;
    line-height: 1.4;
    min-height: 160px;
    display: flex;
    align-items: center;
}
.cer_list02 ul .textbox:before {
    position: absolute;
    top: 65px;
    font-size: 23px;
    font-family: 'Font Awesome 5 Free';
    color: #f4f4f4;
    filter: drop-shadow(-1px 0px 0px rgba(39, 169, 224, 1));
    content: "\f0d9";

    left: -8px;
    font-weight: 900;
}

@media only screen and (min-width: 0px) and (max-width: 900px) {
.cer_list02 ul .picbox {
    width: 100%;
}
.cer_list02 ul .picbox .pic {
    margin: 0px auto 20px auto;
    padding: 0;
    width: 160px;
    height: 220px;
    background-image: url(../images/cer_pic_bg.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% auto;
}
.cer_list02 ul .picbox .pic img {
    margin: 30px 0 0 0;
}
.cer_list02 ul .picbox h1 {
    margin: 10px 0 0px 0px;
}
.cer_list02 ul .picbox h2 {
    margin: 10px 0 0px 0px;
}
.cer_list02 ul .spanbox {
    display: none;
}
.cer_list02 ul .textbox {
    width: 100%;
    margin: 20px 0 0px 0px;
    min-height: auto;
}
.cer_list02 ul .textbox:before {
    top: -20px;
    content: "\f0d8";
    left: calc(50% - 8px );
    filter: drop-shadow(0px -1px 0px rgba(39, 169, 224, 1));
}
}
.patent_box {
    margin: 30px 0 0px 0;
    width: 100%;
    height: auto;
    overflow: hidden;
}
.cer_view02 {
    margin: 0px 0 0px 0;
    width: 100%;
    height: auto;
    overflow: hidden;
    border-top: 15px solid #13536c;
}
.triangle_box {
    margin: 0px 0 0px 0;
    width: 100%;
    height: auto;
    overflow: hidden;
    position: relative;
    display: flex;
    justify-content: center;
}
.triangle_box .tri_main {
    margin: 0px 0 0px 0;
    width: 110px;
    height: 50px;
    background: #3faedc;
    display: block;
    clip-path: polygon(50% 100%, 0 0, 100% 0);
}
.triangle_box:before {
    content: '';
    top: 0;
    left: 0;
    padding: 0px 0px 0px 0px;
    width: calc(50% - 60px - 20px);
    height: 15px;
    background: #3faedc;
    display: block;
    clip-path: polygon(0 0, 98% 0, 100% 100%, 0 100%);
    position: absolute;
}

.triangle_box:after {
    content: '';
    top: 0;
    right: 0;
    padding: 0px 0px 0px 0px;
    width: calc(50% - 60px - 20px);
    height: 15px;
    background: #3faedc;
    display: block;
    clip-path: polygon(2% 0, 100% 0%, 100% 100%, 0 100%);
    position: absolute;
}
.history_box {
    margin: 0px 0 0px 0;
    width: 100%;
    text-align: center;
}
.history_box h1 {
    margin: 0px 0 20px 0;
    font-size: 30px;
    color: #073a79;
    font-weight: bold;
    letter-spacing: 5px;
}
.history_box .icon_box {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    position: relative;
}
.history_box .icon_box:before {
    content: '';
    position: absolute;
    display: block;
    width: 460px;
    height: 3px;
    background: #0ebecd;
    top: 80px;
    z-index: -1;
}

.history_box .icon_box h2 {
    color: #4e81b0;
    font-family: 'Open Sans';
    font-size: 20px;
    margin: 0px 0 20px 0;
}
.history_box .icon_box h2:after {
    content: '';
    display: block;
    width: 220px;
    height: 1px;
    background: #6b6b6b;
    margin: 10px 0px 10px 0px;
    padding: 0px 0px 0px 0px;
}
.history_box .icon_box h3 {
    color: #4e81b0;
    font-family: 'Open Sans';
    font-size: 20px;
    margin: 0px 0 20px 0;
}
.history_box .icon_box h3:after {
    content: '';
    display: block;
    width: 220px;
    height: 1px;
    background: #6b6b6b;
    margin: 10px 0px 10px 0px;
    padding: 0px 0px 0px 0px;
}
.history_box .icon_box .icon {
    display: inline-block;
    width: 160px;
    height: 160px;
    background-image: url(../images/icon_history.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% auto;
}

@media only screen and (min-width: 0px) and (max-width: 640px) {
.history_box .icon_box h2 {
    display: none;
}
.history_box .icon_box h3 {
    display: none;
}
.history_box .icon_box:before {
    display: none;
}
}
#conference-timeline {
    position: relative;
    max-width: 1220px;
    width: 90%;
    margin: 0 auto;
}
#conference-timeline .conference-center-line {
    position: absolute;
    width: 3px;
    height: 90%;
    top: 0;
    left: 50%;
    margin-left: -2px;
    background: #00b0bd;
    z-index: -1;
}
#conference-timeline .conference-timeline-content {
    padding-top: 67px;
    padding-bottom: 67px;
}
.timeline-article {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    margin: 0px 0;
}
.timeline-article .content-left-container, .timeline-article .content-right-container {
    max-width: 44%;
    width: 100%;
}
.timeline-article .content-left, .timeline-article .content-right {
    position: relative;
    width: auto;
    border: 1px solid #ddd;
    border-radius: 5px;
    background-color: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,.03);
    padding: 27px 25px;
}
.timeline-article h2 {
    margin: 0 0 5px 0px;
    padding: 0;
    color: #202757;
    font-size: 16px;

}
.timeline-article h3 {
    margin: 0 0 5px 0px;
    padding: 0;
    color: #202757;
    font-size: 18px;
    font-weight: bold;
}
.timeline-article h4 {
    margin: 0 0 15px 0px;
    padding: 0;

    color: #202757;
    font-size: 14px;
}
.timeline-article p {
    margin: 0 0 0px 0px;
    line-height: 1.2;
    padding: 0;
    color: #666;
    font-size: 16px;
}
.timeline-article .content-left-container {
    float: left;
}
.timeline-article .content-right-container {
    float: right;
}
.timeline-article .content-left:before, .timeline-article .content-right:before {
    position: absolute;
    top: 20px;
    font-size: 23px;
    font-family: 'Font Awesome 5 Free';
    color: #fff;
    filter: drop-shadow(-1px 0px 0px rgba(0, 0, 0, 0.2));
}
.timeline-article .content-left:before {
    content: "\f0da";
    right: -8px;
    filter: drop-shadow(1px 0px 0px rgba(0, 0, 0, 0.2));
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
}
.timeline-article .content-right:before {
    content: "\f0d9";
    left: -8px;
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
}
.timeline-article .meta-date {
    position: absolute;
    top: 0;
    left: 50%;
    width: 102px;
    height: 102px;
    margin-left: -51px;
    color: #fff;
    border-radius: 100%;
    background: #FFF;
    border: 3px solid #00b0bd;
}
.timeline-article .meta-date .pic {
    display: block;
    text-align: center;
    padding: 10px;
}
.timeline-article .meta-date .pic img {
    border-radius: 100%;
    width: 100%
}

/*===== // Vertical Timeline =====*/

/*===== Resonsive Vertical Timeline =====*/
@media only screen and (max-width: 830px) {
#conference-timeline .timeline-start,  #conference-timeline .timeline-end {
    margin: 0;
}
#conference-timeline .conference-center-line {
    margin-left: 0;
    left: 50px;
}
.timeline-article .meta-date {
    margin-left: 0;
    left: 20px;
}
.timeline-article .content-left-container,  .timeline-article .content-right-container {
    max-width: 100%;
    width: auto;
    float: none;
    margin-left: 110px;
    min-height: 53px;
}
.timeline-article .content-left-container {
    margin-bottom: 20px;
}
.timeline-article .content-left,  .timeline-article .content-right {
    padding: 10px 25px;
    min-height: 65px;
}
.timeline-article .content-left:before {
    content: "\f0d9";
    right: auto;
    left: -8px;
}
.timeline-article .content-right:before {
    display: none;
}
}

@media only screen and (max-width: 400px) {
.timeline-article p {
    margin: 0;
}
}
/*===== // Resonsive Vertical Timeline =====*/

/* -最新消息--------------------------------------------------------------------------------------------------*/
.news_bg {
    margin: 50px 0 80px 0px;
    padding: 60px 0px 0px 80px;
    width: 100%;
    background-image: url(../images/news_bg.svg);
    position: relative;
    background-size: cover;
    background-position: center;
    box-shadow: 5px 5px 10px rgba(0,0,0,0.2);
}
.news_bg .n_icon {
    position: absolute;
    top: 0;
    right: 0;
    background-image: url(../images/icon_news02.svg);
    width: 220px;
    height: 250px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% auto;
}
.news_bg .n_icon02 {
    position: absolute;
    top: -35px;
    right: 0;
    background-image: url(../images/icon_news04.png);
    width: 320px;
    height: 240px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% auto;
}
.news_bg .ttbox {
    margin: 0px 0 0px 0px;
    padding: 0px 0px;
    width: auto;
    display: flex;
    align-items: flex-start;
}
.news_bg .ttbox .icon {
    margin: 0px 30px 0px 0px;
    display: inline-block;
}
.news_bg .ttbox .icon img {
    width: 80px;
}
.news_bg .ttbox .sttbox {
    margin: 0px 0 0px 0px;
    padding: 0px 0px;
    width: auto;
    display: inline-block;
}
.news_bg .ttbox .stt {


    margin: 0px 0 0px 0px;
    padding: 0px 0px;
    width: auto;
    display: block;
}
.news_bg .ttbox h1 {
    margin: 0px 0 0px 0px;
    padding: 0px 0px;
    font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
    font-size: 42px;
    color: #fff;
    letter-spacing: 2px;
    font-weight: 800;
    white-space: nowrap;
}
.news_bg .ttbox .stt {
    margin: 10px 0 0px 0px;

    padding: 0px 0px;
    display: block;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
}
.news_bg .ttbox .stt h2 {
    font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
    font-size: 22px;

    color: #fff;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
}
.news_bg .ttbox .stt h3 {
    font-size: 20px;
    color: #fff;
    margin: 0px 0 0px 5px;
}

@media only screen and (min-width: 0px) and (max-width: 1050px) {
.news_bg {
    padding: 40px 0px 0px 40px;
}
.news_bg .n_icon {

    width: 150px;
    height: 170px;
}
.news_bg .n_icon02 {
    top: 0px;
    width: 200px;
    height: 150px;
}
.news_bg .ttbox h1 {
    font-size: 30px;
    letter-spacing: 1px;
}
.news_bg .ttbox .stt h2 {
    font-size: 18px;
}
.news_bg .ttbox .stt h3 {
    font-size: 18px;
}
}

@media only screen and (min-width: 0px) and (max-width: 760px) {
.news_bg {
    margin: 50px 0 50px 0px;
}
.news_bg .n_icon {
    display: none;
}
.news_bg .n_icon02 {
    display: none;
}
}

@media only screen and (min-width: 0px) and (max-width: 630px) {
.news_bg .ttbox h1 {
    font-size: 26px;
}
.news_bg .ttbox .stt h2 {
    display: none;
}

}

@media only screen and (min-width: 0px) and (max-width: 450px) {
.news_bg {
    padding: 30px 0px 30px 0px;
}
.news_bg .ttbox .sttbox {
    margin: 0px auto;
}
.news_bg .ttbox h1 {
    text-align: center;
}
.news_bg .ttbox .icon {

    display: none;
    margin: 0px;
}
.news_bg .ttbox .stt {
    display: block;
    text-align: center;
}
.news_bg .ttbox .stt h3 {
    text-align: center;
}
}
.news_content {
    position: relative;
    width: 100%;
    height: auto;
    margin: 0px 0 60px 0px;
}
.news_bgbox {
    margin: 0px 0 0px 0px;
    padding: 0px 0px 0px 0px;
    width: 100%;
    height: 100%;
    background: #efefef;
    position: absolute;
    top: 0;
    z-index: -2
}
.news_content:before {
    content: '';
    margin: 0px 0 0px 0px;
    padding: 0px 0px 0px 0px;
    width: 100%;
    height: 157px;
    background: #5d737d;
    display: block;
    position: absolute;
    top: 0;
    z-index: -1;
}
.news_content:after {
    content: '';
    margin: 0px 0 0px 0px;
    padding: 0px 0px 0px 0px;
    width: 100%;
    height: 160px;
    background: #5d737d;
    display: block;

    position: absolute;
    bottom: 0;
    z-index: -1;
}
.news_line {
    width: 100%;
    height: 5px;
    display: block;
    background: #fff;
    position: absolute;
    bottom: 60px;
}
.news {
    margin: 0px 0 0px 0px;
    padding: 0px 0px 0px 0px;
    width: 100%;
}
.news ul {
    width: 100%;
    margin: 0px auto 0px auto;
    padding: 0px 0;
    list-style: none;
    height: auto;
    overflow: hidden;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-end;
}

.news ul li {
    width: calc(100%/3 - 120px/2 );
    margin: 0px auto;
    padding: 60px 0 0px 0;
    list-style: none;
    position: relative;

}
.news ul li.green {
    width: calc(40% - 120px/2 );
    margin: 0px auto;

    padding: 60px 0 0px 0;
    list-style: none;
    position: relative;
}
.news ul li.green .icon {
    width: 80px;
    height: 60px;
    display: block;
    position: absolute;
    right: 0;
    top: 30px;
    background-image: url(../images/icon_news03.svg);
    background-size: cover;
    background-position: center;
}
.news ul li .date {
    width: 100%;
    margin: 0px 0px 10px 0px;
    padding: 10px 0;
    text-align: center;
    color: #333;
    font-family: Arial;
    background-image: url(../images/news_bg.svg);
    background-size: cover;
    background-position: center;
}
.news ul li.green .date {
    width: 75%;
    margin: 0px 0px 10px 0px;
    padding: 10px 0;
    text-align: center;
    background: #c6ff00;
    color: #333;
}
.news ul li .pic {
    width: 100%;
    margin: 0px 0px;
    padding: 0;
    background: #fff;
    position: relative;
}
.news ul li .pic img {
    width: 100%;
    padding: 5px;
}
.news ul li:hover .pic {
    box-shadow: 2px 2px 10px rgba(0,0,0,0.3);
}
.news ul li .title {
    width: 85%;
    margin: 60px auto 20px auto;
    padding: 0 0 0 0;
    font-size: 16px;
    color: #fff;
    text-align: center;
    line-height: 1.5;
    height: 50px;
    display: -webkit-box;
    display: -moz-box;
    -webkit-line-clamp: 2;
    -moz-line-clamp: 2;

    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}
.news ul li .title p {
    width: 100%;
    font-family: Arial;
}
.news ul li:hover .title {
    color: #44d2f8;
}
.news ul li.green:hover .title {
    color: #c3fe02;
}
.news ul li .line {
    width: 100%;
    height: 5px;
    display: block;
    margin: 0px 0px 60px 0px;
}
.news ul li .line:after {
    content: '';
    display: block;
    margin: 0px 0 0 0;
    width: 0;
    height: 5px;
    background: #44d2f8;
    transition: width .5s;
}
.news ul li:hover .line:after {
    width: 100%;
    transition: width .5s;
}
.news ul li.green .line:after {
    content: '';
    display: block;
    margin: 0px 0 0 0;
    position: absolute;
    z-index: 2;
    width: 0;
    height: 5px;
    background: #c3fe02;
    transition: width .5s;
}
.news ul li.green .line:before,.news ul li:first-child .line:before  {
    content: '';
    display: block;
    margin: 0px 0 0 0;
    position: absolute;
    z-index: 1;
    width: 100%;
    height: 5px;
    background: #fff;
}
.news ul li.green:hover .line:after {
    width: 100%;
    transition: width .5s;
}
.news ul li.green .line .news_ball {
    width: 28px;
    height: 28px;
    display: block;
    background: #c6ff02;
    border: 8px solid #fff;
    position: absolute;
    z-index: 3;
    bottom: 50px;
    border-radius: 50%;
    box-shadow: rgba(0, 0, 0, 0.3) 5px 5px 10px;
}
.news ul li .line .news_ball {
    width: 28px;
    height: 28px;
    display: block;
    background: #41cbef;
    border: 8px solid #fff;
    position: absolute;
    bottom: 50px;
    border-radius: 50%;
    box-shadow: rgba(0, 0, 0, 0.3) 5px 5px 10px;
    z-index: 3;
}

@media only screen and (min-width: 0px) and (max-width: 1023px) {
.news ul li {
    width: calc(100%/3 - 60px/2 );
}
}

@media only screen and (min-width: 0px) and (max-width: 768px) {

.news ul li.green, .news ul li:first-child{
    width: 100%;
}
.news ul li.green:after, .news ul li:first-child:after  {
    content: '';
    margin: 0px 0 0px 0px;
    padding: 0px 0px 0px 0px;
    width: 100%;
    height: 160px;

    background: #333;
    display: block;
    position: absolute;
    bottom: 0;
    z-index: -1
}
.news ul li.green .line .news_ball,.news ul li:first-child .line .news_ball  {
    left: calc(50% - 14px);
}
.news ul li {
    width: calc(100%/2 - 60px/2 );
}
}

@media only screen and (min-width: 0px) and (max-width: 500px) {
.news ul li .date {
    padding: 7px 0;
    font-size: 14px;
}
.news ul li.green .date {
    padding: 7px 0;
    width: 70%;
    font-size: 14px;
}
}
/* -產品介紹--------------------------------------------------------------------------------------------------*/
.pd {
    margin: 0px 0 30px 0px;
    width: 100%;
    height: auto;
    overflow: hidden;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
}
.pd li {
    margin: 20px 15px 20px 15px;
    padding: 0px 0px 0px 0px;
    width: calc(100% / 3 - 30px);
    list-style: none;
    transition: all 0.6s;
}
.pd li .pic {
    margin: 0px 0px 10px 0px;
    width: 100%;
    position: relative;
    border: 2px solid #85d0e4;
    border-radius: 5px;
    line-height: 0;
}
.pd li:hover .pic {
    box-shadow: 2px 2px 10px rgba(0,0,0,0.3);
}
.pd li:hover {
    transform: translate(0px, -10px);
}
.pd li .pic img {
    width: 100%;
}
.pd li .title {
    margin: 0px 0px 0px 0px;
    width: 100%;
    font-size: 16px;
    color: #1B3059;
    text-align: center;
    line-height: 1.5;
}

@media only screen and (min-width: 481px) and (max-width: 800px) {
.pd li {
    width: calc(100%/2 - 20px);
}
}

@media only screen and (min-width: 0px) and (max-width: 480px) {
.pd li {
    width: 100%;
    margin: 20px 0px 30px 0px;
}
}
.prev[data-v-43e93932] {
    width: 42px !important;
    height: 42px !important;
    line-height: 42px !important;
    font-size: 0px !important;
    background: url(../images/pd_arrow01.png) no-repeat;
    background-size: cover;
    display: block;
    position: absolute;
    z-index: 1010;
    color: #333;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    text-decoration: none;
    top: 0;
}
.next[data-v-43e93932] {
    width: 42px !important;
    height: 42px !important;
    line-height: 42px !important;
    font-size: 0px !important;
    background: url(../images/pd_arrow02.png) no-repeat;
    background-size: cover;
    display: block;
    position: absolute;
    z-index: 1010;
    color: #333;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    text-decoration: none;
    top: 0;
}

@media only screen and (min-width: 0px) and (max-width: 480px) {
.prev[data-v-43e93932], .next[data-v-43e93932] {
    margin-top: 70px;
}
}
/* -應用影片--------------------------------------------------------------------------------------------------*/
.video_title {
    margin: 0px 0px 0px 0px;
    padding: 0px 43px 0px 43px;
    width: 100%;
}
.video {
    margin: 30px auto 20px auto;
    width: 90%;

    height: auto;
    overflow: hidden;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.video li {
    margin: 0px 0px 30px 0px;
    padding: 0px 0px 0px 0px;
    width: calc(100%/2 - 15px);
    list-style: none;
    transition: all 0.6s;
}
.video li .pic {
    margin: 0px 0px 0px 0px;
    width: 100%;
    position: relative;
}
.video li .pic .zoom {
    display: none;
}
.video li .pic:hover .zoom {
    position: absolute;
    content: '';
    display: block;
    width: 50px;
    height: 50px;
    background-image: url(../images/icon_zoom.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% auto;
    position: absolute;
    left: calc(50% - 25px);
    top: calc(50% - 25px);
}
.video li .pic img {
    width: 100%;
}
.video li:hover .pic:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.5);
}

@media only screen and (min-width: 0px) and (max-width: 1100px) {
.video_title {
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    width: 100%;
}
}

@media only screen and (min-width: 0px) and (max-width: 480px) {
.video li {
    width: 100%;
    margin: 20px 0px 30px 0px;
}
}
.left_catalog {

    margin: 0px auto 0px auto;
    width: 100%;
    display: none;
}

@media only screen and (min-width: 0px) and (max-width: 1100px) {
.left_catalog {
    display: block;
}
.left_catalog .tt {
    background: #07508a;
    color: #FFF;
}
.mob_first_menu{
    background-color:#1ff2ff;   
    border-bottom: 2px solid #d4d4d4  !important;
    background: #ffffff;
    background: -moz-linear-gradient(top, #ffffff 1%, #ececec 100%);
    background: -webkit-linear-gradient(top, #ffffff 1%,#ececec 100%);
    background: linear-gradient(to bottom, #ffffff 1%,#ececec 100%);
}
.left_catalog a {
    color: #1B3059;
}
.tt:after{
    background-color: #fff !important;
    height: 24px !important;
    border-radius: 90px;
    top: 15px !important;
}
}
/* -產品應用--------------------------------------------------------------------------------------------------*/
.application {
    margin: 0px 0 30px 0px;
    width: 100%;
    height: auto;
    overflow: hidden;
}
.app_tt {
    margin: 0px 0 0px 0px;
    width: 100%;
    color: #006481;
    font-size: 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.app_tt {
    width: 100%;
    margin: 50px 0 0px 0;
    padding: 0px 0 5px 0;
    color: #006481;
    font-size: 30px;
    text-align: center;
}
.app_tt:after {
    content: '';
    margin: 20px 0px 10px 50%;

    padding: 0;
    width: 2px;
    height: 50px;
    display: block;
    background: #4ecbe7;
}
.app_ttbox {
    margin: 0px auto;
    width: 700px;
    height: auto;
    overflow: hidden;
    text-align: center;
    font-size: 16px;
    color: #000;

    line-height: 1.5;
}
.app_icon {
    width: 80%;
    margin: 30px auto 0 auto;
}
.app_icon ul {
    width: 100%;
    padding: 0;
    list-style: none;
    margin: 0;
    text-align: center
}
.app_icon ul li {
    display: inline-block;
    width: calc(100% / 4 - 4px);
    position: relative;
    margin: 30px 0;
    padding: 0;
    list-style: none;
    vertical-align: text-top
}
.app_icon ul li img {
    width: 70px;
    padding: 0 0 0 0px
}
.app_icon ul li p {
    display: inline-block;

    width: 100%;
    margin: 20px 0 0 0px;
    padding: 0 0 0 0px;
    font-size: 16px ;
    color:#231815;
}
.app_icon ul li a p {
    /* color: #1B3059; */
}
.app_icon ul li a:hover p {
    color: #0088CC;
}

@media only screen and (min-width: 0px) and (max-width: 950px) {
.app_icon, .app_ttbox {
    width: 100%;
}
}

@media only screen and (min-width: 0px) and (max-width: 500px) {
.app_icon ul li {
    width: calc(100% / 2 - 4px);
}
}
.application02 {
    margin: 0px 0 0px 0px;
    width: 100%;
}
.application02 .alist {
    margin: 0px 0 0px 0px;
    width: 100%;
    position: relative;
    display: flex;
    align-items: stretch;
}
.application02 .alist .pic {
    margin: 0px 0 0px 0px;
    padding: 0;
    width: 50%;
    margin-left: auto;
    order: 2;
    background-size: cover;
    background-position: center;
    height: 100vw;
    max-height: 430px;
}
.application02:nth-child(2n+0) .alist .pic {
    margin: 0px 0 0px 0px;
    padding: 0;
    width: 50%;
    background-size: cover;
    background-position: center;
    height: 100vw;
    max-height: 430px;
}

@media only screen and (min-width: 1680px) and (max-width: 2000px) {
.application02 .alist .pic img {
    height: 50%;
    background-size: cover;
    background-position: center;
}
}
.application02 .alist .txtbox {
    margin: 0px 0 0px 0px;
    padding: 30px 30px;
    width: 50%;
    position: relative;
}
.application02:nth-child(2n+0) .alist .txtbox {
    margin: 0px 0 0px 0px;
    padding: 30px 30px;
    width: 50%;
    position: relative;
    margin-left: auto;
    order: 2;
}
.application02 .alist .atxtbox {
    width: calc(1100px / 2);
    float: right;
    margin-top: 10px;
}
.application02:nth-child(2n+0) .alist .atxtbox {
    width: calc(1100px / 2);
    float: left;
    margin-top: 10px;
}
.application02 .alist .atxtbox h1 {
    margin: 0px 0 0px 0px;
    width: 100%;
    color: #003d6d;
    font-size: 20px;
    margin-bottom: 20px;
}
.application02 .alist .atxtbox h1:after {
    content: '';
    display: block;
    width: 100%;
    height: 2px;
    background: #52cae9;
    margin: 10px 0px 0px 0px;
}
.application02 .alist .atxtbox p {
    margin: 20px 0 0px 0px;
    width: 100%;
    color: #231815;
    font-size: 16px;
    line-height: 1.6;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 6;
    overflow: hidden;
}
.application02 .alist .morebox {
    width: auto;
    color: #231815;
    font-size: 24px;
    font-weight: bold;
    position: absolute;
    bottom: 25px;
    right: 30px;
}
.application02:nth-child(2n+0) .alist .morebox {
    width: auto;
    color: #231815;
    font-size: 24px;
    font-weight: bold;
    position: absolute;
    bottom: 25px;
    left: 30px;
    margin-left: auto;
    order: 2;
}
.application02 .alist .morebox i {
    display: inline-block;
}
.application02 .alist .morebox i:before {
    content: "\f101";
    margin: 0px 0px 0px 5px;
    font-family: 'Font Awesome 5 Free';
    color: #0088CC;
    font-size: 18px;
    font-style: normal;
}
.application02:nth-child(2n+0) .alist .morebox i:before {
    content: "\f100";
    margin: 0px 5px 0px 0px;
    font-family: 'Font Awesome 5 Free';
    color: #0088CC;
    font-size: 18px;
    font-style: normal;
}
.application02 .alist .more {
    padding: 8px 15px;
    margin: 0px 0px 0px 0px;
    text-decoration: none;
    display: inline-block;
    font-size: 12px;
    font-family: Arial;
    color: #0088CC;
    border: 1px solid #0088CC;
    text-align: center;
}
.application02 .alist .morebox a.active i:before {
    content: "\f103";
}
.app_link{
    width:100%;
    display:block
}
.app_link a{
    width:100%;
    display: flex;
    align-items: center;
    margin-bottom: 25px;
    font-size: 17px;
    color: #231815;
}
.app_link a:hover{
    color:#003d6d
}
.app_link a:before{
    content:'';
    display:block;

    width:35px;
    height: 35px;
    background-image: url(../images/icon/link.svg);
    margin-right: 10px;
    background-repeat: no-repeat;
}


@media only screen and (min-width: 0px) and (max-width: 1500px) {
.application02 .alist .pic, .application02:nth-child(2n+0) .alist .pic {
    height: 60vw;
}
}

@media only screen and (min-width: 0px) and (max-width: 1400px) {
.application02 .alist .atxtbox {
    width: 100%;
}
.application02:nth-child(2n+0) .alist .atxtbox {
    width: 100%;
}
}

@media only screen and (min-width: 900px) and (max-width: 950px) {
.application02 .alist .atxtbox p {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    overflow: hidden;
}
}

@media only screen and (min-width: 0px) and (max-width: 899px) {
.application02 .alist {
    margin: 0px 0 40px 0px;
    width: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
}
.application02 .alist .pic {
    width: 100%;
    display: block;
    margin-left: auto;
    order: 0;
}
.application02:nth-child(2n+0) .alist .pic {
    width: 100%;
    display: block;
}
.application02 .alist .txtbox {
    width: 100%;
}
.application02:nth-child(2n+0) .alist .txtbox {
    width: 100%;
    margin-left: 0;
    order: 0;
}
.application02 .alist .morebox {
    position: relative;
    bottom: 0px;
    left: 0px;
    top: 10px;
}
.application02:nth-child(2n+0) .alist .morebox {
    position: relative;
    bottom: 0px;
    left: 0px;
    top: 10px;
}
}
.app_expand {
    margin: 0px 0 0px 0px;

    width: 100%;
    border-left: 2px solid #52cae9;
    border-right: 2px solid #52cae9;
    padding: 10px 20px;
}
@media only screen and (min-width: 0px) and (max-width: 767px) {
	.application02 .alist{    margin: 0px 0 0px 0px;}
	.application02 {margin-bottom: 20px}
}
/* -技術下載--------------------------------------------------------------------------------------------------*/
.left_bookbox {
    margin: 50px auto 0px auto;
    padding: 0px 0px;
    width: 90%;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center
}
.left_bookbox h1 {
    margin: 0px 0 0px 0px;
    padding: 0px 0px;
    width: 100%;
    color: #57a2d3;
    font-size: 26px;
    font-weight: bold;
    font-family: 'Open Sans';
}
.left_bookbox h2 {
    margin: 10px 0 0px 0px;
    padding: 0px 0px;
    width: 100%;
    color: #57a2d3;
    font-size: 24px;
    font-family: 'Open Sans';
}
.left_bookbox h2:after {
    content: '';
    display: block;
    width: 100%;
    height: 3px;
    background: #0080b7;
    margin: 10px 0px 0px 0px;
}
.left_bookbox h3 {
    display: block;
    width: 110px;
    height: 60px;
    background-image: url(../images/icon_book.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% auto;
    margin: 20px 0px 0px 0px;
}
.ind_book h3{
    background-image: url(../images/icon_book02.svg);
}
.download_box {
    margin: -15px auto 20px auto;
    padding: 0px 0px;
    width: 90%;
}
.download_box .linebox {
    margin: 0px 0 0px 0px;
    padding: 0px 0px;
    width: 100%;
    border-top: 10px solid #02637f;
    display: flex;
    justify-content: space-between;
}
.download_box .linebox02 {
    margin: 0px 0 0px 0px;
    padding: 0px 0px;
    width: 100%;
    border-bottom: 10px solid #02637f;
    display: flex;
    justify-content: space-between;
}
.download_box .linebox:before, .download_box .linebox02:before {
    content: '';
    margin: 0px 0 0px 0px;
    padding: 0px 0px;
    width: 10px;
    height: 25px;
    background: #02637f;

}
.download_box .linebox:after, .download_box .linebox02:after {
    content: '';
    margin: 0px 0 0px 0px;
    padding: 0px 0px;
    width: 10px;
    height: 25px;
    background: #02637f;
}
.download_box .linebox03 {
    margin: 0px 0 0px 11px;
    padding: 0px 0px;
    width: 15px;
    height: 20px;
    display: inline-block;
    background: #02637f;
    clip-path: polygon(0% 0%, 100% 0, 100% 100%, 50% 70%, 0 100%);
    -webkit-clip-path: polygon(0% 0%, 100% 0, 100% 100%, 50% 70%, 0 100%);
}
.down_list {
    width: calc(100% - 50px);
    margin: 20px auto 20px auto;
    padding: 0px 0;
    list-style: none;
}
.down_list .slick-prev:before, .down_list .slick-next:before {
    font-size: 0;
}
.down_list .slick-prev, .down_list .slick-next {
    width: 22px;
    height: 36px;
    background: url("../images/arrow.png");
    background-repeat: no-repeat;
    background-size: auto 100%;
    top: 35%;
}
.down_list .slick-prev {
    background-position: 0px top;
    left: -30px;
    transition: all 0.6s;
}
.down_list .slick-next {
    background-position: -22px top;
    right: -30px;
    transition: all 0.6s;
}
.down_list .slick-prev:hover, .down_list .slick-prev:focus, .down_list .slick-next:hover, .down_list .slick-next:focus {
    transform: translate(0px, -10px);
}
.down_item {
    width: calc(100%/3 - 120px/2 );
    margin: 0px 10px;
    padding: 0px 0 0px 0;
    list-style: none;
    position: relative;
}
.down_item:after {
    width: 100px;
    height: 80%;
    border-right: 1px dashed #221e1f;
    display: inline-block;
    background: red
}
.down_item .pic {
    width: 100%;
    margin: 0px 0px;
    padding: 0;
    background: #4ecfe2;
    position: relative;
}
.down_item .pic img {
    width: 100%;
    padding: 5px;
}
.down_item .title {
    width: 100%;
    margin: 15px auto 0px auto;
    padding: 0;
    font-size: 16px;
    color: #231815;
    text-align: center;
    line-height: 1.2;
    height: 50px;
    display: -webkit-box;
    display: -moz-box;
    -webkit-line-clamp: 2;
    -moz-line-clamp: 2;
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}
.down_item:hover .title {
    color: #008dd1;
}
.down_item .iconbox {
    width: 100%;
    margin: 0px 0px;
    padding: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}
.down_item .iconbox .more {
    width: auto;
}
.down_item .iconbox .more span {
    float: left;
    color: #fff;
    padding: 0px 10px;
    background: #e6e3e2;
    height: 36px;
    font-family: 'Open Sans';
    font-size: 14px;
    background: #02adc2; /* Old browsers */
    background: -moz-linear-gradient(top, #02adc2 0%, #4cd0e1 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #02adc2 0%, #4cd0e1 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #02adc2 0%, #4cd0e1 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#02adc2', endColorstr='#4cd0e1', GradientType=0 ); /* IE6-9 */
    -webkit-border-top-left-radius: 5px;
    -webkit-border-bottom-left-radius: 5px;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-bottomleft: 5px;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #03adc2;
}
.down_item .iconbox .more i {
    float: left;

    color: #fff;
    padding: 0px 10px;
    height: 36px;
    font-size: 15px;
    background: #4cd0e1; /* Old browsers */
    background: -moz-linear-gradient(top, #4cd0e1 0%, #02adc2 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #4cd0e1 0%, #02adc2 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #4cd0e1 0%, #02adc2 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4cd0e1', endColorstr='#02adc2', GradientType=0 ); /* IE6-9 */
    -webkit-border-top-right-radius: 5px;
    -webkit-border-bottom-right-radius: 5px;
    -moz-border-radius-topright: 5px;
    -moz-border-radius-bottomright: 5px;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #03adc2;
    border: 1px solid #03adc2;
}
.down_item .iconbox h2 {
    content: '';
    margin: 0 0 0 20px;
    display: inline-block;
    width: 42px;
    height: 42px;
    background-image: url(../images/icon_download03.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% auto;
}
.download_box02 {



    margin: 0px auto 40px auto;
    padding: 0px 0px;
    width: 90%;
    position: relative;
}
.download_box02:before {
    content: '';
    display: block;
    position: absolute;
    z-index: -1;
    background: #4ecfe2;
    width: 100%;
    height: 80%;
    clip-path: polygon(0 0, 20% 0, 100% 80%, 100% 100%, 70% 100%, 0 30%);
    -webkit-clip-path: polygon(0 0, 20% 0, 100% 80%, 100% 100%, 70% 100%, 0 30%);
}
.down_list02 {
    width: 100%;
    margin: 0px auto 0px auto;
    padding: 0px 60px 0px 60px;
    list-style: none;
}
.down_list02 .slick-prev:before, .down_list02 .slick-next:before {
    font-size: 0;
}
.down_list02 .slick-prev, .down_list02 .slick-next {
    width: 22px;
    height: 36px;
    background: url("../images/arrow.png");
    background-repeat: no-repeat;
    background-size: auto 100%;
    top: 48%;
}
.down_list02 .slick-prev {
    background-position: 0px top;
    left: -60px;
    transition: all 0.6s;
}
.down_list02 .slick-next {
    background-position: -22px top;
    right: -60px;
    transition: all 0.6s;
}
.down_list02 .slick-prev:hover, .down_list02 .slick-prev:focus, .down_list02 .slick-next:hover, .down_list02 .slick-next:focus {
    transform: translate(0px, -10px);
}
.down_item02 {
    width: calc(100%/2 );
    margin: 0px 0px;
    padding: 0px 0 0px 0;
    list-style: none;
    position: relative;
}
.down_item02 .pic {
    width: 100%;
    margin: 0px 0px;
    padding: 20px 20px 50px 20px;
    position: relative;
    background: #ffffff; /* Old browsers */
    background: -moz-linear-gradient(left, #ffffff 0%, #f0f0f0 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left, #ffffff 0%, #f0f0f0 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right, #ffffff 0%, #f0f0f0 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f0f0f0', GradientType=1 ); /* IE6-9 */
}
.down_item02 .pic img {
    width: 100%;
    padding: 0px;
    border: 5px solid #057dba;
}
.down_item02:hover .pic img {
    width: 100%;
    padding: 0px;
    border: 5px solid #4ecfe2;

}
.down_item02 .sahdow {
    width: 100%;
    height: 14px;
    display: block;
    background-image: url(../images/book_shadow.svg);
    background-position: top;
    background-repeat: no-repeat;
    background-size: 100% auto;
}

@media only screen and (min-width: 0px) and (max-width: 500px) {
	.left_bookbox h1{
		font-size: 22px
	}
.down_list02 {
    padding: 0px 20px 0px 20px;
}
.down_list02 .slick-prev, .down_list02 .slick-next {
    width: 16px;
    height: 26px;
}
.down_list02 .slick-prev {
    background-position: 0px top;
    left: -30px;
}
.down_list02 .slick-next {
    background-position: -16px top;
    right: -30px;
}
.down_item02 .pic {
    width: 100%;
    margin: 0px 0px;
    padding: 5px;
}
.down_item02 .pic img {
    border: 1px solid #057dba;
}
.down_item02:hover .pic img {
    border: 1px solid #4ecfe2;
}
}
.download_box02 .iconbox {
    width: 100%;
    margin: 20px 0px 0px 0px;
    padding: 0 80px 0 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
}
.download_box02 .iconbox .more {
    width: auto;
}
.download_box02 .iconbox .more span {
    float: left;
    color: #fff;
    padding: 0px 10px;
    background: #e6e3e2;
    height: 36px;
    font-family: 'Open Sans';
    font-size: 14px;
    background: #02adc2; /* Old browsers */
    background: -moz-linear-gradient(top, #02adc2 0%, #4cd0e1 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #02adc2 0%, #4cd0e1 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #02adc2 0%, #4cd0e1 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#02adc2', endColorstr='#4cd0e1', GradientType=0 ); /* IE6-9 */
    -webkit-border-top-left-radius: 5px;
    -webkit-border-bottom-left-radius: 5px;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-bottomleft: 5px;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #03adc2;
}
.download_box02 .iconbox .more i {
    float: left;
    color: #fff;
    padding: 0px 10px;
    height: 36px;
    font-size: 15px;
    background: #4cd0e1; /* Old browsers */
    background: -moz-linear-gradient(top, #4cd0e1 0%, #02adc2 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #4cd0e1 0%, #02adc2 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #4cd0e1 0%, #02adc2 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4cd0e1', endColorstr='#02adc2', GradientType=0 ); /* IE6-9 */
    -webkit-border-top-right-radius: 5px;
    -webkit-border-bottom-right-radius: 5px;
    -moz-border-radius-topright: 5px;
    -moz-border-radius-bottomright: 5px;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #03adc2;
    border: 1px solid #03adc2;
}
.download_box02 .iconbox h2 {
    content: '';
    margin: 0 0 0 20px;
    display: inline-block;
    width: 42px;
    height: 42px;
    background-image: url(../images/icon_download03.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% auto;
}
/* -聯絡我們--------------------------------------------------------------------------------------------------*/
.contact {
    margin: 0px 0 0px 0px;
    padding: 0px 0px;
    width: 100%;
}
.contact .tt_tabbox {
    margin: 0px 0 0px 0px;
    padding: 0px 0px;
    width: 100%;
    height: auto;
    overflow: hidden;
    text-align: center;
}
.contact_box {
    margin: 0px 0 0px 0px;
    padding: 60px 40px 40px 40px;
    width: 100%;
    border-radius: 20px;
    height: auto;
    overflow: hidden;
    background: #dfe3e6;
}
.contact_box .c_left {
    margin: 0px 0px 0px 0px;
    padding: 0px 30px 40px 30px;
    float: left;
    width: calc(50% - 15px);
    background: #fff;
}

.contact_box .c_right {
    margin: 0px 0px 0px 0px;
    padding: 0;
    float: right;

    width: calc(50% - 15px);
}
.contact_box02 {
    margin: 0px 0 0px 0px;
    padding: 30px 50px 50px 50px;
    border-radius: 20px;
    height: auto;
    overflow: hidden;
    border: 2px solid #0089cd;
    width: 80%;
    margin: 0px auto;
    background: #ffffff; /* Old browsers */
    background: -moz-linear-gradient(top, #ffffff 0%, #ffffff 80%, #eeeeee 91%, #d4d4d4 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #ffffff 0%, #ffffff 80%, #eeeeee 91%, #d4d4d4 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #ffffff 0%, #ffffff 80%, #eeeeee 91%, #d4d4d4 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#d4d4d4', GradientType=0 ); /* IE6-9 */
}
.contact_box02 .map {
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    width: 100%;
    border: 1px solid #b1b1b1;
}
.contact_box02 .add_box {
    margin: 20px auto;
    padding: 0px 0px 0px 0px;
    width: 100%;
}
.contact_box02 ul {
    margin: 0px 0px 0px 0px;
    padding: 0px 50px 0px 0px;
    float: left;
    width: 65%;
    list-style: none;
}

.contact_box02 ul:nth-child(2) {
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    float: left;
    width: 35%;
    list-style: none;
}
.contact_box02 ul h1 {
    margin: 5px 0px 20px 0px;
    padding: 0px 0px 0px 0px;
    width: 100%;
    font-size: 18px;
    color: #000;
}
.contact_box02 ul li {
    margin: 0px 0px 10px 0px;
    padding: 0px 0px 0px 0px;
    width: 100%;
    list-style: none;
    font-size: 16px;
    color: #000;
    line-height: 1.5;
}
.contact_box02 ul h2 {
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    width: 50px;
    float: left;
}
.contact_box02 ul h3 {
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    width: calc( 100% - 50px);
    float: left;
}

@media only screen and (min-width: 0px) and (max-width: 1350px) {
.contact_box02 {
    width: 100%;
}
}

@media only screen and (min-width: 0px) and (max-width: 930px) {
.contact_box02 ul {
    padding: 0px 0px 0px 0px;
    width: 100%;
}
.contact_box02 ul:nth-child(2) {
    width: 100%;
}
}

@media only screen and (min-width: 0px) and (max-width: 500px) {
.contact_box {
    padding: 60px 20px 40px 20px;
}
.contact_box02 {
    margin: 0px 0 0px 0px;
    padding: 20px 20px 20px 20px;
}
}

@media only screen and (min-width: 0px) and (max-width: 1023px) {
.contact_box .c_left {
    margin: 0px 0px 30px 0px;
    width: 100%;
}
.contact_box .c_right {
    width: 100%;
}
}
.c_tab {
    margin: 0px 0 0px 0px;
    padding: 20px 80px;
    font-size: 20px;
    color: #fff;
    background: #7db343;
    display: inline-block;
    -webkit-border-top-left-radius: 8px;
    -webkit-border-top-right-radius: 8px;
    -moz-border-radius-topleft: 8px;
    -moz-border-radius-topright: 8px;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}
.c_tab02 {
    margin: 0px 0 0px 0px;
    padding: 20px 80px;
    font-size: 20px;
    color: #fff;
    background: #0089cd;
    display: inline-block;
    -webkit-border-top-left-radius: 8px;
    -webkit-border-top-right-radius: 8px;
    -moz-border-radius-topleft: 8px;
    -moz-border-radius-topright: 8px;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}
.ctab_text li {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -ms-flex-line-pack: center;
    align-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.ctab_text li:after {
    content: '';
    display: inline-block;
    width: 1px;
    height: 30px;
    background: #FFF;
    margin: 0px 42px 0px 42px;
}
.ctab_text li:last-of-type:after {
    content: '';
    display: none;
}

@media only screen and (min-width: 0px) and (max-width: 630px) {
.c_tab {
    padding: 20px 20px;
    font-size: 18px;
}
.c_tab02 {
    padding: 20px 20px;
    font-size: 18px;
}
.ctab_text li:after {
    height: 20px;
    margin: 0px 20px 0px 20px;
}
}
/* -會員專區--------------------------------------------------------------------------------------------------*/
.member {
    margin: 0px 0 0px 0px;
    padding: 0px 0px;
    width: 100%;
}
.member .m_left {
    margin: 0px 30px 0px 0px;
    padding: 0;
    float: left;
    width: calc(50% - 30px);
}
.member .m_right {
    margin: 0px 0px 0px 30px;
    padding: 0;
    float: right;
    width: calc(50% - 30px);
}
.login_box {
    margin: 0px 0 0px 0px;
    padding: 120px 0px 60px 0px;
    width: 100%;
    background: url(../images/login_bg.jpg) no-repeat center center;
    background-size: cover;
}
.login_box .all_box {
    margin: 0px auto 0px auto;

    width: 80%;
}
.login_box .all_box .user_box {
    padding: 6%;
    width: 100%;
    background: rgba(255, 255, 255, 0.4);
    position: relative;
    border-radius: 20px;
}
.login_box .all_box .user_box h1 {
    margin: 40px 0px 30px 0px;
    padding: 0px 0px;
    width: 100%;
    font-size: 20px;
    text-align: center;
    color: #808080;
}
.login_box .all_box .user_box h2 {
    position: absolute;
    top: -40px;
    left: calc(50% - 40px);
}
.login_box .all_box .user_box h2 img {
    width: 80px;
}
.account {
    margin: 50px auto 0px auto;
    width: 100%;
    padding: 20px 0px 0px 0px;
    width: 100%;
    border-top: 2px solid #fff;
    text-align: center;
    font-size: 0.875rem;
    color: #fff;
    font-family: 'Open Sans';
}
.account a {
    color: #fff;
}
.member-login {
    padding: 0px;
    margin: -40px 0 -40px 0;
    overflow: hidden;
}
.member-password {
    padding: 0px;
    margin: 40px;
    overflow: hidden;
}
.password {
    margin: 0px 0 0px 0px;
    padding: 0px 0px 0px 0px;
    width: 100%;
}
.password .ttbox {
    margin: 0px 0 0px 0px;
    padding: 0px 0px 0px 0px;
    width: 100%;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -ms-flex-line-pack: center;
    align-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}
.password .ttbox .ptxt {
    margin: 0px 0 0px 0px;
    padding: 0px 0px 0px 0px;
    display: inline-block;
    font-size: 0.9375rem;
    color: #131313;
    line-height: 1.5;
}
.password .mailbox {
    margin: 13px 0 0px 0px;
    padding: 0px 0px 0px 0px;
    width: 100%;
    background: #cfd8dd;
    padding: 20px;
    border-radius: 10px;
    height: auto;
    overflow: hidden;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -ms-flex-line-pack: center;
    align-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}
.password .mailbox .p_left {
    margin: 0px 15px 0px 0px;
    padding: 0;
    float: left;
    width: calc(100% - 75px);

}
.password .mailbox .p_right {
    margin: 0px 0px 0px 0px;
    padding: 0;
    float: right;
    width: 60px;
}
.member02 {
    margin: 0px auto;
    padding: 0px 0px;
    width: 75%;
}

@media only screen and (min-width: 0px) and (max-width: 1100px) {
.member .m_left {
    margin: 0px 0px 30px 0px;
    width: 100%;
}
.member .m_right {
    margin: 0px 0px 0px 0px;
    width: 100%;
}
.member02 {
    width: 100%;
}
}
/* -button---------------------------------------------------------------------------------------------------*/
.btn-style01 {
    padding: 0px 0px;
    margin: 0px 0px 0px 0px;
    text-decoration: none;
    display: block;
    font-size: 20px;
    color: #fff;
    line-height: 53px;
    width: 100%;
    border: none;
    background: #7BB241;
    text-align: center;
    border-radius: 8px;
    -webkit-appearance: none;
}
.btn-style01.hvr-fade:hover, .btn-style01.hvr-fade:focus, .btn-style01.hvr-fade:active {
    background: #0089cd;
}
.btn-style02 {
    padding: 0px 0px;
    margin: 0px 8px 0px 0px;
    width: calc(50% - 10px);
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 20px;
    color: #fff;
    line-height: 50px;
    background: #287e97;
    -webkit-transition: all 0.3s ease;

    transition: all 0.3s ease;
    border-radius: 10px;
    border: none;
    -webkit-appearance: none;
}
.btn-style02:nth-child(2) {
    padding: 0px 0px;
    margin: 0px 0px 0px 8px;
    width: calc(50% - 10px);
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 22px;
    color: #fff;
    line-height: 50px;
    background: #287e97;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
    border-radius: 10px;
    border: none;
    -webkit-appearance: none;
}
.btn-style02:hover, .btn-style02:nth-child(2):hover {
    background: #7db343;
}
.btn-style03 {
    padding: 0px 40px;
    margin: 0px 8px 0px 0px;
    width: auto;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 20px;
    color: #fff;
    line-height: 50px;
    background: #287e97;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
    border-radius: 8px;

    border: none;
    -webkit-appearance: none;
}

@media only screen and (min-width: 0px) and (max-width: 600px) {
.btn-style03 {
    padding: 0px 20px;
    margin: 0px 8px 10px 0px;
}
}

.btn-style04 {
    padding: 0px 40px;
    margin: 0px 8px 0px 0px;
    width: auto;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 20px;
    color: #fff;
    line-height: 50px;
    background: #7db343;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
    border-radius: 10px;
    border: none;
    -webkit-appearance: none;
}
.btn-style05 {
    padding: 0px 0px;
    margin: 0px 0px 0px 0px;
    width: 60px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    color: #fff;
    line-height: 50px;
    background: #7db343;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
    border-radius: 8px;
    border: none;
    -webkit-appearance: none;
}
/*page*/
.page {
    font-size: 13px;

    font-family: Arial;
    padding: 0px;
    margin: 0px 0px 60px 0px;
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: row;
    justify-content: center;
}
.page .number {
    width: auto;
    display: inline-block;
    border-left: 1px solid #48bbd8;
    background: #efefee;
    margin: 0px 30px 0px 30px;
    display: flex;
    align-items: center;
}
.page .number a {
    color: #242632;
    display: inline-block;
    border-right: 1px solid #40cbec;
    padding: 0px 10px;
    height: 40px;
    display: flex;
    align-items: center;
}
.page .number .current {
    background: #48bbd8;
    color: #FFF;
}
.page .number a:hover {
    background: #48bbd8;
    color: #FFF;
}
.page .pre, .page .next {
    width: auto;
    display: inline-block;
	margin: 0px 10px 0px 0px;
}
.page .pre i {
    float: left;
    color: #dbdadb;
    padding: 0px 10px;
    background: #48bbd8;
    height: 40px;
    font-size: 15px;
    -webkit-border-top-left-radius: 5px;
    -webkit-border-bottom-left-radius: 5px;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-bottomleft: 5px;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.page .pre span {
    float: left;
    color: #242632;
    padding: 0px 10px;
    background: #e6e5e5;
    height: 40px;
    -webkit-border-top-right-radius: 5px;
    -webkit-border-bottom-right-radius: 5px;
    -moz-border-radius-topright: 5px;
    -moz-border-radius-bottomright: 5px;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.page .pre:hover span, .page .next:hover span {
    color: #fff;
    background: #48bbd8;
}
.page .next i {
    float: left;
    color: #dbdadb;
    padding: 0px 10px;

    background: #48bbd8;
    height: 40px;
    font-size: 15px;
    -webkit-border-top-right-radius: 5px;
    -webkit-border-bottom-right-radius: 5px;
    -moz-border-radius-topright: 5px;
    -moz-border-radius-bottomright: 5px;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    display: flex;
    justify-content: center;

    align-items: center;
}
.page .next span {
    float: left;
    color: #242632;
    padding: 0px 10px;
    background: #e6e5e5;
    height: 40px;
    -webkit-border-top-left-radius: 5px;
    -webkit-border-bottom-left-radius: 5px;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-bottomleft: 5px;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.page .of {
    width: auto;
    font-size: 15px;
    font-family: Arial;
    display: flex;
    justify-content: center;
    align-items: center;
}
.page .of input[type="text"] {
    border-radius: 5px;
    line-height: 40px;
    border: 1px solid #43C6E6;
    text-align: center;
    margin: 0 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50px !important;

}
.page .box {
    width: auto;
    margin: 0px 0px 0px 0px;
    display: flex;
    justify-content: center;
    align-items: center;
}

@media only screen and (min-width: 0px) and (max-width: 600px) {
.page .number {
    margin: 0px 5px 0px -5px;
}
.page .pre span, .page .next span {
    display: none;
}
        .page {
        flex-direction: column;
    }
        .page .box {
        width: 100%;
        margin: 0 0 20px 0;
    }
    .page .of {
        width: 100%;
    }
}
/*404*/
.e404box {
    width: 90%;
    max-width: 700px;
    background: #FFF;
    padding: 50px 30px;
    margin: 10% auto 10% auto;
    display: block;
    border-radius: 5px;
    -moz-box-shadow: 3px 3px 2px rgba(0%,0%,0%,0.1);
    -webkit-box-shadow: 3px 3px 2px rgba(0%,0%,0%,0.1);

    box-shadow: 0 0 40px rgba(0%,0%,0%,0.1)
}
.e404 {
    width: 100%;
    display: block;
 padding: 0  height:auto;
    overflow: hidden;
    text-align: center;
}
.e404 .pic {
    width: 100%;
}
.e404 .pic img {
    width: 180px;
}
.e404 .textbox {
    width: 100%;
    margin: 10px 0px 0px 0px;
    height: auto;
    overflow: hidden;
}
.e404 .textbox dd {
    width: 100%;
    display: block;
    margin: 5px 0px;
    padding: 0;

    list-style: none
}

.e404 .textbox dd.error {
    font-family: 'Open Sans';
    font-size: 50px;
    font-weight: 700;
    color: #333;
    margin: 25px 0 0;
    vertical-align: top
}
.e404 .textbox dd.text {
    font-size: 15px;
    color: #333;
    line-height: 2
}
.e404 .textbox dd.text a {
    color: #43CDED;
}
.e404 .textbox dd.topbtn {
    vertical-align: top;
    margin: 18px 0;
}
.e404 .textbox dd a.btn {
    outline: none;
    border-radius: 3px;
    font-size: 14px;
    text-align: center;
    color: #ffF;
    padding: 5px 10px;
    border: 1px solid #86979f;
    text-decoration: none;
    vertical-align: top;
    background: #86979f
}
.e404 .textbox dd .btn:hover {
    background: #43CDED;
    border: 1px solid #43CDED;
    color: #fff;
}

/*user_editor  table*/
.user_editor table{
	font-family:Microsoft JhengHei;
	table-layout: fixed;
	color: #1B3059;
	width: 682px !important;
	text-align: center;

}
.user_editor table th{
	background:  rgb(0, 80, 151);
	color: #fff;
	text-align: center;
}
.user_editor tr:nth-child(odd){
	background: #fff;
}
.user_editor tr:nth-child(even){
	background: #e6efed;
	background: #e7f4f7;
}
.table_w tr:nth-child(odd), .table_w tr:nth-child(even){
	background: #fff;
}
.user_editor th, .user_editor td{
	padding: 0.5rem 0.8rem;
	border-bottom: 1px solid rgb(79, 110, 146);
	border-right: 1px solid rgb(79, 110, 146);
}
.user_editor tr>td:first-child{
	border-left: 1px solid rgb(79, 110, 146);
}
.nmore {
    padding: 6px 15px;
    margin: 0px 0px 0px 0px;
    text-decoration: none;
    display: inline-block;
    font-size: 12px;
    font-family: Arial;
    color: #1B3059;
    border: 1px solid #1B3059;
    text-align: center;
    position: absolute;
    right: 0;
    bottom: 10px;
    cursor: pointer;
}
.ctitbox .nmore{
    position: relative;
    bottom: 0;
    top: 17px;
}
@media only screen and (max-width: 1023px) and (min-width: 0px){
    .ctitbox .nmore{
        top: 13px;
    }
}


.index_itembox .slick-track .squ_sha:nth-child(3) li a .pic img{
    position: relative;
    left: -3%;
    margin-top:-72px; 
}