@font-face {
    /* font-family: custom-font; */
    src: local(Microsoft JhengHei);
    unicode-range: U+4E00-9FFF;
}

@font-face {
    /* font-family: custom-font; */
    /*src: local(Times New Roman);*/
    src: local(Arial),local(Times New Roman);
    unicode-range: U+00-024F;
}

* {
    padding: 0px;
    margin: 0px;
}

body {
    height: 100%;
    margin: 0;
    /*    font-size: 1.4vw;
    font-size: 1.2rem; */
    font-size: 1rem;
    font-family: 'Noto sans TC','Microsoft JhengHei',Arial, Helvetica, sans-serif;
}
body.biggerfont{
    font-size:1.2rem;
}
    body.biggerfont .lookresult .ImgLabelP3Frame {
        height: 17rem;
    }
h1 {
    font-family: 'Noto sans TC','Microsoft JhengHei',Arial, Helvetica, sans-serif;
    font-size: 1.7rem;
    color: #444;
}
/*@media screen and (max-width: 1024px) {
    body {
        font-size: 20px;
    }
}*/
@media screen and (max-width: 720px) {
    /*body {
        font-size: 12px;
    }*/

        SearchBT {
        font-size: 12px;
        height: 80%;
    }

    .SearchInput {
        height: 80%;  
        font-size: 12px;

    }

    .UpColumn {
        width: 90%;
    }

    .UpLeftFrame {
        width: auto;
    }
}



.P11 {
    width: 100%;
    /*height: 100vh;*/
    background: #E6E3DD;
    flex-direction: column;
    /*    justify-content: flex-start;*/
    align-items: flex-start;
    display: flex;
    margin-bottom: 0px;
    padding-bottom: 2em;
    border-radius: 10px;
}

.FJU_logo {
    width: 70%;
    height: auto;
    max-width: 30%;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    display: inline-flex;
    margin-bottom: 8px;
}

.Up {
    width: 100%;
    margin-left: 0px;
    margin-right: 0px;
    height: auto;
    background: white;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    display: inline-flex;
}

.Down {
    width: 100%;
    height: auto;
    /*padding-bottom: 240px;*/
    /*background-color: blueviolet;*/
    background: #E6E3DD;
    flex-direction: column;
    justify-content: flex-start;
    /*align-items: center;*/ /*
    display: inline-flex;*/
    bottom: 0px;
    margin-right: 0px;
    display: flex;
}

.HospitalIcon {
    width: 100%;
    height: auto;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    display: inline-flex;
}

.Bar {
    align-self: stretch;
    height: auto;
    padding: 0.5%;
    opacity: 0.80;
    background: #11A79C;
    border-radius: 2px;
    border: 1px #11A79C solid;
    justify-content: flex-start;
    align-items: center;
    gap: 2px;
    display: inline-flex;
    justify-content: space-around;
    padding-top: 0.25%;
    padding-bottom: 0.25%;
    padding-left: 0.25%;
}

.BarItem {
    /*flex: 1 1 0;*/
    height: 100%;
    justify-content: center;
    align-items: center;
    display: flex;
    text-align: center;
    /*font-size: 14px !important;*/
    font-family: "Noto sans TC", "Microsoft JhengHei", Arial, Helvetica, sans-serif;
    font-weight: 700;
    word-wrap: break-word;
    color: white;
    background: #11A79C;
    border: 0;
    transition: border 0.3s; /* 添加過渡效果 */
    /*padding-top: 2.5%;
    padding-bottom: 2.5%;*/
    padding: 5px 0;
    /*font-size: 1.6rem !important; 
    font-size: 1.125em;*/
    padding: 5px;
    line-height: 1.1em;
}

    .BarItem:hover {
        border: 2px solid white; /* 懸停時設定邊框 */
        cursor: pointer;
    }



.BarItemSelect {
    /*flex: 1 1 0;
      height: 100%;*/ 
    justify-content: center;
    align-items: center;
    display: flex;
    text-align: center;
    /*font-size: 20px;
    font-family: Inika;*/
    font-weight: 700;
    word-wrap: break-word;
    color: #11A79C;
    background: white;
    border: 0;
    transition: border 0.3s; /* 添加過渡效果 */
    /*padding-top: 2.5%;
    padding-bottom: 2.5%;*/
}

    .BarItemSelect:hover {
        cursor: pointer;
    }

    .BarItem:hover,
    .BarItemSelect {
        border: none;
        outline: 2px solid white;
    }
    
    a:hover, a:focus {
        color: white;
        text-decoration: none;
    }
    
    a.BarItemSelect:hover, a.BarItemSelect:focus {
        color: #11A79C;
        text-decoration: none;
    }
/* 未用*/
/*.Mix {
    align-self: stretch;
    flex: 1 1 0;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 120px;
    display: flex;
    width: 100%;
    height: 100%;
}*/

.Title {
    padding-top: 10px;
    padding-bottom: 20px;
    width: 100%;
    height: auto;
    text-align: center;
    color: #525051;
    /*    font-size: 24px;
*/ font-family: Abril Fatface;
    font-weight: 400;
    word-wrap: break-word;
    padding-top: 163px;
}

