.inpage-header {
    position: relative;
    width: 100%;
    height: 250px;
   /* center title */
    display:flex;
    align-items:center;
    justify-content:center; 
}
.inpage-header h1, .inpage-header h1.chinese-title {
    z-index: 5;
    font-size: 40px;
    color: #fff;
    font-weight: 300;
    margin-top: 3%;  
}
.inpage-header h1.color-grey {
    color: #333;
}


.product-orcad-header-bg {
    z-index: -5;
    width: 100%;
    height: 250px;
    position: absolute;
    background-image: url(../img/product/orcad/product_orcad_header_1920.jpg);
    top: 0;
    right: 0;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size:contain; 
}
.product-allegro-header-bg {
    z-index: -5;
    width: 100%;
    height: 250px;
    position: absolute;
    background-image: url(../img/product/allegro/product_allegro_header_1920.jpg);
    top: 0;
    right: 0;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size:contain;
}
.product-sigrity-header-bg {
    z-index: -5;
    width: 100%;
    height: 250px;
    position: absolute;
    background-image: url(../img/product/sigrity/product_sigrity_header_1920.jpg);
    top: 0;
    right: 0;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size:contain;
    
}
.product-rf_microwave-header-bg {
    z-index: -5;
    width: 100%;
    height: 250px;
    position: absolute;
    background-image: url(../img/product/rf_microwave/product_rf_microwave_header_1920.jpg);
    top: 0;
    right: 0;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size:contain;
    
}

.product-package-header-bg {
    z-index: -5;
    width: 100%;
    height: 250px;
    position: absolute;
    background-image: url(../img/product/package/product_package_header_1920.jpg);
    top: 0;
    right: 0;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size:contain;
    
}
.product-ic-header-bg {
    z-index: -5;
    width: 100%;
    height: 250px;
    position: absolute;
    background-image: url(../img/product/ic/product_ic_header_1920.jpg);
    top: 0;
    right: 0;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size:contain;  
}
.product-graserware-header-bg {
    z-index: -5;
    width: 100%;
    height: 250px;
    position: absolute;
    background-image: url(../img/product/graserware/product_graserware_header_1920.jpg);
    top: 0;
    right: 0;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size:contain;
}
.product-methodics-header-bg {
    z-index: -5;
    width: 100%;
    height: 250px;
    position: absolute;
    background-image: url(../img/product/methodics/product_methodics_header_1920.jpg);
    top: 0;
    right: 0;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size:contain;
    
}
.product-perforce-header-bg {
    z-index: -5;
    width: 100%;
    height: 250px;
    position: absolute;
    background-image: url(../img/product/perforce_helix/product_perforce_helix_header_1920.jpg);
    top: 0;
    right: 0;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size:contain;
    
}
.product-others-header-bg {
    z-index: -5;
    width: 100%;
    height: 250px;
    position: absolute;
    background-image: url(../img/product/others/product_others_header_1920.jpg);
    top: 0;
    right: 0;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size:contain;  
}
.product-raith-header-bg {
    z-index: -5;
    width: 100%;
    height: 250px;
    position: absolute;
    background-image: url(../img/product/raith/product_raith_header_1920.jpg);
    top: 0;
    right: 0;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size:contain;  
}
.product-coventor-header-bg {
    z-index: -5;
    width: 100%;
    height: 250px;
    position: absolute;
    background-image: url(../img/product/coventor/product_coventor_header_1920.jpg);
    top: 0;
    right: 0;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size:contain;  
}

.news-header-bg {
    z-index: -5;
    width: 100%;
    height: 250px;
    position: absolute;
    background-image: url(../img/news/news_header_1920.jpg);
    top: 0;
    right: 0;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size:contain;
}

.event-header-bg {
    z-index: -5;
    width: 100%;
    height: 250px;
    position: absolute;
    background-image: url(../img/event/event_header_1920.jpg);
    top: 0;
    right: 0;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size:contain;
}
.training-header-bg {
    z-index: -5;
    width: 100%;
    height: 250px;
    position: absolute;
    background-image: url(../img/training/training_header_1920.jpg);
    top: 0;
    right: 0;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size:contain;
}
.technote-header-bg {
    z-index: -5;
    width: 100%;
    height: 250px;
    position: absolute;
    background-image: url(../img/technote/technote_header_1920.jpg);
    top: 0;
    right: 0;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size:contain;
}
.service-header-bg {
    z-index: -5;
    width: 100%;
    height: 250px;
    position: absolute;
    background-image: url(../img/service/service_header_1920.jpg);
    top: 0;
    right: 0;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size:contain;
}
.edu-header-bg {
    z-index: -5;
    width: 100%;
    height: 250px;
    position: absolute;
    background-image: url(../img/edu/edu_header_1920.jpg);
    top: 0;
    right: 0;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size:contain;
}

.about-header-bg {
    z-index: -5;
    width: 100%;
    height: 250px;
    position: absolute;
    background-image: url(../img/aboutus/about_VNM_header_1920.jpg);
    top: 0;
    right: 0;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size:contain;
}

.newdata-header-bg {
    z-index: -5;
    width: 100%;
    height: 250px;
    position: absolute;
    background-image: url(../img/product/allegro/product_allegro_header_1920.jpg);
    top: 0;
    right: 0;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size:contain;
}





