/* Large Layout: over 1280px. */
@media only screen and (min-width: 1280px) and (max-width: 4000px) {
    .header-text p{ font-size: 32px;}
    .header-text .button {
        right: 45px;
        top: 185px;
    }
    .rightMenu li{
        padding-left: 0.5vw;
    }
    .header-text .sixBox_area .sixBox { background-size: 50% 67%;}
}
@media only screen and (min-width: 1681px) and (max-width: 4000px) {

}
@media only screen and (min-width: 1081px) and (max-width: 1680px) {

}
/* Medium Layout: 1280px. Ex：iPad Pro */
@media only screen and (min-width: 1200px) and (max-width: 1280px) {
    .topslogan{
        display: inline-block;
        margin-top: 0;
        margin-left: 40px;
        color: #FFF;
        font: bold 20px/26px "Microsoft JhengHei";
        letter-spacing: 5px;
    }
    .topslogan.ts3 {
        width: 430px;
        background: url(../images/topslogan_03.png) 50% 50% no-repeat;
        background-size: 100% 100%;
    }
    .header-text h3 {
        font-size: 56px;
        letter-spacing: .26em;
        line-height: 65px;
        font-style: italic;
    }
    /*.header-text .button {
        right: 45px;
        top: 145px;
    }*/
}
/* Tablet Layout: 768px. */
@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .mainmenu-area #primary-menu > ul > li > a {
        padding: 30px 12px;
    }
    .header-area {
        padding-top: 80px;
    }
    .price-table,
    .box {
        padding: 30px 15px;
    }
    .price-table.active {
        padding: 50px 15px;
    }
    .single-team {
        margin-bottom: 30px
    }
    .side-icon-boxes {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
    }
    .topslogan{ margin-left: 0; }
    .topslogan.ts2{ width: 192px !important; background-size: 100% auto; }
    .topslogan.ts3{ width: 430px !important; background-size: 100% auto; }
    .header-text h2{ font-size: 34px; }
    .header-text h3{ font-size: 42px; }
    .header-text p{ font-size: 25px; }
    .header-text .button{ top: 180px; }
    .header-text .sixBox_area .sixBox {
        background-size: 68% 75%;
    }
    .rightMenu li{
        letter-spacing: 0;
        font-size: 15px;
        padding-left: 1.3vw;
    }
}
@media only screen and (min-width: 768px) and (max-width: 991px){
    .topslogan{ margin-left: 10px; }
    .topslogan.ts1,
    .topslogan.ts2{ display: none; }
    .topslogan.ts3{ width: 460px; background-size: 100% auto; }
    .header-text h3{ font-size: 44px; }
    .header-text .button{ top: 180px; }
    .header-text p{ font-size: 25px; }
    .header-text .sixBox_area .sixBox{ background-size: 65% 75%; }
}