.SearchBarCk {
    /*align-self: stretch;*/
    /*flex: 1 1 0;*/
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 33px;
    display: flex;
    width: 100%;
    /*background-color:antiquewhite;*/
    padding-top: 10px;
}

.SearchBar {
    align-self: stretch;
    flex: 1 1 0;
    /*    padding-left: 10%;
    padding-right: 10%;*/
    flex-direction: row;
    align-items: center;
    display: flex;
    /* flex-wrap: wrap; */
    align-content: stretch;
    justify-content: center;
}
.Down.ls:not(.frontpage) .SearchBar.sb2 {
    flex-wrap:wrap;
}

.Ck {
    width: 70%;
    align-self: center;
    /*    padding-left: 169px;
    padding-right: 169px;*/
    justify-content: center;
    align-items: center;
    display: inline-flex
}

.SearchBarTitle {
    flex: 1 1 0;
    text-align: center;
    color: #525051;
    /*    font-size: 24px;*/
    font-family: "Noto sans TC", "Microsoft JhengHei", Arial, Helvetica, sans-serif;
    font-weight: 700;
    word-wrap: break-word
}

.CKcolumn {
    flex: 1 1 0;
    height: 29px;
    justify-content: center;
    align-items: center;
    gap: 4px;
    display: flex
}

.CKname {
    text-align: center;
    color: #525051;
    /*    font-size: 24px;*/
    font-family: "Noto sans TC", "Microsoft JhengHei", Arial, Helvetica, sans-serif;
    font-weight: 400;
    /*font-size: 1.4rem;*/
    text-align: left;
    width: 5rem;
    word-wrap: break-word;
}
.SearchBar.sb2 .CKname {
    width: 3em;
}

input[type="checkbox"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 19px;
    height: 17px;
    border-radius: 4px;
    border: 4px solid #11A79C;
    position: relative;
}

    input[type="checkbox"]:hover {
        cursor: pointer;
    }

    input[type="checkbox"]:checked {
        /*background-image: url(https://node.turawstock.com/image?urlxx=http://st2.imgcontent.net/34078792/50655/v/450/depositphotos_506558920-stock-illustration-checkmark-tick-correct-symbol-green.jpg);
        background-size: contain;*/
        background-color: #11A79C;
    }


.gou {
    position: absolute;
    left: 0;
    top: 0;
    width: 9px;
    height: 18px;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: rotate(40deg);
}


.Search {
    width: 75%;
    height: auto;
    margin: auto;
    /*background-color: aqua;*/
    position: relative;
    top: 0px;
    padding-top: 50px;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    display: inline-flex;
    gap: 30px
}

    .Search.cs {
        width: 95%;
        padding-top: 0;
    }

/*.Subjectlist {
    width: 100%;
    height: 100%;
    padding-bottom: 10px;*/
/*    background: red;
*/ /*flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 30px;
    display: inline-flex;
    background-color:slateblue;
}*/
.Subjectlist {
    width: 100%;
    height: 100%;
    padding-bottom: 10px;
    * flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 30px;
    display: inline-flex;
    flex-wrap: wrap;
}

.SearchInput {
    /*  padding: 10px;*/
    border: 1px solid #ccc;
    border-top-left-radius: 100px; /* 左上角圓角 */
    border-bottom-left-radius: 100px; /* 左下角圓角 */
    /* width: 616px;
*/ width: 50%;
    height: 100%;
    position: relative;
    padding-left: 20px;
    
    /* height: 36px; */
    position: relative;
/*    padding-left: 2%;*/
    font-size: 1rem;
/*    padding-top: 2%;
    padding-bottom: 2%;*/
}

.SearchBT {
    background-color: #11A79C;
    color: #fff;
    border: none;
    border-top-right-radius: 100px; /* 左上角圓角 */
    border-bottom-right-radius: 100px; /* 左下角圓角 */
    cursor: pointer;
    font-size: 1rem;
    height: 58px;
    width: 20%;
}




.Down04 {
    width: 100%;
    height: auto;
    /*padding-left: 10%;
    padding-right: 10%;*/
    padding-top: 3%;
    padding-bottom: 3%;
    background: #E6E3DD;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    display: inline-flex;
}

.UpColumn {
    width: 75%;
    height: auto;
    margin: auto;
    justify-content: flex-start;
    align-items: flex-start;
    display: inline-flex;
    display: flex;
    flex-wrap: nowrap;
    /*ackground-color: aqua;*/
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 2%;
}



.UpLeftFrame {
    /*    flex: 1 1 0;
*/
    width: 50%;
    align-self: stretch;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 15px;
    display: inline-flex
}

.MedFrame {
    width: 100%;
    height: 100%;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 5%;
    display: inline-flex;
}