/* 平板 小於992 */
@media (max-width: 1030px) {
    .inpage-header {
        position: relative;
        width: 100%;
        height: 200px;
        /* center title */
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .inpage-header h1, .inpage-header h1.chinese-title {
        z-index: 5;
        font-size: 38px;
        color: #fff;
        font-weight: 300;
        margin-top: 4%;
    }
    .inpage-header h1.s-title {
        z-index: 5;
        font-size: 36px;
        color: #fff;
        font-weight: 300;
        margin-top: 4.5%;
    }

    .product-orcad-header-bg {
        height: 200px;
        background-image: url(../img/product/orcad/product_orcad_header_1000.jpg);
        /*    background-position: right;*/
    }
    .product-allegro-header-bg {
        height: 200px;
        background-image: url(../img/product/allegro/product_allegro_header_1000.jpg);
    }
    .product-sigrity-header-bg {
        height: 200px;
        background-image: url(../img/product/sigrity/product_sigrity_header_1000.jpg);
    }
    .product-rf_microwave-header-bg {
        height: 200px;
        background-image: url(../img/product/rf_microwave/product_rf_microwave_header_1000.jpg);
    }
    .product-package-header-bg {
        height: 200px;
        background-image: url(../img/product/package/product_package_header_1000.jpg);
    }
    .product-ic-header-bg {
        height: 200px;
        background-image: url(../img/product/ic/product_ic_header_1000.jpg);
    }
    .product-graserware-header-bg {
        height: 200px;
        background-image: url(../img/product/graserware/product_graserware_header_1000.jpg);
    }
    .product-methodics-header-bg {
        height: 200px;
        background-image: url(../img/product/methodics/product_methodics_header_1000.jpg);
    }
    .product-perforce-header-bg {
        height: 200px;
        background-image: url(../img/product/perforce_helix/product_perforce_helix_header_1000.jpg);
    }
    .product-others-header-bg {
        height: 200px;
        background-image: url(../img/product/others/product_others_header_1000.jpg);
    }
    .product-raith-header-bg {
        height: 200px;
        background-image: url(../img/product/raith/product_raith_header_1000.jpg);
    }
    .product-coventor-header-bg {
        height: 200px;
        background-image: url(../img/product/coventor/product_coventor_header_1000.jpg);
    }
    
    
    .news-header-bg {
        height: 200px;
        background-image: url(../img/news/news_header_1000.jpg);
    }
    .event-header-bg {
        height: 200px;
        background-image: url(../img/event/event_header_1000.jpg);
    } 
    .training-header-bg {
        height: 200px;
        background-image: url(../img/training/training_header_1000.jpg);
    }    
    .technote-header-bg {
        height: 200px;
        background-image: url(../img/technote/technote_header_1000.jpg);
    }     
    .service-header-bg {
        height: 200px;
        background-image: url(../img/service/service_header_1000.jpg);
    }    
    .edu-header-bg {
        height: 200px;
        background-image: url(../img/edu/edu_header_1000.jpg);
    }
    .about-header-bg {
        height: 200px;
        background-image: url(../img/aboutus/about_VNM_header_1000.jpg);
    }
    .newdata-header-bg {
        height: 200px;
        background-image: url(../img/product/allegro/product_allegro_header_1000.jpg);
    }
    
}



/* 手機 小於600 */
@media (max-width: 600px) {
    .inpage-header {
        position: relative;
        width: 100%;
        height: 180px;
        /* center title */
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .inpage-header h1, .inpage-header h1.chinese-title {
        font-size: 33px;
        margin-top: 9.5%;
    }
    .inpage-header h1.s-title {
        z-index: 5;
        font-size: 28.5px;
        color: #fff;
        font-weight: 300;
        margin-top: 12%;
    }

    .product-orcad-header-bg {
        height: 180px;
        background-image: url(../img/product/orcad/product_orcad_header_600.jpg);
    }
    .product-allegro-header-bg {
        height: 180px;
        background-image: url(../img/product/allegro/product_allegro_header_600.jpg);
    }
    .product-sigrity-header-bg {
        height: 180px;
        background-image: url(../img/product/sigrity/product_sigrity_header_600.jpg);
    }
    .product-rf_microwave-header-bg {
        height: 180px;
        background-image: url(../img/product/rf_microwave/product_rf_microwave_header_600.jpg);
    }
    .product-package-header-bg {
        height: 180px;
        background-image: url(../img/product/package/product_package_header_600.jpg);
    }
    .product-ic-header-bg {
        height: 180px;
        background-image: url(../img/product/ic/product_ic_header_600.jpg);
    }
    .product-graserware-header-bg {
        height: 180px;
        background-image: url(../img/product/graserware/product_graserware_header_600.jpg);
    }
    .product-methodics-header-bg {
        height: 180px;
        background-image: url(../img/product/methodics/product_methodics_header_600.jpg);
    }
    .product-perforce-header-bg {
        height: 180px;
        background-image: url(../img/product/perforce_helix/product_perforce_helix_header_600.jpg);
    }
    .product-others-header-bg {
        height: 180px;
        background-image: url(../img/product/others/product_others_header_600.jpg);
    }
    .product-raith-header-bg {
        height: 180px;
        background-image: url(../img/product/raith/product_raith_header_600.jpg);
    }
    .product-coventor-header-bg {
        height: 180px;
        background-image: url(../img/product/coventor/product_coventor_header_600.jpg);
    }
    
    .news-header-bg {
        height: 180px;
        background-image: url(../img/news/news_header_600.jpg);
    }
    .event-header-bg {
        height: 180px;
        background-image: url(../img/event/event_header_600.jpg);
    }
    .training-header-bg {
        height: 180px;
        background-image: url(../img/training/training_header_600.jpg);
    }
    .technote-header-bg {
        height: 180px;
        background-image: url(../img/technote/technote_header_600.jpg);
    }
    .service-header-bg {
        height: 180px;
        background-image: url(../img/service/service_header_600.jpg);
    }
    .edu-header-bg {
        height: 180px;
        background-image: url(../img/edu/edu_header_600.jpg);
    }
    .about-header-bg {
        height: 180px;
        background-image: url(../img/aboutus/about_VNM_header_600.jpg);
    }
    .newdata-header-bg {
        height: 180px;
        background-image: url(../img/product/allegro/product_allegro_header_600.jpg);
    }

}


/* 手機 小於320 */
@media (max-width: 330px) {
    .inpage-header h1, .inpage-header h1.chinese-title {
        font-size: 33px;
        margin-top: 12%;
    }

}






/*********** Inpage Position - breadcrumb -START ***********/

ul.inpage-position {
    text-align: right;
    margin-top: 20px;
    margin-bottom: 20px;
}
ul.inpage-position p, ul.inpage-position li {
    display: inline;
    font-size: 14px;
    color: #505050;
}
/* Add a slash symbol (/) before/behind each list item */
ul.inpage-position li+li:before {
  padding: 8px;
  color: black;
  content: "/\00a0";
}

ul.inpage-position li > a {
  color: #555;
  text-decoration: none;
}

ul.inpage-position li > a:hover {
  color: #c4141b;
  text-decoration: none;
}

/*********** Inpage Position - breadcrumb -END ***********/

/*********** Inpage Title - START ***********/
.inpage-title {
    position: relative;
}
.inpage-title h2 {
    font-size: 30px;
    color: #c4141b;
    font-weight: bold;
    line-height: 40px; 
}
.inpage-title h2 sup {
    font-size: 18px;
    color: #c4141b;
    font-weight: bold;
    line-height: 40px; 
}
/*
.inpage-title h2.no-tab {
    font-size: 30px;
    color: #c4141b;
    font-weight: bold;
    line-height: 30px;
}
*/

/* 平板 小於992 */
@media (max-width: 991.98px) {
    .inpage-title h2 {
        font-size: 26px;
        line-height: 36px; 
    }
}
/* 手機 小於576 */
@media (max-width: 575.98px) {
    .inpage-title h2 {
        font-size: 24px;
        line-height: 34px; 
    }
}

/*********** Inpage Title - END ***********/


/********************** Product Title & Tabs Menu -START **********************/

#product-title-section {
    width: 100%;
    height: auto;
    background-color: rgba(255, 255, 255, 0.9);
    border-bottom: 2px solid #c4141b;
    transition: all 0.3s;
    z-index: 5;
}
.product-title-container {
/*    position: relative;*/
     
}
.product-title {
    margin: 15px 0;
}
.product-tab {
    text-align: right;
}
button.tablinks {
    border: none;
    background: none;
    border-radius: 0;
    padding: 10px 20px;
    font-size: 15px;
/*    font-weight: 300;*/
    -ms-transform: skew(-14deg);
	-webkit-transform: skew(-14deg);
	transform: skew(-14deg);
    cursor: pointer;
    transition: all 0.3s;
    margin-right: -4px;
    color: #333;
    font-weight: bold;
}
button.tablinks > div.tablinks-text {
    -ms-transform: skew(14deg);
	-webkit-transform: skew(14deg);
	transform: skew(14deg);
}

button.tablinks:hover {
    background-color: #eee; 
/*    color: #fff;*/
}
button.tablinks.tablinks-active {
    background-color: #d2333c; 
    color: #fff;
}
div.tab-arrow {
    width: 35px;
    position: absolute;
    bottom: -23px;
    right: -5px;
    display: none;
}


/* 桌機 平板 小於1200 */
@media (max-width: 1199.98px) {
    .inpage-position-box{
        padding-right: 5%;
    }
    .inpage-title {
        padding:0 8%;
    }
    .product-tab {
        padding:0 8%;
    }
}
/* 手機 小於576 */
@media (max-width: 575.98px) {
    
    .inpage-position-box {
        display: none;
    }

    .product-tab {
        white-space: nowrap;
        overflow-x: auto;
        margin-top: 20px;
    }
/*
    .inpage-title h2 {
        margin-bottom: 
    }
*/
    div.tab-arrow {
    display: block;
}
}

/*** [Sticky Nav] - Product Title & Tabs Menu ***/
section#product-title-section.sticky-title-tab {
    padding-top: 30px; 
    background-color: rgba(51, 51, 51, 0.95);
    border-bottom: none;
    z-index: 5;
    position: fixed;
    top: 65px;
}
section#product-title-section.sticky-title-tab ul.inpage-position {
    display: none;
}
section#product-title-section.sticky-title-tab .inpage-title h2 {
    font-size: 26px;
    color: #fff;
}

