@import url(https://fonts.googleapis.com/css?family=Indie+Flower);
.jqimgFill img,
.logo,
.top_menu,
.workList li,
.newsList li {
    -webkit-transition: 0.4s ease-in-out;
    -moz-transition: 0.4s ease-in-out;
    -ms-transition: 0.4s ease-in-out;
    -o-transition: 0.4s ease-in-out;
    transition: 0.4s ease-in-out
}

.top_menu>ul>li>a {
    -webkit-transition: 0.2s ease-in-out;
    -moz-transition: 0.2s ease-in-out;
    -ms-transition: 0.2s ease-in-out;
    -o-transition: 0.2s ease-in-out;
    transition: 0.1s ease-in-out
}

footer,
.footerBanner,
.mainContainer,
.contactUs,
.footerformation,
main,
.workList,
.newsList,
.newsList li,
.caseList li {
    zoom: 1
}

footer:before,
.footerBanner:before,
.mainContainer:before,
.contactUs:before,
.footerformation:before,
main:before,
.workList:before,
.newsList:before,
.newsList li:before,
.caseList li:before,
footer:after,
.footerBanner:after,
.mainContainer:after,
.contactUs:after,
.footerformation:after,
main:after,
.workList:after,
.newsList:after,
.newsList li:after,
.caseList li:after {
    content: "";
    display: table;
    height: 0;
    overflow: hidden
}

footer:after,
.footerBanner:after,
.mainContainer:after,
.contactUs:after,
.footerformation:after,
main:after,
.workList:after,
.newsList:after,
.newsList li:after,
.caseList li:after {
    clear: both
}

.top {
    margin-top: 25px;
    display: block
}

.jqimgFill img,
.logo,
.top_menu,
.workList li,
.newsList li {
    -webkit-transition: 0.4s ease-in-out;
    -moz-transition: 0.4s ease-in-out;
    -ms-transition: 0.4s ease-in-out;
    -o-transition: 0.4s ease-in-out;
    transition: 0.4s ease-in-out
}

.top_menu>ul>li>a {
    -webkit-transition: 0.2s ease-in-out;
    -moz-transition: 0.2s ease-in-out;
    -ms-transition: 0.2s ease-in-out;
    -o-transition: 0.2s ease-in-out;
    transition: 0.1s ease-in-out
}

footer,
.footerBanner,
.mainContainer,
.contactUs,
.footerformation,
main,
.workList,
.newsList,
.newsList li,
.caseList li {
    zoom: 1
}

footer:before,
.footerBanner:before,
.mainContainer:before,
.contactUs:before,
.footerformation:before,
main:before,
.workList:before,
.newsList:before,
.newsList li:before,
.caseList li:before,
footer:after,
.footerBanner:after,
.mainContainer:after,
.contactUs:after,
.footerformation:after,
main:after,
.workList:after,
.newsList:after,
.newsList li:after,
.caseList li:after {
    content: "";
    display: table;
    height: 0;
    overflow: hidden
}

footer:after,
.footerBanner:after,
.mainContainer:after,
.contactUs:after,
.footerformation:after,
main:after,
.workList:after,
.newsList:after,
.newsList li:after,
.caseList li:after {
    clear: both
}

.top {
    margin-top: 25px;
    display: block
}

body {
    position: relative;
    margin: 0 auto;
    height: auto !important;
    height: 100%;
    min-height: 100%;
    height: 100%;
    width: 100%;
    min-width: 320px !important;
    background: #f4f4f4;
    font-family: Arial, Verdana, 微軟正黑體;
    line-height: 1.7em;
    font-size: 14px
}

#wrapper {
    position: relative;
    margin: 0 auto;
    height: auto !important;
    height: 100%;
    min-height: 100%;
    height: 100%;
    width: 100%;
    min-width: 320px !important;
    background: #f4f4f4;
    overflow: hidden
}

html img {
    max-width: 100%
}

img {
    vertical-align: middle;
    max-width: 100%
}

* {
    outline: 0
}

* {
    margin: 0;
    padding: 0
}

*,
*:before,
*:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box
}

footer,
.footerBanner,
.mainContainer,
.contactUs,
.footerformation,
main,
.workList,
.newsList,
.newsList li,
.caseList li {
    zoom: 1
}

footer:before,
.footerBanner:before,
.mainContainer:before,
.contactUs:before,
.footerformation:before,
main:before,
.workList:before,
.newsList:before,
.newsList li:before,
.caseList li:before,
footer:after,
.footerBanner:after,
.mainContainer:after,
.contactUs:after,
.footerformation:after,
main:after,
.workList:after,
.newsList:after,
.newsList li:after,
.caseList li:after {
    content: "";
    display: table;
    height: 0;
    overflow: hidden
}

footer:after,
.footerBanner:after,
.mainContainer:after,
.contactUs:after,
.footerformation:after,
main:after,
.workList:after,
.newsList:after,
.newsList li:after,
.caseList li:after {
    clear: both
}

a:hover {
    -o-transition: color .20s linear, background-color .20s linear, border-color .20s linear;
    -webkit-transition: color .20s linear, background-color .20s linear, border-color .20s linear;
    -moz-transition: color .20s linear, background-color .20s linear, border-color .20s linear;
    transition: color .20s linear, background-color .20s linear, border-color .20s linear
}

.jqimgFill {
    position: relative;
    overflow: hidden;
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 100%;
    display: inline-block;
    transition: opacity .4s ease-in-out, transform .4s ease-in-out
}

.jqimgFill img,
.jqimgFill-tc img {
    position: absolute;
    left: 0;
    top: 0;
    margin: 0;
    display: block;
    width: auto;
    height: auto;
    min-width: 100%;
    min-height: 100%;
    max-height: none;
    max-width: none;
    transition: opacity .4s ease-in-out, transform .4s ease-in-out
}

.monlogo {
    display: none
}

.header {
    position: fixed;
    width: 100%;
    height: 158px;
    top: 0px;
    left: 0px;
    z-index: 1000;
    background: url(../images/headbg.jpg) top left repeat-x
}

.headBox {
    position: relative;
    width: 1200px;
    margin: 0 auto
}

.logo {
    position: absolute;
    left: 14px;
    top: 62px
}

.header .height50 {
    height: 50px;
    overflow: hidden
}

.header .height50 ul {
    list-style: none;
    float: right
}

.headBox .container {
    padding-right: 52px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
    max-width: 1200px;
    width: 100%;
    position: relative;
    top: 44px
}

.headBox .container li {
    position: relative;
    float: left;
    margin-top: 4px
}

.headBox .container li a {
    display: block;
    width: 40px;
    height: 40px
}

.headBox .container li:nth-child(1),
.headBox .container li:nth-child(2) {
    top: 2px;
    margin-right: 6px
}

.headBox .container .language_icon a {
    width: 44px;
    height: 44px;
    background: #bfa988;
    -webkit-border-radius: 99px;
    -moz-border-radius: 99px;
    border-radius: 99px;
    color: #fff;
    font-size: 22px;
    text-align: center;
    line-height: 44px;
    text-decoration: none
}

.headBox .container .language_icon a:hover {
    background: #794e96
}

.tel {
    font-size: 16px;
    font-weight: bold;
    width: 186px;
    height: 49px;
    color: #794e96;
    float: right;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin-left: 4px;
    padding-top: 6px
}

.tel a {
    width: 100%;
    display: block;
    color: #794e96;
    text-decoration: none;
    text-shadow: -2px 0px 5px #fff
}

.contact_btn a {
    float: right;
    width: 110px;
    height: 30px;
    line-height: 30px;
    text-decoration: none;
    display: block;
    margin: 10px 0 0 10px;
    background: #794e96;
    text-align: center;
    font-size: 16px;
    font-weight: bold;
    color: #fff;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px
}

