/* 共用設定 */

/* 權重提示 */
/* goTOP z-index: 100; */
/* breadCrumbs z-index: 99; */
/* prePage: z-index: 30; */
/* nextPage: z-index: 30;  */


body {
    font-family: 'Noto Sans TC', sans-serif !important;
    color: #464646;
}

* {
    text-decoration: none;
    list-style: none;
}

.ratio {
    position: relative;
    width: 100%;
}

.ratio::before {
    display: block;
    padding-top: var(--bs-aspect-ratio);
    content: "";
}

.ratio > * {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.ratio-1x1 {
    --bs-aspect-ratio: 100%;
}

.ratio-4x3 {
    --bs-aspect-ratio: 75%;
}

.ratio-16x9 {
    --bs-aspect-ratio: 56.25%;
}

.ratio-21x9 {
    --bs-aspect-ratio: 42.8571428571%;
}

.object-cover,
.object-contain {
    object-position: center;
    width: 100%;
    height: 100%;
}

.object-cover {
    object-fit: cover;
}

.object-contain {
    object-fit: contain;
}

.tablet-none,
.mobileWeb-none,
.tablet,
.mobile {
    display: none;
}

.mobileWeb-hidden {
    visibility: hidden;
}

.table-scroll {
    width: 100%;
    overflow: auto;
}

a,
a:hover {
    text-decoration: none;
    list-style: none;
}

.btn:focus {
    box-shadow: none;
}

.alignItem-left {
    align-items: flex-start;
}

.alignItem-center {
    align-items: center;
}

.alignContent-space-between {
    align-content: space-between;
}

.box-layout {
    align-items: center;
    justify-content: space-between;
    display: flex;
}

.no-padding {
    padding: 0px;
}

.no-margin {
    margin: 0px;
}

/*未確定哪頁有用到，暫保留
 .padding-50{
    padding: 50px;
} */

.context {
    background-color: #fff;
}

.context img{
    max-width: 100% !important;
}

.contextGary {
    background-color: #efefef;
}

.BGc096391 {
    background-color: #096391;
}

.table {
    margin-top: 30px;
    margin-bottom: 30px;
}

.table thead th {
    vertical-align: middle;
}

/* .context-P50ud{
    padding: 50px auto;
} */
.context-PB110 {
    padding-bottom: 110px;
}

.context-PB90 {
    padding-bottom: 90px;
}

.context-PB70 {
    padding-bottom: 70px;
}

.context-PB50 {
    padding-bottom: 50px;
}

.context-PB40 {
    padding-bottom: 40px;
}



.context-PT90 {
    padding-top: 90px;
}

.context-PT50 {
    padding-top: 50px;
}

/* .context-PT20 {
    padding-top: 20px;
} */

.context-PT0 {
    padding-top: 0;
}

.context-MB30 {
    margin-bottom: 30px;
}

.context-MT90 {
    margin-top: 90px;
}

.context-MT20 {
    margin-top: 20px;
}

.context-MT10 {
    margin-top: 10px;
}

.context-MB0 {
    margin-top: 0px;
}

.c464646 {
    color: #464646;
}

.c707070 {
    color: #707070;
}

.c002f4a {
    color: #002f4a;
}

.c4a2305 {
    color: #4a2305;
}

.c1462e8 {
    color: #1462e8;
}

.c949494 {
    color: #949494;
}

.cff0000 {
    color: #ff0000;
}


.dropdown-item.active,
.dropdown-item:active {
    background-color: #6c757d;
}

/* 基礎 h1~h6 & p 設定 */
h1,
h2,
h3 {
    margin-top: 2.5rem;
}

.context-PT50 h1,
.context-PT50 h2,
.context-PT50 h3 {
    margin-top: 0rem;
}

h3 {
    padding-bottom: 2rem;
}

h6,
p {
    line-height: 1.8em;
    padding-bottom: 2rem;
    margin-bottom: 0;
}

h6 {
    font-weight: 700;
}

p {
    font-weight: 400;
}

.ww-nowrap {
    word-wrap: nowrap;
}

.td-underline-hover:hover {
    text-decoration: underline;
}

.ellipsis3 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ellipsis2 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    /* text-overflow: ellipsis; */
}

.leftBlueLine {
    border-left: #096391 solid 0.5rem;
    padding: 0 0 0 0.8rem;
    margin-bottom: 2.3rem;
    display: flex;
    /*text-align: center;*/
}

.fS1rem {
    font-size: 1rem;
}

.d-flexEnd {
    display: flex;
    align-items: flex-end;
}

.bgBAlpha {
    background-color: rgba(0, 0, 0, 0.7);
    color: #fff;
    padding: 1.25rem;
    text-align: left;
    word-wrap: break-word;
}

