﻿body {
    font-family: "微軟正黑體","Microsoft JhengHei";
    color: #666;
    font-size: 16px;
    letter-spacing: 2px;
    line-height: 24px;
}

html, body {
    margin: 0 auto;
}

.orange-gradient {
    background: linear-gradient(rgba(221,169,51,1)55%,rgba(255,255,255,1)55%) no-repeat;
    background: -moz-linear-gradient(rgba(221,169,51,1)55%,rgba(255,255,255,1)55%) no-repeat;
    background: -webkit-linear-gradient(rgba(221,169,51,1)55%,rgba(255,255,255,1)55%) no-repeat;
    background: -o-linear-gradient(rgba(221,169,51,1)55%,rgba(255,255,255,1)55%) no-repeat;
}

@media(max-width:768px) {
    .orange-gradient {
        background: linear-gradient(rgba(221,169,51,1)25%,rgba(255,255,255,1)25%) no-repeat;
        background: -moz-linear-gradient(rgba(221,169,51,1)25%,rgba(255,255,255,1)25%) no-repeat;
        background: -webkit-linear-gradient(rgba(221,169,51,1)25%,rgba(255,255,255,1)25%) no-repeat;
        background: -o-linear-gradient(rgba(221,169,51,1)25%,rgba(255,255,255,1)25%) no-repeat;
    }
}

.container1 {
    width: 100%;
    max-width: 1920px;
}

.container2 {
    width: 100%;
    max-width: 1400px;
    margin: auto;
    min-height: 80px;
    padding-top: 100px;
}

@media (min-width:301px) and (max-width:991px) {
    .container2 {
        width: 100%;
        max-width: 1400px;
        margin: auto;
        min-height: 80px;
        padding-top: 80px;
    }
}

@media (max-width:300px) {
    .container2 {
        width: 100%;
        max-width: 1400px;
        margin: auto;
        min-height: 80px;
        padding-top: 50px;
    }
}

.container3 {
    width: 100%;
    max-width: 1400px;
    margin: auto;
}

.SearchBarBG {
    background-image: url(../img/SearchBG.png);
    background-repeat: no-repeat;
    background-position: 55% 50%;
}

@media(max-width:1024px) {
    .SearchBarBG {
        background: #FFF;
    }
}

.SearchBarTitle {
    width: 150px;
    height: 50px;
    padding-top: 5px;
}

.SearchBarButton {
    width: 125px;
    height: 50px;
    padding-top: 5px;
}

.SearchBarBox {
    width: calc(100% - 500px);
    margin: 0 20px;
    padding-left: 10px;
    background-color: #FFF;
    height: 50px;
    box-shadow: .1em .2em 1em rgba(0,0,0,0.685);
}

    .SearchBarBox .searchbar {
        width: 100% !important;
    }

.searchbar input[type=text] {
    width: calc(100% - 70px);
}

.SearchTextC {
    text-align: center;
    font-size: 23px;
    text-shadow: .1em .2em .6em #000;
}

.SearchTextE {
    text-align: center;
    font-size: 16px;
    letter-spacing: 7px;
    text-shadow: .1em .2em .6em #000;
}

@media(max-width:680px) {
    .SearchBarTitle {
        width: 100%;
    }

    .SearchBarButton {
        width: 125px;
        margin-left: auto;
    }

    .SearchBarBox {
        width: 100%;
        background-color: #FFF;
        margin: 0;
        padding: 0 5px;
    }

    .SearchTextC {
        text-align: left;
    }

    .SearchTextE {
        text-align: left;
    }
}

.SearchBG {
    background-image: url(../img/bg10.png) !important;
    background-repeat: repeat !important;
    background-color: rgba(0,0,0,0) !important;
}

.SearchBoxRow {
    display: none;
}

.SearchBoxRow2 {
    display: inline;
}

.SearchTypeBox {
    width: 100%;
    max-width: 445px;
    height: 250px;
    position: absolute;
    left: 64%;
    top: 15%;
    background-color: #FFF;
    box-shadow: .1em .2em 1em rgba(0,0,0,0.685);
    -webkit-box-shadow: .1em .2em 1em rgba(0,0,0,0.685);
    -moz-box-shadow: .1em .2em 1em rgba(0,0,0,0.685);
    padding: 20px;
}

@media (min-width:1024px) and (max-width:1350px) {
    .SearchTypeBox {
        width: 100%;
        max-width: 360px;
    }
}