.contact_btn a:hover {
    background: #bfa988
}

.bottomBanner {
    padding-top: 22px;
    width: 100%;
    clear: both;
    text-align: center
}

.bottomBanner li {
    vertical-align: top;
    display: inline-block;
    list-style: none
}

.bottomBanner li:nth-child(2) {
    margin: 0 5.95%
}

@media screen and (max-width: 1140px) {
    .bottomBanner li:nth-child(2) {
        margin: 0 4%
    }
}

.bottomBanner li a {
    width: 100%;
    display: block
}

.bottomBanner li img {
    width: 100%
}

@media screen and (max-width: 1140px) {
    .bottomBanner li {
        width: 30%
    }
}

footer {
    width: 100%;
    background: url(../images/fbg.jpg) top left repeat-y;
    border-bottom: 18px solid #c7ad93
}

.footerBox {
    width: 100%;
    max-width: 1100px;
    margin: 47px auto 0 auto
}

.fbc {
    width: 360px;
    display: block
}

.mob,
.madd {
    display: none
}

.fb {
    float: right
}

.add,
.sitmap {
    width: 28%;
    line-height: 25px;
    float: left;
    color: #82599d;
    font-size: 16px
}

.add ul,
.sitmap ul {
    list-style: none
}

.add .addTxt,
.sitmap .addTxt {
    margin-top: 23px;
    line-height: 27px
}

.sitmap {
    width: 39%;
    padding: 0 7px 0 45px
}

.sitmap li {
    width: 121px;
    float: left;
    margin-bottom: 8px
}

.sitmap li a {
    color: #82599d;
    text-decoration: none
}

.qrcode {
    float: left;
    margin-top: 9px
}

.qrcode h4 {
    font-size: 16px;
    font-weight: bold;
    display: block;
    margin-bottom: 5px;
    margin-top: 13px
}

.qrcode p {
    font-size: 11px
}

.glaml {
    width: 90px;
    padding-top: 6px;
    float: left
}

.qrTxt {
    color: #1b1b1b;
    width: 68%;
    float: left;
    padding-left: 15px
}

.copyhight {
    float: left;
    width: 100%;
    height: 26px;
    line-height: 40px;
    font-size: 14px;
    color: #626262;
    text-align: center;
    margin-top: 13px;
    margin-bottom: 20px
}

.micon {
    display: none
}

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

.index_page .banner .pic {
    height: 588px
}

@media screen and (max-width: 1366px) {
    .index_page .banner .pic {
        height: 528px
    }
}

@media screen and (max-width: 1190px) {
    .index_page .banner .pic {
        height: 360px
    }
}

@media screen and (max-width: 768px) {
    .index_page .banner .pic {
        height: 255px
    }
}

@media screen and (max-width: 480px) {
    .index_page .banner .pic {
        height: 130px
    }
}

@media screen and (max-width: 320px) {
    .index_page .banner .pic {
        height: 110px
    }
}

.banner .pic {
    height: 459px
}

@media screen and (max-width: 1190px) {
    .banner .pic {
        height: 360px
    }
}

@media screen and (max-width: 768px) {
    .banner .pic {
        height: 255px
    }
}

@media screen and (max-width: 480px) {
    .banner .pic {
        height: 126px
    }
}

@media screen and (max-width: 320px) {
    .banner .pic {
        height: 110px
    }
}

.online {
    position: absolute;
    right: -24px;
    width: 49px;
    opacity: 1;
    z-index: 1;
    transition: opacity .4s ease-in-out, transform .4s ease-in-out
}

.online.open {
    opacity: 1;
    transition: opacity .4s ease-in-out, transform .4s ease-in-out
}

.footerBanner {
    margin-bottom: 40px
}

.footerBanner li {
    width: 32.3%;
    float: left;
    margin-right: 15px
}

.footerBanner li:nth-child(3) {
    margin-right: 0
}

.mainContainer {
    max-width: 1300px;
    background-color: #fff;
    position: relative;
    margin: 0 auto;
    width: 100%;
    min-height: 500px;
    visibility: visible;
    -webkit-box-shadow: 0 0 6px 5px rgba(0, 0, 0, 0.07);
    -moz-box-shadow: 0 0 6px 5px rgba(0, 0, 0, 0.07);
    box-shadow: 0 0 6px 5px rgba(0, 0, 0, 0.07)
}

.top-shadow {
    width: 100%;
    height: 20px;
    background: url(../images/top-shadow.png) bottom center no-repeat;
    background-size: cover;
    position: absolute;
    top: -20px;
    left: 0
}

.left-shadow {
    width: 20px;
    height: 535px;
    background: url(../images/left-shadow.png) right center no-repeat;
    position: absolute;
    left: -20px;
    top: -20px
}

.right-shadow {
    width: 20px;
    height: 535px;
    background: url(../images/right-shadow.png) left center no-repeat;
    position: absolute;
    right: -20px;
    top: -20px
}

.right-main {
    float: left;
    width: -moz-calc(100% - 344px);
    width: -webkit-calc(100% - 344px);
    width: calc(100% - 344px);
    padding-left: 67px
}

.path {
    padding: 28px 32px 15px;
    font-size: 13px;
    color: #9d9d9d;
    text-align: right
}

.path span {
    font-size: 21px;
    vertical-align: top;
    margin: 0 4px 0 10px
}

.innerContent {
    font-size: 14px;
    color: #000;
    padding: 15px 45px 20px 0px;
    line-height: 24px;
    clear: both
}

.innerContent p {
    margin-bottom: 30px
}

.innerContent ol,
.innerContent ul {
    margin: auto;
    padding: 0 0 0 23px
}

.contactUs {
    float: left;
    padding: 0px 45px 40px 0px;
    width: 100%
}

.conTitle {
    background: url(../images/aline.jpg) 0px 6px repeat-x;
    line-height: 28px;
    margin-bottom: 22px
}

.conTitle h2 {
    background: #fff;
    color: #794e96;
    font-size: 23px;
    width: 224px;
    padding-left: 11px;
    border-left: 8px solid #794e96;
    height: 25px
}

.conTitle h2 span {
    display: inline-block;
    color: #878787;
    font-size: 17px;
    margin-left: 7px;
    font-weight: bold
}

.qat h2,
.csd h2 {
    width: 181px
}

.qat p,
.csd p {
    display: block;
    margin-top: 7px;
    margin-left: 22px;
    color: #000;
    font-size: 14px
}

.qat h2 {
    width: 78px
}

.qabox {
    margin-left: 22px
}

.qabox ul {
    margin-left: 16px
}

.qabox li {
    list-style: none
}

.qabox h3 {
    font-size: 20px;
    color: #a98f58;
    font-weight: bold;
    margin-bottom: 10px
}

.qabox h3:before {
    content: '';
    width: 6px;
    height: 6px;
    margin: 0px 7px 4px 0px;
    display: inline-block;
    background: url(../images/qt.png) top left no-repeat
}

.qabox .qa_list {
    margin-bottom: 10px;
    font-size: 17px;
    cursor: pointer
}

.qabox .qa_list:before {
    width: 11px;
    height: 10px;
    content: '';
    display: inline-block;
    background: url(../images/qaw.jpg) top left no-repeat;
    margin: 0 5px 0px 0
}

.qabox .qa_list.show:before {
    width: 11px;
    height: 2px;
    content: '';
    display: inline-block;
    background: url(../images/qad.jpg) top left no-repeat;
    margin: 0 5px 5px 0
}

.qabox .qa_content {
    display: none;
    font-size: 13px;
    padding: 19px;
    line-height: 22px;
    margin-left: 22px;
    margin-bottom: 20px;
    background: #ece1f1;
}
.csd {
    margin-bottom: 16px !important
}

