/* adding css for icon */
.xl-hideicon {
    display:none;
}
@media (min-width: 1200px) {
    .xl-hideicon {
        display:none;
    }
}
@media (min-width: 1400px) {
    .xl-hideicon {
        display:block;
    }
}

.xl-showicon {
    display:block;
}
@media (min-width: 1400px) {
    .xl-showicon {
        display:none;
    }
}


/* adding css for icon */


body {
    font-family:'Noto Sans TC','Microsoft JhengHei',Arial,Helvetica,sans-serif;
    overflow-y:scroll;
    /* hide at 2020-02-21 for mobile display */
    /* min-width:490px */
}
header {
    min-width:1000px
}
main {
    margin-top:50px
}
@media (min-width: 576px) {
    main {
        margin-top:120px
    }
}
.main2 {
    margin-top:160px
}
.header {
    position:fixed;
    z-index:3;
    top:0;
    right:0;
    bottom:auto;
    left:0;
    background:#fff;
    box-shadow:0 0 15px 0px grey;
    min-width: 320px;
}
.head {
    position:relative;
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
    justify-content:space-between;
    min-height:60px;
    align-items:center;
    font-size:12pt
}
.head-logo-img {
    width:234px
}
.nav a {
    color:#056505
}
.main-header {
    position:fixed;
    /* z-index:3; */
    z-index:2;
    top:60px;
    right:0;
    bottom:auto;
    left:0;
    background:#056505
}
.main-head {
    position:relative;
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
    justify-content:space-between;
    min-height:50px;
    align-items:center
}
.main-head-nav {
    position:relative;
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
    justify-content:space-between;
    min-height:50px;
    align-items:center;
    width:100%
}
.table-nav a {
    color:#fff;
    font-size:10pt;
    padding-left:30px
}
.table-nav .nav-item {
    min-width:120px
}
.table-trans .nav-item {
}.content-div {
    position:relative;
    /*margin-top:50px;*/
    justify-content:center;
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
    top:20px;
}
.content-card {
    position:relative;
    transition:all 0.5s;
    font-size:10pt;
    width:350px;
    background:#fff;
    margin:10px;
    border:1px solid #e0e0e0
}
.content-card:hover {
    box-shadow:0 0 15px 0px grey
}
.banner-img {
    position:relative;
    display:block;
    color:inherit;
    border-radius:0;
    text-decoration:none;
    height:400px;
}
.card-img {
    position:relative;
    display:block;
    color:inherit;
    border-radius:0;
    text-decoration:none;
    height:140px;
    background:url(//media.artech-app.com/i/41c8d7b0-e915-4f6c-a365-3135f31091b8_1577086402.png?t=1) no-repeat center;
    background-size:100% auto
}
.card-img-title {
    position:absolute;
    display:flex;
    flex-direction:row;
    padding:4px 8px;
    background:rgba(0,0,0,0.5);
    z-index:0;
    top:auto;
    right:0;
    bottom:0;
    left:0
}
.card-content {
    position:relative
}
.card-title-div {
    position:relative;
    padding:8px
}
.card-title-span {
    position:relative;
    color:#056505;
    font-weight:bold;
    font-size:12pt
}
.card-detail {
    position:relative;
    display:flex;
    flex-direction:column;
    flex-wrap:wrap
}
.card-detail-tab {
    position:relative;
    display:flex;
    flex-direction:row;
    flex-wrap:wrap
}
.card-tab {
    position:relative;
    display:flex;
    flex-direction:row;
    width:50%;
    padding:0 4px;
    margin:4px 0
}
.card-tab-1 {
    position:relative;
    display:flex;
    flex-direction:row;
    width:90px
}
.card-tab-2 {
    position:relative;
    display:flex;
    flex-direction:row;
    flex-wrap:wrap
}
.card-lab {
    position:relative;
    display:flex;
    flex-direction:row;
    width:100%;
    padding:0 4px;
    margin:4px 0
}
.card-lab-1 {
    position:relative;
    display:flex;
    flex-direction:row;
    width:100px
}
.card-lab-2 {
    position:relative;
    display:flex;
    flex-direction:row;
    flex-wrap:wrap
}
.card-lab-label {
    position:relative;
    background:#558b2f;
    padding:2px 4px;
    cursor:pointer;
    user-select:none;
    -moz-user-select:none;
    -webkit-user-select:none;
    -ms-user-select:none;
    font-size:9pt;
    margin:2px
}
.card-button {
    position:relative;
    display:flex;
    flex-direction:row;
    margin:10px
}
.card-button-1 {
    position:relative;
    display:block;
    color:inherit;
    border-radius:4px;
    text-decoration:none;
    padding:10px 20px;
    background:#056505;
    text-align:center;
    margin:4px;
    flex:5
}
.card-button-2 {
    position:relative;
    padding:0 8px;
    border-radius:4px;
    outline:none;
    color:black;
    background-color:transparent;
    border:1px solid;
    min-width:100px;
    min-height:40px;
    background:#fff;
    border-color:#056505;
    margin:4px;
    flex:5
}
.cond-div {
    color:white;
    font-size:10pt;
    background:rgb(0,68,0);
    transition:all 0.5s ease 0s;
    z-index:2;
    width:100%
}
.cond-tab {
    position:relative;
    display:flex;
    flex-direction:row;
    flex-wrap:wrap
}
.cond-content {
    position:relative;
    display:flex;
    flex-direction:row;
    align-items:flex-start;
    margin:8px 0;
    width:140px
}
#cond-tab-transfer {
    margin:0;
    padding:0;
    user-select:none;
    -webkit-user-select:none;
    list-style:none
}
.range {
    position:relative;
    height:50px;
    margin:0 30px
}
.chunk-one,.chunk-two {
    position:absolute;
    left:0;
    top:15px;
    width:20px;
    height:20px;
    border-radius:50%;
    background-color:#fff;
    z-index:10;
    cursor:pointer;
    transition:all .05s linear;
    border:2px solid #409eff;
    box-sizing:border-box
}
.range .chunk-two {
    left:100%;
    background-color:#00ffFF
}
.chunk-one strong,.chunk-two strong {
    display:inline-block;
    margin-top:18px;
    text-align:center;
    font-weight:normal
}
.strip-one,.strip-two {
    position:absolute;
    left:0;
    top:25px;
    height:2px;
    width:100%;
    background-color:#999
}
.strip-two {
    width:100%;
    background-color:#409eff
}
.region2-title {
    font-size:12pt;
    color:#FF3030
}
.region2-item a {
    color:#fff
}
.cond-tab-region2 {
    padding-left:30px
}
.input-number {
    position:relative;
    text-align:center;
    width:60px;
    font-size:14pt
}
input::-webkit-outer-spin-button,input::-webkit-inner-spin-button {
    -webkit-appearance:none
}
input[type="number"] {
    -moz-appearance:field;
}
.cond-tab1 {
    padding-left:30px
}
.nav-cond {
    font-weight:bold
}
.cond-tab2-div {
    margin:0 auto;
    width:100%
}
.box-slide-1 {
    margin:0 auto;
    width:100%
}
.box-slide-2 {
    margin:0 auto;
    width:90%
}
.region-title {
    background-color:rgb(0,68,0);
    border:0;
    color:#bf360c;
    font-size:12pt;
    font-weight:bold
}
.page-a{
    position: relative;  display: flex;  color: #056505;  border-radius: 4px;  text-decoration: none;  align-items: center;  justify-content: center;  background: #fff;  border: 1px solid black;  border-color: lightgrey;  margin: 0 8px;
}
.form-btn{
    position: relative;  padding: 0 8px;  border-radius: 4px;  outline: none;  color: black;  background-color: transparent;  border: 0;  min-width: 200px;  min-height: 40px;  background: #056505;
}


.floating_btn.chatbot {
    position: fixed;
    bottom:10%;
    right: 3%;
    z-index:9;
}

.floating_btn .nav {
    display: -ms-flexbox;
    display: flex;
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
    flex-direction: column;
}