@media(max-width:1024px) {
    .SearchTypeBox {
        width: 100%;
        height: 250px;
        background-color: #FFF;
        display: inline-block;
        position: relative;
        left: 0;
        top: 0;
        box-shadow: 0 0 0 #333;
        -webkit-box-shadow: 0 0 0 #333;
        -moz-box-shadow: 0 0 0 #333;
    }
}

.SearchTypeBox span {
    height: 20px;
    background-color: #FFF;
    padding-left: 15px;
    background-image: url(../img/following.png);
    background-position: left 50%;
    background-repeat: no-repeat;
}

.SearchAATAB1 td {
    vertical-align: top;
}

.SearchAATAB1 input {
    width: 20px;
    height: 24px;
    margin: 0;
    padding: 0;
    vertical-align: middle;
}

.SearchAATAB1 label {
    height: 24px;
    margin: 0;
    padding: 0;
    vertical-align: middle;
    /*color: #000;*/
}

@media(max-width:1024px) {
    .SearchBG {
        background-image: url(../img/bg10.png) !important;
        background-repeat: repeat !important;
    }

    .SearchBoxRow {
        display: inline;
    }

    .SearchBoxRow2 {
        display: none;
    }
}

.border-dark-cyan {
    border: 1px solid #457479;
}

.btn-shadow {
    box-shadow: .1em .2em .8em rgba(0,0,0,0.795);
}

.btn-p {
    padding: 10px 15px !important;
}

.btn-btn2 {
    color: #fff;
    border-radius: 8px;
    background: #457479;
    text-align: center;
}

.btn-search {
    padding: .375rem 1.8rem !important;
}

.btn-orange {
    background-color: #FEB62E;
    color: #175158;
}

    .btn-orange:hover {
        background-color: #FED381;
        color: #175158;
    }

.btn-dark-cyan {
    background: #457479;
    color: #FFF;
}

    .btn-dark-cyan:hover {
        background: #175258;
        color: #FFF;
    }

.btn-radius {
    border-radius: 0 8px 0 8px;
}

.text-dark-cyan {
    color: #457479;
}

.bg-cyan {
    background: #457479;
}

.bg-dark-cyan {
    background: #175258;
}

.bg-orange {
    background: #DDA933;
}

.border-dark-cyan {
    border-color: #457479 !important;
}

.font-20 {
    font-size: 20px !important;
}

.font-14 {
    font-size: 14px !important;
}

.w-90 {
    width: 90% !important;
}

.p-5p {
    padding: 5px !important;
}

.p-10 {
    padding: 10px !important;
}

.p-20 {
    padding: 20px !important;
}

.p-30 {
    padding: 30px !important;
}

.p-40 {
    padding: 40px !important;
}

.p-50 {
    padding: 50px;
}

.p-60 {
    padding: 60px;
}

.mt-30 {
    margin-top: 30px !important;
}

.mt-60 {
    margin-top: 60px !important;
}

.ml-20 {
    margin-left: 20px !important;
}

.mx-320 {
    width: 100%;
    max-width: 320px;
}

.mx-209 {
    width: 100%;
    max-width: 209px;
}

.mx-180 {
    width: 100%;
    max-width: 180px;
}

.LinkBox {
    width: calc((100% / 5));
    padding-left: 5px;
    padding-right: 5px;
}

@media(max-width:550px) {
    .LinkBox {
        width: 100%;
        padding-left: 5px;
        padding-right: 5px;
    }
}

.LinkItem {
    font-size: 20px;
    padding: 15px 0;
    width: 90%;
}

@media (min-width:553px) and (max-width:835px) {
    .LinkItem {
        font-size: 15px;
        padding: 15px 0;
    }
}

.HotTextC {
    font-size: 22px;
    color: #666;
}

.HotTextE {
    font-size: 18px;
    color: #C1272D;
}

.HotBox {
    box-shadow: .1em .2em .4em rgba(0,0,0,0.795);
    -webkit-box-shadow: .1em .2em .4em rgba(0,0,0,0.795);
    -moz-box-shadow: .1em .2em .4em rgba(0,0,0,0.795);
    min-height: 500px;
    height: auto;
    padding: 30px !important;
}

