::-moz-selection
{
	background-color: #66afd4;
    color:#fff;
}
::selection
{
	background-color: #66afd4;
    color:#fff;
}
::-moz-selection  
{
	background-color: #66afd4;
    color:#fff;
}



/* cookie style */
.cookie-banner .banner{
    margin-bottom: 0;
}
.gdpr-banner{
    padding: 30px;
    margin: auto;
    background: linear-gradient(180deg, rgb(41, 41, 41,0.8), rgb(27, 27, 27,0.8));
    text-align: center;
    font-family: 微軟正黑體;
    color: #c2c2c2;
}
.gdpr-banner button.btn.m-1{
    display: inline-block;
    border: none;
    border-radius: 25px;
    text-decoration: none;
    background-color: rgb(238, 246, 255);
    background-size: 100% 200%;
    background-image: linear-gradient(to bottom, transparent 50%, rgb(255, 255, 255) 50%);
    color: rgb(54, 54, 54);
    margin: auto;
    padding: 10px 37px;
    min-width: auto;
    box-shadow: 0px 4px 16px 8px rgb(224, 224, 224) 33;
    transition: background-position 0.3s cubic-bezier(0.19, 1, 0.22, 1) 0.1s, color 0.5s ease-out 0s, background-color 0.5s ease-out;
    cursor: pointer;
}
.gdpr-banner button:hover{
    background-color: rgb(179, 188, 201);
    background-position: -100% 100%;
}
.gdpr-banner a{
    color: #fff;
}
.gdpr-banner a:hover{
    color: #999;
}



main{ display: contents;}



/* header */
.logo-row {
    width: 100%;
}
.logo-img {
    height: 62px;
}
.logo-2, .header.no-transparent .logo-2,
header.affix .logo-2{
    padding: 17px 0 16px 28px
}
.affix.black-header .header-wrapper {
    height: 95px;
}
#main-menu .sub a{
    color: #fff;
    padding: 9px 20px;
}
#main-menu .sub a:hover{
    padding-left: 12px;
}
#main-menu .sub li,
#main-menu .navbar .nav li a,
#main-menu .sub .parent:hover > a{
    
}
#main-menu .navbar .nav li a{
    font-size: 18px;
}
#main-menu .navbar .nav .parent .sub li a{font-size: 15px}
#main-menu .navbar .nav > li > a,
.affix.header-1 #main-menu .navbar .nav > li > a,
.header-1 #main-menu .navbar .nav > li.current > a,
.affix.header-1 #main-menu .navbar .nav > li.current > a{
    padding: 8px 18px;
    margin: 29px 8px 28px 8px;
}
#main-menu .navbar .nav > li.current > a,
.header-1 #main-menu .navbar .nav > li.current > a,
.affix.header-1 #main-menu .navbar .nav > li.current > a{
    color: #fff;
    background-color: #66afd4;
    border-color: transparent;
}
#main-menu .navbar .nav > li > a,
.affix.header-1 #main-menu .navbar .nav > li > a,
#main-menu .navbar .nav .open-sub:before{
    color: #ed7322;
    font-weight: bold;
}
.black-header #main-menu .navbar .nav > li.current > a,
.affix.header-1.black-header #main-menu .navbar .nav > li.current > a{
    border-color: #66afd4;
}
#main-menu .sub, 
#main-menu .parent .sub, 
#main-menu .parent:hover .sub{
    background-color: #ed7322;
}
.affix.black-header .header-wrapper{
    background-color: #fff;
}
#main-menu .sub .parent:hover > a,
#main-menu .sub a:hover{
    color: #555;
    background-color: #fff;
}
.cd-header-buttons {
    top: 27px;
}
.cd-search input{
    font-size: 18px;
    font-weight: 500;
}
.cd-search-trigger span::before, .cd-search-trigger span::after {
    width: 20px;
    margin-top: -2px;
}
.cd-search-trigger::before {
    width: 15px;
    height: 15px;
    left: 12px;
    top: 10px;
}
.cd-search-trigger::after {
    width: 10px;
    bottom: 17px;
    right: 11px;
}



