/*!
 * JQNETS v3.0.0 (http://jqnets.com)
 * Copyright 2014-2016, Inc.
 * Licensed under MIT
 */

body {
    background: #f2f2f2;
}


/*
 * Component: 公司標誌/選單
 * ----------------------
 */
#jq-globalnav {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 9;
    display: block;
    margin: 0;
    width: 100%;
    height: 48px;
    max-height: 44px;
    color: #fff;
    background: rgba(0,0,0,0.8);
    font-size: 18px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
}
#jq-globalnav .small-size {
    display: none;
    text-align: center;
}
#jq-globalnav .default-size {
    /*display: none;*/
}
#jq-globalnav .default-size .menu-list {
    cursor: default;
    margin: 0 -10px;
    background: rgba(0,0,0,0.8);
    width: auto;
    height: 44px;
    text-align: justify;
    -ms-text-justify: distribute-all-lines;
    text-justify: distribute-all-lines;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
#jq-globalnav .default-size ul {
    list-style: none;
}
#jq-globalnav .menu-item {
    display: inline-block;
    position: relative;
    height: 44px;
    z-index: 1;
    vertical-align: top;
}
#jq-globalnav .menu-link {
    font-size: 16px;
    line-height: 2.75;
    font-weight: 400;
    letter-spacing: normal;
    opacity: 1;
    -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=$ieopacity)';
    filter: alpha(opacity=100);
    color: #fff;
    position: relative;
    z-index: 1;
    display: inline-block;
    padding: 0 10px;
    height: 44px;
    background: no-repeat;
    text-decoration: none;
    white-space: nowrap;
    -webkit-transition: opacity 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
    transition: opacity 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
    -webkit-tap-highlight-color: transparent;
    outline-offset: -7px;
}
#jq-globalnav .menu-link.active {
    background: rgba(255, 255, 255, 1);
    color: rgba(0,0,0,0.8);
    border-bottom: 1px solid;
    border-top: 1px solid;
}

#jq-globalnav .jq-logo {
    width: auto;
    height: 25px;
    cursor: pointer;
}
#jq-globalnav .small-size .jq-logo {
    margin-top: 4px;
    vertical-align: -webkit-baseline-middle;
}
#jq-globalnav .jq-menustate {
    /*display: none;*/
}



/*
 * Component: 子選單
 * ----------------
 */
.jq-subnav {
    width: 100%;
    height: 100px;
    background: #fff;
    border-bottom: 1px solid #f3f3f3;
    z-index: 8;
    padding: 10px;
    overflow: hidden;
    position: relative;
}
.jq-subnav ul {
    list-style: none;
    text-align: center;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
    -webkit-padding-start: 0;
    padding-bottom: 20px;
    margin: 0 17px;
}
.jq-subnav ul li {
    display: inline-block;
    text-align: center;
    /*border-right: 1px solid rgba(0, 0, 0, 0.08);*/
    /*background: rgba(0, 0, 0, 0.03);*/
}
.jq-subnav ul li:last-child {
    /*border-right: none;*/
}
.jq-subnav ul li a{
    color: #000;
    outline: none;
    text-decoration:none;
}
.jq-subnav ul li a div{
    width: 100px;
    height: 80px;
    font-size: 12px;
    line-height: 24px;
    padding-top: 6px;
}
.jq-subnav ul li .jq-figure{
    display: block;
    font-size: 3.5em;
}

.jq-subnav ul li.jq-subnav-paddle {
    display: none;
    cursor: pointer;
    position: absolute;
    height: 80px;
    font-size: 42px;
    line-height: 1.8;
    font-weight: 200;
    color: rgba(102,102,102,0.35);
    border: 0px solid rgba(102,102,102,0.35);
    padding: 0 5px;
}
.jq-subnav ul li.jq-subnav-paddle-left {
    border-right-width: 1px;
    left: 0;
}
.jq-subnav ul li.jq-subnav-paddle-right {
    border-left-width: 1px;
    right: 0;

}



/*
 * Component: 選單鈕 ≡
 * -------------------
 */
.button_container {
    position: relative;
    margin-top: 14px;
    margin-right: 15px;
    height: 28px;
    width: 28px;
    cursor: pointer;
    z-index: 999;
    -webkit-transition: opacity .25s ease;
            transition: opacity .25s ease;
}

/* Animate the top hamburger bar */
.button_container.active .top {
    -webkit-transform: translateY(8px) translateX(0) rotate(45deg);
        -ms-transform: translateY(8px) translateX(0) rotate(45deg);
            transform: translateY(8px) translateX(0) rotate(45deg);
    background: #FFF;
}

/* Set the middle hamburger bar's opacity to 0  */
.button_container.active .middle {
    opacity: 0;
    background: #FFF;
}

/* Animate the bottom hamburger bar */
.button_container.active .bottom {
    -webkit-transform: translateY(-8px) translateX(0) rotate(-45deg);
        -ms-transform: translateY(-8px) translateX(0) rotate(-45deg);
            transform: translateY(-8px) translateX(0) rotate(-45deg);
    background: #FFF;
}

.button_container span {
    background: #fff;
    border: none;
    height: 1px;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    -webkit-transition: all .35s ease;
    transition: all .35s ease;
    cursor: pointer;
}
.button_container span:nth-of-type(2) {
    top: 8px;
}
.button_container span:nth-of-type(3) {
    top: 16px;
}


/*
 * Component: 首頁 Navigation 點
 * ----------------------------
 */