.MedLabel {
    width: 28%;
    align-self: stretch;
    padding-left: 4%;
    padding-right: 4%;
    padding-top: 2%;
    padding-bottom: 2%;
    background: #11A79C;
    border-radius: 5px;
    justify-content: center;
    align-items: center;
    /*    gap: 10px;
*/ display: flex;
    /*    min-width: 150px;
*/ /*   padding-left: 0.5%;
    padding-right: 0.5%;*/
    /*    padding-top: 10px;
    padding-bottom: 10px;*/
    /*justify-content: center;
    align-items: center;
    gap: 10px;
    display: flex;
    word-wrap: break-word;*/
    /*    min-width: 150px;
*/
    /*padding-left: 2%;
    padding-right: 2%;
    padding-top: 1%;
    padding-bottom: 1%;*/
}


.MedLabel2 {
    width: 14%;
    align-self: stretch;
    /*   padding-left: 0.5%;
    padding-right: 0.5%;*/
    /*    padding-top: 10px;
    padding-bottom: 10px;
    background: #0D827A;
    background: #3268a4;*/
    border-radius: 5px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    display: flex;
    word-wrap: break-word;
    /*    min-width: 150px;
*/
    padding-left: 2%;
    padding-right: 2%;
    padding-top: 1%;
    padding-bottom: 1%;
    background: #0A9E97;
}
.DownColumn .MedLabel2 {
    width: calc(14% - 2.8px);
}

.DownColumn .MedFrame {
    gap: calc(2.5% - 0.5px );
}

@media screen and (max-width: 495px) {
    .DownColumn .MedLabel2 {
        width: 28%
    }

    .DownColumn .MedFrame {
        gap: 5%;
    }
}
.MedLabelText {
    text-align: center;
    color: white;
    /*    font-size: 24px;
    font-family: Inter;*/
    /* font-family: custom-font; */
    /*font-size: 1.6rem;*/
    font-weight: 400;
    word-wrap: break-word;
    margin-left: 0px;
    /*    min-width: 100px;
*/ width: auto;
}

.MedInput {
    flex: 1 1 0;
    align-self: center;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
    display: flex;
    /*  margin-right: 10%;*/
}

.MedInput3 {
    flex: 1 1 0;
    align-self: center;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
    display: flex;
    margin-right: 10%;
}

.MedInputText {
    width: 100%;
    height: 100%;
    color: #525051;
    /*  font-size: 24px;
    font-family: Inter;*/
    /* font-family: custom-font; */
    /*font-size: 1.6rem; */
    font-weight: 400;
    word-wrap: break-word
}

.MedMutInput {
    flex: 1 1 0;
    /*    flex-direction: column;
*/ justify-content: flex-start;
    align-items: flex-start;
    /*    gap: 10px;
*/ display: inline-flex;
}

.DownColumn {
    width: 75%;
    height: auto;
    margin: auto;
    justify-content: flex-start;
    align-items: flex-start;
    display: inline-flex;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    /*    background-color: aqua;*/
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 2%;
}

.OtherFrame {
    width: 92%;
    height: auto;
    margin: auto;
    justify-content: center;
    align-items: stretch;
    display: inline-flex;
    margin-bottom: 2%;
}

.OtherFrame2 {
    width: 92%;
    height: auto;
    margin: auto;
    justify-content: center;
    align-items: stretch;
    display: inline-flex;
    margin-bottom: 2%;
}

.OtherFrame3 {
    width: 75%;
    height: auto;
    margin: auto;
    justify-content: center;
    align-items: stretch;
    display: inline-flex;
    gap: 5%;
}

.NoteList {
    display: flex;
    width: 100%;
    padding-left: 2%;
    padding-right: 2%;
    background: white;
    border-radius: 5px;
    flex-direction: column;
    justify-content: flex-start;
    /*    align-items: center;
*/ display: flex;
    height: auto;
}

.NoteList2 {
    display: flex;
    width: 100%;
    padding-left: 2%;
    padding-right: 2%;
    background: white;
    border-radius: 5px;
    margin-right: 5%;
    margin-left: 5%;
    flex-direction: column;
    justify-content: flex-start;
    /*    align-items: center;
*/ display: flex;
    height: auto;
}

.NoteTitle {
    align-self: stretch;
    /*height: auto;*/
    background: white;
    /*border-radius: 5px;*/
    border-bottom: 1px #0D827A solid;
    justify-content: center;
    align-items: center;
    display: inline-flex;
    padding:0.5em 0;
}

.NoteTitleText {
    flex: 1 1 0;
    align-self: center;
    text-align: center;
    color: #0D827A;
    /*    font-size: 24px;
*/ /* font-family: custom-font; */
    font-weight: 700;
    word-wrap: break-word
}

/*.NoteDetail {
    align-self: stretch;
    flex: 1 1 0;
    justify-content: flex-start;
    align-items: flex-start;
    display: inline-flex;
    gap: 7%;*/
/*    background-color: brown
*/
/*}*/

.NoteFrame {
    width: 100%;
    flex: 1 1 0;
    height: auto;
    align-self: stretch;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    display: inline-flex;
    padding-top: 2%;
    padding-bottom: 4%;
    /*/*gap: 25px;
    /*  background-color: seagreen*/
}

.test {
    width: 100%;
    height: auto;
}

