/********************** 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: 50px;
}

.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: 20px;
}
}

.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: #115d89;
/*    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;
}

.learn_more {
    color: #E36802;
    font-size: 15px;
    border: 1px solid #E36802;
    padding: 2px;
    border-radius: 100px;
}
a.learn_more {
    color: #E36802!important;
    font-size: 15px;
    border: 1px solid #E36802;
    padding: 6px 12px;
    transition: all 0.3s;
    box-shadow:0 0;
}
a.learn_more:hover {
    color: #ffffff!important;
    border: 1px solid #E36802;
    background-color: #E36802;
    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: 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 **********************/

.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;
}


/********************** 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 - [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 ***********/