.quick-nav {
    position: fixed;
    top: 50%;
    left: 2px;
    z-index: 2;
    padding: 2px 0 85px;
    border-radius: 26px;
    background: rgba(0, 0, 0, 0.25);
}
.nav__item {
    width: 2.25em;
    height: 2.25em;
    line-height: 1;
    position: relative;
    display: block;
    margin: 0;
    padding: 0;
    letter-spacing: 0;
    color: currentColor;
    border: 0;
    background: none;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    outline: none !important;
}
.nav__item::before, .nav__item::after {
    content: '';
    position: absolute;
    border-radius: 50%;
}
.nav__item::before {
    top: 25%;
    left: 25%;
    width: 50%;
    height: 50%;
    background: #fff;
    -webkit-transition: -webkit-transform 0.5s;
    transition: transform 0.5s;
    -webkit-transition-timing-function: cubic-bezier(0.2,1,0.3,1);
    transition-timing-function: cubic-bezier(0.2,1,0.3,1);
}
.nav__item--current::before {
    -webkit-transform: scale3d(0.35,0.35,1);
    transform: scale3d(0.35,0.35,1);
}
.nav__item::after {
    top: 10%;
    left: 10%;
    width: 80%;
    height: 80%;
    opacity: 0;
    box-shadow: inset 0 0 0 3px #fff;
    -webkit-transform: scale3d(0.35,0.35,1);
    transform: scale3d(0.35,0.35,1);
    -webkit-transition: -webkit-transform 0.5s, box-shadow 0.5s, opacity 0.5s;
    transition: transform 0.5s, box-shadow 0.5s, opacity 0.5s;
    -webkit-transition-timing-function: cubic-bezier(0.2,1,0.3,1);
    transition-timing-function: cubic-bezier(0.2,1,0.3,1);
}
.nav__item--current::after {
    opacity: 1;
    box-shadow: inset 0 0 0 3px #2189DB;
    -webkit-transform: scale3d(1,1,1);
    transform: scale3d(1,1,1);
}
.nav__item-title {
    position: fixed;
    top: calc(50% + 130px);
    left: 2px;
    width: 32px;
    line-height: 2.2;
    display: block;
    -webkit-writing-mode: vertical-rl;
    writing-mode: vertical-rl;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    color: #fff;
    -webkit-transform: scale3d(0.1,0.1,1);
    transform: scale3d(0.1,0.1,1);
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    -webkit-transition: opacity 0.5s, -webkit-transform 0.5s;
    transition: opacity 0.5s, transform 0.5s;
    -webkit-transition-timing-function: cubic-bezier(0.2,1,0.3,1);
    transition-timing-function: cubic-bezier(0.2,1,0.3,1);
}
.nav__item--current .nav__item-title {
    opacity: 1;
    -webkit-transform: scale3d(1,1,1);
    transform: scale3d(1,1,1);
    -webkit-transition-delay: 0.1s;
    transition-delay: 0.1s;
}

/*
 * Component: 內容
 * ---------------
 */
.jq-body {
    position: relative;
    min-height: 100px;
    background: #e4e4e4;
}
.jq-body.bg-white {
    background: #fff;
}

.jq-body .fill-img {
    width: 100%;
    height: 620px;
    background-position: center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
}
.jq-body .fill-img.img-01 {
    background-image: url(../images/img_01_min.jpg);
}
.jq-body .fill-img.img-02 {
    background-image: url(../images/img_02_min.jpg);
}
.jq-body .fill-img.img-03 {
    background-image: url(../images/img_03_min.jpg);
}
.jq-body .fill-img.img-04 {
    background-image: url(../images/img_04_min.jpg);
}
.jq-body .fill-img.img-05 {
    background-image: url(../images/img_05_min.jpg);
}
.jq-body .fill-img.img-06 {
    background-image: url(../images/img_06_min.jpg);
}
.jq-body .fill-img.img-07 {
    background-image: url(../images/img_07_min.jpg);
}
.jq-body .fill-img.img-08 {
    background-image: url(../images/img_08_min.jpg);
}
.jq-body .fill-img.img-09 {
    background-image: url(../images/img_09_min.jpg);
}
.jq-body .fill-img.img-10 {
    background-image: url(../images/img_10_min.jpg);
}

.jq-body .overlay-wall {
    width: 100%;
    height: 620px;
    position: absolute;
    background: #333;
    opacity: 0.4;
    left: 0;
    top: 0;
    z-index: 1;
}

.jq-body.light .overlay-wall {
    background: #9c9c9c;
}

.jq-body .jq-container {
    width: 100%;
    height: 100%;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
    position: absolute;
    left: 0;
    top: 0;
    padding: 60px;
    /*padding-top: 150px;*/
    text-align: center;
    font-size: 24px;
    /*font-weight: 600;*/
    z-index: 1;
}
.jq-body .jq-container .header-icon {
    font-size: 5em;
}
.jq-body .jq-container .header {
    font-size: 36px;
}
.jq-body .jq-container .description {
    font-size: 16px;
    padding-top: 10px;
}

.jq-body.light .jq-container {
    /*color: #000;*/
}
.jq-body .jq-container .word-cloud-block {
    width: calc(100% - 120px);
    position: absolute;
    bottom: 60px;
    text-shadow: none;
    /*color: #333333;*/
}
.jq-body .jq-container .word-cloud-block .header {
    font-size: 36px;
}
.jq-body .jq-container .word-cloud-block .description {
    font-size: 16px;
    padding-top: 10px;
}
.jq-body.bg-white .jq-container .word-cloud-block {
    color: #333333;
}
.jq-body.bg-white .jq-container .word-cloud-block .jq-learn-more-text {
    color: #3392DE;
}