.NoteFrameMed {
    width: 100%;
    height: auto;
    flex: 1 1 0;
    align-self: stretch;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    display: inline-flex;
    padding-top: 2%;
    padding-bottom: 2%;
}

.NoteLabel {
    align-self: stretch;
    flex: 1 1 0;
    text-align: center;
    color: #313131;
    /*    font-size: 24px;
*/ font-family: Inter;
    font-weight: 400;
    word-wrap: break-word;
    display: flex;
    justify-content: center;
    align-items: center;
    /*background-color: hotpink*/
}

.MedInfoFrame {
    width: 100%;
    height: 100%;
    justify-content: flex-start;
    align-items: flex-start;
    margin-bottom: 2%;
    display: flex;
    /*    background-color:blue;
*/
}

.MedInfoFrame2 {
    width: 100%;
    height: 100%;
    justify-content: flex-start;
    align-items: flex-start;
    /*margin-bottom: 2%;*/
    margin-bottom: 6px;
    display: flex;
    /*gap: 2%;*/
    /*    background-color:blue;
*/
    gap: calc(2.5% - 0.5px )
}

.MedLabel3 {
    width: 50%;
    align-self: stretch;
    justify-content: center;
    align-items: center;
    gap: 10px;
    display: flex;
}

.MedLabel4 {
    width: 8.5em; /*14%;*/
    align-self: stretch;
    justify-content: center;
    align-items: center;
    gap: 10px;
    display: flex;
    background-color: #11A79C;
    /*margin-left: 10%;*/
    padding-left: 2%;
    padding-right: 2%;
    padding-top: 1%;
    padding-bottom: 1%;
    border-radius: 5px;
}

.MedLabel4_2 {
    width: 8.5em; /*14%;*/
    align-self: stretch;
    justify-content: center;
    align-items: center;
    gap: 10px;
    display: flex;
    background-color: #42B6AD;
    /*margin-left: 10%;*/
    padding-left: 2%;
    padding-right: 2%;
    padding-top: 1%;
    padding-bottom: 1%;
    border-radius: 5px;
}

.MedLabelText3 {
    text-align: center;
    color: #525051;
    /*   font-size: 24px;*/
    /* font-family: custom-font; */
    font-weight: 400;
    word-wrap: break-word
}

.MedLabelText4 {
    text-align: center;
    color: white;
    /*    font-size: 24px;
*/ /* font-family: custom-font; */
    font-weight: 400;
    word-wrap: break-word;
}

.UpRightFrame {
    width: 50%;
    height: auto;
    /*flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 25px;
    display: inline-flex*/
}

.ImgLabelFrame {
    align-self: stretch;
    flex: 1 1 0;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 20px;
    display: flex
}
.ImgLabelFrame.hideMobile {
    display: none;
}

.Image {
    width: 50%;
    height: auto
}

.ImgLabel {
    width: 50%;
    padding-left: 25px;
    padding-right: 25px;
    padding-top: 10px;
    padding-bottom: 10px;
    background: #11A79C;
    border-radius: 5px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    display: flex
}

.ImgText {
    flex: 1 1 0;
    text-align: center;
    color: white;
    /*    font-size: 24px;
*/ /* font-family: custom-font; */
    font-weight: 400;
    word-wrap: break-word
}

ImgLabelP3Frame {
    height: 30%;
    padding: 2%;
    align-items: center;
    justify-content: center;
}

.ImgLabelP3 {
    /*font-size: 0.8rem;*/
    width: auto;
    /*    width:100%;
*/ align-content: center;
    padding-right: 2%;
    padding-left: 2%;
}

.ImageP3 {
    /*max-width: 100%;*/ /* 圖片最大寬度為容器寬度 */
    /*max-height: 100%;*/ /* 圖片最大高度為容器高度 */
    width: auto; /* 使圖片可以按比例縮放 */
    height: 100%; /* 使圖片可以按比例縮放 */
    display: block; /* 移除預設圖片間的間距 */
    align-items: center;
    justify-content: center;
}

.Subject {
    /*background-color: white;*/
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 15px;
    display: inline-flex;
    width: 250px;
    /*    height:375px;
    */
    /*padding-top:5%;
*/ padding-bottom: 15%;
}

.ImageP3Frame {
    width: 200px;
    height: 200px;
    overflow: hidden;
    align-items: center;
    justify-content: center;
    position: relative;
}

/* Search Result */
.lookresult .Subject {
    width: 189px;
    width: 230px;
    padding-bottom: 0;
}

.lookresult a:hover .ImgLabelP3Frame:after {
    content: "藥品資料>";
    display: inline-block;
    background: #1e827a;
    border-radius: 2em;
    padding: 0 0.5em;
    font-size: 0.875em;
    line-height: 1.2rem;
}
/*.lookresult .ImageP3Frame {
    width: 189px;
    height: 189px;
    background-size: contain !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
}

.lookresult .ImageP3Frame.show:after {
    content: '\f00e';
    font-family: 'Font Awesome 5 Free';
    font-weight: 700;
    font-size: 1.5em;
    color: white;
    opacity: 0.7;
    bottom: 0px;
    right: 5px;
    position: absolute;
    pointer-events: none;
}
.lookresult .ImageP3Frame.hover {
    background-size: 250% !important;
        
}
.lookresult .ImageP3Frame.hover:after {
    content:'';
}


.lookresult .ImgLabelP3Frame {
    width: 100%;
    padding-bottom: 15px;
}*/
.ImageP3Frame {
    width: 230px;
    height: 189px;
    background-size: contain !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
}