.csd h2 {
    border-left: 8px solid #d9b8c4;
    color: #d9b8c4;
    width: 246px !important
}

.form-group {
    width: 100%;
    margin: 0;
    margin-bottom: 20px;
    padding-left: 22px
}

.control-label {
    float: left;
    width: 110px;
    text-align: left;
    font-weight: normal;
    font-size: 14px;
    padding-top: 7px;
    margin-bottom: 0
}

.control-label .red {
    color: #ff0000 !important
}

.col {
    float: left;
    width: -moz-calc(100% - 110px);
    width: -webkit-calc(100% - 110px);
    width: calc(100% - 110px);
    margin-bottom: 20px
}

.col:after {
    clear: both
}

.col textarea,
.col select,
.col input {
    display: block;
    width: 100%;
    height: 34px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    color: #555;
    background-color: #fff;
    background-image: none;
    border: 1px solid #d8d8d8;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s
}

.col textarea {
    height: 100px
}

.col .radio input {
    width: 18px;
    height: 18px;
    border: none;
    display: inline-block;
    box-shadow: none;
    vertical-align: sub;
    margin-right: 8px
}

.col #inputCode {
    display: inline;
    margin-right: 5px;
    width: 200px
}

.col .code-pic {
    display: inline;
    margin-right: 5px
}

.col .change {
    color: #960000;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.5s;
    text-decoration: none
}

.form-button {
    display: table;
    margin: 20px auto
}

.form-button .btn:first-of-type {
    background-color: #794e96
}

.form-button .btn:first-of-type:hover {
    background-color: #9c6bbd
}

.form-button .btn {
    font-family: Arial, Verdana, 微軟正黑體;
    display: inline-block;
    margin: 43px 5px 5px 5px;
    width: 110px;
    height: 35px;
    color: #fff;
    font-size: 18px;
    border: none;
    border-radius: 0;
    background-color: #dcc48e;
    transition: all 0.5s
}

.form-button .btn:hover {
    background-color: #ecd59f
}

.back {
    font-size: 14px;
    color: #666;
    text-decoration: none;
    text-align: right;
    margin: 0 40px 20px 0;
    float: right
}

.back:before {
    content: '';
    position: relative;
    top: 5px;
    display: inline-block;
    width: 35px;
    height: 29px;
    background: url(../images/back.jpg) 0px 0px no-repeat
}

.fb-like {
    margin-top: 12px;
    margin-bottom: 25px
}

a.top {
    display: block;
    margin-top: 35px
}

.footerformation {
    clear: both;
    width: 100%;
    color: #fff;
    padding: 54px 0 7px 0
}

.footerformation li {
    margin-bottom: 5px
}



@media screen and (max-width: 1190px) {
    .headBox {
        width: 100%
    }
    .logo {
        position: absolute;
        left: 14px;
        top: 15px
    }
    .mainContainer {
        margin-top: 0
    }
    .workList li,
    .newsList li {
        width: 27%
    }
    .online {
        right: 9px
    }
}

@media only screen and (max-width: 768px) {
    header {
        height: 133px !important;
        -webkit-box-shadow: 0 4px 3px rgba(0, 0, 0, 0.3);
        -moz-box-shadow: 0 4px 3px rgba(0, 0, 0, 0.3);
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2)
    }
    .tel {
        text-indent: -10000px;
        width: 73px;
        height: 73px;
        background: url(../images/phone.png) top left no-repeat;
        position: absolute;
        right: 21px;
        top: 0
    }
    .contact_btn a {
        display: none
    }
    .header .height50 {
        height: 73px
    }
    .header .height50 ul {
        list-style: none;
        display: none
    }
    .logo {
        position: absolute;
        left: 50%;
        top: 31px;
        margin-left: -179px
    }
    main {
        padding-top: 134px !important
    }
    .micon {
        display: block;
        margin: 15px 0 10px 0;
        text-align: center
    }
    .micon li {
        width: 15%;
        margin: 0 5px;
        max-width: 100px;
        display: inline-block
    }
    .fbc,
    .add,
    .sitmap {
        display: none
    }
    .mob {
        margin: 0 auto;
        display: block
    }
    .footerBox {
        width: 90%
    }
    .fb {
        float: none;
        text-align: center
    }
    .madd {
        display: block;
        font-size: 21px;
        color: #fff;
        margin-top: 30px
    }
    .madd .addlogo {
        text-align: center;
        margin-bottom: 36px
    }
    .madd .addTxt {
        color: #fff;
        font-size: 1em;
        padding-left: 15px;
        margin: 0 auto 31px auto;
        display: block;
        width: 60%;
        line-height: 46px;
        text-align: left
    }
    .footerBanner {
        display: none
    }
    .copyhight {
        float: none;
        height: 50px;
        line-height: 16px;
        text-align: center;
        margin-top: 22px;
        margin-bottom: 18px;
        padding-top: 19px
    }
    .copyhight span {
        margin-right: 20px
    }
    .copyhight span a {
        text-decoration: none;
        color: #b6b6b6
    }
    .path {
        padding: 0px 16px 50px;
        font-size: 1em;
        text-align: center
    }
    .innerContent {
        clear: both;
        font-size: 1.1em;
        padding: 15px 18px 20px 23px
    }
    .conTitle {
        margin-bottom: 32px
    }
    .control-label {
        width: 100%;
        margin-bottom: 8px
    }
    .col {
        width: -moz-calc(100%);
        width: -webkit-calc(100%);
        width: calc(100%)
    }
    .col #inputCode {
        width: 100%;
        margin-bottom: 15px
    }
    .contactUs {
        padding: 0px 18px 40px 23px
    }
    .fb-like {
        padding-left: 23px
    }
    .footerformation {
        margin-top: 15px
    }
    .footerformation li {
        margin-bottom: 10px
    }
    footer {
        border-top: 3px solid #dac8a8;
        background: url(../images/mfg.jpg) top left repeat-y
    }
    footer .monlogo {
        display: block;
        text-align: center;
        margin: 34px auto;
        width: 49%
    }
    footer .monlogo img {
        width: 100%
    }
    footer .madd .addTxt {
        color: #82599d;
        font-size: 30px
    }
}

@media screen and (max-width: 600px) {
    .logo {
        width: 49%;
        position: absolute;
        left: 50%;
        top: 44px;
        margin-left: -145px
    }
    .madd .addTxt {
        font-size: 0.8em
    }
    .indexContainer .project li .proTxt {
        width: 44% !important;
        margin-right: 6px !important
    }
    .indexContainer .project li h2 {
        font-size: 17px !important
    }
    .indexContainer .project li .proPhoto {
        width: 34% !important
    }
    .marquee {
        width: 85% !important
    }
    .innerContent img {
        width: 100% !important;
        height: auto !important
    }
    footer .addlogo {
        width: 70%
    }
}

@media screen and (max-width: 480px) {
    .logo {
        width: 227px;
        top: 36px;
        margin-left: -113.5px
    }
    header {
        height: 110px !important
    }
    .tel {
        width: 43px;
        height: 43px;
        background: url(../images/phone.png) top left no-repeat;
        background-size: cover;
        right: 9px
    }
    main {
        padding-top: 112px !important
    }
    .copyhight {
        line-height: 20px;
        font-size: 0.8em;
        padding-top: 10px;
        height: 42px
    }
    .copyhight span {
        margin-right: 9px
    }
    .hotTxt {
        width: 100% !important;
        overflow: hidden
    }
    .hotPhoto {
        width: 100% !important
    }
    .itemBox {
        padding: 39px 22px !important
    }
    .online {
        width: 45px
    }
    .fb-like {
        padding-left: 23px
    }
    .micon li {
        width: 17%;
        max-width: 91px;
        display: inline-block
    }
    .madd .addTxt {
        width: 73%
    }
    footer .madd .addTxt {
        color: #82599d;
        font-size: 22px
    }
}