.jq-body.bg-white .jq-container .header-icon {
    color: #333333;
}
.jq-body.bg-white .jq-container .header,
.jq-body.bg-white .jq-container .description,
.jq-body.bg-white .jq-container .jq-learn-more-text {
    color: #333333;
    text-shadow: none;
}

.jq-body .jq-container2 {
    width: 100%;
    height: 100%;
    /*text-shadow: 0 1px 2px rgba(0, 0, 0, .6);*/
    position: absolute;
    left: 0;
    top: 0;
    /*padding: 60px;*/
    padding-top: 43px;
    text-align: center;
    font-size: 24px;
    /*font-weight: 600;*/
    z-index: 1;
}
.jq-body .jq-container2 .top-banner {
    background: #3392DE;
    color: #fff;
    margin: 100px 0 0;
    padding: 48px 20px;
}
.jq-body .jq-container2 .top-banner .header {
    font-size: 44px;
    font-weight: 700;
    margin-bottom: 15px;
}
.jq-body .jq-container2 .top-banner .description {
    font-size: 16px
}
.jq-body .jq-container2 .top-banner .description .detail-btn {
    border-radius: 3px;
    padding: 8px 16px;
    font-size: 14px;
    color: #3392DE;
    background: #fff;
    outline: none;
    text-decoration: none;
    display: block;
}