/* slider */
.tparrows.preview4,
.tparrows.preview4:after{
    width: 50px;
}
.tparrows.preview4:after{
    color: #fff;
    background-color: #66afd4;
}
.tparrows.preview4.tp-rightarrow .tp-arr-allwrapper {
    left: -130px;
}
.tparrows.preview4 .tp-arr-titleholder{
    color: #fff;
    background: #ed7322;
}



/* page-header */
.page-title{
    color: #ed7322;
    font-weight: bold;
}
.breadcrumbs{}
.page-sub-title,
.breadcrumbs a,
.breadcrumbs .slash-divider,
.breadcrumbs .bread-current{
    color: #fff;
    font-size: 14px;
}
.breadcrumbs .bread-current{
    color: #fff;
    background-color: #66afd4;
    padding: 5px 10px 7px;
}
.breadcrumbs a:hover{
    color: #f1ab40;
}
.breadcrumbs .slash-divider{}



/* breadcrumb -------------------------------- */
nav.breadcrumb-nav{display: none; opacity:0; visibility: hidden;}



/* section-title */
.index-news .section-title{
    margin-top: 80px;
    margin-bottom: 30px;
}
.section-title{
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    display: inline-block;
    border: 0;
}
.section-title,
#about h2{
    font-size: 32px;
    color: #555;
    font-weight: bold;
    letter-spacing: 5px;
    margin-left: 20px;
}
.product .section-title{
    position: absolute;
    top: 180px;
}
.product .mobile.section-title{
    display: none;
    visibility: hidden;
}
#about h2{
    position: relative;
    display: inline-block;
    margin: 0;
    padding: 22px 25px 24px 25px;
}
#about blockquote{
    padding-top: 0;
    padding-left: 0;
    margin-top: 0;
}
.section-title::after,
#about h2::after,
#about blockquote p,
.section-title .port-title-cont span,
#about .fes5-box p,
.news .news-info .entry-body .entry-content p{
    font-size: 14px;
    font-weight: 500;
    color: #a7a7a7;
    margin-bottom: 0;
}
#about h2::before,
.section-title::before{
    content: '';
    position: absolute;
    top: 27px;
    left: 5px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 7px 0 7px 4px;
    border-color: transparent transparent transparent #ed7322;
}
#about h2::after,
.section-title::after{
    position: relative;
    top: -16px;
    right: 0;
    color: #ed7322;
    letter-spacing: 1px;
}
.section-title::after{
    content: '';
}
#about h2::after,
.about .section-title::after{
    content: 'About us';
}
#about .fes5-box h3{
    color: #555;
}
.client.news .section-title{
    margin-top: 0;
    margin-bottom: 0;
}
.index-news .section-title::after,
.news .section-title::after{
    content: 'News';
}
.client.news .section-title::after{
    content: 'Client';
}
.download .section-title::after{
    content: 'Download';
}
.contact .section-title::after{
    content: 'Contact us';
}
#about blockquote p{
    padding: 0px 25px 0px 25px;
    margin-left: 0;
}
.port-overlay-cont{
    opacity: 1;
}
.port-title-cont h3{
    font-size: 18px;
}

.port-title-cont h3 a {
    color: #fff;
}
.port-title-cont span{
    color: rgba(255, 255, 255, .55);
}



/* ------------------ Main Pages --------------------- */
/* index */
.fes4-cont {
    color: #fff;
}
.fes4-cont h3{
    color: #fff;
    margin: 0 0 30px;
}