@media screen and (max-width: 375px) {
    .logo {
        width: 57%;
        top: 40px;
        margin-left: -28.5%
    }
    footer .madd .addTxt {
        font-size: 19px
    }
}

@media screen and (max-width: 320px) {
    .copyhight {
        height: auto;
        font-size: 0.5em;
        padding-bottom: 7px
    }
    .tel {
        width: 40px;
        height: 40px
    }
    .hotPhoto,
    .hotTxt {
        width: 100% !important
    }
    .online {
        width: 34px
    }
    .indexContainer .maList h2 span,
    .indexContainer .case h2 span {
        font-size: 17px;
        background: #fff3e8;
        width: 32%
    }
    .madd .addTxt {
        font-size: 0.9em;
        line-height: 24px;
        width: 94%
    }
    .mob {
        width: 100%
    }
    .micon li {
        max-width: 75px
    }
    .addlogo img {
        width: 57%
    }
    .indexContainer .project li h2 {
        font-size: 17px !important
    }
    .indexContainer .project li small {
        font-size: 0.5em;
        line-height: 22px
    }
}

.top_menu {
    float: right;
    position: relative;
    top: 40px;
    padding-right: 38px;
    height: 67px
}

.top_menu ul {
    list-style: none;
    margin: 0
}

.top_menu>ul>li {
    display: block;
    position: relative;
    float: left;
    height: 68px;
    padding: 8px 0px 0 0px;
    margin-left: 13px
}

.top_menu>ul>li>a {
    display: block;
    padding: 4px;
    font-family: "PT Sans", "微軟正黑體", Microsoft JhengHei, Arial, Helvetica, sans-serif;
    font-size: 18px;
    padding: 15px 12px;
    height: 60px;
    color: #5b3d6a;
    letter-spacing: 1px;
    position: relative;
    text-align: center;
    line-height: 1.2em;
    text-decoration: none
}

.top_menu>ul>li:first-child {
    margin-left: 0
}

.top_menu>ul>li>a:hover,
.top_menu>ul>li>a.cur,
.top_menu>ul>li>a.on {
    border-bottom: 3px solid #794e96;
    padding-bottom: 12px;
    background: #fff
}

.top_menu .submenu {
    display: none;
    position: absolute;
    min-width: 100%;
    top: 68px;
    left: 0px;
    background: #fff;
    opacity: 0.95
}

.top_menu .submenu li {
    display: block;
    float: none;
    border-bottom: solid 0.1em #e5e5e5
}

.top_menu .submenu li:last-child a span {
    border-bottom: none
}

.top_menu .submenu a {
    font-size: 17px;
    display: block;
    padding: 16px 71px 8px 15px;
    color: #434343;
    white-space: nowrap;
    text-decoration: none
}

.top_menu .submenu a:hover {
    color: #794e96
}

#mo {
    top: 0px;
    right: 0px;
    width: 100%;
    padding-left: 29px
}

#mo a {
    background: none;
    text-indent: 0;
    display: block;
    width: 115px;
    height: 67px;
    float: left;
    top: 0;
    left: 0;
    padding: 0;
    text-align: left
}

#mo a:hover {
    color: #fcfec6
}

#mo li ul.submenu li {
    font-size: 15px;
    text-align: left;
    width: 100%;
    float: left
}

#mo li ul.submenu li a {
    padding: 0 0 0 24px;
    height: 38px
}

.top_menu>ul>li.language_mo {
    display: none
}

@media screen and (max-width: 768px) {
    .top_menu>ul>li.language_mo {
        display: block;
        background: rgba(109, 52, 147, 0.92);
        padding: 25px 0
    }
    .top_menu>ul>li.language_mo a {
        text-align: center;
        display: block;
        margin: 0 auto;
        padding: 0;
        font-size: 30px;
        line-height: 55px;
        width: 62px;
        height: 55px;
        background: #bfa988;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px
    }
    .top_menu>ul>li.language_mo a:before {
        display: none !important
    }
    .top_menu {
        position: absolute;
        top: 15px;
        left: 0;
        border-bottom: none;
        background: none;
        z-index: 100
    }
    .top_menu .submenu {
        position: inherit !important;
        left: auto;
        top: auto;
        background: #f2f2f2;
        margin: 0;
        width: 100%;
        padding: 0
    }
    .top_menu .submenu li {
        border-bottom: solid 1px #eee;
        background: #c59de0;
        padding: 5px 20px
    }
    .top_menu .submenu li a {
        font-size: 20px;
        color: #fff;
        padding: 10px 20px 10px 10px
    }
    .top_menu .submenu li a:before {
        content: '';
        background: url(../images/arre.png) top left no-repeat;
        width: 25px;
        height: 22px;
        display: inline-block;
        position: relative;
        top: 5px;
        margin-right: 10px
    }
    .top_menu>ul {
        position: fixed;
        top: 133px;
        left: -100%;
        padding: 0;
        width: 100%;
        height: 100%;
        overflow: auto;
        -webkit-transition: 0.4s ease-in-out;
        -moz-transition: 0.4s ease-in-out;
        -ms-transition: 0.4s ease-in-out;
        -o-transition: 0.4s ease-in-out;
        transition: 0.4s ease-in-out;
        z-index: 200
    }
    .top_menu ul.on {
        left: 0
    }
    .top_menu>ul>li {
        display: block;
        float: none;
        margin: 0;
        border-bottom: solid 1px #fff;
        height: auto;
        padding: 0px;
        background: none
    }
    .top_menu>ul>li>a {
        font-size: 1.5em;
        padding: 20px 30px;
        margin: 0;
        text-align: left;
        color: #fff;
        background: rgba(109, 52, 147, 0.92)
    }
    .top_menu>ul>li>a:before {
        content: '';
        background: url(../images/foww.png) top left no-repeat;
        width: 25px;
        height: 22px;
        display: inline-block;
        margin-right: 10px;
        position: relative;
        top: 2px
    }
    .top_menu .submenu a:hover {
        background: none;
        color: #000
    }
    .top_menu>ul>li>a:hover,
    .top_menu>ul>li>a.cur,
    .top_menu>ul>li>a.on {
        border: 0;
        background: #6d3493
    }
    .top_menu .icon:before {
        display: block;
        content: "\f0c9";
        font-family: FontAwesome;
        font-style: normal;
        font-weight: normal;
        text-decoration: inherit;
        color: #fff;
        background: #794e96;
        font-size: 43px;
        position: absolute;
        top: 15px;
        left: 20px;
        width: 74px;
        height: 78px;
        z-index: 100;
        padding: 29px 8px 10px 18px
    }
    .top_menu .icon.on:before {
        display: block;
        content: "\f00d";
        font-family: FontAwesome;
        font-style: normal;
        font-weight: normal;
        text-decoration: inherit;
        color: #fff;
        position: absolute;
        top: 19px;
        left: 10px;
        z-index: 100
    }
}

@media screen and (max-width: 480px) {
    .top_menu .icon:before {
        font-size: 31px;
        top: 19px;
        left: 10px;
        width: 45px;
        height: 50px;
        padding: 14px 8px 10px 9px
    }
    .top_menu>ul {
        top: 111px
    }
}

@media screen and (max-width: 320px) {
    .top_menu>ul {
        top: 112px
    }
    .top_menu .icon:before {
        font-size: 27px;
        left: 7px;
        width: 40px;
        height: 45px;
        padding: 12px 7px 10px 8px
    }
}