.jq-body-text {
    position: relative;
    min-height: 100px;
    background: #f9f9f9;
}
.jq-body-text .jq-header {
    width: 100%;
    font-size: 2.4em;
    font-weight: 700;
    color: rgba(0, 0, 0, 0.7);
    text-align: center;
    padding: 40px 0;
    z-index: 1;
}
.jq-body-text .jq-container {
    width: 100%;
    color: rgba(0, 0, 0, 0.5);
    padding: 0 40px 40px;
    z-index: 1;
}
.jq-body-text ul.checked-list {
    list-style: none;
    padding: 0 160px;
}
.jq-body-text ul.checked-list li {
    position: relative;
    border-right: 1px solid #f3f3f3;
    border-bottom: 3px solid #f3f3f3;
    font-size: 16px;
    background: #fff;
    padding: 10px;
    padding-left: 50px;
    margin-bottom: 20px;
    min-width: 250px;
}
.jq-body-text ul.checked-list li i {
    /*border-left: 5px solid #3392de;*/
    position: absolute;
    top: 0;
    left: 0;
    width: 40px;
    height: 100%;
    /*background: #fff;*/
    /*color: #3392de;*/
    background: #3392de;
    color: #fff;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
    font-size: 2em;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.jq-body-text.dark {
    background: #2b2b2b;
}
.jq-body-text.dark .jq-header {
    color: rgba(255, 255, 255, 1);
}
.jq-body-text.dark .jq-container {
    color: rgba(255, 255, 255, 0.85);
}

a.jq-learn-more-btn {
    border-radius: 3px;
    padding: 8px 16px;
    font-size: 14px;
    color: #fff;
    background: #3392DE;
    outline: none;
    text-decoration:none;
}


.btn-template,
.btn-template:focus,
.btn-template:hover {
    color: #fff;
    background: #3392DE;
    outline: none;
    text-decoration:none;
}

.btn-template-finish,
.btn-template-finish:focus,
.btn-template-finish:hover {
    color: #fff;
    background: #ce4242;
    outline: none;
    text-decoration:none;
    margin-top: 0 !important;
}


.jq-learn-more-text {
    font-size: 14px;
}

.carousel_page_01 {
    max-height: 600px;
    width: auto;
}

.jq-qa-contact {
    /*border: 1px solid;*/
}
.jq-qa-contact img{
    width: 40px;
}



/*
 * 報價精靈
 * -------
 */
.jq-template-forms {
    /*border: 1px solid #fff;*/
    padding: 0 160px;
}
.jq-template-forms.big {
    padding: 0 80px;
}
.jq-template-forms .template-form {
    /*display: inline-block;*/
    /*vertical-align: top;*/
    border-radius: 3px;
    background: #464646;
    width: 100%;
}
.jq-template-forms .template-form.hide {
    display: none;
}
.jq-template-forms .template-form-content {
    position: relative;
    border: 1px solid #6f6f6f;
    border-radius: 3px;
    min-height: 330px;
    padding: 10px 0;
    font-size: 16px;
    color: #fff;
}
.jq-template-forms .form-content-header {
    padding-left: 20px;
}
.jq-template-forms .template-content-block {
    /*border: 1px solid;*/
    height: 310px;
    /*z-index: 19;*/
    /*padding: 10px 0;*/
    overflow: hidden;
}
.jq-template-forms .template-content-block ul {
    /*border: 1px solid;*/
    text-align: center;
    list-style: none;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
    -webkit-padding-start: 0;
    padding-bottom: 100px;
    /*margin: 0 25px;*/
}
.jq-template-forms .template-content-block ul li {
    display: inline-block;
    color: rgba(255, 255, 255, 0.4);
    text-align: center;
    vertical-align: top;
    margin-right: 15px;
}
.jq-template-forms .template-content-block ul li:first-child {
    margin-left: 15px;
}
.jq-template-forms .template-content-block ul li .effect {
    position: relative;
}
.jq-template-forms .template-content-block ul li .effect div:first-child {
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}
.jq-template-forms .template-content-block ul li .effect div:last-child {
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}
.jq-template-forms .template-content-block ul li .template-checkbox {
    cursor: pointer;
    font-size: 42px;
}
.jq-template-forms .template-content-block ul li .special-label {
    position: absolute;
    top: -3px;
    right: -3px;
    padding: 8px 3px;
    color: #de4d00;
    background: #ffd505;
    /* text-shadow: 0 1px 1px rgba(0, 0, 0, 0.75); */
    -webkit-writing-mode: vertical-rl;
    writing-mode: vertical-rl;
    font-size: 12px;
    font-weight: normal;
    line-height: 24px;
    text-align: center;
    /* transform: rotate(48deg); */
    -webkit-box-shadow: 0px 0px 5px 1px rgba(0,0,0,0.2);
    -moz-box-shadow: 0px 0px 5px 1px rgba(0,0,0,0.2);
    box-shadow: 0px 0px 5px 1px rgba(0,0,0,0.2);
    z-index: 1;
}
/*.jq-template-forms .template-content-block ul li .special-label:before {
    position: absolute;
    content: '';
    top: 0;
    left: auto;
    right: 24px;
    background-color: transparent!important;
    border-style: solid;
    border-width: .9em .4em 0 0;
    border-color: transparent;
    border-right-color: #b3970c;
    width: 0;
    height: 0;
}*/
.jq-template-forms .template-content-block ul li .special-label:after {
    content: "";
    width: 0;
    height: 0;
    position: absolute;
    left: 0;
    bottom: -5px;
    border-style: solid;
    border-width: 5px 15px 0;
    border-color: #ffd505 transparent;
}

.special-label.color-purple{
    color: rgba(0, 0, 0, 0.55) !important;
    background: #D8BFD8 !important;
}
/*.special-label.color-purple:before{
    border-right-color: #d25c0d !important;
}*/
.special-label.color-purple:after{
    border-color: #D8BFD8 transparent !important;
}

.special-label.color-yellow{
    color: #989853 !important;
    background: #FAFAD2 !important;
}
/*.special-label.color-yellow:before{
    border-right-color: #b3970c !important;
}*/
.special-label.color-yellow:after{
    border-color: #FAFAD2 transparent !important;
}

.special-label.color-blue{
    color: rgba(255, 255, 255, 0.8) !important;
    background: #3392de !important;
}
/*.special-label.color-blue:before{
    border-right-color: #1265a7 !important;
}*/
.special-label.color-blue:after{
    border-color: #3392de transparent !important;
}

.special-label.color-green{
    color: rgba(0, 0, 0, 0.65) !important;
    background: #ade237 !important;
}
/*.special-label.color-green:before{
    border-right-color: #6d9611 !important;
}*/
.special-label.color-green:after{
    border-color: #ade237 transparent !important;
}

.jq-template-forms .template-content-block ul li .template-name {
    border: 3px solid rgba(0,0,0,1);
    border-bottom: none;
    background: rgba(0,0,0,1);
    width: 100%;
    font-size: 14px;
    line-height: 2;
}
.jq-template-forms .template-content-block ul li .template-img {
    border: 3px solid rgba(0,0,0,1);
    border-top: none;
    border-bottom: none;
    background: rgba(0,0,0,1);
    width: auto;
    height: 120px;
    position: relative;
}
.jq-template-forms .template-content-block ul li .template-img img {
    width: auto;
    height: 100%;
}
.jq-template-forms .template-content-block ul li .template-img .btn-view-template span{
    display: none;
    border: 2px solid #fff;
    padding: 0 4px;
    line-height: 2.2;
}
.jq-template-forms .template-content-block ul li .template-img:hover .btn-view-template span,
.jq-template-forms .template-content-block ul li .template-img:focus .btn-view-template span,
.jq-template-forms .template-content-block ul li .template-img:active .btn-view-template span,
.jq-template-forms .template-content-block ul li .template-img:visited .btn-view-template span {
    display: block;
}
.jq-template-forms .template-content-block ul li .template-img:hover .btn-view-template,
.jq-template-forms .template-content-block ul li .template-img:focus .btn-view-template,
.jq-template-forms .template-content-block ul li .template-img:active .btn-view-template,
.jq-template-forms .template-content-block ul li .template-img:visited .btn-view-template {
    border-radius: 0 !important;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 0%;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-animation: anim-effect-view-template 0.1s ease-out forwards;
    animation: anim-effect-view-template 0.1s ease-out forwards;
}
@-webkit-keyframes anim-effect-view-template {
    0% {
        height: 0%;
    }
    80% {
        height: 60%;
    }
    100% {
        height: 100%;
    }
}
@keyframes anim-effect-view-template {
    0% {
        height: 0%;
    }
    80% {
        height: 60%;
    }
    100% {
        height: 100%;
    }
}
.jq-template-forms .template-content-block ul li .template-plugin-icon {
    border: 3px solid rgba(0,0,0,1);
    border-top: none;
    border-bottom: none;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.35);
    background: rgba(0,0,0,1);
    width: 140px;
    padding: 30px 0;
}
.jq-template-forms .template-content-block ul li .template-plugin-icon i {
    font-size: 48px;
}
.jq-template-forms .template-content-block ul li .template-icon {
    border: 3px solid rgba(0,0,0,1);
    border-top: none;
    border-bottom: none;
    background: rgba(0,0,0,1);
    font-size: 12px;
    line-height: 3;
}
.jq-template-forms .template-content-block ul li .template-price {
    border: 3px solid rgba(0,0,0,1);
    border-top: none;
    color: rgba(255, 255, 255, 0.8);
    background: rgba(0,0,0,1);
    font-size: 18px;
    line-height: 2;
}
.jq-template-forms .template-content-block ul li .template-price i {
    padding-right: 2px;
}
.jq-template-forms .template-content-block ul li .template-price.discount{
    color: #ff3c22;
}
.jq-template-forms .template-content-block ul li .template-price.discount .origin-price{
    text-decoration: line-through;
    color: rgba(255, 255, 255, 0.4);
    font-size: 12px;
    padding-right: 8px;
}