section#product-title-section.sticky-title-tab .product-title {
    margin: 0px 0;
}
section#product-title-section.sticky-title-tab button.tablinks > div.tablinks-text {
    color: #fff;
}

section#product-title-section.sticky-title-tab button.tablinks:hover {
    background-color: #333; 
}
section#product-title-section.sticky-title-tab button.tablinks.tablinks-active {
    background-color: #888; 
}
.sticky-title-tab + .inpage-main-content {
  padding-top: 150px;
}

/* 桌機 平板 小於1278 */
@media (max-width: 1279px) {
    section#product-title-section.sticky-title-tab {
    padding-top: 30px; 
    background-color: rgba(51, 51, 51, 0.95);
    border-bottom: none;
    z-index: 5;
    position: fixed;
    top: 50px;
}   
}
/* 平板 小於992 */
@media (max-width: 991.98px) {
    section#product-title-section.sticky-title-tab .inpage-title h2 {
    font-size: 24px;
    color: #fff;    
}
}

/* 手機 小於576 */
@media (max-width: 575.98px) {
    section#product-title-section.sticky-title-tab {
        padding-top: 18px;
        background-color: rgba(51, 51, 51, 0.95);
        border-bottom: none;
        z-index: 5;
        position: fixed;
        top: 50px;
    }

    section#product-title-section.sticky-title-tab .inpage-title h2 {
        font-size: 22px;
        color: #fff;
    }
}
/*** [Sticky Nav] - Product Title & Tabs Menu - END ***/

/********************** Product Title & Tabs Menu -END **********************/

/********************** Main Content -START **********************/
.inpage-main-content {
    margin-bottom: 150px;
}

.inpage-content{}


/* Style the tab content */
.inpage-content-box {
    margin-top: 50px;
    width: 75%;
}

/* 平板 小於992 */
@media (max-width: 1900px) {
    .inpage-content-box {
        margin-top: 50px;
        width: 90%;
    }
}
/* 手機 小於576 */
@media (max-width: 575.98px) {
    .inpage-main-content {
    margin-bottom: 100px;
}
}

.tabcontent {
  display: none;
  -webkit-animation: fadeEffect 1s;
  animation: fadeEffect 1s;
}
/* Fade in tabs */
@-webkit-keyframes fadeEffect {
  from {opacity: 0;}
  to {opacity: 1;}
}

@keyframes fadeEffect {
  from {opacity: 0;}
  to {opacity: 1;}
}



.inpage-content-section {
    border-bottom: 1px solid #ccc;
    padding-bottom: 20px;
    margin-bottom: 40px;
/*
    padding: 40px 0;
    box-sizing: border-box;
*/
}

.inpage-content-section h3 {
    font-size: 22px;
    color: #ff3333;
/*    color: rgb(255, 105, 49);*/
    line-height: 32px;
    margin-bottom: 22px;
    font-weight: bold;
}
.inpage-content-section h3 sup {
    font-size: 15px;
}

.inpage-content-section h4 {
    font-size: 18px;
/*    color: #650000;*/
    color: #444;
    line-height: 29px;
    margin-bottom: 10px;
    font-weight: bold;
}
.inpage-content-section h5 {
    font-size: 18px;
    color: #008e9a;
    line-height: 29px;
    margin-bottom: 10px;
    font-weight: bold;
}

.inpage-content-section h6 {
    font-size: 18.5px;
    color: #d2333c;
    line-height: 29px;
    margin-bottom: 10px;
    font-weight:bold;
}

.inpage-content-section p {
    font-size: 18px;
    color: #333;
    line-height: 29px;
    margin-bottom: 20px;
/*    text-align: justify;*/
}
.inpage-content-section p.lan-en {
    font-size: 18px;
    color: #333;
    line-height: 20px;
    margin-bottom: 20px;
/*    text-align: justify;*/
}
p.h5-light, .h5-light {
    color: #008e9a;
}
p.h5-light b, .h5-light b {
    font-weight: bold;
}
p b {
    font-weight: bold;
}
p.notes, span.notes {
    color: #888;
}
/*
p span.focus {
    color: #d2333c;
    font-weight: 500;
}
*/
.focus-red {
    color: #d2333c!important;
    font-weight: bold;
}
.focus-red-bottom-line {
    box-shadow: 0 1px #d2333c;
    padding-bottom:3px;
}
p a.focus-red {
/*    font-weight: bold;*/
/*    color: #0b54cb!important;*/
    color: #d2333c!important;
}
p a.focus-red:hover {
    color: #ea6970!important;
}


.focus-blue {
/*    font-weight: bold;*/
/*    color: #0b54cb;*/
    color: #3c6bb5!important;
}
.focus-blue-g {
/*    font-weight: bold;*/
/*    color: #0b54cb;*/
    color: #2c6f9a!important;
}
p a.focus-blue, h4 a.focus-blue  {
/*    font-weight: bold;*/
/*    color: #0b54cb!important;*/
    color: #3c6bb5!important;
}
p a.focus-blue:hover, h4 a.focus-blue:hover  {
    color: #5295ff!important;
}



/*
.text-info {
    font-weight: 500;
}
*/