/*.ImageP3Frame.show:after {
    content: '\f00e';
    font-family: 'Font Awesome 5 Free';
    font-weight: 700;
    font-size: 1.5em;
    color: white;
    opacity: 0.7;
    bottom: 0px;
    right: 5px;
    position: absolute;
    pointer-events: none;
}*/
    .ImageP3Frame.show::after {
        content: url('/img/magnify_2.svg');
        pointer-events: none;
        width: 22px;
        height: 28px;
        display: block;
        bottom: 0;
        right: 4px;
        position: absolute;
    }
.ImageP3Frame.hover {
    background-size: 250% !important;
        
}
.ImageP3Frame.hover:after {
    content:'';
}

.ImgLabelP3Frame {
    width: 100%;
    padding-bottom: 15px;
}

.ImageP3Frame.Image {
    height: unset;
}
.ImageP3Frame.Image img.noVisible {
    visibility: hidden;
}
    .ImageP3Frame.Image img {
        width: 100%;
    }
/* 藥品關鍵字查詢 */
.Search {
    padding-top: 30px;
}

form {
    width: 100%;
}

input[type="checkbox"] {
    position: relative;
    top: -4px;
}

.SearchBarTitle,
.CKcolumn {
    display: flex;
    align-items: center;
}

.SearchInput {
    max-width: unset;
}

.SearchInput,
.SearchBT {
    height: 40px;
    /*font-size: 1.2rem;*/
}

.SearchBar {
    display: flex;
    justify-content: center;
    clear: left;
}
.ls.frontpage .SearchBar {
    max-width: 700px;
    margin: 0 auto;
}

.Ck {
    margin: 0 auto;
    display: flex;
}

/* 藥品外觀查詢 */
.sb2 .SearchBT {
    border-radius: 100px;
    height: auto;
    /*padding: 0.5em 2em;*/
    padding: 0.25em 2em;
    width: 6em;
    /*font-size: 1.2rem;*/
}

/* start of ios input restyle */
.sb2 input[type="text"] {
    border: none !important;
    border-radius: 0 !important;
    /*font-size: 1.2rem !important;
    padding: 0.5em 1em;*/
    padding: 0.25em 1em;
    width: 7em;
}

.select-restyle select,
.select-restyle option {
    -webkit-appearance: none;
}

.select-restyle {
    position: relative;
    display: inline-block;
}

    .select-restyle:after {
        content: '\f107';
        font-family: 'Font Awesome 5 Free';
        font-weight: 700;
        font-size: 1.5em;
        color: #11a79c;
        position: absolute;
        height: 0;
        width: 0;
        pointer-events: none;
        top: 0.3rem;
        right: 1.2rem;
    }

body.biggerfont .select-restyle:after {
    right: 1.5rem;
}

    .select-restyle select {
        padding-right: 24px;
        padding-left: 4px;
        color: black !important;
        background: white;
        border: none !important;
        /*font-size: 1.2rem !important;
        padding: 0.5em 1em;*/
        padding: 0.25em 1em;
        width: 7em;
    }
    .select-restyle select, .sb2 input[type="text"] {
        border: 1px solid #ccc !important;
    }
.sb2 .select-restyle::after {
    color: #4173b9;
    xcolor: #e18c8c;
    font-size:1.1em;
}

.sb2 .SearchBT {
    background-color: #4173b9;
    xbackground-color: #e18c8c;
}
.CKcolumn {
    padding-right: 1em;
}
.SearchBT:hover {
    background-color: #129389;
}

.sb2 .SearchBT:hover {
    background: #2f5fa2;
}

/* 藥理分類查詢 */
.categoryTable {
    /* font-family: custom-font; */
}
    .categoryTable td {
        padding: 0.5em;
    }

.categoryTable p {
    background: #417995;
    color: white;
    text-align: center !important;
    padding: 0.5em 0;
    border-radius: 5px;
    margin: 1em 0 0;
    padding-left: 5px;
    padding-right: 4px;
}

    .categoryTable P b {
        font-weight: 400;
    }

    .categoryTable P a {
        color: white;
    }

    .categoryTable a {
        xtext-decoration: underline;
        text-decoration: none;
    }

    .categoryTable P a {
        text-decoration: underline
    }

    .categoryTable ul {
        background: white;
        /*padding: 4px 0.6em 0.6em 1.4em;
        margin: 0 1em 0; */
        padding: 0;
        margin: 0 0.5em 0;
        padding-bottom: 0.3em;
    }

    .categoryTable ul a {
        color: black !important;
    }
    .categoryTable li {
        margin-left: 1.2em;
    }