.jq-template-forms .template-content-block ul li.active .template-checkbox {
    color: #fff;;
}
.jq-template-forms .template-content-block ul li.active .template-checkbox i:before {
    content: "\f3ff";
}
.jq-template-forms .template-content-block ul li.active .template-name,
.jq-template-forms .template-content-block ul li.active .template-img,
.jq-template-forms .template-content-block ul li.active .template-icon,
.jq-template-forms .template-content-block ul li.active .template-plugin-icon,
.jq-template-forms .template-content-block ul li.active .template-price {
    background: #ce4242;
    color: rgba(255, 255, 255, 1);
    border-color: #ce4242;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.35);
}
.jq-template-forms .template-content-block ul li.active .special-label {
    text-shadow: none;
}
.jq-template-forms .template-content-block ul li.active .effect {
    -webkit-animation: anim-effect-checked 0.3s ease-out forwards;
    animation: anim-effect-checked 0.3s ease-out forwards;
}
@-webkit-keyframes anim-effect-checked {
    0% {
        opacity: 0.1;
        -webkit-transform: scale3d(0.9, 0.9, 1);
        transform: scale3d(0.9, 0.9, 1);
    }
    80% {
        opacity: 0.5;
    }
    100% {
        opacity: 1;

        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
}
@keyframes anim-effect-checked {
    0% {
        opacity: 0.1;
        -webkit-transform: scale3d(0.9, 0.9, 1);
        transform: scale3d(0.9, 0.9, 1);
    }
    80% {
        opacity: 0.5;
    }
    100% {
        opacity: 1;

        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
}

/* 左右控制鈕 */
.jq-template-forms .jq-template-paddle {

    cursor: pointer;
    position: absolute;
    top: 0;
    width: 40px;
    height: calc(100% - 74px);
    font-size: 32px;
    font-weight: 200;
    color: rgba(255, 255, 255, .3);
    border: 0px solid rgba(102,102,102,0.35);
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 52px;
}
.jq-template-forms .jq-template-paddle.jq-template-paddle-left {
    /*border-right-width: 1px;*/
    left: -40px;
}
.jq-template-forms .jq-template-paddle.jq-template-paddle-right {
    /*border-left-width: 1px;*/
    right: -40px;
}

/* 確認單 */
.jq-template-forms .template-checked-block{
    padding: 0 20px;
}
.jq-template-forms .checked-from {
    border-top: 1px solid #717171;
    border-bottom: 1px solid #232323;
    padding: 10px 0px;
}
.jq-template-forms .checked-from:nth-of-type(1) {
    border-top: none;
    padding-top: 20px;
}
.jq-template-forms .checked-from:nth-of-type(4) {
    border-bottom: 1px dashed #232323;
}
.jq-template-forms .checked-from .header {
    color: #3392DE;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.35);
}
.jq-template-forms .checked-from .detail {
    color: rgba(255, 255, 255, 0.85);
    font-size: 14px;
}
.jq-template-forms .checked-from .detail span {
    color: rgba(255, 255, 255, 0.2);
    padding: 0 6px;
}

.jq-template-forms .checked-price-from {
    border-top: 1px dashed #717171;
    padding: 24px 0px;
    text-align: center;
}
.jq-template-forms .checked-price-from .header {
    color: #fff;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.35);
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.jq-template-forms .checked-price-from .header .sub-total-price {
    color: #fff;
    font-size: 18px;
    font-weight: 600;
    padding: 0 10px;
}
.jq-template-forms .checked-discount-activity-block {
    border-radius: 8px;
    margin: 12px auto 0;
    padding: 10px;
    text-align: center;
    color: rgba(0, 0, 0, 0.7);
    background: rgba(255, 255, 255, 1);
}
.jq-template-forms .checked-discount-activity-block .discount-activity {
    margin-bottom: 10px;
}
.jq-template-forms .checked-discount-activity-block .discount-activity .activity-title {
    font-size: 1.2em;
    font-weight: 900;
    color: #ce4242;
    padding-bottom: 6px;
}
.jq-template-forms .checked-discount-activity-block .discount-activity .discount-amount-delta {
    padding: 0 5px;
}
.jq-template-forms .checked-discount-activity-block .discount-activity .discount-text {
    margin: 0 5px;
    padding: 0 2px;
    color: #3392DE;
    border-bottom: 3px solid;
}
/*
.jq-template-forms .checked-discount-activity-block .desc-text {
    display: inline-block;
    vertical-align: top;
    margin-top: 10px;
    font-size: 14px;
}

.jq-template-forms .checked-discount-activity-block .desc-text .discount-text {
    font-size: 2em;
    font-weight: 900;
    color: #ce4242;
    padding: 0 5px;
}*/


/*
 * Component: progress-bar
 * -----------------------
 */
.jq-progress {
    width: 100%;
    height: 30px;
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
    background: #f2f2f2;
}
.jq-progress-bar {
    position: relative;
    width: 25%;
    height: 100%;
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
    /*background: linear-gradient( 90deg, #3197d0, #63b878 );*/
    background: linear-gradient( 90deg, #63b878, #3197d0 );
}
.jq-progress-bar-text {
    position: absolute;
    top: 0;
    right: 6px;
    line-height: 30px;
    color: #fff;
    font-size: 12px;
}


/*
 * Component: 步驟追蹤圖
 * -------------------
 */
.jq-quotation-step-block
{
    position: relative;
    padding-bottom: 60px !important;
}
.jq-quotation-step-block .setp-tracker {
    position: absolute;
    bottom: 6px;
    width: 100%;
    /*padding: 0 150px;*/
}
.progress-tracker {
  /*counter-reset: step;*/
  padding: 0;
}
.progress-tracker li {
  cursor: pointer;
  list-style-type: none;
  width: 25%;
  float: left;
  font-size: 12px;
  position: relative;
  text-align: center;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}
.progress-tracker li:before {
  width: 15px;
  height: 15px;
  /*content: counter(step);*/
  /*counter-increment: step;*/
  content: "";
  line-height: 30px;
  border: 2px solid rgba(0, 0, 0, 0.25);
  display: block;
  text-align: center;
  margin: 0 auto 0 auto;
  border-radius: 50%;
  background-color: white;
}
.progress-tracker li:after {
  width: 100%;
  height: 1px;
  content: '';
  position: absolute;
  background-color: rgba(255, 255, 255, 0.5);
  top: 7px;
  left: -50%;
  z-index: -1;
}
.progress-tracker li:first-child:after {
  content: none;
}
.progress-tracker li.active {
  color: #3392DE;
}
.progress-tracker li.active:before {
  border-color: #3392DE;
}
.progress-tracker li.active + li:after {
  background-color: #3392DE;
}

/*
 * Component: 折疊選單
 * ------------------
 */
.jq-collapse {

}
.jq-collapse .panel-title div {
    display: inline-block;
    vertical-align: top;
}
.jq-collapse .panel-title div:nth-child(2) {
    width: calc(100% - 30px);
}
.jq-collapse .panel-title .icon-collapse {
    width: 24px;
    font-size: 1.3em;
}
.jq-collapse .panel-heading.collapsed .icon-collapse:before {
    content: "\f3d0";
}

.jq-collapse.panel-default>.panel-heading+.panel-collapse>.panel-body {
    text-align: justify;
    text-justify: inter-ideograph;
    -ms-text-justify: inter-ideograph; /*IE9*/
    -moz-text-align-last:justify; /*Firefox*/
    -webkit-text-align-last:justify; /*Chrome*/
}


#accordion_1{
    padding: 0 160px;
}
.jq-collapse2 {
    border: none;
    margin-bottom: 20px !important;
}
.jq-collapse2 .panel-heading {
    /*border: 1px solid;*/
    border-right: 1px solid #f3f3f3;
    border-bottom: 3px solid #f3f3f3;
    font-size: 16px;
    background: #fff;
    padding: 0;
}
.jq-collapse2 .panel-title div {
    display: inline-block;
    vertical-align: top;
}
.jq-collapse2 .panel-title div:nth-child(2) {
    width: calc(100% - 46px);
    height: 40px;
    font-size: 16px;
    background: #fff;
    padding: 10px;
}
.jq-collapse2 .panel-title .icon-collapse {
    width: 40px;
    height: 40px;
    background: #3392de;
    color: #fff;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
    font-size: 2em;
    text-align: center;
    padding: 5px;
}
.jq-collapse2 .panel-heading.collapsed .icon-collapse:before {
    content: "\f0da";
}

.jq-collapse2.panel-default>.panel-heading+.panel-collapse>.panel-body {
    text-align: justify;
    text-justify: inter-ideograph;
    -ms-text-justify: inter-ideograph; /*IE9*/
    -moz-text-align-last:justify; /*Firefox*/
    -webkit-text-align-last:justify; /*Chrome*/
}



/*
 * Component: box Widgets
 * ----------------------
 */
.box {
    position: relative;
    border-radius: 3px;
    background: #ffffff;
    border-top: 3px solid #d2d6de;
    margin-bottom: 20px;
    width: 100%;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}
.box-footer {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 3px;
    border-bottom-left-radius: 3px;
    border-top: 1px solid #f4f4f4;
    padding: 10px;
    background-color: #ffffff;
}
.box-widget {
    border: none;
    position: relative;
}
.widget-item .widget-item-header {
    padding: 20px;
    height: 110px;
    border-top-right-radius: 3px;
    border-top-left-radius: 3px;
}
.widget-item .widget-item-title {
    margin-top: 0;
    margin-bottom: 5px;
    font-size: 22px;
    font-weight: 300;
    text-align: center;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}
.widget-item .widget-item-image {
    position: absolute;
    top: 60px;
    left: 50%;
    margin-left: -45px;
    width: 90px;
    height: 90px;
    border: 3px solid #f3f3f3;
    border-radius: 50%;
    background: #fff;
    display: flex;
}
.widget-item .widget-item-image > img {
    width: 90px;
    height: auto;
    border: 3px solid #fff;
}
.widget-item .widget-item-image > i {
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
    font-size: 3.2em;
    margin: auto; /*當在flex下，設為auto時，就會垂直與水平居中*/
    display: flex;
    align-items: center; /*文字水平居中*/
    justify-content: center; /*文字垂直居中*/
}

.widget-item .box-footer {
    padding: 50px 30px 30px;
    font-size: 16px;
    color: #585858;
    text-align: center;
    min-height: 150px;
}

.bg-aqua .widget-item-header{
    background-color: #3392DE !important;
}
.bg-aqua .widget-item-image > i {
    color: #3392DE;
}

/*
 * 作品展示
 * -------
 */
.product-img{
    border: 1px solid #dcdcdc;
}
.product-title{
    color: #3392DE;
}
.product-subtitle{
    color: rgba(0, 0, 0, 0.6);
}
.product-icon {
    color: rgba(0, 0, 0, 0.2);
}

/* 作品類別 tag */
.product-tag {
    width: 10px;
    height: 10px;
    border-radius: 100%;
    display: inline-block;
    margin-right: 3px;
}
.product-tag.type-1 {
    background: #ea5e92;
}
.product-tag.type-2 {
    background: #fdcf2f;
}
.product-tag.type-3 {
    background: #55b6b3;
}




/*
 * Component: 篩選bar
 * -----------------
 */
.jq-filter-bar {
    position: static;
    text-align: center;
    margin-bottom: 25px;
    padding: 10px 0;
    width: 100%;
    z-index: 1;
}
.jq-filter-bar.fixed {
    position: fixed;
    top: 44px;
    background: rgba(0, 0, 0, 0.85);
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
.jq-filter-bar ul{
    list-style: none;
    padding: 0;
    margin: 0;
}
.jq-filter-bar ul li {
    cursor: pointer;
    display: inline-block;
    border: 1px solid rgba(255, 255, 255, 0.45);
    border-radius: 3px;
    padding: 0px 6px;
    box-shadow: 0 3px rgba(0, 0, 0, 1);
    background: rgba(255, 255, 255, 0.9);
    color: #000;
    margin-right: 3px;
    opacity: .3;
}
.jq-filter-bar ul li:first-child {
    border: none;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
    background: transparent;
    color: rgba(255, 255, 255, 0.9);
    margin-right: 10px;
    opacity: 1;
}
.jq-filter-bar ul li.active {
    opacity: 1;
}



/*
 * Component: google map
 * ---------------------
 */
.jq-google-map {
    background: #e7eaf0;
}
#google-container {
    position: relative;
    min-width: 100%;
    min-height: 400px;
}
#cd-zoom-in,
#cd-zoom-out {
    height: 32px;
    width: 32px;
    cursor: pointer;
    margin-left: 10px;
    background-color: rgba(0,0,0, 0.9);
    background-repeat: no-repeat;
    background-size: 32px 64px;
    background-image: url(../images/cd-icon-controller.svg);
}
#cd-zoom-in {
    background-position: 50% 0;
    margin-top: 10px;
    margin-bottom: 1px;
}
#cd-zoom-out {
    background-position: 50% -32px;
}