.technote-toggle-content p sup {
    font-size: 12px;
}

.inpage-content-section p sup {
    font-size: 12px;
}

.inpage-content-section table sup {
    font-size: 12px;
}

.technote-toggle-content p sub {
    font-size: 12px;
}

.inpage-content-section p sub {
    font-size: 12px;
}

.inpage-content-section table sub {
    font-size: 12px;
}

.inpage-content-section a{
    color: #333;
    box-shadow: 0 1px #999;
    padding-bottom:3px;
    transition: all 0.3s;
}
.inpage-content-section a:hover {
    color: #ff3333;
    box-shadow: 0 1px #ff3333;
    padding-bottom:3px;
}

.no-border {
    border: 0;
}

.inpage-content-section a.no-border-a {
    color: #333;
    transition: all 0.2s;
    box-shadow:0 0;
}
.inpage-content-section a.no-border-a:hover {
    color: #ff3333;
    padding-bottom:3px;
}

.inpage-content-section a.focus-blue{
    color: #3c6bb5;
    box-shadow: 0 1px #3c6bb5;
    padding-bottom:3px;
    transition: all 0.3s;
}
.inpage-content-section a.focus-blue:hover {
    color: #5295ff;
    box-shadow: 0 1px #5295ff;
    padding-bottom:3px;
}
.inpage-content-section a.focus-blue.no-border-a{
    color: #3c6bb5;
    transition: all 0.2s;
    box-shadow:0 0;
}
.inpage-content-section a.focus-blue.no-border-a:hover {
    color: #5295ff;
    box-shadow:0 0;
}


.inpage-content-section a.no-border-a-g {
    color: #333;
    transition: all 0.2s;
    box-shadow:0 0;
}
.inpage-content-section a.no-border-a-g:hover {
    color: #008e9a;
    padding-bottom:3px;
}
a.border-a-g {
    color: #333;
    box-shadow: 0 1px #999;
}
a.border-a-g:hover {
    color: #008e9a;
    box-shadow: 0 1px #008e9a;
}

h5 a.border-a-g {
    color: #008e9a;
    box-shadow: 0 1px #008e9a;
}
h5 a.border-a-g:hover {
    color: #1fb2bf;
    box-shadow: 0 1px #1fb2bf;
}

a.block-a p, a.block-a img {
    transition: all 0.3s;
}

a.block-a:hover p {
    color: #999;
}
a.block-a:hover img {
    opacity: 0.6;
}

.add_puchase {
    color: #00838e;
    font-size: 15px;
    border: 1px solid #00838e;
    padding: 2px;
}
a.add_puchase {
    color: #00838e!important;
    font-size: 15px;
    border: 1px solid #00838e;
    padding: 6px 12px;
    transition: all 0.3s;
    box-shadow:0 0;
}
a.add_puchase:hover {
    color: #ffffff!important;
    border: 1px solid #00838e;
    background-color: #00838e;
    padding: 6px 12px;
    box-shadow:0 0;
}

.bottom-line{
    box-shadow: 0 1px #999;
    padding-bottom:3px;
}

.small-arrow {
    font-size: 10px;
    letter-spacing: -1px;
    margin-right: 3px;
}
.inpage-content-section img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    margin: auto;
    margin-bottom: 20px;
/*    border: 1px solid #999;*/
/*    box-shadow: 1px 1px 5px #333;*/
}
div.inpage-content-section-subtitle {
    color: #fff;
    background-color: #9a9a9a;
    padding: 20px;
    text-align: center; 
    margin-bottom: 40px;
    line-height: 24px;
    font-size: 18px;
}

.inpage-content-external-link {
    text-align: right;
}
.inpage-content-external-link a {
    color: #ff3333;
    font-size: 16px;
    padding: 10px 14px;
    border: 1px solid #ff3333;
    transition: all 0.3s;
/*
    display:inline-block;
    margin-top: 40px;
*/
}
.inpage-content-external-link a:hover {
    color: #ffffff;
    background-color:#ff3333; 
    border: 1px solid #ff3333;
}




/* 平板 小於992 */
/*
@media (max-width: 991.98px) {
    .inpage-content-section p {
        text-align:left;
    }
}
*/



/*********** Inpage Content - NEWS &Event- Start ***********/

p.release-time {
    color: #8e8e8e;
    font-size: 14px;
    text-align: left;
    border: none;
    margin: -12px 0 20px 0;
}
div.square-link-frame {
    text-align: right;
    margin: 40px 0 20px 0;
}

 a.square-link {
    box-shadow: none;
    color: #ff3333;
    padding: 8px 40px;
    border: 1px solid #ff3333;
    transition: all 0.3s;
}
 a.square-link:hover {
    box-shadow: none;
    color: #fff;
     padding: 8px 40px;
    border: 1px solid #ff3333;
    background-color: #ff3333;
}


a.guc-sign-up {
    display: inline-block;
    color: #fff!important;
    background-color: #c70000;
    font-size: 18px;
    border: 1px solid #c70000;
    border-radius: 10px;
    padding: 12px 20px;
    transition: all 0.3s;
    box-shadow:0 0;1
}
a.guc-sign-up:hover {
    color: #ffffff!important;
    border: 1px solid #ff3333;
    background-color: #ff3333;
    padding: 12px 20px;
    box-shadow:0 0;
}
a.workshop-sign-up {
    display: inline-block;
    color: #fff!important;
    background-color: #c70000;
    font-size: 13px;
    border: 1px solid #c70000;
    border-radius: 6px;
    padding: 2px 12px;
    transition: all 0.3s;
    box-shadow:0 0;1
}
a.workshop-sign-up:hover {
    color: #ffffff!important;
    border: 1px solid #ff3333;
    background-color: #ff3333;
    padding: 2px 12px;
    box-shadow:0 0;
}
/*
.inpage-content-hover {
    background-color:rgba(238, 238, 238, 0);
}

.inpage-content-hover:hover {
    background-color:rgb(238, 238, 238);
}
*/

/*********** Inpage Content - NEWS &Event- End ***********/



/* 平板 小於992 */
@media (max-width: 992px) {
    .inpage-content-box {
        margin-top: 50px;
        width: 100%;
        padding: 0 8%;
    }
    .inpage-content-section img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    margin: auto;
    margin-bottom: 20px;
/*    border: 1px solid #999;*/
/*    box-shadow: 1px 1px 5px #333;*/
}
}

/* 手機 小於600 */
@media (max-width: 600px) {
    .left-img img {
        margin: 0;
        margin-bottom: 10px;
    }

    div.square-link-frame {
        text-align: right;
        margin: 40px 0 30px 0;
    }

}

/********************** Inpage Content Item -START **********************/

table.inpage-content-item {
    width: 100%;
}