@media(max-width:768px) {
    .HotBox {
        box-shadow: 0 0 0 rgba(0,0,0,0.795);
        -webkit-box-shadow: 0 0 0 rgba(0,0,0,0.795);
        -moz-box-shadow: 0 0 0 rgba(0,0,0,0.795);
    }
}

.LinkDonate {
    display: block;
    margin: auto;
    line-height: 150px;
    width: 150px;
    text-align: center;
    background-color: #666;
    color: #000;
    text-decoration: none;
}

    .LinkDonate:hover {
        background-color: #505050;
        text-decoration: none;
    }

.LinkContact {
    margin-top: 5px !important;
    width: 100%;
    max-width: 150px;
    display: block;
    text-decoration: none;
    font-size: 15px;
    color: #666;
    background-image: url(../img/plain.png);
    background-repeat: no-repeat;
    background-position: right 50%;
    background-size: 30px 19px;
    padding-right: 30px;
}

    .LinkContact:hover {
        opacity: .6;
        color: #666;
        text-decoration: none;
    }

.HotItemBox {
    position: relative;
}

.HotBg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    max-width: 215px;
    height: 100%;
    text-align: left;
    color: #FFF;
    background-image: url(../img/hot-bg.png);
    background-repeat: no-repeat;
    background-size: cover;
    padding: 10px;
}

.HotImg {
    width: 100%;
    max-width: 215px;
}

.foot {
    font-size: 13px !important;
    line-height: 20px;
    margin: auto;
}

.HotList {
    display: block;
    display: -webkit-flex;
    display: -moz-flex;
    display: flex;
    -webkit-align-items: left;
    -webkit-moz-items: left;
    align-items: left;
    -webkit-justify-content: left;
    -moz-justify-content: left;
    justify-content: left;
    -webkit-flex-direction: row;
    -moz-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-flex-flow: row wrap;
    -moz-flex-flow: row wrap;
    flex-flow: row wrap;
    -webkit-align-content: flex-end;
    -moz-align-content: flex-end;
    align-content: flex-end;
}

    .HotList .HotBox2 {
        display: block;
        margin: 15px 10px;
        position: relative;
        width: 100%;
    }

@media (min-width:1000px) {
    .HotList .HotBox2 {
        width: calc(((100%) / 5) - 28px);
    }
}

@media (min-width:551px) and (max-width:999px) {
    .HotList .HotBox2 {
        width: calc(((100%) / 3) - 28px);
    }
}

.HotBoxBG {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    opacity: .2;
    padding: 5px;
}

    .HotBoxBG:hover {
        opacity: .2;
    }

.HotBoxTitle {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2;
    padding: 10px;
    color: #fff;
    text-align: left;
}

.HotBoxDonate {
    width: 150px;
    position: absolute;
    left: calc((100% - 150px)/2);
    top: calc((100% - 150px)/2);
    z-index: 2;
    color: #fff;
}

.SelectedRow {
    margin-left: -4px !important;
}

.SelectedBox {
    min-width: 2px;
    width: 100%;
    text-align: center;
    overflow: hidden;
    padding: 5px;
}

    .SelectedBox .SelectedBoxinput {
        position: relative;
        display: table;
        text-align: center;
        vertical-align: middle;
        text-decoration: none !important;
    }

        .SelectedBox .SelectedBoxinput .BoxImage {
            width: 100%;
            height: 100%;
            display: block;
            position: absolute;
            left: 0;
            top: 0;
            z-index: 2;
            background-image: url(../img/hot-bg2.png);
            background-repeat: no-repeat;
            background-size: cover;
            padding: 10px;
            opacity: .2;
        }

        .SelectedBox .SelectedBoxinput .BoxTitle {
            width: calc(100% - 10px);
            height: calc(100% - 10px);
            position: absolute;
            left: calc((100% - (100% - 10px))/2);
            top: calc((100% - (100% - 10px))/2);
            z-index: 3;
            justify-content: center;
            align-items: center;
            text-align: left;
            color: #FFF;
            display: flex;
            font-weight: 700;
            text-align: left;
        }

@media(max-width:1180px) and (min-width:995px) {
    .SelectedBox .SelectedBoxinput .BoxTitle {
        font-size: 12px;
    }
}

.SelectedBox:hover .SelectedBoxinput .BoxTitle {
    display: flex;
    z-index: 3;
    color: #FFF;
}

.SelectedBox:hover .SelectedBoxinput .BoxImage {
    opacity: .2;
}