/* index-news/news/client */
.sub-title{
    display: block;
    text-align: center;
}
.index-news .news-info,
.news .news-info{
    padding-bottom: 80px;
}
.index-news .news-info article:not(:last-child),
.news .news-info article:not(:last-child){
    padding-bottom: 50px;
}
.index-news .news-info .entry-body,
.news .news-info .entry-body{
    width: 100%;
}
.index-news .news-info .entry-body,
.index-news .news-info .entry-body .entry-top,
.news .news-info .entry-body,
.news .news-info .entry-body .entry-top  {
    display: flex;
    align-items: center;
}
.index-news .news-info .entry-body .entry-top,
.news .news-info .entry-body .entry-top{}
.index-news .news-info .entry-meta,
.news .news-info .entry-meta{
    font-size: 30px;
    min-width: 100px;
    text-align: center;
    margin: 0 10px;
}
.index-news .news-info .entry-meta span,
.news .news-info .entry-meta span {
    display: block;
    color: #555;
    padding-bottom: 30px;
}
.index-news .news-info .entry-links,
.news .news-info .entry-links {
    min-width: 250px;
    border-left: 2px solid #a7a7a7;
    padding: 20px 40px 20px 20px;
    margin: 0 10px;
}
.index-news .news-info .entry-title,
.news .news-info .entry-title  {
    font-size: 20px;
    font-weight: bold;
    margin: 0;
}
.index-news .news-info .entry-title a,
.news .news-info .entry-title a{
    color: #555;
}
.index-news .news-info .entry-cf a,
.news .news-info .entry-cf a{
    color: #66afd4;
}
.index-news .news-info .entry-title a:hover,
.index-news .news-info .entry-cf a:hover,
.news .news-info .entry-title a:hover,
.news .news-info .entry-cf a:hover{
    color: #f1ab40;
}
.index-news a.more
/*.news .news-info button*/
{
    position: relative;
    left: 50%;
    display: inline-block;
    color: #ed7322;
    background-color: transparent;
    border: #ed7322 solid 1px;
    padding: 10px 65px;
    transform: translateX(-50%);
}
.index-news .post-prev-title h3,
.news .post-prev-title h3,
.news .entry-title{
    font-size: 20px;
    font-weight: bold;
}
.index-news .post-prev-title h3 a:hover,
.news .post-prev-title h3 a:hover,
.news .entry-title:hover{
    color: #f1ab40;
}
.index-news a.more:hover,
.news .news-info button:hover{
    color: #fff;
    background-color: #ed7322;
}
.index-news .news-info .entry-bottom,
.news .news-info .entry-bottom{
    min-width: 100px;
    text-align: center;
}
.index-news .news-info .entry-bottom .read-more,
.news .news-info .entry-bottom .read-more{
    position: relative;
    display: inline-block;
    margin-left: 40px;
}
.index-news .news-info .entry-bottom .read-more::before,
.news .news-info .entry-bottom .read-more::before{
    content: '';
    display: inline-block;
    position: absolute;
    top: 50%;
    left: -10px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 7px 0 7px 4px;
    border-color: transparent transparent transparent #ed7322;
    transform: translateY(-50%);
}

/* client */
.client.news .entry-media{
    margin-bottom: 25px;
}
.client.news .entry-media img{
    width: 100%;
}
.client.news .entry-title{
    margin: 0;
}
.client.news .entry-bottom{
    display: flex;
}
.client.news .entry-bottom .entry-cats a{
    color: #66afd4;
}

.client.news .entry-bottom .entry-cats a, 
.client.news .entry-bottom .read-more {
    display: inline-block;
    font-size: 14px;
}
.client.news .entry-bottom .read-more{
    position: relative;
    color: #555;
    margin-left: 20px;
}
.client.news .entry-bottom .read-more:hover{
    color: #f1ab40;
}
.client.news .entry-bottom .read-more::before{
    content: '';
    display: inline-block;
    position: absolute;
    top: 50%;
    left: -10px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 7px 0 7px 4px;
    border-color: transparent transparent transparent #ed7322;
    transform: translateY(-50%);
}



/* news-content/client-content */
.news .news-content .news-title  {
    font-size: 20px;
    font-weight: bold;
    min-width: 250px;
    border-left: 2px solid #a7a7a7;
    padding: 10px 10px 10px 20px;
    margin: 0 10px;
}
.news .news-content .news-cf{
    padding: 10px 20px;
}
.news .post-prev-info .news-cf,
.news .news-content .news-cf a{
    color: #66afd4;
}
.news .post-prev-info .news-cf:hover,
.news .news-content .news-cf a:hover{
    color: #f1ab40;
}