table.inpage-content-item tr th {
    width: 20px;
    height: auto;
    margin: 0;
    padding: 0;
}
table.inpage-content-item tr th img {
    max-width: 6px;
    max-height: 6px;
    margin: 0;
    vertical-align: top;
    margin-top: 4px;
}
img.item-circle {
    max-width: 8px;
    max-height: 8px;
    margin: 0;
}
table.inpage-content-item tr td {
    height: auto;
    margin: 0;
    padding: 0;
}
table.inpage-content-item  p {
    font-size: 18px;
    color: #333;
    line-height: 29px;
    margin-bottom: 10px;
    text-align: justify;
}

/* 平板 小於992 */
@media (max-width: 991.98px) {
    table.inpage-content-item p {
        text-align: left;
    }
}

/********************** Inpage Content Item -END **********************/

/********************** Main Content -END **********************/

/********************** Side Menu - START **********************/
#accordionSideMenu {}

.sticky-side-menu {}

.inpage-side-menu {
    margin-top: 50px;
    width: 80%;
    margin-left: 5%;
    
}
.title-toggle-header {
    padding: 0;
    text-align: left;
/*    background-color:#f5f5f5;*/
    text-decoration: none;
    transition: all 0.3s;
}
.title-toggle-header-active {
    background-color:#ebebeb;
}
.title-toggle-header:hover {
    background-color:#ebebeb;
/*    background-color:#efefef;*/
    text-decoration: none;
}


button.title-toggle{
    display: block;
    width: 100%;
    text-align: right;
    color: #ff334b;
    padding: 15px 20px;
    font-size: 18px;
    font-weight: bold;
}
button.title-toggle:focus{
    color: #ff334b;
    text-decoration: none;
}
button.title-toggle:hover {
    color: #ff334b;
    text-decoration: none;
}
button.title-toggle a{
    color: #ff334b;
}

.inner-item {
    text-align: right;
    padding: 15px 20px;
    
}
.inner-item a {
    display: block;
    font-size: 16px;
    color: #333;
    padding: 8px 0;
    line-height: 20px;
}
.inner-item a:hover {
    color: #ff3333;
/*    background-color:#f1f1f1;*/
}
.inner-item > a.side-menu-active-item {
    color: #ff3333;
}

/* 平板 小於992 */
@media (max-width: 991.98px) {
    #accordionSideMenu {
        display: none;
    }
}
/********************** Side Menu - END **********************/


/********************** Inpage Download - START **********************/
.download-icon {
    width: 20px;
    display: inline-block;
}
.download-icon img {
    width: 100%;
    opacity: 1;
    margin: 0;
    transition: all 0.3s; 
}
a.download-item {
    display: block;
    width: 100%;
    font-size: 18px;
    color: #333;
    border-bottom: 1px solid #ccc;    
    line-height: 24px;
    padding: 20px 20px;  /*reset .inpage-content-section a*/
    box-shadow: none;    /*reset .inpage-content-section a*/
    transition: all 0.3s;   
}
a.download-item:hover {
    color: #ff3333;
    background-color: #f3f3f3;
    padding: 20px 20px;  /*reset .inpage-content-section a*/
    box-shadow: none;    /*reset .inpage-content-section a*/
}
a.download-item:hover .download-icon img {
    opacity: 0.5;
    margin: 0;
}


/* 平板 小於992 */
@media (max-width: 992px) {
    a.download-item {
        width: 100%;
    }
}
/********************** Inpage Download - END **********************/



.no-border, img.no-border {
    border: none;
}
.no-height {
    height: 0!important;
}
.no-margin-bottom {
    margin-bottom: 0!important;
}

img.no-margin-bottom {
    margin-bottom: 0!important;
}
.no-padding-b {
    padding-bottom: 0!important;
}
/*
img.align-left {
    text-align: left;
    margin: 0;
}
*/

p.no-justify {
    text-align: left;
}


.table th, .table td{
  vertical-align: middle!important;
  padding: 1.2rem;    
}

.img-caption {
    text-align: center !important;
    color: #888 !important;
    font-size: 14px !important;
    line-height: 14px !important;
}
table .input-checkbox {
    width: 10px;
    padding-right: 0;
}

/********************** Technote collapse - START **********************/
#accordionSideMenu {}


.technote-toggle-title-header {
    padding: 0;
    text-align: left;
    text-decoration: none;
}

button.technote-toggle-title{
    width: 100%;
    text-align: left;
    color: #fff;
    padding: 15px 30px;
    font-size: 18px;
    font-weight: bold;
}
button.technote-toggle-title:focus{
    color: #fff;
    text-decoration: none;
}
button.technote-toggle-title:hover {
    color: #fff;
    text-decoration: none;
}