/* add rwd*/
#menu_hamber {
    display: none;
}

.SearchBarTitle {
    width: 6em;
    display: inline-block;
    flex: unset;
    float: left;
    font-size: 0.9375rem;
}

.Ck {
    /* flex-wrap:wrap; */
    justify-content: flex-start;
    flex: none;
    display: block;
}

.CKcolumn {
    width: 5.5em;
    float: left;
    padding-right: 0;
}
.SearchBar.sb2 {
    gap: 0.5em;
}

.SearchBar.sb2 .CKcolumn {
    width: 10em;
}

.lookresult .ImgLabelP3Frame {
    /*padding: 0 0.5rem 1rem;*/
    padding: 3px;
    border-radius: 10px;
    margin-bottom: 2em;
    height: 15rem;
    overflow: hidden;
}

.ImgLabelP3 .label {
    /*font-size: 1.2rem;*/
    display: block;
    text-align: left;
    padding: 0 0 4px;
    color: #525051;
    font-weight: 900;
    font-size: 1.0625rem;
}

    .ImgLabelP3 .label > span {
        display: inline-block;
        /*font-weight: normal;
        font-size: 1.3rem;*/
        /*padding-left: 4px;
        border-left: 4px solid #40b8af;
        color: #42B6AD;*/
        color: #1E827A;
        font-weight: bold;
        font-size: 0.9375rem;
        font-family: "Noto sans TC", "Microsoft JhengHei", Arial, Helvetica, sans-serif
    }

.lookresult .ImgLabelP3 {
    /*font-size: 1.4rem;*/
    line-height: 1.2rem;
    word-break: break-word;
    margin-bottom: 8px;
    padding-bottom: 0.4rem;
    color: #525051;
    /* font-family: custom-font; */
}

/* medicine page */
.Down04 {
    /*font-size: 1.4rem;*/
    word-break: break-word;
}

.UpRightFrame .ImgLabel,
.UpRightFrame .Image {
    width: 80%;
}

input[type="checkbox"]:checked:after {
    width: 1em;
    height: 1em;
    display: block;
    color: white;
    content: "\f00c";
    font-size: 0.65rem;
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    position: absolute;
    line-height: 1em;
    left: -1px;
}



#svgP2 #path5 {
    animation-name: floatingP5;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}

@keyframes floatingP5 {
    0% {
        transform: translate(63.893529px, 184.73564px);
    }

    50% {
        transform: translate(63.893529px, 199.7px);
    }

    100% {
        transform: translate(63.893529px, 184.73564px);
    }
}

#svgP2 #g11 {
    animation-name: floatingG11;
    animation-duration: 4s;
    animation-delay: 0.5s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}


@keyframes floatingG11 {
    0% {
        transform: translate(78.721197px, 118.5168px);
    }

    40%, 50% {
        transform: translate(78.721197px, 128.5168px);
    }
    90%, 100% {
        transform: translate(78.721197px, 118.5168px);
    }
}

#svgP2 #g29-o {
    animation-name: floatingG29-2;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}

@keyframes floatingG29-2 {
    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-8px);
    }

    100% {
        transform: translateY(0);
    }
}

#g13-o {
    animation-name: floatingG29-2;
    animation-duration: 4s;
    animation-delay: 0.5s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}


#path12-o {
    animation-name: floatingG12-o;
    animation-duration: 4s;
    animation-delay: 0s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}

@keyframes floatingG12-o {
    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(11px);
    }

    100% {
        transform: translateY(0);
    }
}

#g23-o {
    animation-name: floatingG23-o;
    animation-duration: 4s;
    animation-delay: 0.6s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}

@keyframes floatingG23-o {
    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(10px);
    }

    100% {
        transform: translateY(0);
    }
}

#g12-9-o {
    animation-name: floatingG12-o;
    animation-duration: 6s;
    animation-delay: 0.3s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}

@keyframes floatingG12-o {
    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(6px);
    }

    100% {
        transform: translateY(0);
    }
}


@media screen and (max-width:1200px) {
    .Search {
        width: 95%;
    }

    .Subjectlist {
        gap: 20px;
    }

    .lookresult .Subject {
        width: 200px;
    }

    .lookresult .ImageP3Frame {
        width: 200px;
        height: 200px;
    }
}

@media screen and (max-width:1024px) {
    .UpRightFrame .ImgLabel,
    .UpRightFrame .Image {
        width: 100%;
    }

    .UpColumn,
    .DownColumn /*,
    .OtherFrame,
    .OtherFrame2,
    .OtherFrame3*/ {
        width: 100%;
        padding: 30px;
    }

    .OtherFrame, .OtherFrame2, .OtherFrame3 {
        width: 100%;
        padding: 10px 30px;
    }
}