.necessary{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 0 0px;
    margin-top: 50px;
    border-top: solid 1px #c2c2c2;
}
.news-pages{
    display: flex;
    position: relative;
}
.news-prev a, .news-next a{
    display: flex;
    align-items: center;
}
.news-prev span, .news-next span{
    position: relative;
    display: block;
    font-size: 16px;
    padding: 0 5px;
}

.news-prev span{
    padding-left: 15px;
}
.news-next span{
    padding-right: 15px;
}

.news-prev span::before,
.news-next span::before {
    content: '';
    position: absolute;
    top: 5px;
    width: 0;
    height: 0;
    border-style: solid;
}
.news-prev span::before{
    left: 5px;
    border-width: 7px 4px 7px 0;
    border-color: transparent #ed7322 transparent transparent;
}
.news-next span::before{
    right: 5px;
    border-width: 7px 0 7px 4px;
    border-color: transparent transparent transparent #ed7322;
}
.news-prev i, .news-next i{
    font-size: 24px;
    font-weight: bold;
}
.news-pages .back a{
    color: #fff;
    background-color: #66afd4;
    padding: 10px 20px 10px 15px;
    transition: all .2s cubic-bezier(0.645, 0.045, 0.355, 1);
}
.news-pages .back a:hover{
    background-color: #f1ab40;
}
.news-pages .back span{
    font-size: 16px;
}



/* download */
.dashboard.faq .nav>li>a:focus, 
.dashboard.faq .nav>li>a:hover,
.dashboard.faq .nav-dashboard .nav-link.active {
    color: #ed7322;
    background: #fff;
    padding-left: 35px;
}
.dashboard.faq .nav>li>a:focus::before, 
.dashboard.faq .nav>li>a:hover::before,
.dashboard.faq .nav-dashboard .nav-link.active::before {
    content: '';
    display: inline-block;
    position: absolute;
    top: 50%;
    left: 5px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 7px 0 7px 4px;
    border-color: transparent transparent transparent #ed7322;
    transform: translateY(-50%);
}
/* .dashboard.faq .nav-dashboard .nav-link.active:before{
    left: 10px;
} */
.dashboard.faq .content .tab-content{
    margin-left: 0px;
}
.dashboard.faq .content .tab-content .card{
    margin-bottom: 50px;
}
.dashboard.faq .content .tab-content .card:not(:last-child){}
.dashboard.faq .content .tab-content .card-title{
    font-size: 20px;
    font-weight: bold;
    margin: 0;
}
.dashboard.faq .content .tab-content .card-title a{
    display: block;
    color: #fff;
    background-color: #66afd4;
    border-bottom: solid #66afd4 1px;
    padding-left: 10px;
}
.dashboard.faq .content .tab-content .card-title a:hover{
    color: #fff;
    background-color: #66afd4;
}
.dashboard.faq .content .tab-content .card .dl-list{
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 10px 0;
}
.dashboard.faq .content .tab-content .card .dl-list .more{
    position: relative;
    min-width: 80px;
    text-align: center;
}
.dashboard.faq .content .tab-content .card .dl-list .more:hover{
    color: #f1ab40;
}
.dashboard.faq .content .tab-content .card .dl-list .more::before{
    content: '';
    display: inline-block;
    position: absolute;
    top: 50%;
    left: 5px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 7px 0 7px 4px;
    border-color: transparent transparent transparent #ed7322;
    transform: translateY(-50%);
}
.dashboard.faq .content .tab-content .dl-sf{
    font-size: 14px;
    color: #66afd4;
    min-width: 80px;
}
.dashboard.faq .content .tab-content .dl-sf:hover{
    color: #f1ab40;
}
.dashboard.faq .content .tab-content .card p{
    display: inline-block;
    margin-bottom: 0;
}
.dashboard.faq .content .tab-content .dl-sf,
.dashboard.faq .content .tab-content .card p{
    padding-right: 20px;
}

.dashboard.faq .content .tab-content .card .card-body{
    padding: 10px;
    margin-bottom: 20px;
    background: #efefef;
}
.dashboard.faq .content .tab-content .card .card-body::before{
    content: '－';
    padding-left: 0px;
}