/* Mobile Layout: 320px. */
@media only screen and (max-width: 767px) {
    body {
        font-size: 13px;
    }
    .header-area {
        padding-top: 120px;
        padding-bottom: 100px;
        height: auto;
    }
    .page-title{ margin-bottom: 10px; }
    .page-title h2,
    .header-text h2 {
        font-size: 25px;
        letter-spacing: .1em;
    }
    .header-text h3 { font-size: 26px; font-style: italic; color:#FFF;}
    .header-text .button {
        font-weight: bolder;
        position: absolute;
        right: 34%;
        top: 165px;
    }
    .header-text span{ padding-bottom:3px; /*border-bottom:3px #FFF solid;*/ }
    .header-text p {
        margin-top: 80px;
        font: italic 26px/32px "Microsoft JhengHei";
        font-weight: bolder;
        padding-bottom: 5px;
        border-bottom: none;
        text-align: center;
    }
    .header-text p.SLOGAN::after{ content:"用心傾聽每一個心聲，盡心幫助每一位需要的人~";}
    .box { padding: 0px 15px 30px 15px;}
    .section-padding.areaHH{ padding: 50px 0 10px 0; }
    .section-padding{ padding: 120px 0 10px 0; }
    .case2bg .page-title h2{ color: #333; }
    .case2bg .page-title{ color: #138fc2; }
    .case5bg{ background-size: 100% 20%; }
    .case5bg .box.ss2{ color: #555; }
    .case6bg{
        background: #dedede url("../images/case6bg.jpg") 50% 0 no-repeat;
        background-size: 100% 35%;
    }
    .case7bg .case7in{ width: 95vw; }
    .nbtel{ font-size: 30px; }


    .mainmenu-area .navbar-toggle {
        margin-top: 20px;
    }
    .mainmenu-area .navbar-toggle .icon-bar {
        background-color: #FFF;
    }
    .mainmenu-area #primary-menu {
        background: rgba(237,183,8,.8);
    }
    .mainmenu-area #primary-menu ul {
        overflow-y: auto;
        max-height: 85vh;
        margin: 0;
    }
    .mainmenu-area #primary-menu > ul > li > a {
        padding: 3px;
        overflow: hidden;
    }
    .box {
        padding: 30px 15px;
    }
    .box .box-icon {
        height: auto;
    }
    .single-blog,
    .single-team,
    .price-table.active {
        margin-top: 30px;
    }
    .form-double input {
        width: 100%;
    }
    .footer-top {
        margin-bottom: 50px;
    }
    .x-left {
        text-align: left;
    }
    .mainmenu-area .logo {
        margin-left: 15px;
    }
    .header-text .sixBox_area{
        width: 100%;
        height: 295px;
        border: 1px #fff solid;
        background: rgba(255,255,255,.7);
        -webkit-border-radius: 15px;
        -moz-border-radius: 15px;
        border-radius: 15px;
    }
    .header-text .sixBox_area > div{
        font: bold 28px/190px "Microsoft JhengHei";
        color: #2f60c3;
        height: 140px;
        text-align: center;
        text-indent: -99999px;
    }
    .header-text .sixBox_area .sixBox{ background-size: 82% 62%;}
    .topslogan{ display: none;}
    .mobilFooter{ display: inline-flex;}
    .footer-area{ padding-bottom: 50px; }
    .header-text .button { top: 245px; }
    .col-xs-12.mbhidden{ display: none; }
    .Wbg{ margin-top: -20px; }
}
@media only screen and (min-width: 721px) and (max-width: 767px) {
    .header-text h3{ font-size: 60px; }
    .header-text .button{ font-size: 22px; right: 40%;}
    .header-text p{ font-size: 28px; }
    .header-text .sixBox_area .sixBox {
        background-size: 55% 88%;
    }
    .case5bg{ background-size: 100% 40%; }
    .case6bg{
        background: #dedede url("../images/case6bg.jpg") 50% 0 no-repeat;
        background-size: 100% 50%;
    }
    .case8bg{ padding-bottom: 95px !important;}
    .footer-bottom{ padding-bottom: 45px; }
}
@media only screen and (min-width: 581px) and (max-width: 720px) {
    .header-text h3 { font-size: 44px;}
    .header-text .butto{ right: 39%; }
    .header-text .sixBox_area .sixBox { background-size: 70% 83%;}
}
@media only screen and (min-width: 554px) and (max-width: 580px) {
    .header-text h3{ font-size: 44px; }
    .header-text .button{ font-size: 22px; right: 35%;}
    .header-text p{ font-size: 32px; }
    .header-text .sixBox_area .sixBox {
        background-size: 63% 76%;
    }
    .case5bg{ background-size: 100% 33%; }
    .case6bg{
        background: #dedede url("../images/case6bg.jpg") 50% 0 no-repeat;
        background-size: 100% 50%;
    }
    .case8bg{ padding-bottom: 95px !important;}
    .footer-bottom{ padding-bottom: 45px; }
}
@media only screen and (min-width: 513px) and (max-width: 553px) {
    .header-text h3{ font-size: 40px; }
    .header-text .sixBox_area .sixBox {
        background-size: 70% 80%;
    }
}
@media only screen and (min-width: 361px) and (max-width: 512px) {
    .header-text h3{ font-size: 7vw; }
    .header-text .sixBox_area .sixBox {
        background-size: 84% 70%;
    }
    .sixBox{ width: 90px; height: 90px; }
}
@media only screen and (max-width: 360px) {
    .header-text h3 { font-size: 23px;}
    .page-title h2,
    .header-text h2 {
        font-size: 25px;
        letter-spacing: .1em;
    }
    .header-text .button { top: 188px; }
    .case5bg{ background-size: 100% 20%; }
    .case6bg{
        background: #dedede url("../images/case6bg.jpg") 50% 0 no-repeat;
        background-size: 100% 35%;
    }
    .sixBox{
        width: 88px;
        height: 85px;
    }
    .sixBox span{ display: none; }
}

/* Wide Mobile Layout: 480px. */
@media only screen and (min-width: 480px) and (max-width: 767px) {
    .topslogan{ display: none;}
}