.pb-50 {
    padding-bottom: 50px !important;
}

.GridRow {
    padding: 10px 0;
    color: #595959;
    font-size: 14px;
    border-bottom: 1px solid #A0A0A0;
    height: 60px;
}

    .GridRow:hover {
        background-color: #F2F2F2;
    }

    .GridRow td {
        padding-left: 5px;
    }

    .GridRow a {
        text-decoration: none;
        color: #595959;
    }

.GridHeader {
    background-color: #175258;
    color: #FFF;
    font-size: 15px;
    height: 50px;
}

    .GridHeader th {
        border-right: 1px solid #FFF;
        padding-left: 5px;
    }

        .GridHeader th:last-child {
            border-right: 1px solid #FFF;
        }

.chk input {
    width: 20px;
    height: 24px;
    margin: 0;
    padding: 0;
    vertical-align: middle;
}

.Pagerbtn {
    color: #A7A7A7;
    border: 0px;
    cursor: pointer;
}

    .Pagerbtn:hover {
        color: #A7A7A7;
        text-decoration: none;
    }

.Pagerspan {
    color: #736B66;
    padding: 1px 6px;
}
/*.GridPager {
    color: #595959;
    font-size: 13px;
    line-height: 50px;
}

    .GridPager span {
        margin: 5px;
        color: #736B66;
    }

    .GridPager a {
        margin: 5px;
        text-decoration: none;
        color: #A7A7A7;
    }*/

.bg-Lgo {
    background-color: #FAF2E5;
    color: #64635E;
    font-size: 14px;
}

.WrapLine {
    display: none;
}

@media(max-width:474px) {
    .WrapLine {
        display: block;
    }
}

.ViewButton {
    text-decoration: none !important;
    color: #666;
}

.nav-item3 {
    background-color: #FFF;
    margin-left: 3px;
    margin-top: 3px;
    text-align: center;
}

    .nav-item3 a {
        color: #457479;
        text-decoration: none !important;
        font-size: 13px !important;
        padding: 5px;
    }

        .nav-item3 a span {
            color: #FFF;
            background-color: #457479;
            font-size: 12px !important;
        }

    .nav-item3 input {
        color: #35656F;
        text-decoration: none !important;
        font-size: 13px !important;
    }

.nbs-flexisel-nav-left {
    display: block;
    left: -1%;
    background-image: url(../img/L.png);
    background-size: 45%;
    background-repeat: no-repeat;
    background-position: center center;
}

.nbs-flexisel-nav-right {
    display: block;
    right: -1%;
    background-image: url(../img/R.png);
    background-size: 45%;
    background-repeat: no-repeat;
    background-position: center center;
}

.ContactIcon {
    display: block;
    background-image: url(../img/iconArrowLeft.png);
    background-repeat: no-repeat;
    padding-left: 20px;
    background-size: 16px;
    background-position: 0 50%;
    text-align: left;
    font-size: 22px;
    margin-bottom: 36px;
    margin-top: 10px;
}

.PerData1 {
    display: block;
}

.PerData2 {
    display: none;
}

@media(max-width:1200px) {
    .PerData1 {
        display: none;
    }

    .PerData2 {
        display: block;
    }
}

.box {
    min-width: 2px;
    width: 90%;
    text-align: center;
    font-size: 16px;
    overflow: hidden;
    display: table;
    padding: 8%;
    margin: 0 5%;
}

.Boxinput {
    position: relative;
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    text-decoration: none !important;
}

    .Boxinput span {
        width: 100px;
        height: 50px;
        position: absolute;
        left: calc((100% - 100px)/2);
        top: calc((100% - 50px)/2);
    }

.bgBlack {
    background-color: #404040;
}

.border-white {
    border: 2px solid #FFF;
}

.liitem a {
    color: #989898;
    text-decoration: none;
}

.liitem img {
    display: none;
}

.liitem:hover a {
    color: #304F64;
}

.liitem:hover img {
    display: inline;
}

.liitem-Active a {
    color: #304F64;
    text-decoration: none;
}

.liitem-Active img {
    display: unset;
}

.AuthorSearchBarTitle {
    width: 175px;
    height: 50px;
    padding-top: 13px;
}

.AuthorSearchBarButton {
    width: 150px;
    height: 50px;
    padding-top: 5px;
}

    .AuthorSearchBarButton input {
        padding: 8px 50px;
    }