/* contact */
input[type="button"]{
    color: #ed7322;
    background-color: transparent;
    border: #ed7322 solid 1px;
    padding: 10px 65px;
}
.input[type="button"]:hover{
    color: #fff;
    background-color: #ed7322;
}



/* footer */
.logo-footer {
    max-height: 100px;
}
footer{
    /* border-top: solid 1px #f2f2f2; */
    background-color: #efefef;
}
footer .widget{
    margin-bottom: 20px;
}
footer .footer-2-copy-cont,
footer .footer-2-copyright,
footer .widget ul li a,
footer .widget h4,
footer .right a,
footer .footer-2-copyright a{
    font-size: 15px;
    color: #555;
}
footer .widget .footer-2-text-cont ul li:first-child a{
    border-right: #555 2px solid; 
    padding-right: 10px;
}
footer .right,
footer .right a,
footer .footer-2-copyright p,
footer .footer-2-copyright a{
    font-size: 14px;
    margin-bottom: 0;
}
footer .footer-2-copyright p{margin:0;}
footer .right a{
    border-left: #555 2px solid;
    /* border-right: #555 2px solid; */
    padding: 0 0px 0 10px;
    margin: 0 0px 0 10px;
}
footer .widget ul li a:hover,
footer .footer-2-copyright a:hover,
footer .right a:hover{
    color: #f1ab40;
}
footer .footer-2-copy-cont{
    padding: 25px 0;
    border-top: solid 1px #ddd;
}
footer .logo-footer-cont{
    margin-bottom: 20px;
}
footer .footer-2-copy a{
    display: inline-block;
    text-align: center;
    margin-right: 20px;
    width: auto;
    height: 20px;
}
footer .footer-2-copy svg{
    width: 20px;
    fill: #555;
    transition: all .2s ease 0s;
}
footer .footer-2-copy svg:hover{
    fill: #ed7322;
}
footer .footer-2-text-cont{
    padding-top: 0px;
    margin-bottom: 10px;
}
footer ul.links-list li{
    text-align: center;
}
footer ul li:not(:last-child){
    padding-bottom: 10px;
}
footer ul li:nth-child(2){
    font-size: 15px;
    color: #555;
}
footer .widget h4{
    display: block;
    padding: 0;
    margin: 0;
    margin-bottom: 20px;
    text-align: center;
    background-color: #66afd4;
    color: #fff;
}
footer .widget h4 a{
    display: block;
    width: 100%;
    height: 100%;
    padding: 10px;
    color: #fff;
    transition: all .2s linear;
}
footer .widget h4 a:hover{
    background-color: #f1ab40;
}
footer .footer-2-copyright{
    position: relative;
    display: inline-block;
    left: 50%;
    margin: 0;
    padding: 0 12px;
    transform: translateX(-50%);
}


/* ------------------ Other function --------------------- */
/* back to top */
#back-top {
    bottom: 90px;
    font-weight: bold;
    padding-bottom: 3px;
}
#back-top a{
    color: #555;
}
#back-top a:hover{
    color: #66afd4;
}
#back-top span{
    font-size: 18px;
    -webkit-writing-mode: vertical-rl;
    writing-mode: vertical-rl
}
#back-top span::before{
    content: '';
    position: absolute;
    left: 3px;
    bottom: -14px;
    display: inline-block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 10px 5px 10px;
    border-color: transparent transparent #ed7322 transparent;
}