/*
 * 甲寬日誌
 * -------
 */
.jq-note-block {
    position: relative;
    min-height: 100px;
    background: #fff;
}

.jq-note-block .note-widget {
    padding: 25px 10px 0;
}
.jq-note-block .input-search{
    margin-bottom: 20px;
}
.jq-note-block .note-widget .header {
    font-size: 16px;
    font-weight: bold;
    color: rgba(0,0,0,1);
}
.jq-note-block .note-widget ul{
    list-style: none;
    padding: 0;
    margin: 10px 0 40px;
    margin-left: 10px;
}
.jq-note-block .note-widget ul.note-new-posts li{
    cursor: pointer;
    color: rgba(0,0,0,.6);
    border-bottom: 1px dotted rgba(0,0,0,.2);
    padding: 10px 0;
    text-align: justify;
}
.jq-note-block .note-widget ul.note-new-posts li:last-child{
    border-bottom: none;
}
.jq-note-block .note-widget ul.note-new-posts li span{
    display: block;
    font-size: 12px;
    color: rgba(0,0,0,.25);
}
.jq-note-block .note-widget ul.note-categories li{
    cursor: pointer;
    color: rgba(0,0,0,.6);
    padding: 5px 0;
}
.jq-note-block .note-widget ul.note-categories li span{
    color: #3392DE;
    font-weight: bold;
    margin-left: 5px;
}