button.technote-toggle-type{
    line-height:0px;
    padding: 8px 30px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.technote-toggle-title-header.type01 {
/*
    background-color: #d0586c;
    background-color: rgba(208, 88, 108, 0.85);
*/
    background-color: rgba(255, 244, 244, 0.9);
    transition: all 0.3s;
}
.technote-toggle-title-header.type01-2 {
/*
    background-color: #b5495b;
    background-color: rgba(181, 73, 91, 0.85);
*/
    background-color: rgba(255, 227, 227, 0.9);
    transition: all 0.3s;
}
.technote-toggle-title-header.type01:hover{
    background-color: rgba(237, 223, 223, 0.7);
    text-decoration: none;
}
.technote-toggle-title-header.type01:hover, .technote-toggle-title-header.type01-2:hover {
    background-color: rgba(235, 202, 202, 0.7);
    text-decoration: none;
}
.technote-toggle-title-header.type01 button.technote-toggle-title, .technote-toggle-title-header.type01-2 button.technote-toggle-title {
    color: #4b4343;
}

.technote-toggle-title-header.type02 {
/*    background-color: #777cb5;*/
    background-color: #f6f7ff;
    transition: all 0.3s;
}

.technote-toggle-title-header.type02-2 {
/*    background-color: #696d98;*/
    background-color: #ebedff;
    transition: all 0.3s;
}

.technote-toggle-title-header.type02:hover, .technote-toggle-title-header.type02-2:hover {
    background-color: #dee0f4;
    transition: all 0.3s;
}

.technote-toggle-title-header.type02 button.technote-toggle-title, .technote-toggle-title-header.type02-2 button.technote-toggle-title {
    color: #323453;
}

.technote-toggle-title-header.type03 {
/*    background-color: #33A6B8;*/
    background-color: #f1feff;
    transition: all 0.3s;
}

.technote-toggle-title-header.type03-2 {
/*    background-color: #238a9a;*/
    background-color: #dffcff;
    transition: all 0.3s;
}
.technote-toggle-title-header.type03:hover, .technote-toggle-title-header.type03-2:hover {
    background-color: #d3eef0;
    text-decoration: none;
}
.technote-toggle-title-header.type03 button.technote-toggle-title, .technote-toggle-title-header.type03-2 button.technote-toggle-title {
    color: #0c4048;
}


.technote-toggle-title-header.type04 {
/*    background-color: #6aaad1;*/
    background-color: #f5fbff;
    transition: all 0.3s;
}

.technote-toggle-title-header.type04-2 {
/*    background-color: #4982a5;*/
    background-color: #e3f4ff;
    transition: all 0.3s;
}
.technote-toggle-title-header.type04:hover, .technote-toggle-title-header.type04-2:hover {
    background-color: #d1e5f2;
    text-decoration: none;
}
.technote-toggle-title-header.type04 button.technote-toggle-title, .technote-toggle-title-header.type04-2 button.technote-toggle-title {
    color: #005183;
}


.technote-toggle-title-header.type05 {
/*    background-color: #7e94bf;*/
    background-color: #f5f8ff;
    transition: all 0.3s;
}

.technote-toggle-title-header.type05-2 {
/*    background-color: #4c679a;*/
    background-color: #e8f0ff;
    transition: all 0.3s;
}
.technote-toggle-title-header.type05:hover, .technote-toggle-title-header.type05-2:hover {
/*    background-color: #315495;*/
    background-color: #e1e9f8;
    text-decoration: none;
}
.technote-toggle-title-header.type05 button.technote-toggle-title, .technote-toggle-title-header.type05-2 button.technote-toggle-title {
    color: #213864;
}

.technote-toggle-title-header.type06 {
/*    background-color: #5dac9d;*/
    background-color: #f1fffc;
    transition: all 0.3s;
}

.technote-toggle-title-header.type06-2 {
/*    background-color: #489385;*/
    background-color: #d9fff8;
    transition: all 0.3s;
}
.technote-toggle-title-header.type06:hover, .technote-toggle-title-header.type06-2:hover {
/*    background-color: #2f7669;*/
    background-color: #d6efea;
    text-decoration: none;
}
.technote-toggle-title-header.type06 button.technote-toggle-title, .technote-toggle-title-header.type06-2 button.technote-toggle-title {
    color: #214e46;
}

.technote-toggle-title-header.type07 {
/*    background-color: #5dac84;*/
    background-color: #f5fffa;
    transition: all 0.3s;
}

.technote-toggle-title-header.type07-2 {
/*    background-color: #47956d;*/
    background-color: #e0fff0;
    transition: all 0.3s;
}
.technote-toggle-title-header.type07:hover, .technote-toggle-title-header.type07-2:hover {
/*    background-color: #367e59;*/
    background-color: #cef2e0;
    text-decoration: none;
}
.technote-toggle-title-header.type07 button.technote-toggle-title, .technote-toggle-title-header.type07-2 button.technote-toggle-title {
    color: #143b27;
}


.technote-toggle-title-header.type08 {
/*    background-color: #66af74;*/
    background-color: #f2fff5;
    transition: all 0.3s;
}

.technote-toggle-title-header.type08-2 {
/*    background-color: #5a9a67;*/
    background-color: #e6ffeb;
    transition: all 0.3s;
}
.technote-toggle-title-header.type08:hover, .technote-toggle-title-header.type08-2:hover {
/*    background-color: #488855;*/
    background-color: #d7f0dc;
    text-decoration: none;
}
.technote-toggle-title-header.type08 button.technote-toggle-title, .technote-toggle-title-header.type08-2 button.technote-toggle-title {
    color: #1c3922;
}

.technote-toggle-title-header.type09 {
/*    background-color: #5e7c9f;*/
    background-color: #f0f7ff;
    transition: all 0.3s;
}

.technote-toggle-title-header.type09-2 {
/*    background-color: #406691;*/
    background-color: #e0efff;
    transition: all 0.3s;
}
.technote-toggle-title-header.type09:hover, .technote-toggle-title-header.type09-2:hover {
/*    background-color: #214874;*/
    background-color: #dce9f7;
    text-decoration: none;
}
.technote-toggle-title-header.type09 button.technote-toggle-title, .technote-toggle-title-header.type09-2 button.technote-toggle-title {
    color: #16304d;
}


.technote-toggle-title-header.type10 {
/*    background-color: #91989F;*/
    background-color: #f2f2f2;
    transition: all 0.3s;
}

.technote-toggle-title-header.type10-2 {
/*    background-color: #808890;*/
    background-color: #eaeaea; 
    transition: all 0.3s;
}
.technote-toggle-title-header.type10:hover, .technote-toggle-title-header.type10-2:hover {
/*    background-color: #5f6b77;*/
    background-color: #dedede;
    text-decoration: none;
}
.technote-toggle-title-header.type10 button.technote-toggle-title, .technote-toggle-title-header.type10-2 button.technote-toggle-title {
    color: #333;
}

.technote-toggle-title-header.type11 {
/*    background-color: #91989F;*/
    background-color: #f9f2ff;
    transition: all 0.3s;
}

.technote-toggle-title-header.type11-2 {
/*    background-color: #808890;*/
    background-color: #f2e2ff;
    transition: all 0.3s;
}
.technote-toggle-title-header.type11:hover, .technote-toggle-title-header.type11-2:hover {
/*    background-color: #5f6b77;*/
    background-color: #e4d4f2;
    text-decoration: none;
}
.technote-toggle-title-header.type11 button.technote-toggle-title, .technote-toggle-title-header.type11-2 button.technote-toggle-title {
    color: #42364d;
}






.technote-toggle-content {
    padding: 30px;
}
.technote-toggle-content p {
    font-size: 18px;
    color: #333;
    line-height: 29px;   
    margin-bottom: 20px;
    text-align: justify;
}
.technote-toggle-content p:last-child {
    margin-bottom: 0px;
}

.technote-toggle-content a{
    color: #333;
    box-shadow: 0 1px #999;
    padding-bottom:3px;
    transition: all 0.3s;
}
.technote-toggle-content a:hover {
    color: #ff3333;
    box-shadow: 0 1px #ff3333;
    padding-bottom:3px;
}

.technote-toggle-content a.no-border-a {
    color: #333;
    transition: all 0.2s;
    box-shadow:0 0;
}
.technote-toggle-content a.no-border-a:hover {
    color: #ff3333;
    padding-bottom:3px;
}

.technote-toggle-content p.release-time {
    color: #a7a7a7;
    font-size: 16px;
    text-align: left;
    margin: 0;
}

div.technote-link-frame {
    text-align: center;
    margin: 0;
}

.technote-version, .technote-date {
    font-size: 16px;
    line-height: 22px;
    font-weight: 500;
} 

/*
a.technote-link {
    display: block;
    box-shadow: none;
    color: #d2333c; 
    padding: 8px 0;
    width: 100%;
    border: 1px solid #d2333c; 
    transition: all 0.5s;
}

a.technote-link:hover {
    box-shadow: none;
    color: #fff;
    padding: 8px 0;
    width: 100%;
    border: 1px solid #333;
    background-color: #333;
}
*/

a.technote-link {
    display: block;
    box-shadow: none;
    color: #999;
    padding: 8px 0;
    width: 100%;
    border: 1px solid #999;
    background-color: #ffffff;
    transition: all 0.5s;
}

a.technote-link:hover {
    box-shadow: none;
    color: #fff; 
    padding: 8px 0;
    width: 100%;
    border: 1px solid #333; 
    background-color: #333;
}

/* 平板 小於768 */
@media (max-width: 767px) {
    .technote-header-tilte {
        display: none;
    }

    button.technote-toggle-title {
        padding: 8px 20px;
        font-size: 18px;
    }

    .technote-toggle-content {
        padding: 25px;
/*        padding-bottom: 10px;*/
    }
    .technote-toggle-content p {
        margin-bottom: 20px;
        text-align: left;
    }
    .technote-version {
        border-top: 1px dashed #c6c6c6;
        padding-top: 10px;
    }
    .technote-version, .technote-date {
        opacity: 0.7;
} 
}
/********************** Technote collapse - END **********************/

/********************** Form - Start **********************/
/*
.form-title {
    background-color: #333;
    text-align: center;
    padding: 15px;
    border-radius: 10px;
}
*/
/*
.form-title h3{
    color: #fff;
    margin:0;
}

*/
.form-style {
    background-color: #f0f0f0;
    border-radius: 0.5rem;
    width: 90%;
    margin: auto;
/*    border: 1px solid #c7c7c7;*/
}
.form-style-COVID19 {
    background-color: #f0f0f0;
    border-radius: 0.5rem;
    width: 100%;
    margin: auto;
    margin-bottom: 100px;
/*    border: 1px solid #c7c7c7;*/
}

.form-title {
    width: 100%;
    background-color: #7e7e7e;
    color: #FFF;
    border-top-left-radius: 0.5rem;
    border-top-right-radius: 0.5rem;
    padding: 15px;
}
.form-title h3 {
    margin: 0;
    padding: 0;
    color: #fff;
}

.form-control {
    transition: 0.3s all;
}
.form-control:focus, .form-control:hover{
    border-color: #3eb7c1;
    background-color: rgb(255, 255, 255) !important;
    box-shadow: none;
}
input:-internal-autofill-selected {
    background-color: rgb(255, 255, 255) !important;
    background-image: none !important;
    color: -internal-light-dark-color(black, white) !important;
}

/*********** Inpage Content - [checkbox] - Start ***********/

.check-box-block {
    background-color: #fff;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
    transition: 0.3s all;
}
.check-box-block:hover {
    background-color: #fff;
    border: 1px solid #3eb7c1;
}



/*********** Inpage Content - [select] - Start ***********/

select.form-control {
  background-image:
    linear-gradient(45deg, transparent 50%, gray 50%),
    linear-gradient(135deg, gray 50%, transparent 50%),
    linear-gradient(to right, #ccc, #ccc);
  background-position:
    calc(100% - 20px) calc(1em + 2px),
    calc(100% - 15px) calc(1em + 2px),
    calc(100% - 2.5em) 0.5em;
  background-size:
    5px 5px,
    5px 5px,
    1px 1.5em;
  background-repeat: no-repeat;
  -webkit-appearance: none;
  -moz-appearance: none;  
}
/*********** Inpage Content - [select] - End ***********/


.form-button {
    padding: 13px 10%;
    background-color: #333;
    border: none;
    color: #fff;
    cursor: pointer;
    transition: 0.3s all;
    border-radius: 0.25rem;
}
.form-button:hover {
    background-color: #000000;
}

.form-button-submit {
    padding: 13px 10%;
    background-color: #d2333c;
    border: none;
    color: #fff;
    cursor: pointer;
    transition: 0.3s all;
    border-radius: 0.25rem;
}
.form-button-submit:hover {
    background-color: #c4141b;
}

.addRedStar:after {
    content: ' *';
    color: red;
    font-size: 20px;   
}
p.addRedStar-text {
    color: #ff3333;
    font-size: 16px;
}

/* 平板 小於1030 */
@media (max-width: 1030px) {
    .form-style {
        width: 100%;
    }
    .form-title {
        padding: 15px;
    }
    .form-title h3 {
        font-size: 18px;
    }

    .form-button {
        padding: 13px 15%;
    }

    .form-button-submit {
        padding: 13px 15%;
    }
}

/* 平板 小於768 */
/*
@media (max-width: 767px) {
    .form-title {
        padding: 15px 0;
    }

    .form-button {
        padding: 13px 15%;
    }

    .form-button-submit {
        padding: 13px 15%;
    }
}
*/



/*********** Inpage Content - [AboutUs] - Start ***********/

.grayscale {
    filter: grayscale(100%);
    transition: all 0.3s;
}
img.grayscale {
    opacity: 0.5;
}

.contact-block:hover .grayscale{
    filter: grayscale(0%);
}
.contact-block:hover img.grayscale{
    opacity: 1;
}


.contact-box-ex {
    background-color: #f3f3f3;
    width: 100%;
    margin: auto;
    padding: 22px;
    border-radius: 8px;
    text-align: left;
    transition: all 0.3s;
}
.contact-box-ex table p{
    text-align: left;
    color: #5d5d5d;
}

.contact-block:hover .contact-box-ex{
    background-color: #f7f7f7;
}


/*********** Inpage Content - [AboutUs] - END ***********/

/*********** Inpage Content - [Training] - Start ***********/

button.train-tablinks {
    padding: 8px 20px;
    background-color: #fff;
    border: 1px solid #a0a0a0;
    -ms-transform: skew(-14deg);
	-webkit-transform: skew(-14deg);
	transform: skew(-14deg);
    cursor: pointer;
    transition: all 0.3s;
    color: #a0a0a0;
}

button.train-tablinks > div.tablinks-text {
    -ms-transform: skew(14deg);
	-webkit-transform: skew(14deg);
	transform: skew(14deg);
}

button.train-tablinks-active {
    background-color: #a0a0a0;
    color: #fff;
}

button.train-tablinks:hover, button.train-tablinks-active:hover {
    background-color: #717171;
    border: 1px solid #717171;
    color: #ffffff;
}


.table-training th, .table-training td{
  vertical-align: middle!important;
  padding: 0.8rem;    
}

/*OrCAD/Allegro 課程*/
h4.train-spb {
    color:#9f353a;
}
td.train-spb-bg {
    background-color: #ffeef1;
}
tr:hover td.train-spb-bg {
    background-color: #f2d9dd;
}
button.btn-train-spb {
    font-size: 15px;
    padding: 5px 18px;
    color: #fff;
    border: 1px solid #d0586c;
    background-color: #d0586c;    
    cursor: pointer;
    border-radius: 5px;
    transition: all 0.3s;
}
button.btn-train-spb:hover {
    border: 1px solid #9f353a;
    background-color: #9f353a;
}

/*主題課程*/
h4.train-theme {
    color:#d44a00;
}
td.train-theme-bg {
    background-color: #fff1e8;
}
tr:hover td.train-theme-bg {
    background-color: #f4dfd1;
}
button.btn-train-theme {
    font-size: 15px;
    padding: 5px 18px;
    color: #fff;
    border: 1px solid #f07b24;
    background-color: #f07b24; 
    cursor: pointer;
    border-radius: 5px;
    transition: all 0.3s;
}
button.btn-train-theme:hover {
    border: 1px solid #d44a00;
    background-color: #d44a00;
}

/*Sigrity 課程*/
h4.train-sigrity {
    color:#007384;
}
td.train-sigrity-bg {
    background-color: #e8fcff;
}
tr:hover td.train-sigrity-bg {
    background-color: #d6edf0;
}
button.btn-train-sigrity {
    font-size: 15px;
    padding: 5px 18px;
    color: #fff;
    border: 1px solid #238a9a;
    background-color: #238a9a;
    cursor: pointer;
    border-radius: 5px;
    transition: all 0.3s;
}
button.btn-train-sigrity:hover {
    border: 1px solid #007384;
    background-color: #007384;
}

/*IC 課程*/
h4.train-ic {
    color:#315495;
}
td.train-ic-bg {
    background-color: #e8f0ff;
}
tr:hover td.train-ic-bg {
    background-color: #d4dbea;
}
button.btn-train-ic {
    font-size: 15px;
    padding: 5px 18px;
    color: #fff;
    border: 1px solid #7e94bf;
    background-color: #7e94bf;
    cursor: pointer;
    border-radius: 5px;
    transition: all 0.3s;
}
button.btn-train-ic:hover {
    border: 1px solid #315495;
    background-color: #315495;
}

/*AWR 課程*/
h4.train-awr {
    color:#3b3faa;
}
td.train-awr-bg {
    background-color: #f2f3ff;
}
tr:hover td.train-awr-bg {
    background-color: #e8e9ff;
}
button.btn-train-awr {
    font-size: 15px;
    padding: 5px 18px;
    color: #fff;
    border: 1px solid #9698d9;
    background-color: #9698d9;
    cursor: pointer;
    border-radius: 5px;
    transition: all 0.3s;
}
button.btn-train-awr:hover {
    border: 1px solid #7072bf;
    background-color: #7072bf;
}

/*Perforce / Methodics 課程*/
h4.train-ddm {
    color:#16559f;
}
td.train-ddm-bg {
    background-color: #e6f3ff;
}
tr:hover td.train-ddm-bg {
    background-color: #d3e4f4;
}
button.btn-train-ddm {
    font-size: 15px;
    padding: 5px 18px;
    color: #fff;
    border: 1px solid #2d7ec3;
    background-color: #2d7ec3;
    cursor: pointer;
    border-radius: 5px;
    transition: all 0.3s;
}
button.btn-train-ddm:hover {
    border: 1px solid #16559f;
    background-color: #16559f;
}


/*Hands-on Workshop 課程*/
h4.train-workshop {
    color:#328b7b;
}
td.train-workshop-bg {
    background-color: #eafffb;
}
tr:hover td.train-workshop-bg {
    background-color: #ddf7f2;
}
button.btn-train-workshop {
    font-size: 15px;
    padding: 5px 18px;
    color: #fff;
    border: 1px solid #5dac9d;
    background-color: #5dac9d;
    cursor: pointer;
    border-radius: 5px;
    transition: all 0.3s;
}
button.btn-train-workshop:hover {
    border: 1px solid #2f7669;
    background-color: #2f7669;
}

/*Online-AWR 課程*/
h4.train-online-awr {
    color:#3b3faa;
}
td.train-online-awr-bg {
    background-color: #f2f3ff;
}
tr:hover td.train-online-awr-bg {
    background-color: #e8e9ff;
}
button.btn-train-online-awr {
    font-size: 15px;
    padding: 5px 18px;
    color: #fff;
    border: 1px solid #9698d9;
    background-color: #9698d9;
    cursor: pointer;
    border-radius: 5px;
    transition: all 0.3s;
}
button.btn-train-online-awr:hover {
    border: 1px solid #7072bf;
    background-color: #7072bf;
}

/*Online Workshop*/
h4.train-online-workshop {
    color:#e67c00;
}
td.train-online-workshop-bg {
    background-color: #fff1e8;
}
tr:hover td.train-online-workshop-bg {
    background-color: #f4dfd1;
}
button.btn-train-online-workshop {
    font-size: 15px;
    padding: 5px 18px;
    color: #fff;
    border: 1px solid #f07b24;
    background-color: #f07b24; 
    cursor: pointer;
    border-radius: 5px;
    transition: all 0.3s;
}
button.btn-train-online-workshop:hover {
    border: 1px solid #e86605;
    background-color: #e86605;
}




a.training-a-download {
   display: inline-block;
   box-shadow: none;
}
a.training-a-download, a.training-a-download img, a.training-a-download p {
    transition: all 0.3s;   
}
a.training-a-download:hover {
   box-shadow: none;
}
a.training-a-download:hover img {
    opacity: 0.6;
}
a.training-a-download:hover p {
    color: #ff3333;
}
/*********** Inpage Content - [Training] - End ***********/


/*********** Inpage Content - [RWD - Block & None] - Start ***********/
.none-in-responsiv-md {
    display: block!important;
}

.block-in-responsiv-md {
    display: none!important;
}
.none-in-responsiv-xl {
    display: block!important;
}

.block-in-responsiv-xl {
    display: none!important;
}

@media (max-width: 1279px) {
    .none-in-responsiv-xl {
        display: none!important;
    }

    .block-in-responsiv-xl {
        display: block!important;
    }
}

@media (max-width: 767px) {
    .none-in-responsiv-md {
        display: none!important;
    }

    .block-in-responsiv-md {
        display: block!important;
    }
}


/*********** Inpage Content - [RWD - Block & None] - End ***********/



.shape-trapezoid {
    height: 100%;
    background-color: #8CAF37;
    /* For browsers that do not support gradients */
    background-image: linear-gradient(120deg, #8CAF37 80%, #08888a 80%);
    /* Standard syntax (must be last) */
}
.shape-trapezoid {
    height: 100%;
    background-color: #8CAF37;
    /* For browsers that do not support gradients */
    background-image: linear-gradient(120deg, #8CAF37 10%, #08888a 10%);
    /* Standard syntax (must be last) */
}


/* selektiert das Label Tag nach jeder Checkbox */
/*
input[type="checkbox"] {
    display:none;
}

input[type="checkbox"] + label::before {
  width: 20px;
  height: 20px;
  border-radius: 3px;
  border: 1px solid #c4c4c4;
  background-color: #ffffff;
  display: block;
  content: "";
  float: left;
  margin-right: 10px;
  margin-top: -2px;
}

input[type="checkbox"]:checked+label::before {
  background-color: #c72f2f;
}
*/


/*********** Training-COVID-19 ***********/

button.btn-train-COVID-19 {
    display: inline-block;
    font-size: 20px;
    padding: 5px 18px;
    color: #fff;
    border: 1px solid #7c7c7c;
    background-color: #7c7c7c;
    cursor: pointer;
    border-radius: 50px;
    transition: all 0.3s;
}
button.btn-train-COVID-19:hover {
    border: 1px solid #c4141b;
    background-color: #c4141b;
}