.leftNav {
    float: left;
    width: 323px;
    margin-top: 15px;
    padding-bottom: 28px
}

.leftNav h2 {
    text-indent: -10000px
}

.leftNav ul {
    list-style: none
}

.leftMenu {
    margin-left: 22px;
    padding-bottom: 40px;
    width: 289px;
    -webkit-box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.05);
    -moz-box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.05);
    box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.05)
}

.title1,
.title2,
.title3,
.title4,
.title5,
.title6,
.title7,
.title8,
.title9 {
    height: 69px;
    margin-left: 21px
}

.title1 {
    background: url(../images/p_title1.jpg) top left no-repeat
}

.title2 {
    background: url(../images/p_title2.jpg) top left no-repeat
}

.title3 {
    background: url(../images/p_title3.jpg) top left no-repeat
}

.title4 {
    background: url(../images/p_title4.jpg) top left no-repeat
}

.title5 {
    background: url(../images/p_title5.jpg) top left no-repeat
}

.title6 {
    background: url(../images/p_title6.jpg) top left no-repeat
}

.title7 {
    background: url(../images/p_title7.jpg) top left no-repeat
}

.title8 {
    background: url(../images/p_title8.jpg) top left no-repeat
}

.title9 {
    background: url(../images/p_title9.jpg) top left no-repeat
}

.thm .thtit a:before {
    display: inline-block;
    width: 10px;
    height: 12px;
    content: '';
    background: url(../images/me_2.png) 0px 0px no-repeat;
    background-size: cover;
    margin-right: 5px
}

.thm .thtit a,
.thm .thtit h3 {
    font-size: 17px;
    color: #703d57;
    font-weight: bold;
    display: block;
    margin-left: 0px;
    padding-left: 0
}

.thm .thtit h3 {
    margin: 0 0 20px 54px;
    padding-top: 16px
}

.thm .thtit h3::before {
    display: inline-block;
    width: 10px;
    height: 12px;
    content: '';
    background: url(../images/me_2.png) 0px 0px no-repeat;
    background-size: cover;
    margin-right: 5px
}

.thm li {
    line-height: 25px;
    padding-left: 53px;
    padding-top: 16px;
    padding-bottom: 14px;
    border-bottom: 1px dashed #e6e6e6;
    width: 87%;
    margin: 0 auto
}

.thm li a {
    width: 100%;
    display: block;
    font-size: 17px;
    text-decoration: none;
    color: #5c5c5c
}

.thm li a:before {
    display: inline-block;
    width: 10px;
    height: 12px;
    content: '';
    background: url(../images/me_2.png) 0px 0px no-repeat;
    background-size: cover;
    margin-right: 5px;
    position: relative;
    top: -2px
}

.thm li a:hover {
    color: #703d57
}

.thm li a:hover:before {
    width: 10px;
    height: 12px;
    background-size: cover
}

.myu li a:before {
    content: "";
    display: inline-block;
    width: 5px;
    height: 5px;
    background: url(../images/qwr.jpg) 0 0 no-repeat;
    background-size: cover
}

.myu li a:hover:before {
    width: 5px;
    height: 5px;
    background-size: cover
}

.myu .ruc a {
    color: #794e96;
    font-weight: bold
}

.myu li {
    border: none;
    padding-bottom: 0px;
    padding-top: 8px
}

.myu li a {
    height: auto;
    font-size: 14px;
    line-height: 24px;
    width: 100%;
    background: none
}

.myu li a:after {
    content: "";
    display: block;
    float: right;
    width: 36px;
    height: 30px;
    background: url(../images/arwr.png) 10px 8px no-repeat
}

.caseTitle h3 {
    font-size: 20px;
    color: #585858;
    font-weight: bold;
    display: block;
    margin: 50px 0 5px 0
}

.caseTitle time {
    color: #ffcb30;
    font-size: 18px
}

.thm .hit a {
    font-size: 16px;
    font-weight: bold;
    color: #d6824c
}

.serMenu {
    margin-top: 9px
}

.serMenu li {
    zoom: 1;
    border-bottom: 1px dashed #e6e6e6;
    width: 87%;
    margin: 0 auto;
    margin-bottom: 5px;
    padding-bottom: 4px;
    background: url(../images/menuline.jpg) bottom right no-repeat
}

.serMenu li:before,
.serMenu li:after {
    content: "";
    display: table;
    height: 0;
    overflow: hidden
}

.serMenu li:after {
    clear: both
}

.serMenu li a {
    padding-left: 37px;
    display: block;
    width: 100%;
    height: 40px;
    line-height: 40px;
    font-size: 17px;
    color: #916da5;
    text-decoration: none
}

.serMenu li a:before {
    display: inline-block;
    width: 10px;
    height: 12px;
    content: '';
    background: url(../images/me_1.png) 0px 0px no-repeat;
    background-size: cover;
    margin-right: 5px
}

.serMenu li a:hover {
    color: #703d57
}

.serMenu .submenu {
    display: none
}

.serMenu .submenu li {
    border: none;
    zoom: 1;
    background: none
}

.serMenu .submenu li a {
    color: #5c5c5c;
    height: 23px;
    font-size: 14px;
    line-height: 24px;
    width: 100%
}

.serMenu .submenu li a:before {
    display: inline-block;
    width: 5px;
    height: 5px;
    content: '';
    background: url(../images/qwr.jpg) 0px 0px no-repeat;
    background-size: cover;
    margin-right: 5px;
    position: relative;
    top: -2px
}

.serMenu .submenu li a:hover {
    color: #703d57
}

.serMenu .submenu li span {
    display: inline-block;
    width: 78%
}

.leftbanne {
    margin: 22px 0 250px 11px
}

.leftbanne ul {
    list-style: none
}

.leftbanne li {
    text-align: center;
    display: block;
    margin-bottom: 20px
}

.leftbanne li a {
    display: block;
    width: 288px;
    margin: 0 auto
}

.leftbanne li a img {
    width: 100%
}

.monbanne {
    display: none
}