.jq-note-block .note-area {
    padding: 25px 20px 0 10px;
}
.jq-note-block .note-area .note-posts .note-detail,
.note-detail {
    color: rgba(0,0,0,0.35);
    font-size: 12px;
}
.jq-note-block .note-area .note-posts .note-detail span::after,
.note-detail span::after {
    content: "/";
    padding: 0 10px;
}
.jq-note-block .note-area .note-posts .note-detail span:last-child::after,
.note-detail span:last-child::after {
    content: "";
}


/*
 * Component: 頁尾
 * ---------------
 */
.jq-footer {
    background: #f2f2f2;
}
.jq-footer .jq-container {
    border-bottom: 1px solid #e3e3e3;
    /*height: 100px;*/
    margin: 0 24px;
    padding: 24px 0;
}

.jq-footer .jq-container .header {
    color: #333;
    font-weight: bold;
}

.jq-footer .jq-container .content {
    color: #666666;
    font-size: 12px;
    line-height: 22px;
    margin-bottom: 10px;
    text-align: justify;
}

.jq-footer ul.menu-list {
    list-style: none;
    padding: 0;
}

.jq-footer ul.menu-list li,
.jq-footer ul.menu-list li a {
    color: #666666;
    font-size: 12px;
    line-height: 22px;
    text-decoration: none;
    white-space: nowrap;
}