/* pagination */
/* .blog-pag .pagination .active a::after{
    content: '';
    display: inline-block;
    position: absolute;
    top: -10px;
    left: 50%;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 4px 7px 0px 7px;
    border-color: #ed7322 transparent transparent transparent;
    transform: translateX(-50%);
} */
.pd-pagination {
    display: block;
    width: 100%;
}
.pd-pagination .pagination>li>a, 
.pd-pagination .pagination>li>span, 
.pd-pagination .pagination>.disabled>a{
    color: #555;
    margin-right: 7px;
    padding: 8px 14px;
    border: solid 1px transparent;
    border-radius: 0;
}
.pd-pagination .pagination>li>a:hover, 
.pd-pagination .pagination>.disabled>a:hover{
    color: #7e8082;
    background-color: #eee;
    border-color: #eee;
    cursor: pointer;
}
.pd-pagination .pagination .active a,
.pd-pagination .pagination>.active>a:hover{
    color: #ed7322;
    background-color: #fff;
    border-color: transparent;
    cursor: pointer;
}
/* .blog-pag .pagination .active a,
.pagination>li>a:hover,
.blog-pag .pagination>.active>a:hover{
    color: #ed7322;
    background-color: #fff;
    border-color: #ed7322;
    cursor: pointer;
} */





/* ------------------ search-result ---------------------*/
.search-result{
    padding: 80px 0;
}
.search-result p{
    color: #c1272d;
}
.search-result p,
.search-result .search-item .search-title{
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 10px;
}
.search-result p::before,
.search-result p::after{
    content: '-';
}
.search-result p::before,
.search-result .keyword-title .keyword::before{
    padding-right: 5px;
}
.search-result p::after,
.search-result .keyword-title .keyword::after{
    padding-left: 5px;
}
.search-result .keyword-title{
    color: #313131;
    font-size: 21px;
    font-weight: bold;
}
.search-result .keyword-title .keyword{
    padding: 0 10px;
}
.search-result .keyword-title .keyword::before{
    content: '「';
}
.search-result .keyword-title .keyword::after{
    content: '」';
}
.search-result .search-bar{
    position: relative;
    display: block;
    width: 100%;
    margin: 10px 0 30px;
}
.search-result .search-bar input{
    position: relative;
    width: 100%;
    padding-right: 50px;
}
.search-result .search-bar input::placeholder{color: #ddd;}
.search-result .search-bar button{
    position: absolute;
    right: 0;
    display: inline-block;
    width: 40px;
    height: 40px;
    background-color: #ddd;
    border-radius: 50%;
    outline: none;
}
.search-result .search-bar button:hover{
    background-color: #55A266;
}
.search-result .search-bar button svg{
    position: absolute;
    display: inline-block;
    top: 8px;
    left: 10px;
    width: 20px;
    height: 20px;
    color: #313131;
}
.search-result .search-bar button:hover svg{
    color: #fff;
}
.search-result .search-item{
    padding: 20px 0;
}
.search-result .search-item .search-cf{
    padding: 5px 10px;
    background: #f2f2f2;
}
.search-result .search-item .search-title a:hover{
    color: #c1272d;
}
.search-result .search-item .search-title{
    padding: 10px 10px 10px 20px;
}
.search-result .search-item .search-title a{
    color: #55A266;
}

/* search-pagination */
.search-result .pd-pagination{
    text-align: center;
    margin-right: 0px;
}
.search-result .pd-pagination li {
    display: inline-block;
    margin-right: 5px;
}
.search-result .pd-pagination li .page-link{
    color: #313131;
    font-size: 16px;
    font-weight: bold;
    width: 35px;
    height: 35px;
    border: 0;
    border-radius: 50%;
    border-color: transparent;
    padding: 6px 12px;
    text-align: center;
}
.search-result  .pd-pagination li.active .page-link{
    color: #c1272d;
    background-color: transparent;
    border: solid 1px #c1272d;
}
.search-result .pd-pagination li.active .page-link:hover{
    background-color: #55A266;
    border-color: #55A266;
    cursor: pointer;
}
.search-result .pd-pagination li:first-child .page-link, 
.search-result .pd-pagination li:last-child .page-link{
    /* border-radius: 0; */
    margin-right: 0;
}
.search-result .pd-pagination li:last-child .page-link{
    margin-left: 0;
}
.search-result .pd-pagination li .page-link:hover, 
.toolbox .pd-pagination li .page-link:focus{
    color: #fff;
    background-color: #55A266;
}



.grecaptcha-badge {
        display: none !important;
        visibility: hidden;
}



.YoutubeStyle {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
}

.YoutubeStyle iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.YoutubeStyle embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}