@media screen and (max-width: 768px) {
    .leftbanne {
        display: none
    }
    .leftMenu {
        box-shadow: none
    }
    .leftNav,
    .right-main {
        width: 100%;
        padding-left: 0
    }
    .title1 {
        background: url(../images/mtitle1.jpg) top center no-repeat
    }
    .title2 {
        background: url(../images/mtitle2.jpg) top center no-repeat
    }
    .title3 {
        background: url(../images/mtitle3.jpg) top center no-repeat
    }
    .title4 {
        background: url(../images/mtitle4.jpg) top center no-repeat
    }
    .title5 {
        background: url(../images/mtitle5.jpg) top center no-repeat
    }
    .title6 {
        background: url(../images/mtitle6.jpg) top center no-repeat
    }
    .title7 {
        background: url(../images/mtitle7.jpg) top center no-repeat
    }
    .title8 {
        background: url(../images/mtitle8.jpg) top center no-repeat
    }
    .title9 {
        background: url(../images/mtitle9.jpg) top center no-repeat
    }
    .leftMenu {
        margin: 0 auto;
        width: 86%
    }
    .leftNav {
        margin-top: 43px;
        padding-bottom: 0px
    }
    .thm .thtit {
        width: 96%;
        padding: 23px 0 16px 207px
    }
    .thm .thtit h3 {
        font-size: 26px;
        height: 22px;
        margin: 0;
        padding: 0;
        background: none
    }
    .thm .thtit h3:before {
        width: 10px;
        height: 12px;
        content: "";
        display: -webkit-inline-box;
        position: relative;
        top: -2px
    }
    .thm .thtit a {
        margin: 0;
        padding: 0;
        background: none
    }
    .thm .thtit a:before {
        width: 10px;
        height: 12px;
        content: "";
        display: inline-block;
        background: url(../images/me_2.png) 0px 0px no-repeat;
        background-size: cover
    }
    .myu a:before {
        display: inline-block;
        width: 5px;
        height: 5px;
        content: '';
        background: url(../images/qwr.jpg) 0px 0px no-repeat;
        background-size: cover;
        margin-right: 5px;
        position: relative;
        top: -2px
    }
    .thm li {
        width: 96%;
        padding-left: 208px
    }
    .thm li a {
        font-size: 17px !important;
        background: none
    }
    .thm .hit a {
        font-size: 20px
    }
    .serMenu {
        margin-top: 46px
    }
    .serMenu li {
        zoom: 1;
        width: 100%;
        padding-bottom: 14px
    }
    .serMenu li:before,
    .serMenu li:after {
        content: "";
        display: table;
        height: 0;
        overflow: hidden
    }
    .serMenu li:after {
        clear: both
    }
    .serMenu li a {
        padding-left: 41%;
        padding-bottom: 22px;
        display: block;
        width: 100%;
        height: 31px;
        line-height: 40px;
        font-size: 23px;
        color: #6d5f56;
        text-decoration: none
    }
    .serMenu>a:after {
        background: url(../images/arwr.png) 10px 16px no-repeat
    }
    .serMenu .submenu {
        margin-top: 28px
    }
    .serMenu .submenu li {
        padding-bottom: 0px;
        zoom: 1;
        padding-left: 270px;
        margin-bottom: 1px
    }
    .serMenu .submenu li:before,
    .serMenu .submenu li:after {
        content: "";
        display: table;
        height: 0;
        overflow: hidden
    }
    .serMenu .submenu li:after {
        clear: both
    }
    .serMenu .submenu li a {
        padding-left: 94px;
        height: 21px;
        background: none;
        font-size: 18px;
        text-align: left;
        padding: 0;
        height: 14px;
        background: none
    }
    [class*="title"] {
        margin-left: 0;
        height: 84px
    }
}

@media screen and (max-width: 640px) {
    .serMenu .submenu li {
        padding-left: 215px
    }
    .thm li {
        padding-left: 81px
    }
    .thm .thtit {
        padding: 17px 0 17px 81px
    }
    .abt .thm li {
        padding-left: 63px
    }
    .abt .thm .thtit {
        padding: 17px 0 17px 63px
    }
}

@media screen and (max-width: 480px) {
    .monbanne {
        display: block;
        width: 90%;
        margin: 0 auto;
        clear: both;
        text-align: center
    }
    .monbanne li {
        list-style: none;
        margin-bottom: 15px
    }
    .monbanne img {
        width: 100%
    }
    [class*="title"] {
        height: 65px;
        background-size: 92%
    }
    .thm .thtit h3 {
        margin-left: 0;
        padding: 0;
        font-size: 23px;
        text-align: left
    }
    .thm .hit a {
        font-size: 1.3em;
        padding-left: 0
    }
    .thm li a {
        font-size: 1.3em;
        padding-left: 0
    }
    .serMenu li {
        margin-left: 0 !important
    }
    .serMenu li a {
        padding-left: 33%
    }
    .serMenu li a:after {
        content: "";
        display: block;
        float: right;
        width: 46px;
        height: 30px;
        background: url(../images/arwr.png) 0px 16px no-repeat
    }
    .serMenu .submenu li {
        padding-left: 116px
    }
}

@media screen and (max-width: 375px) {
    .serMenu .submenu li {
        padding-left: 105px
    }
    .serMenu .submenu li a {
        width: 91%
    }
    .thm li {
        padding-left: 70px
    }
    .thm .thtit {
        padding: 17px 0 17px 70px
    }
    .abt .thm li {
        padding-left: 54px
    }
    .abt .thm .thtit {
        padding: 17px 0 17px 54px
    }
}

@media screen and (max-width: 360px) {
    .thm li {
        padding-left: 70px
    }
    .thm .thtit {
        padding: 17px 0 17px 70px
    }
    .abt .thm li {
        padding-left: 56px
    }
    .abt .thm .thtit {
        padding: 17px 0 17px 56px
    }
}

@media screen and (max-width: 320px) {
    .serMenu .submenu li {
        padding-left: 88px
    }
    .serMenu .submenu li a {
        width: 89%
    }
    .thm li {
        padding-left: 63px
    }
    .thm .thtit {
        padding: 17px 0 17px 63px
    }
    .abt .thm li {
        padding-left: 50px
    }
    .abt .thm .thtit {
        padding: 17px 0 17px 50px
    }
}

main {
    padding-top: 156px;
    width: 100%;
    background: url(../images/mrbg.png) top left repeat
}

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

.mainBox {
    position: relative;
    background: none
}

.workList,
.newsList {
    margin: 22px auto 18px auto
}

.newsList {
    margin: 22px auto
}

.workList li,
.newsList li {
    width: 30%;
    height: 214px;
    position: relative;
    float: left;
    display: block;
    margin-right: 25px;
    opacity: 1
}

.workList li:nth-child(3n),
.newsList li:nth-child(3n) {
    margin-right: 0
}

.workList li span,
.newsList li span {
    background: rgba(142, 104, 64, 0.9);
    width: 100%;
    line-height: 34px;
    position: absolute;
    z-index: 99;
    bottom: 0;
    text-align: center;
    color: #fff;
    font-size: 19px;
    letter-spacing: 2px
}

.newsList li,
.caseList li {
    float: left;
    height: 425px;
    overflow: hidden;
    text-align: justify;
    transition: all 0.5s;
    background: #fff;
    margin-bottom: 16px;
    transition: transform .3s, -webkit-transform .3s
}

.newsList a,
.caseList a {
    width: 100%;
    display: block;
    text-decoration: none;
    transition: opacity .4s ease-in-out, transform .4s ease-in-out
}

.newsList a:hover p,
.caseList a:hover p {
    color: #666
}

.newsList a:hover .more,
.caseList a:hover .more {
    color: #fff;
    background: #d95e92
}

.newsList a:hover .jqimgFill,
.caseList a:hover .jqimgFill {
    opacity: 1;
    transform: scale(1.05)
}

.newsList .casePhoto,
.caseList .casePhoto {
    margin-bottom: 10px;
    position: relative;
    height: 204px
}

.newsList .casePhoto .video_icon,
.caseList .casePhoto .video_icon {
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    position: absolute;
    background: rgba(0, 0, 0, 0.2)
}

.newsList .casePhoto .video_icon i,
.caseList .casePhoto .video_icon i {
    display: block;
    width: 69px;
    height: 69px;
    background: url(../images/video_icon.png) no-repeat;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -34.5px;
    transform: translateY(-50%)
}

.newsList .caseTxt,
.caseList .caseTxt {
    padding: 4px 15px 20px 15px;
    width: 100%
}

.newsList .caseTxt time,
.caseList .caseTxt time {
    font-family: Georgia, sans-serif;
    text-align: center;
    display: block;
    font-size: 17px;
    color: #d9b8c4
}

.newsList .caseTxt h4,
.caseList .caseTxt h4 {
    text-align: center;
    color: #7d5298;
    font-size: 16px;
    font-weight: bold;
    line-height: 25px;
    margin: -3px 0 13px;
    max-height: 55px;
    overflow: hidden;
    letter-spacing: 1px
}

.newsList .caseTxt .line,
.caseList .caseTxt .line {
    height: 1px;
    width: 50px;
    margin-top: 5px;
    margin-bottom: 10px;
    background-color: #ae751c
}

.newsList .caseTxt p,
.caseList .caseTxt p {
    width: 100%;
    height: 74px;
    overflow: hidden;
    display: block;
    color: #777
}

.newsList img,
.caseList img {
    left: 0 !important;
    right: 0 !important
}