.AuthorSearchBarBox {
    width: calc(100% - 375px);
    margin: 0 20px;
    padding-left: 5px;
    background-color: #FFF;
    height: 50px;
}

    .AuthorSearchBarBox .AuthorSearchbar {
        width: 100% !important;
    }

@media(max-width:520px) {
    .AuthorSearchBarTitle {
        width: 100%;
    }

    .AuthorSearchBarButton {
        width: 135px;
        margin-left: auto;
    }

    .AuthorSearchBarBox {
        width: 100%;
        background-color: #FFF;
        margin: 0;
        padding: 0 5px;
    }
}

.groupbox {
    margin: 10px;
    padding: 10px;
}

.grouptitle {
    display: block;
    margin-top: -38px;
    text-align: center;
    background-color: #FFF;
    height: 25px;
}

.nav-link2 {
    color: #FFF;
    background-color: #720D05;
    border: 1px solid #720D05;
    cursor: pointer;
    width: 120px;
    height: 50px;
}

    .nav-link2:hover {
        color: #DE670D;
        background-color: #FEB62D;
        border: 1px solid #FEB62D;
    }

.nav-link3 {
    color: #FFF;
    background-color: #D44C02;
    border: 1px solid #D44C02;
    cursor: pointer;
    width: 120px;
    height: 50px;
}

    .nav-link3:hover {
        color: #DE670D;
        background-color: #FEB62D;
        border: 1px solid #FEB62D;
    }

.nav-link4 {
    color: #FFF;
    background-color: #4D4D4D;
    border: 1px solid #4D4D4D;
    cursor: pointer;
    width: 50px;
    height: 50px;
}

    .nav-link4:hover {
        color: #4D4D4D;
        background-color: #FEB62E;
        border: 1px solid #FEB62E;
    }

.nav-link5 {
    background-image: url(../img/iconArrowLeftR.png);
    background-repeat: no-repeat;
    padding-left: 20px;
    background-size: 10px;
    background-position: 0 50%;
    text-decoration: none;
    color: #4D4D4D;
    word-break: break-all;
}

    .nav-link5:hover {
        background-image: url(../img/iconArrowLeftR2.png);
        background-repeat: no-repeat;
        padding-left: 20px;
        background-size: 10px;
        background-position: 0 50%;
        color: #DBDBDB;
    }

@media (min-width: 576px) {
    .w-sm-90 {
        width: 90% !important;
    }
}

@media (min-width: 768px) {
    .w-md-90 {
        width: 90% !important;
    }
}

@media (min-width: 992px) {
    .w-lg-90 {
        width: 90% !important;
    }
}

@media (min-width: 1200px) {
    .w-xl-90 {
        width: 90% !important;
    }
}

.nbs-flexisel-container {
    position: relative;
    width: 100%;
}

.nbs-flexisel-inner {
    position: relative;
    overflow: hidden;
    float: left;
    width: 100%;
    margin-top: 4px;
    padding: 2px;
}

.OtherGal div {
    border: 1px solid #FFF;
}

.nbs-flexisel-ul {
    position: relative;
    width: 3000000px;
    margin: 0;
    padding: 0;
    list-style-type: none;
    text-align: center;
    overflow: auto;
}

.nbs-flexisel-item {
    float: left;
    margin: 0;
    padding: 0;
    position: relative;
    line-height: 150px;
    height: 150px;
    overflow: hidden;
}

.index_work_search_sec {
    float: left;
    border: 0 solid #CCC;
    text-align: center;
    font-size: 14px;
    color: #000;
    margin-left: 0;
    font-family: 微軟正黑體,Arial,Helvetica,sans-serif;
    letter-spacing: .1em;
    display: inline-block;
    overflow: hidden;
    width: 70% !important;
    max-width: 270px;
    height: auto;
}

    .index_work_search_sec:first-child {
        margin-left: 25px;
    }

.imgW150 {
    width: 100%;
    max-width: 150px;
    height: auto;
}

.imgH100 {
    height: 100%;
    max-height: 100px;
    width: auto;
}

.imgW200 {
    width: 100%;
    max-width: 200px;
    height: auto;
}

.imgH150 {
    height: 100%;
    max-height: 150px;
    width: auto;
}

.imgW400 {
    width: 100%;
    max-width: 400px;
    height: auto;
}

.imgH300 {
    height: 100%;
    max-height: 300px;
    width: auto;
}