.none {
    display: none;
}

.show {
    display: block;
}

.more {
    margin: auto;
    margin-top: 3rem;
    margin-bottom: 3.5rem;
    left: 50%;
    text-align: center;
}

/* 按鈕樣式 */
.iconBlue {
    border-radius: 10rem;
    border: 2px solid #303030;
    padding: 5px 20px;
    color: #303030;
    background: transparent;
}

.iconBlue:active,
.iconBlue:hover {
    background-color: #008BD3;
    border: 2px solid #008BD3;
    color: #fff;
}

.iconBlue2 {
    border-radius: 10rem;
    border: 2px solid #008BD3;
    padding: 5px 20px;
    color: #008BD3;
    background: #fff;
}

.iconBlue2:active,
.iconBlue2:hover {
    background-color: #008BD3;
    border: 2px solid #008BD3;
    color: #fff;
}

.iconRed {
    border-radius: 10rem;
    border: 2px solid #a40000;
    padding: 5px 20px;
    color: #a40000;
    margin-right: 10px;
}

.shortcut > .iconRed {
    display: inline-block;
    margin-bottom: 10px;
}

.iconRed.on,
.iconRed:active,
.iconRed:hover {
    background-color: #a40000;
    color: #fff;
}

/* .btnArea {
    z-index: 50;
} */

/* 表格 */
.table.Chi tr th,
table.Chi tr th {
    white-space: nowrap;
}

/* .table tr th {
    white-space: nowrap;
}  */


/* 項目 */
.ul-decimal li {
    list-style-type: decimal;
    margin-left: 3.5rem;
}

.ul-trad-chinese-informal li {
    list-style-type: cjk-decimal;
    margin-left: 3.5rem;
}

.ul-disc li {
    list-style: disc;
    margin-left: 1.5rem;
}

.ul-lower-latin li {
    list-style: lower-latin;
    margin-left: 1.5rem;
}

/* 上、下頁鍵 */
/* .pageArrow {
    margin: 0 auto;
    left: 0;
    right: 0;
    margin-top: 180px;
    position: fixed;
    display: none;
} */

/* .pageArrow.active {
    bottom: 200px;
    position: fixed;
    display: block;
    transition: 0.5s;
} */

.prePage,
.nextPage {
    background-color: #464646;
    height: 73px;
    width: 46px;
    color: #fff;
    line-height: 75px;
    text-align: center;
    font-size: 22pt;
    opacity: 0.7;
    cursor: pointer;
    /*bottom: 200px;*/
    margin-top: 0;
    position: fixed;
    top: 50%;
    display: none;
    z-index: 30;
    transition: 0.5s;
    /*background-color: #464646;
    height: 120px;
    width: 58px;
    color: #fff;
    line-height: 120px;
    text-align: center;
    font-size: 30pt;
    opacity: 0.7;
    cursor: pointer;
    bottom: 200px;
    margin-top: 180px;
    position: fixed;
    display: none;
    z-index: 30;
    transition: 0.5s*/
}

.prePage {
    border-radius: 0 8px 8px 0;
    float: left;
    left: 0;
}

.nextPage {
    border-radius: 8px 0 0 8px;
    float: right;
    right: 0;
}

.pageArrow.active .prePage,
.pageArrow.active .nextPage {
    display: block;
}

.pageArrow a {
    color: #d8d8d8;
}

.pageArrow a:hover,
.pageArrow a:active {
    color: #FFF;
}

/* 下拉選單 */
.thirdMenu {
    display: none;
    position: relative;
    width: 100%;
}

.thirdMenu a {
    color: white;
    font-size: 1rem;
    padding: 0.25rem 0;
}

.introCard ul li a:hover {
    color: #FF0000;
}

.introCard ul li {
    display: block;
    padding: 0.25rem 0;
}

/* +-展開號 未完成*/
.fa-minus-square.show {
    display: block;
}

.fa-plus-square.none {
    display: none;
}