.newsList .more,
.caseList .more {
    color: #e06d9e;
    display: block;
    width: 68px;
    height: 27px;
    line-height: 24px;
    background: none;
    font-size: 13px;
    position: inherit;
    border: 1px solid #e06d9e;
    margin: 13px auto 0 auto;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px
}

.newsList .more:after,
.caseList .more:after {
    content: "▶";
    display: block;
    float: right;
    width: 10px;
    height: 30px;
    background: url(../images/arwr.png) 4px 0px no-repeat;
    position: relative;
    top: 2px;
    left: -9px
}

.caseBox li {
    width: 96%;
    position: relative;
    height: auto;
    border-bottom: 1px solid #dedede
}

.caseBox li .caseTxt {
    padding: 0px 15px 0 0px
}

.caseBox li i {
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 9
}

.pager_bar {
    padding: 0px 5px 47px;
    text-align: center;
    clear: both
}

.pager_bar a:hover,
.pager_bar a.cur {
    color: #fff;
    background: #794e96
}

.pager_bar a {
    text-decoration: none;
    display: inline-block;
    padding: 0 10px;
    line-height: 30px;
    margin: 0 5px 0 0;
    color: #aaaaaa;
    font-size: 18px
}

.mainTitle h2 {
    font-size: 25px;
    color: #794e96;
    font-weight: 500
}

.mainTitle time {
    font-family: Georgia, sans-serif;
    color: #d9b8c4;
    font-size: 20px
}

.doctorsList ul {
    list-style: none
}

.doctorsList li {
    width: 96%;
    border-bottom: 1px solid #d2d2d2;
    float: left;
    padding: 0px 0 15px;
    margin-bottom: 39px
}

.lines,
.doctorsTxt {
    float: left
}

.lines {
    width: 238px;
    height: 325px;
    padding: 6px 6px;
    border: 1px solid #eeeeee
}

.lines:after {
    content: '';
    width: 100%;
    height: 20px;
    display: block;
    background: url(../images/sshow.jpg) bottom center no-repeat;
    background-size: cover
}

.doctorsTxt {
    width: 50%;
    padding: 14px 0 0 33px
}

.doctorsTxt h2 {
    font-size: 28px;
    color: #009790;
    margin-bottom: 27px;
    display: block
}

.doctorsTxt .doctorConter {
    font-size: 15px;
    line-height: 26px
}

.teamHeader {
    clear: both;
    margin-top: 10px;
    margin-bottom: 30px
}

.teaMore {
    clear: both;
    display: block;
    float: right;
    width: 11%;
    padding: 5px 0;
    text-decoration: none;
    text-align: center;
    color: #fff;
    font-weight: bold;
    font-size: 14px;
    background: #009790
}

.teaMore:hover {
    background: #ffcb30
}

.doctorsName {
    font-size: 18px;
    color: #5c5c5c;
    margin-top: 22px
}

.doctorsName span {
    display: block;
    padding: 0 8px
}

.doctorsName span:nth-child(1) {
    padding: 0 8px 0 0
}

.newvideoBox {
    width: 95%;
    height: 460px;
    margin: 10px 0 11px
}

.casetbox i {
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 9
}

.casetbox li {
    background: #fff1f6;
    height: 400px
}

.caseStudies {
    float: left;
    padding: 0px 45px 40px 0px;
    width: 100%
}

.caseStudies .conTitle {
    background: url(../images/aline3.jpg) 0px 6px repeat-x
}

.caseStudies .conTitle ul {
    list-style: none
}

.caseStudies .conTitle h2 {
    color: #ad7187;
    width: 215px
}

.caseStudies li {
    float: left;
    width: 32%;
    margin: 8px;
    margin-bottom: 30px;
    overflow: hidden
}

.caseStudies li:nth-child(3) {
    margin-right: 0
}

.caseStudies li a {
    text-decoration: none;
    transition: opacity .4s ease-in-out, transform .4s ease-in-out
}

.caseStudies li a:hover .jqimgFill {
    transform: scale(1.05)
}

.caseStudies .caseTxt {
    text-align: center;
    margin-top: 17px
}

.caseStudies .caseTxt h4 {
    color: #b1905b;
    font-size: 16px;
    margin-bottom: 4px
}

.caseStudies .caseTxt p {
    color: #787878
}

.caseStudies .casePhoto {
    height: 0;
    padding-bottom: 95.35%
}

.caseStudies ul {
    padding-left: 22px
}

.caseList a {
    text-decoration: none
}

.caseList .caseTxt {
    float: left;
    width: 60%
}

.caseList .caseTxt h3 {
    font-size: 18px;
    color: #009790;
    font-weight: bold;
    margin-bottom: 20px
}

.caseList .caseTxt p {
    font-size: 15px;
    color: #8f8f8f;
    line-height: 23px;
    height: 120px;
    overflow: hidden
}

@media screen and (max-width: 1200px) {
    .caseList .caseTxt p {
        height: 100px
    }
}

@media screen and (max-width: 1200px) {
    .caseList .caseTxt p {
        height: 100px
    }
}

@media screen and (max-width: 1100px) {
    .caseList .caseTxt p {
        height: 77px
    }
}

@media screen and (max-width: 1024px) {
    .caseList .caseTxt p {
        height: 60px
    }
}

@media screen and (max-width: 768px) {
    .caseList .caseTxt p {
        overflow: auto
    }
}

.caseList li {
    list-style: none
}

.caseBox .casePhoto {
    height: 169px;
    float: left;
    width: 33%;
    margin-right: 15px
}

@media screen and (max-width: 1280px) {
    .caseBox .casePhoto {
        height: 162px
    }
}

@media screen and (max-width: 1200px) {
    .caseBox .casePhoto {
        height: 148px
    }
}

@media screen and (max-width: 1100px) {
    .caseBox .casePhoto {
        height: 128px
    }
}

@media screen and (max-width: 1024px) {
    .caseBox .casePhoto {
        height: 114px
    }
}

@media screen and (max-width: 1000px) {
    .caseBox .casePhoto {
        height: 109px
    }
}

@media screen and (max-width: 768px) {
    .caseBox .casePhoto {
        height: 396px !important
    }
}

@media screen and (max-width: 480px) {
    .caseBox .casePhoto {
        height: 219px !important
    }
}

@media screen and (max-width: 375px) {
    .caseBox .casePhoto {
        height: 196px !important
    }
}

@media screen and (max-width: 360px) {
    .caseBox .casePhoto {
        height: 186px !important
    }
}

@media screen and (max-width: 320px) {
    .caseBox .casePhoto {
        height: 169px !important
    }
}

.contact {
    padding-right: 2px;
    width: 91%;
    line-height: 24px;
    margin-top: 13px
}

.contxt {
    margin: 20px 0 20px 0;
    display: block;
    font-size: 14px;
    width: 90%
}

.bottomBanner {
    margin-bottom: 49px
}

.back_btn {
    width: 81px;
    height: 34px;
    display: block;
    text-align: center;
    margin: 0 auto 40px auto;
    line-height: 34px;
    background: #7b5296;
    color: #fff;
    float: none;
    text-decoration: none;
    letter-spacing: 3px
}

.ud_btn {
    margin-bottom: 45px
}

.ud_btn a {
    margin-bottom: 18px;
    width: 100%;
    display: block;
    font-size: 13px;
    color: #3d3d3d;
    text-decoration: none
}

.ud_btn a:hover {
    color: #7b5296
}

.ud_btn a:before {
    content: '';
    display: inline-block;
    width: 8px;
    height: 6px;
    margin-right: 5px;
    color: #7b5296
}

.ud_btn a:nth-child(1):before {
    background: url(../images/ub.png) no-repeat
}