.nbs-flexisel-nav-left, .nbs-flexisel-nav-right {
    padding: 15px;
    position: absolute;
    cursor: pointer;
    z-index: 4;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(255,255,255,0.0);
    color: #fff;
    width: 20px;
    height: 20px;
}

@media (max-width: 577px) {
    .nbs-flexisel-item {
        display: flex;
        justify-content: center;
    }

    .index_work_search_sec {
        margin-left: 0;
    }
}

.GalDetail {
    font-size: 15px;
}

.ShowDataValue {
    word-wrap: break-word !important;
    word-break: normal !important;
    flex: auto;
}

.LargeBox {
    justify-content: center;
    align-items: center;
    display: -webkit-flex;
    min-height: 300px !important;
}

.OtherGalBox {
    height: 175px;
    width: calc((100% / 6) - 20px);
    min-width: 1px;
    margin: 10px;
    position: relative;
    padding: 10px;
}

    .OtherGalBox:hover {
        background-color: #F9F2E4;
    }

.OtherLink {
    text-decoration: none !important;
}

    .OtherLink:hover {
        text-decoration: none !important;
    }

@media (min-width:581px) and (max-width:990px) {
    .OtherGalBox {
        width: calc((100% / 3) - 20px);
    }
}

@media(min-width:391px) and (max-width:580px) {
    .OtherGalBox {
        width: calc((100% / 2) - 20px);
        margin: 2px;
    }
}

@media (max-width:390px) {
    .OtherGalBox {
        width: calc(100% - 20px);
    }
}

.OtherGalBox2 {
    height: 175px;
    min-width: 1px;
    margin: 10px;
    position: relative;
    padding: 10px;
}

    .OtherGalBox2:hover {
        background-color: #F9F2E4;
    }


.OtherGalTitle {
    font-size: 14px;
    max-height: 45px;
    text-align: left;
    color: #4D4D4D;
    margin-top: 5px;
}

.back {
    color: #DDA933 !important;
    padding: 20px 20px 20px 30px;
    background-image: url(../img/back.png);
    background-repeat: no-repeat;
    background-size: 100px 30px;
    background-position: center center;
    text-decoration: none;
}

    .back:hover {
        color: #fff !important;
        background-image: url(../img/back-p.png);
        text-decoration: none;
    }

.ALinkC {
    color: #DDA933 !important;
    text-decoration: none;
    font-size: 10px !important;
    text-shadow: 0px 0px 0px #000 !important;
}

    .ALinkC:focus {
        color: #FFF !important;
    }

.ALinkU {
    position: absolute;
    left: 0;
    top: 0;
    color: #FFF !important;
    text-decoration: none;
    font-size: 10px !important;
}

    .ALinkU:focus {
        color: orange !important;
    }

@media (max-width: 400px) {
    .hid-sm {
        display: none !important;
    }
}

.must {
    font-weight: bold !important;
    vertical-align: middle !important;
    text-decoration: none !important;
    padding-top: 5px !important;
}
/*BootStrap列印不跑URL*/
@media print {
    a[href]:after {
        content: none !important;
    }
}

.ellipsis {
    min-height: 50px;
}

.ellipsis2 {
    min-height: 100px;
}

.ellipsis a {
    display: inline;
    -webkit-line-clamp: 2;
    text-overflow: ellipsis;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    word-wrap: break-word; /* Important for long words! */
}

.ellipsis2 a {
    display: inline;
    -webkit-line-clamp: 3;
    text-overflow: ellipsis;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    word-wrap: break-word; /* Important for long words! */
}

.SearchTextC2 {
    text-align: center;
    font-size: 23px;
}

.SearchTextE2 {
    text-align: center;
    font-size: 16px;
    letter-spacing: 7px;
}

@media (min-width: 1200px) {
    .SelectBoxItem {
        margin-right: 10px;
        width: calc((100% - 40px) / 5);
    }

        .SelectBoxItem:nth-child(5n) {
            margin-right: 0px;
        }
}

@media (min-width:756.01px) and (max-width: 1199.9px) {
    .SelectBoxItem {
        margin-right: 10px;
        width: calc((100% - 20px) / 3);
    }

        .SelectBoxItem:nth-child(3n) {
            margin-right: 0px;
        }
}

@media(max-width:756px) {
    .SelectBoxItem {
        margin-right: 0px;
        width: 100%;
    }
}