.jq-footer .copynote {
    border-top: 1px solid #fff;
    text-align: center;
    margin: 0 24px;
    padding: 12px 0 14px;
    font-size: 12px;
    color: #7b7b7b;
    /*letter-spacing: 1px;*/
}


/*
 * [改] Bootstrap
 * --------------
 */

.btn { outline: none !important; }
.carousel-indicators li {
    display: inline-block;
    width: 50px;
    height: 5px;
    margin: 0px;
    text-indent: -999px;
    cursor: pointer;
    background-color: rgba(255, 255, 255, 0.3);
    border: none;
    border-radius: 10px
}
.carousel-indicators .active {
    width: 30px;
    height: 5px;
    margin: 0px;
    background-color: #fff
}

.carousel-content {
    position: absolute;
    right: 15%;
    top: 15%;
    left: 15%;
    z-index: 10;
    padding-top: 20px;
    padding-bottom: 20px;
    color: #fff;
    font-size: 2em;
    text-align: center;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
}

.thumbnail {
    position: relative;
}



/*
 * Component: 共用元件
 * ------------------
 */
textarea { resize: none; }
.jq-hr {
    border: 0;
    height: 1px;
    background-image: -webkit-linear-gradient(left, transparent, rgba(0, 0, 0, 0.2), transparent);
    background-image: -moz-linear-gradient(left, transparent, rgba(0, 0, 0, 0.2), transparent);
    background-image: -ms-linear-gradient(left, transparent, rgba(0, 0, 0, 0.2), transparent);
    background-image: -o-linear-gradient(left, transparent, rgba(0, 0, 0, 0.2), transparent);
    background-image: linear-gradient(left, transparent, rgba(0, 0, 0, 0.2), transparent);
    filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#d6d6d6', endColorstr='#d6d6d6',GradientType=0 );
}
.text-blod {
    font-weight: 700;
}
.text-diff-header {
    font-family: 'Alice', serif;
    font-weight: normal !important;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.35);
}
.text-justify{
    text-align: justify;
}

.error {
    color: #e43c59;
}

.pd-bottom-20{
    padding-bottom: 20px;
}
.no-pd {
    padding: 0 !important;
}
.mg-top-10 {
    margin-top: 10px !important;
}
.mg-top-20 {
    margin-top: 20px !important;
}
.mg-top-30 {
    margin-top: 30px !important;
}
.mg-top-40 {
    margin-top: 40px !important;
}
.mg-top-60 {
    margin-top: 60px !important;
}
.mg-left-10 {
    margin-left: 10px !important;
}
.mg-left-22 {
    margin-left: 22px !important;
}
.mg-right-10 {
    margin-right: 10px !important;
}
.no-mg {
    margin: 0 !important;
}

.bg-multi-blue-green{
    background: linear-gradient( 45deg, #3392de , #72e09a );
}



/*
 * media query
 * -----------
 */
@media only screen and (max-width: 850px) {

    .jq-body-text ul.checked-list,
    #accordion_1 {
        padding: 0;
    }

    .jq-template-forms,
    .jq-template-forms.big {
        padding: 0;
    }
}


@media only screen and (max-width: 750px) {

    #jq-globalnav .small-size {
        display: block;
    }

    #jq-globalnav .menu-item.menu-jq-logo {
        display: none;
    }

    #jq-globalnav .default-size .menu-list {
        position: absolute;
        z-index: 2;
        top: 44px;
        right: 0;
        bottom: 0;
        left: 0;
        margin: 0;
        padding: 0 48px;
        height: 0%;
        box-sizing: border-box;
        overflow: hidden;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        -webkit-transition-delay: height ease .35s;
        transition-delay: height ease .35s;
        transition: height ease .5s;
    }

    #jq-globalnav .default-size .menu-list.view {
        height: 300px;
        -webkit-transition-delay: height ease .35s;
        transition-delay: height ease .35s;
        transition: height ease .5s;
    }

    #jq-globalnav .menu-item {
        width: 100%;
        height: 48px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    }
    #jq-globalnav .menu-item:last-child {
        border-bottom: none;
    }

    #jq-globalnav .menu-item .menu-link {
        background-position: left center;
        display: block;
        outline-offset: 0;
        padding: 0;
        padding-left: 10px;
        width: auto;
        max-width: none;
        /*border: 1px solid #fff;*/
    }

    .jq-body.view-all-text .fill-img {
        height: 500px;
    }

    .jq-body.view-all-text .jq-container2 {
        background: #3392DE;
    }

}


@media only screen and (max-width: 550px) {

    .jq-subnav ul li.jq-subnav-paddle {
        display: inline-block;
    }
/*    .jq-quotation-step-block .setp-tracker {
        padding: 0 30px;
    }*/
}

@media only screen and (max-width: 500px) {

    .quotation-block {
        padding: 0 10px 40px !important;
    }

    .quotation-block .jq-template-paddle {
        display: none !important;
    }

    .quotation-block .row {
        margin-right: 0;
        margin-left: 0;
    }
}


@media only screen and (max-width: 330px) {

    .jq-body .jq-container2 .top-banner {
        margin-top: 60px;
    }

}