.ud_btn a:nth-child(2):before {
    background: url(../images/down.png) no-repeat
}

.conbox .form-group {
    padding-left: 0
}

@media screen and (max-width: 1125px) {
    .caseStudies li {
        width: 31%
    }
}

@media screen and (max-width: 930px) {
    .newsBox {
        width: 90%;
        margin: 0 auto;
        padding-top: 35px
    }
    .workList li,
    .newsList li {
        width: 40%
    }
    .workList li:nth-child(3n),
    .newsList li:nth-child(3n) {
        margin-right: 25px
    }
    .lines {
        width: 50%
    }
    .caseStudies li {
        width: 30%
    }
}

.glaml_mo {
    display: none
}

@media screen and (max-width: 768px) {
    .glaml_mo {
        display: block
    }
    .contact {
        width: 90%;
        margin: 13px auto 0 auto
    }
    .workList li,
    .newsList li {
        width: 47.7%;
        margin-bottom: 20px
    }
    .workList li:nth-child(2n),
    .newsList li:nth-child(2n) {
        margin-right: 0px
    }
    .mainTitle {
        padding-left: 23px;
        margin: 24px 0 10px
    }
    .lines {
        width: 48%;
        height: 455px
    }
    .teamHeader {
        width: 95%;
        margin: 0px auto 16px auto
    }
    .caseStudies {
        padding: 0px 18px 40px 23px
    }
    .caseStudies li {
        width: 31.5%
    }
    .newvideoBox {
        margin: 10px auto 11px auto
    }
    .newsList .more,
    .caseList .more {
        margin: 0 auto
    }
    .contxt {
        padding-left: 25px
    }
    .caseBox {
        width: 88%;
        margin: 0 auto
    }
    .caseBox li {
        width: 100%
    }
    .caseBox .casePhoto {
        width: 100%;
        height: 334px
    }
    .caseList .caseTxt {
        width: 100%;
        margin-top: 20px
    }
    .caseList .more {
        font-size: 16px
    }
    .ud_btn {
        margin: 0 22px
    }
}

@media screen and (max-width: 640px) {
    .newsList .casePhoto,
    .workList .casePhoto {
        height: 290px
    }
    .newsList li,
    .workList li {
        width: 100%;
        height: 500px;
        margin-right: 0;
        margin-bottom: 67px;
        border-bottom: 1px solid #d8d8d8
    }
    .newsList li:nth-child(3n),
    .workList li:nth-child(3n) {
        margin-right: 0px
    }
    .workList li {
        margin-bottom: 42px
    }
    .teamHeader {
        width: 95%;
        margin: 0px auto 16px auto
    }
    .caseStudies {
        padding: 0px 18px 40px 23px
    }
    .caseStudies li {
        width: 46.9%;
        margin: 8px !important
    }
    .newvideoBox {
        height: 320px
    }
    .doctorsName {
        padding-left: 22px
    }
    .bottomBanner {
        display: none
    }
    .caseStudies ul {
        padding-left: 0px
    }
    .qat p,
    .csd p,
    .qabox {
        margin-left: 9px
    }
    .form-group {
        padding-left: 9px
    }
}

@media screen and (max-width: 480px) {
    .doctorsList li {
        width: 85%;
        float: none;
        margin: 0 auto 44px auto;
        padding: 0px 0 27px
    }
    .lines {
        width: 100%;
        height: 470px;
        float: none;
        margin-bottom: 20px
    }
    .doctorsTxt {
        width: 100%;
        padding: 25px 0 0 33px;
        font-size: 18px;
        margin-bottom: 23px
    }
    .doctorsTxt .doctorConter {
        line-height: 33px;
        margin: 0 auto
    }
    .doctorsTxt h2 {
        margin-bottom: 14px
    }
    .teaMore {
        width: 100%;
        line-height: 43px;
        float: none;
        margin: 0 auto;
        font-size: 18px
    }
    .caseStudies li {
        width: 46%
    }
    .qabox .qa_content img{
        width: 100% !important;
        height: auto !important;
    }
}

@media screen and (max-width: 320px) {
    .newvideoBox {
        height: 255px
    }
}

.online{
    position: fixed;
    right: 26px;
    top: 38%;
}
@media screen and (max-width: 640px) {
    .online{
       top: initial;
       right: 16px;
       bottom: 124px;
    }
     
}
.link1,.link2,.link3,.link4{
    margin-bottom: 12px;
}
.aside{
    position: relative;
    left: -7px;    
}

.aside a{
    text-indent: -10000px;
    width: 62px;
    height: 61px;
    display: block;
}
.link3{
    display: none;
}
.link1 a{
    background: url(../images/link_btn.png) 0 0 no-repeat;
}
.link1 a:hover{
    background: url(../images/link_btn.png) -70px 0 no-repeat;
}

.link2 a{
    background: url(../images/link_btn.png) 0 -70px no-repeat;
}
.link2 a:hover{
    background: url(../images/link_btn.png) -70px -70px no-repeat;
}

.link3 a{
    background: url(../images/link_btn.png) 0 -140px no-repeat;
}
.link3 a:hover{
    background: url(../images/link_btn.png) -70px -140px no-repeat;
}

.link4 a{
    background: url(../images/link_btn.png) 0 -211px no-repeat;
}
.link4 a:hover{
    background: url(../images/link_btn.png) -70px -211px no-repeat;
}

@media screen and (max-width: 640px) {
    .link3{
        display: block;
    }
    .online{
        opacity: 1 !important;
    }
    .online .top{
        transition:0.4s;
        opacity: 0 !important ;
    }
    .online.open .top{
        opacity: 1 !important;
    }
    .aside{
        padding: 7px 8px 5px 8px;
        display: flex;
        align-content: center;
        justify-content: space-between;

        position: fixed;
        left: 0;
        bottom: 0;
        width: 100%;
        z-index: 10;
        background: rgba(255, 255, 255, 0.60);
    }
    .aside a{
        width: 46px;
        height: 45px;
        margin: 0 auto 3px auto;
        background-size: 86px;
    }

    .link1,.link2,.link3,.link4{
        width: 25%;
        margin-bottom: 0;
    }
    .link2{
        width: 29%;
    }
    .link3{
        width: 21%;
    }
    .link1 a{
        background: url(../images/m_l1.png) 0 0 no-repeat;
        background-size: cover;
    }
    .link1 a:hover{
        background: url(../images/m_l1.png) 0 0 no-repeat;
         background-size: cover;
    }

    .link2 a{
        background: url(../images/m_l2.png) 0 0 no-repeat;
         background-size: cover;
    }
    .link2 a:hover{
        background: url(../images/m_l2.png) 0 0 no-repeat;
         background-size: cover;
    }

    .link3 a{
        background: url(../images/m_l3.png) 0 0 no-repeat;
         background-size: cover;
    }
    .link3 a:hover{
        background: url(../images/m_l3.png) 0 0 no-repeat;
         background-size: cover;
    }

    .link4 a{
        background: url(../images/m_l4.png) 0 0 no-repeat;
         background-size: cover;
    }
    .link4 a:hover{
        background: url(../images/m_l4.png) 0 0 no-repeat;
         background-size: cover;
    }

    .link1:after,.link2:after,.link3:after,.link4:after{
        font-size: 13px;
        color: #000;
        display: block;
        text-align: center;
    }
    .link1:after{
        content:'Line訊息詢問';
    }
    .link2:after{
        content:'臉書粉絲團訊息';
    }
    .link3:after{
        content:'撥打電話';
    }
    .link4:after{
        content:'聯絡表單';
    }
}

@media screen and (max-width: 320px) {
    .link1:after,.link2:after,.link3:after,.link4:after{
        font-size: 12px;
    }
}