@media screen and (max-width: 991px) {
    .SearchBar {
        padding-top: 0px;
    }

    .CKcolumn {
        float: left;
        padding-right: 0;
    }

    .Search {
        width: 100% !important;
        padding: 0 20px;
    }

    table.categoryTable td {
        width: calc(33.3% - 22px) !important;
        box-sizing: content-box;
        display: inline-block;
    }

        table.categoryTable td:nth-of-type(3n) {
            padding-right: 0
        }

    .SearchBar.sb2 {
        /*display: block;
        padding-left: 1em;*/
        flex-wrap: wrap;
    }
        .SearchBar.sb2 .last {
            width: 100vw;
            display: flex;
            justify-content: center;
        }

        .SearchBar.sb2 .CKcolumn {
            margin-bottom: 7px;
        }

        .SearchBar.sb2 .SearchBT {
            float: left;
        }
    .SearchBarTitle {
        width: 100%;
        font-weight: 700;
        margin-bottom: 0.5rem;
    }

    input[type="checkbox"] {
        width: 20px;
        height: 20px;
    }

        input[type="checkbox"]:checked::after {
            font-size: 0.75rem;
        }
    .ls.frontpage .SearchBar.sb2 .CKcolumn {
        margin-right: 0;
    }
}

@media screen and (max-width:768px) {
    .Search {
        width: 100%;
    }

    .Subjectlist {
        gap: 8px;
    }

    .Subjectlist.lookresult a {
        margin-bottom: 30px;
    }
    .ls.frontpage .SearchBar {
        max-width: 400px;
    }
  
}

@media screen and (max-width: 600px) {
    body.biggerfont {
        font-size: 1rem;
    }
    .HospitalIcon {
        flex-direction: row;
        justify-content: space-between;
    }
    #fontSize {
        display: none;
    }
    #menu_hamber span {
        font-size: 0px;
        line-height: 0px;
        color: #FFF;
        height: 14px;
        width: 100%;
        border-bottom-width: 2px;
        border-bottom-style: solid;
        border-bottom-color: #40b8af;
        display: block;
    }

        #menu_hamber span:after,
        #menu_hamber span:before {
            content: "";
            background-color: #40b8af;
            height: 2px;
            width: 100%;
            position: absolute;
            left: 0px;
        }

        #menu_hamber span:after {
            bottom: 3px;
        }

        #menu_hamber span:before {
            top: 3px;
        }

    .FJU_logo {
        height: 45px;
        width: auto !important;
        max-width: unset !important;
        float: left;
    }

    #menu_hamber {
        margin: 13px;
        float: right;
        height: 26px;
        width: 26px;
        position: relative;
        display: block;
        cursor: pointer;
    }

    .P11 {
        background: none;
    }

    .Down {
        border-radius: 4px 4px 0 0;
    }
    .Down04 {
        border-radius: 10px;
    }
    .Search {
        padding: 10px;
    }

    .SearchBarCk {
        padding-top: 0;
    }

    .Bar {
        display: none;
        flex-direction: column;
        justify-content: flex-start;
        flex-wrap: wrap;
        width: 100vw;
        height: calc(100vh - 52px);
        position: absolute;
        left: 0;
        top: 55px;
        z-index: 3;
        opacity: 1;
        background: #40b8af;
    }

        .Bar.open {
            display: flex;
        }

    .BarItem {
        width: 100%;
        height: 50px;
        flex: none;
        background: #40b8af;
    }

        .BarItem.BarItemSelect {
            background: white;
        }

    table.categoryTable td {
        width: calc(50% - 17px) !important;
    }

        table.categoryTable td:nth-of-type(2n+1) {
            padding-right: 14px;
            webkit-background-origin
        }

        table.categoryTable td:nth-of-type(2n) {
            padding-right: 0;
        }

    .SearchBar.sb2 .SearchBT {
        width: 10em;
    }
}
@media screen and (max-width:495px) {

    .Subjectlist {
        gap: 0px;
    }

    .Subjectlist {
        display: block;
    }

    .Subjectlist.lookresult a {
        width: calc(50% - 2.5px);
        display: inline-block;
    }

    .lookresult .Subject {
        display: block;
        width: 100%;
    }

    .Subjectlist.lookresult a:nth-of-type(2n+1) {
        margin-right: 5px;
    }

    .Subjectlist.lookresult a {
        margin-bottom: 30px;
        float: left;
        overflow: hidden;
    }
    .lookresult .ImgLabelP3Frame {
        padding-top: 1.2em;
    }

    .lookresult .ImageP3Frame {
        width: calc(50vw - 26px);
        height: calc(50vw - 26px);
    }
    .UpColumn,
    .DownColumn,
    .OtherFrame,
    .OtherFrame2,
    .OtherFrame3 {
        padding: 10px;
    }

    .UpColumn {
        flex-direction: column;
    }

    .UpRightFrame {
        order: 0;
    }

    .UpLeftFrame {
        order: 1;
    }

    .UpRightFrame, .UpLeftFrame {
        width: 100%;
    }

    .UpRightFrame .ImgLabel,
    .UpRightFrame .Image {
        width: 100%;
    }
    .UpColumn, .DownColumn {
        width: 100%;
        padding-left: 10px;
        padding-right: 10px;
    }

    .MedInfoFrame2 {
        gap: 5%;
    }
}
@media screen and (max-width:425px) {
    .FJU_logo {
        max-width: 200px;
    }

    .Ck {
        /* flex-wrap: wrap; */
        justify-content: center;
        display: flex;
        flex-wrap: wrap;
    }
    .SearchBar.sb2 {
        margin: 0 auto;
        padding: 1em !important;
    }
    h1 {
        letter-spacing: 0em !important;
    }

    .ls.SearchBar.sb2 {
        width: unset;
        padding: 1em !important;
    }
}