/* 非首頁 bar image 區域資訊*/
.BG-first {
    height: 280px;
    width: auto;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 1.5rem 0;
    background-color: #002f4a;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.BG-first h2,
.BG-first h6,
.BG-first h5 {
    color: #fff;
}

.BG-first h2 {
    margin-top: 0;
    padding-bottom: 10px;
    font-size: 1.8rem;
}

.BG-first h5 {
    font-size: 1rem;
    margin-bottom: 0;
}

@media (min-width: 992px) {

    .BG-first h2,
    .BG-first h6,
    .BG-first h5 {
        display: flex;
    }

    .BG-first h2:after,
    .BG-first h6:after,
    .BG-first h5:after {
        content: '';
        display: block;
        position: relative;
        width: 60%;
        flex: 0 0 60%;
        pointer-events: none;
    }

    .BG-first h2 {
        font-size: 2rem;
    }

    .BG-first h5 {
        font-size: 1.125rem;
    }
}


/* breadcrumb */
.breadCrumbs {
    background-color: rgba(00, 139, 211, 0.95);
    z-index: 99;
}

.breadCrumbs.active {
    position: fixed;
    top: 0;
    width: 100%;
    transition: 0.5s;
}

.breadCrumbsDes {
    color: #fff;
    font-size: 16px;
    padding: 15px 15px;
}

.breadCrumbsDes a {
    color: #fff;
    text-decoration: none;
    list-style: none;
}

.breadCrumbsDes span {
    margin: 0 10px;
}

/* 同上方menu */
@media screen and (max-width: 770px) {
    .breadCrumbs {
        display: none;
    }
}

/* 每頁上方Banner區塊文字 */
section.impression-first h2,
section.impression-first h6,
section.impression-first h5 {
    text-shadow: 0 3px 6px #000000;
}

section.impression-first h5 {
    font-weight: 400;
}


/* 格狀選單 */
.introCard {
    padding: 15px;
}

.introCard-area {
    position: absolute;
    width: 100%;
    height: 242px;
    text-align: center;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden;
}

.introCard-area:hover .introCardImg {
    /* display: block; */
    opacity: 1;
    pointer-events: fill;
}

.introCardImg {
    /*display: none;*/
    position: absolute;
    width: 100%;
    height: 242px;
    transition: 5s;
    top: 0;
    left: 0;
    opacity: 0;
    pointer-events: none;
    transition: all .3s ease;
}

.introCard-area > img {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    display: flex;
    align-items: center;
    border-radius: 0.25rem 0.25rem 0 0;
    opacity: 1;
}


.introCard-area .onlybg {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    transition: all 3.5s ease;
}

.introCard-area:hover .onlybg {
    transform: scale(1.5);
}

.h-card-body {
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    min-height: 1px;
    padding: 20px;
    margin-top: 242px;
}

.h-card-body > a {
    color: #626262;
    text-align: justify;
    cursor: pointer;
}

.photo-hashtag {
    position: relative;
}

.hashtagCard {
    padding: 15px;
}

.hashtag-area {
    background-color: #008BD3;
    border-radius: 0 0 0.25rem 0;
    position: absolute;
}

.hashtag-script {
    font-size: 0.8rem;
    color: white;
    padding: 2px 25px;
    text-align: center;
}

.photoHashtag-area,
.productPhoto-area {
    margin: auto;
    position: absolute;
    width: 100%;
    height: 242px;
    text-align: center;
}

/* 卡片式圖片 */
.photoHashtag-area > img {
    margin: auto;
    background-clip: padding-box;
    display: block;
    position: absolute;
    align-items: center;
    object-fit: cover;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    right: 0;
    padding: 0;
}

/* 卡片式產品照專用 */
.productPhoto-area > img {
    max-width: 100%;
    display: flex;
    position: absolute;
    align-items: center;
    object-fit: contain;
    object-position: center;
    max-height: 100%;
    width: 100%;
    height: 100%;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

.imgAll > img,
.imgAll {
    max-width: 100%;
    display: flex;
    align-items: center;
    object-fit: contain;
    object-position: center;
    max-height: 100%;
    width: 100%;
    height: 100%;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

.introPhotoRight > img,
.introPhotoLeft > img {
    margin: auto;
    background-clip: padding-box;
    display: block;
    align-items: center;
    object-fit: cover;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    right: 0;
    padding: 0;
    border-radius: 10px;
}

/* 卡片式設定 */
.card {
    border-radius: 0;
}

/* 新聞中心文章式版面 */
.contextShadow {
    background-color: #fff;
    box-shadow: 0 0 18px 0px rgb(0 0 0 / 16%);
    max-width: 1050px;
    margin: auto;
    padding: 50px 44px 110px 44px;
}

.modelist.list .hashtag-area {
    display: none;
}

.investShadow {
    background-color: #fff;
    border-radius: 10px 10px 0 0;
    box-shadow: 0 0 18px 0px rgb(0 0 0 / 16%);
    max-width: 1050px;
    margin: auto;
    padding: 0px 44px;
}

.cover {
    /* height: 300px; */
    width: auto;
    background-color: transparent;
    margin: 30px auto;
    text-align: center;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.cover img {
    display: block;
    margin: auto;
    min-width: 100%;
    max-width: 100%;
    text-align: center;
    min-height: auto;
    padding: 0;
}

.tag {
    color: #457890;
    padding-left: 30px;
}

/* 中文語系會左右對齊 */
.w-card-body.Chi > h5,
.w-card-body.Chi > p,
.t-card-body.Chi h5,
.t-card-body.Chi p,
.h-card-body.Chi > h5,
.h-card-body.Chi > p {
    text-align: justify;
}


/* 投資人關係 / 財務資訊及活動 / 季報、每月營業額報告、法說會 */
.buttonLine {
    justify-content: space-evenly;
    align-items: center;
    padding-top: 50px;
    padding-bottom: 30px;
}

.buttonLine a {
    color: #303030;
}

.buttonLine a.active {
    color: #096391;
}

.lineGray2 {
    background-color: #303030;
    width: 2px;
    height: 1.5rem;
}

/* 各半敘述內文：公司簡介、文化理念、 組織及經營團隊、藥物行銷規範、聚焦社會及環境 */
.introRight,
.introLeft {
    padding: 60px 60px;
}

.introScriptcFBFBFB,
.introRight {
    background-color: #FBFBFB;
}

.introScriptcEFEFEF,
.introLeft {
    background-color: #EFEFEF;
}

.introPhotoLeft,
.introScriptRight,
.introPhotoRight,
.introScriptLeft {
    margin: 0 25px;
}

.introPhotoLeft,
.introPhotoRight,
.introScriptRight,
.introScriptLeft {
    width: 475px;
}

.introPhotoLeft,
.introPhotoRight {
    border-radius: 10px;
    height: 325px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-image: onerror="this.onerror=null; this.src='../img/img_onerror.svg';";
}

.bottomLine {
    border-bottom: 0.5rem solid #008BD3;
    width: auto;
    margin-bottom: 10px;
}

/* 聯絡我們C8-0-0、全產品C3-2-1*/
.rightSpace {
    width: 100%;
    margin: auto;
    margin-left: 30px;
    /* margin-top: 1rem; */
}

/* leftSpace服務選單設定 */
.serviceMenu {
    margin-top: 15px;
}

.serviceMenu ul {
    width: 240px;
}

.SecMenuIcon ul li {
    border-bottom: 1px solid #c1c1c1;
    padding: 15px;
    padding-left: 35px;
    background-color: #efefef;
    color: #303030;
}

.SecMenuIcon ul li a {
    color: #303030;
    font-size: 16px;
}

.SecMenuIcon ul li:hover,
.SecMenuIcon ul li:active {
    background-color: #d8d8d8;
}

.SecMenuIcon ul li a:hover,
.SecMenuIcon ul li a:active {
    color: #ff0000;
}

.menuIcon {
    border-bottom: 1px solid #c1c1c1;
    padding: 15px;
    padding-left: 35px;
    background-color: #efefef;
    color: #303030;
    white-space: nowrap;
    border-right: 60px;
}

.menuIcon a {
    color: #303030;
    font-size: 16px;
}

.menuIcon.on,
.menuIcon.on:hover {
    background-color: #096391;
}

.menuIcon.on a,
.menuIcon.on a:hover {
    color: #FFF;
}

.menuIcon a,
.menuIcon a:hover {
    cursor: pointer;
}

.menuIcon ul li {
    display: block;
}

/* 相關下方連結 */
/* 相關連結：__footer_3_link, __footer_6_link */
.menu-area h2 {
    text-align: center;
    padding-bottom: 0;
}

.menu-area {
    padding: 3.5rem 0;
}

/* 下有子層的選擇的卡片底色用"div" selector+class selector；
   下無子層(相關連結)的卡片底色用"section" selector+class selector */
div.menu-area {
    background-color: transparent;
    padding-top: 0;
}

section.menu-area {
    background-color: #D8D8D8;
}

section.menu-area h2 {
    margin-top: 0px;
}



/*** rwd ***/

@media (max-width: 767px) {
    .hashtag-script {
        padding: 2px 10px;
    }

    .more {
        margin-top: 1.5rem;
        margin-bottom: 2rem;
    }

    .re-fixlayout .box-layout {
        flex-wrap: wrap;
    }

    .re-fixlayout .box-layout .introScriptRight,
    .re-fixlayout .box-layout .introScriptLeft {
        margin-top: 10px;
    }

    .re-fixlayout .box-layout .introScriptLeft {
        order: 2;
        margin-top: 10px;
    }

    .re-fixlayout .box-layout .introPhotoRight {
        order: 1;
    }

    .re-fixlayout .box-layout .introPhotoRight > img,
    .re-fixlayout .box-layout .introPhotoLeft > img {
        height: auto;
    }

    .re-fixlayout .box-layout .introPhotoLeft,
    .re-fixlayout .box-layout .introPhotoRight {
        height: auto;
        margin: 0 auto;
    }

    .webmap-area .mobile {
        display: block;
    }

    .prePage,
    .nextPage {
        width: 30px;
        font-size: 20px;
    }

    .contextShadow {
        padding: 35px 30px 50px;
    }
}