/* med description for desktop */
.ImageP3Frame.Image img {
    display: none;
}

.ImgLabelFrame {
    gap: 0px;
}

.UpColumn,
.DownColumn {
    width: 90%;
    border: 5px solid #e6e3dd;
}

.UpLeftFrame {
    flex: 1 1 0;
}

.UpLeftFrame,
.DownColumn {
    gap: 0px;
}


.MedLabel,
.MedLabel2 {
    padding: 0.3em;
}

.MedLabel,
.MedLabel2 {
    border-radius: 10px 0;
    border: 4px solid #e6e3dd;
}

.MedLabel,
.DownColumn .MedLabel2 {
    width: 9em;
}

.MedInputText {
    padding-top: 0.5em;
    padding-bottom: 0.5em;
    line-height: 1.3em !important;
    font-size: 1.0625rem;
}

.MedFrame {
    border-bottom: 1px solid #bbb;
}


.UpRightFrame .ImgLabel, .UpRightFrame .Image {
    width: 100%;
}

.ImgLabelFrame {
    justify-content: flex-start;
}

.UpRightFrame .ImageP3Frame {
    height: 25em !important;
    display: flex !important;
    flex-direction: column;
}


    .ImageP3Frame.Image img {
        visibility: hidden;
        display: inline;
    }

    .ImageP3Frame.Image a {
        width: 100%;
        height: 100%;
        cursor: crosshair;
    }

.HospitalIcon {
    position: relative;
}

#fontSize {
    position: absolute;
    right: 3px;
    bottom: 3px;
    font-size: 15px;
}

    #fontSize span {
        cursor: pointer;
        margin: 0 3px 0 0;
    }
        #fontSize span.active {
            xborder-bottom: 1px solid black;
            background: #e6e3dd;
        }

        #fontSize span:last-of-type {
            font-size: 1.2em;
        }


@media screen and (max-width: 1024px) {
    .UpColumn,
    .DownColumn {
        padding: 0;
    }
}

@media screen and (min-width:496px) {
    .UpRightFrame {
        width: auto;
        flex: 1 1 auto;
    }

    .UpRightFrame {
        background: black;
        height: 27em;
        overflow: hidden;
        position: relative;
        flex: 1 1 0;
        border-radius: 4px;
    }

    .ImgLabelFrame .ImageP3Frame {
        cursor: crosshair;
        position: absolute;
        top: 35px;
    }

    .UpRightFrame .ImgLabel {
        height: 35px;
        background: none;
        padding: 5px;
    }

    .ImgLabelFrame {
        gap: 0px;
    }
    .ImgLabelFrame.hideMobile {
        display:block;
    }

    .UpRightFrame > .ImgLabelFrame > .ImgLabel {
        position: absolute;
        left: 0;
        margin-left: 0.5em;
    }

    .UpRightFrame .ImgLabel {
        width: 6em;
        display: block;
        cursor: pointer;
    }

    .UpRightFrame .ImgText {
        display: block;
        cursor: pointer;
    }

        .UpRightFrame .ImgText.active {
            border: none;
            /*border-bottom: 2px solid #2d7ed9;*/
        }
            .UpRightFrame .ImgText.active::before {
                content: "";
                width: 6px;
                height: 6px;
                border-radius: 100%;
                background: #6ab1ff;
                display: block;
                position: absolute;
                top: 0.9em;
            }

    .UpRightFrame .ImgText.disabled {
        color: grey;
        cursor: default;
    }

    .ImgLabelFrame.outer .ImgLabel {
        left: 6em !important;
    }

    .ImgLabelFrame.outer .ImageP3Frame {
        display: none !important;
    }

        .ImgLabelFrame.outer .ImageP3Frame.reveal {
            display: block !important;
        }
}

@media screen and (max-width:495px) {
    .ImgLabelFrame {
        padding-bottom: 30px !important;
    }
}

/*缺藥 停用*/
.fas.fa-truck,
.fas.fa-ban,
.fas.fa-pills {
    color: #e44121;
}

    .fas.fa-truck:after,
    .fas.fa-ban:after,
    .fas.fa-pills:after {
        display: inline-block;
        padding-left: 3px;
        font-size: 1em;
        font-family: Microsoft JhengHei;
        font-weight: bold;
    }

    .fas.fa-truck:after,
    .fas.fa-pills::after {
        content: "缺藥";
    }

    .fas.fa-ban::after {
        content: "停用";
    }

.fas.fa-box-open:before {
    position: relative;
    top: 2px;
}

.Down04 .fas.fa-truck,
.Down04 .fas.fa-ban,
.Down04 .fas.fa-pills {
    color: #c84c33;
}