@font-face {
    font-family: 'Rigid_Square'; /*a name to be used later*/
    src: url('/templates/jd_shop/fonts/fonnts.com-Rigid_Square_Bold.otf'); /*URL to font*/
    font-weight: 700;
}

@font-face {
    font-family: 'Rigid_Square'; /*a name to be used later*/
    src: url('/templates/jd_shop/fonts/fonnts.com-Rigid_Square_Bold_Italic.otf'); /*URL to font*/
    font-style: italic;
    font-weight: 700;
}

@font-face {
    font-family: 'Rigid_Square'; /*a name to be used later*/
    src: url('/templates/jd_shop/fonts/fonnts.com-Rigid_Square_ExtraBold.otf'); /*URL to font*/
    font-weight: 800;
}

@font-face {
    font-family: 'Rigid_Square'; /*a name to be used later*/
    src: url('/templates/jd_shop/fonts/fonnts.com-Rigid_Square_ExtraBold_Italic.otf'); /*URL to font*/
    font-style: italic;
    font-weight: 700;
}

@font-face {
    font-family: 'Rigid_Square'; /*a name to be used later*/
    src: url('/templates/jd_shop/fonts/fonnts.com-Rigid_Square_ExtraLight.otf'); /*URL to font*/
    font-weight: 200;
}

@font-face {
    font-family: 'Rigid_Square'; /*a name to be used later*/
    src: url('/templates/jd_shop/fonts/fonnts.com-Rigid_Square_ExtraLight_Italic.otf'); /*URL to font*/
    font-style: italic;
    font-weight: 200;
}

@font-face {
    font-family: 'Rigid_Square'; /*a name to be used later*/
    src: url('/templates/jd_shop/fonts/fonnts.com-Rigid_Square_Italic.otf'); /*URL to font*/
    font-style: italic;
}

@font-face {
    font-family: 'Rigid_Square'; /*a name to be used later*/
    src: url('/templates/jd_shop/fonts/fonnts.com-Rigid_Square_Light_Italic.otf'); /*URL to font*/
    font-style: italic;
    font-weight: 300;
}

@font-face {
    font-family: 'Rigid_Square'; /*a name to be used later*/
    src: url('/templates/jd_shop/fonts/fonnts.com-Rigid_Square_Regular.otf'); /*URL to font*/
}

@font-face {
    font-family: 'Rigid_Square'; /*a name to be used later*/
    src: url('/templates/jd_shop/fonts/fonnts.com-Rigid_Square_SemiBold.otf'); /*URL to font*/
    font-weight: 600;
}

@font-face {
    font-family: 'Rigid_Square'; /*a name to be used later*/
    src: url('/templates/jd_shop/fonts/fonnts.com-Rigid_Square_SemiBold_Italic.otf'); /*URL to font*/
    font-style: italic;
    font-weight: 600;
}

@font-face {
    font-family: 'Rigid_Square'; /*a name to be used later*/
    src: url('/templates/jd_shop/fonts/fonnts.com-Rigid_Square_Thin.otf'); /*URL to font*/
    font-weight: 100;
}

@font-face {
    font-family: 'Rigid_Square'; /*a name to be used later*/
    src: url('/templates/jd_shop/fonts/fonnts.com-Rigid_Square_Thin_Italic.otf'); /*URL to font*/
    font-style: italic;
    font-weight: 100;
}

.showRule {
    visibility: visible !important;
    /*transition: visibility 500ms;*/

}

.hideRule {
    visibility: hidden !important;
    /*transition: visibility 500ms;*/
}

.header-show-bg {
    /*background: #00000099 !important;*/
    background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0)) !important;
    transition: background 500ms;
}

.header-hide-bg {
    background: transparent !important;
    transition: background 500ms;
}


#sp-header #sp-logo {
    visibility: hidden;
    padding-left: 3%;
}


#sp-menu .sp-megamenu-wrapper ul.sp-megamenu-parent li > a {
    color: #ccc;
}

.logo-slogan {
    color: #ccc;
}

#sp-header #sp-logo {
    /*background: #ffffff77;*/
}




/*轉場動畫*/

#preloader {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    /*width: 100%;*/
    height: 100vh;
    background-color: #000;
}

#sp-header {
    background: transparent;
    position: absolute;
}

@media screen and (min-width: 1024px) {

    #preloader {
        transform: translateX(-50%) scale(1.1);
    }

    #sp-header {
        top: 95vh;
    }
}


.displayNone {
     display: none !important;
}

.opacityTransition {
    -webkit-transition: opacity 500ms;
    transition: opacity 500ms;
}


#preloader .block {
    height: 100vh;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.block {
    width: 100vw;
    margin: 0 auto;
    text-align: left;
}

#preloader .b1 {
    animation: loop2 3s 100ms 1;
    -moz-animation: loop2 3s 100ms 1;
    -webkit-animation: loop2 3s 100ms 1;
    -o-animation: loop2 3s 100ms 1;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite; }
#preloader .b2 {
    animation: loop2 3s 200ms 1;
    -moz-animation: loop2 3s 200ms 1;
    -webkit-animation: loop2 3s 200ms 1;
    -o-animation: loop2 3s 200ms 1;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite; }
#preloader .b3 {
    animation: loop2 3s 300ms 1;
    -moz-animation: loop2 3s 300ms 1;
    -webkit-animation: loop2 3s 300ms 1;
    -o-animation: loop2 3s 300ms 1;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite; }
#preloader .b4 {
    animation: loop2 3s 400ms 1;
    -moz-animation: loop2 3s 400ms 1;
    -webkit-animation: loop2 3s 400ms 1;
    -o-animation: loop2 3s 400ms 1;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite; }
#preloader .b5 {
    animation: loop2 3s 500ms 1;
    -moz-animation: loop2 3s 500ms 1;
    -webkit-animation: loop2 3s 500ms 1;
    -o-animation: loop2 3s 500ms 1;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite; }
#preloader .b6 {
    animation: loop2 3s 600ms 1;
    -moz-animation: loop2 3s 600ms 1;
    -webkit-animation: loop2 3s 600ms 1;
    -o-animation: loop2 3s 600ms 1;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite; }
#preloader .b7 {
    animation: loop2 3s 700ms 1;
    -moz-animation: loop2 3s 700ms 1;
    -webkit-animation: loop2 3s 700ms 1;
    -o-animation: loop2 3s 700ms 1;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite; }
#preloader .b8 {
    animation: loop2 3s 800ms 1;
    -moz-animation: loop2 3s 800ms 1;
    -webkit-animation: loop2 3s 800ms 1;
    -o-animation: loop2 3s 800ms 1;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite; }
#preloader .b9 {
    animation: loop2 3s 900ms 1;
    -moz-animation: loop2 3s 900ms 1;
    -webkit-animation: loop2 3s 900ms 1;
    -o-animation: loop2 3s 900ms 1;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite; }
#preloader .b10 {
    animation: loop2 3s 1000ms 1;
    -moz-animation: loop2 3s 1000ms 1;
    -webkit-animation: loop2 3s 1000ms 1;
    -o-animation: loop2 3s 1000ms 1;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite; }
#preloader .b11 {
    animation: loop2 3s 1100ms 1;
    -moz-animation: loop2 3s 1100ms 1;
    -webkit-animation: loop2 3s 1100ms 1;
    -o-animation: loop2 3s 1100ms 1;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite; }
#preloader .b12 {
    animation: loop2 3s 1200ms 1;
    -moz-animation: loop2 3s 1200ms 1;
    -webkit-animation: loop2 3s 1200ms 1;
    -o-animation: loop2 3s 1200ms 1;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite; }
#preloader .b13 {
    animation: loop2 3s 1300ms 1;
    -moz-animation: loop2 3s 1300ms 1;
    -webkit-animation: loop2 3s 1300ms 1;
    -o-animation: loop2 3s 1300ms 1;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite; }
#preloader .b14 {
    animation: loop2 3s 1400ms 1;
    -moz-animation: loop2 3s 1400ms 1;
    -webkit-animation: loop2 3s 1400ms 1;
    -o-animation: loop2 3s 1400ms 1;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite; }
#preloader .b15 {
    animation: loop2 3s 1500ms 1;
    -moz-animation: loop2 3s 1500ms 1;
    -webkit-animation: loop2 3s 1500ms 1;
    -o-animation: loop2 3s 1500ms 1;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite; }

@-webkit-keyframes loop {
    0% {
        opacity: 0.5; }
    10% {
        opacity: 1; }
    20% {
        opacity: 0.25; }
    100% {
        opacity: 0; } }

@keyframes loop {
    0% {
        opacity: 0.5; }
    10% {
        opacity: 1; }
    20% {
        opacity: 0.25; }
    100% {
        opacity: 0; } }


@-webkit-keyframes loop2 {
    0% {
        opacity: 0;
    }
    25% {
        opacity: 0.15;
    }
    100% {
        opacity: 0;
    }
}

@keyframes loop2 {
    0% {
        opacity: 0;
    }
    25% {
        opacity: 0.15;
    }
    100% {
        opacity: 0;
    }
}

#preloader .preloaderCol {
    -ms-flex-item-align: center;
    align-self: center;
    opacity: 0;
    -webkit-transition: background-color 500ms;
    transition: background-color 500ms;
}

#preloader .boxBorderRightGray {
    border-right: 1px solid white;
}

.col1 {
    width: calc( 100vw / 15);
}

.vh100 {
    height: 100vh;
}


#preloader .blockfront {
    position: absolute;
    top: 0;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}

#preloader .blockfront .preloaderCol {
    height: 10px;
    opacity: 0;
}

#preloader .a1 {
    animation: loop 3s 100ms 1;
    -moz-animation: loop 3s 100ms 1;
    -webkit-animation: loop 3s 100ms 1;
    -o-animation: loop 3s 100ms 1;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}

#preloader .a2 {
    animation: loop 3s 200ms 1;
    -moz-animation: loop 3s 200ms 1;
    -webkit-animation: loop 3s 200ms 1;
    -o-animation: loop 3s 200ms 1;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite; }
#preloader .a3 {
    animation: loop 3s 300ms 1;
    -moz-animation: loop 3s 300ms 1;
    -webkit-animation: loop 3s 300ms 1;
    -o-animation: loop 3s 300ms 1;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite; }
#preloader .a4 {
    animation: loop 3s 400ms 1;
    -moz-animation: loop 3s 400ms 1;
    -webkit-animation: loop 3s 400ms 1;
    -o-animation: loop 3s 400ms 1;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite; }
#preloader .a5 {
    animation: loop 3s 500ms 1;
    -moz-animation: loop 3s 500ms 1;
    -webkit-animation: loop 3s 500ms 1;
    -o-animation: loop 3s 500ms 1;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite; }
#preloader .a6 {
    animation: loop 3s 600ms 1;
    -moz-animation: loop 3s 600ms 1;
    -webkit-animation: loop 3s 600ms 1;
    -o-animation: loop 3s 600ms 1;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite; }
#preloader .a7 {
    animation: loop 3s 700ms 1;
    -moz-animation: loop 3s 700ms 1;
    -webkit-animation: loop 3s 700ms 1;
    -o-animation: loop 3s 700ms 1;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite; }
#preloader .a8 {
    animation: loop 3s 800ms 1;
    -moz-animation: loop 3s 800ms 1;
    -webkit-animation: loop 3s 800ms 1;
    -o-animation: loop 3s 800ms 1;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite; }
#preloader .a9 {
    animation: loop 3s 900ms 1;
    -moz-animation: loop 3s 900ms 1;
    -webkit-animation: loop 3s 900ms 1;
    -o-animation: loop 3s 900ms 1;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite; }
#preloader .a10 {
    animation: loop 3s 1000ms 1;
    -moz-animation: loop 3s 1000ms 1;
    -webkit-animation: loop 3s 1000ms 1;
    -o-animation: loop 3s 1000ms 1;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite; }
#preloader .a11 {
    animation: loop 3s 1100ms 1;
    -moz-animation: loop 3s 1100ms 1;
    -webkit-animation: loop 3s 1100ms 1;
    -o-animation: loop 3s 1100ms 1;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite; }
#preloader .a12 {
    animation: loop 3s 1200ms 1;
    -moz-animation: loop 3s 1200ms 1;
    -webkit-animation: loop 3s 1200ms 1;
    -o-animation: loop 3s 1200ms 1;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite; }
#preloader .a13 {
    animation: loop 3s 1300ms 1;
    -moz-animation: loop 3s 1300ms 1;
    -webkit-animation: loop 3s 1300ms 1;
    -o-animation: loop 3s 1300ms 1;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite; }
#preloader .a14 {
    animation: loop 3s 1400ms 1;
    -moz-animation: loop 3s 1400ms 1;
    -webkit-animation: loop 3s 1400ms 1;
    -o-animation: loop 3s 1400ms 1;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite; }
#preloader .a15 {
    animation: loop 3s 1500ms 1;
    -moz-animation: loop 3s 1500ms 1;
    -webkit-animation: loop 3s 1500ms 1;
    -o-animation: loop 3s 1500ms 1;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite; }


#preloaderLabel {
    -moz-text-align-last: justify;
    text-align-last: justify;
    opacity: 0;
}

.textTiny {
    font-size: 12px;
    line-height: 18px;
}

.box {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    display: inline-block;
    vertical-align: top;
    overflow: hidden;
    text-align: justify;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.opacityTransitionSlow {
    -webkit-transition: opacity 2000ms;
    transition: opacity 2000ms;
}


#preloader .boxBorderRightGray {
    border-right: 1px solid white;
}


#preloader .row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}


.block .row {
    max-width: 1600px;
    margin: 0 auto;
    font-size: 0;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

#preloader .blockfront .boxBorderRightGray {
    border-right: 1px solid white;
}


/*!*/


.sp-menu-item i.fa.fa-circle {
    display: none;
}


#sp-main-body > .container {
    width: 100% !important;
    padding-left: 0;
    padding-right: 0;
}


/*logo顏色*/
#sp-header .logo a {
    color: white;
}

.project-thumbnail img,  .project-thumbnail video {
    padding:3%;
}

#sp-header .logo a img {
    max-width: 100%;
}

/*go to top*/
a.scrollup {
    background: #dce330;
    border: 1px solid #dce330;
}

.sp-megamenu-parent >li >a {
    letter-spacing: 3px;
    /*transform: scale(1.5);*/
}

#sp-menu {
    /*left: -200px;*/
}


#sp-menu .sp-megamenu-wrapper ul.sp-megamenu-parent li:hover > a {
    color: #dce330;
}

#qx-text-9174 p span span, #qx-text-182142 p span span, .sp-menu-item a span {
    display: inline-block;
    position: relative;
}


#qx-text-182142 > p, #qx-text-9174 > p {
    /*bottom: -300px;*/
    position: relative;
}


body.itemid-101 .qx-element.qx-element-image {
    position: relative;
    transition: all 1s ease;
}

body.itemid-101 .qx-element-image p.title, body.itemid-101  .qx-element-image p.sub-title {
    /*visibility: hidden;*/
    opacity: 0;
    position: absolute;
    left: 35%;
    letter-spacing: -16px;
    transition: all 1s;
    transition-timing-function: cubic-bezier(0,0.78,0.9,1);
}

body.itemid-101 .qx-element-image p.title {
    color: white;
    top: 39%;
    left:25%;
    font-size: 30px;
}

body.itemid-101 .qx-element-image p.sub-title {
    font-size: 15px;
    position: absolute;
    top: 50%;
    color: white;
    left: 25%;
}

body.itemid-101 .qx-element.qx-element-image:hover p {
    opacity: 1;
    letter-spacing: 0;
}

body.itemid-101 .qx-element.qx-element-image:hover {
    transform: scale(1.1);
    filter: brightness(0%);
    filter: contrast(150%);
}

#sp-menu, #sp-logo {
    /*opacity: 0.05;*/
    /*display: none;*/
    /*visibility: hidden;*/
    /*opacity: 0;*/
}

#sp-menu {
    /*top: 90px;*/
    /*left: 81px;*/
    /*position: relative !important;*/
}

#sp-logo {
    /*top: 151px;*/
    /*left: -43px;*/
    /*position: relative;*/
    /*top: 7vh;*/
    /*left: 4vw;*/

    position: fixed;
    top: 0;
    /*transition: visibility 500ms;*/
}

#sp-logo a {
    /*position: fixed;*/
    /*top: 8%;*/
    /*right: 72%;*/
    opacity: 1;
    font-weight: 900;
    font-size: 43px !important;
}

body {
    background-color: black !important;
    font-family: Rigid_Square, sans-serif !important;
}

.down-arrow {
    position: absolute;
    bottom: 0;
    /*border: 1px solid white;*/
    width: 200px;
    height: 200px;
    left: 45%;
    cursor: pointer;
}

#qx-custom-html-2329 {
    position: relative;
}




#qx-custom-html-11570, #qx-custom-html-3713 {
    text-align: center;
    position: relative;
    margin:0 auto;

    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    overflow: visible;
    width: calc( 100vw / 15 * 9);
}

body.itemid-450 #qx-custom-html-11570 {
    width:100%;
}

#video2, #video2_2 {
    /*position: absolute;*/
    /*left: 0;*/
    /*top: 0;*/
    display: none;
    width: 100%;
}

.videoPlaybutton, .videoPlaybutton2 {
    display: flex;
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    position: absolute;
    -ms-flex-item-align: center;
    align-self: center;
    cursor: pointer;

    width: calc( 100vw / 15);
}

.videoPlaybutton .videoPlaybuttonImg, .videoPlaybutton2 .videoPlaybuttonImg {
    opacity: 0;
    -ms-flex-item-align: center;
    align-self: center;
    -webkit-transition: opacity 0.5s;
    transition: opacity 0.5s;
    width: calc( 100vw / 15);

}

.videoPlaybutton .videoPlaybuttonHoverImg, .videoPlaybutton2 .videoPlaybuttonHoverImg {
    position: absolute;
    align-self: center;
    -webkit-transition: opacity 0.5s;
    transition: opacity 0.5s;
    width: calc( 100vw / 15);
}

.videoPlaybutton:hover .videoPlaybuttonImg, .videoPlaybutton2:hover .videoPlaybuttonImg {
    opacity: 1;
}

.videoPlaybutton:hover .videoPlaybuttonHoverImg, .videoPlaybutton2:hover .videoPlaybuttonHoverImg {
    opacity: 0;
}


#sp-copyright-a {
    display: none;
}

#sp-menu > div > div > ul > li > a {

    font-weight: 200;
    font-size: 20px;
}
/*#sp-menu > div > div > ul > li:nth-child(1) > a {*/
/*    position: fixed;*/
/*    top: 3%;*/
/*    right: 33%;*/
/*    font-size: 20px;font-weight: 200;*/
/*}*/

/*#sp-menu > div > div > ul > li:nth-child(2) > a {*/
/*    position: fixed;*/
/*    top: 3%;*/
/*    right: 21%;*/
/*    font-size: 20px;font-weight: 200;*/
/*}*/


/*#sp-menu > div > div > ul > li:nth-child(3) > a {*/
/*    position: fixed;*/
/*    top: 3%;*/
/*    right: 10%;*/
/*    font-size: 20px;font-weight: 200;*/
/*}*/


@font-face {
    font-family: Vudotronic;
    src: url("/images/font/Vudotronic.otf") format("opentype");
}

@font-face {
    font-family: GothamBook;
    src: url("/images/font/GOTHAM BOOK.TTF") format('truetype');
}


#sp-menu > div > div > ul > li > a {
    font-family: Rigid_Square, sans-serif;
}


.qx-element.qx-element-text > p > span {
    font-family: Rigid_Square, sans-serif;
    font-weight: 100;
}

#in-vid, #loop-vid {
    width:100vw;
}

@media screen and (max-width: 991px) {
    #in-vid, #loop-vid {
        width:initial;
        height: 100vh;
    }

    #in-vid-m, #loop-vid-m {
        width:100vw;
        /*height: 100vh;*/
    }

}

#sp-menu .sp-megamenu-wrapper ul.sp-megamenu-parent li > a {
    font-size: 1.1vw;
}


body {
    background-color: black;
}


#qx-custom-html-3713 {
    margin-top: 80px;
}


body.itemid-452 .qx-element {
    display: flex;
}


.seo-hidden-indent-text {
    color: red;
    height: 1px;
    text-indent: -9999px;
    white-space: nowrap;
    position: relative;
}


#sp-footer-b > div > div > h3 {
    text-align: right;
    font-size: 13px !important;
    font-weight: 400;
    color: #000 !important;
}


#sp-footer-b > div > div > div > div > div > ul > li > a {
    font-size: 110px !important;
    font-weight: 600;
    color: #000 !important;
}

footer#sp-footer div[id*="sp-footer-"][class*="col-md-"]:after {
    content: unset !important;
}

footer#sp-footer p {
    color: black !important;
}

#sp-footer-a .footer-logo {
    line-height: 60px;
    font-size:33px;

    color: #000 !important;
}

#sp-footer-a > div > div > div > div > div > p:nth-child(2) {
    font-size: 16px;
    color: #000 !important;

}

#sp-footer-a > div > div > div > div > div > p:nth-child(2) > span { /*term*/
    text-decoration: underline;
}

#sp-footer {
    background: #C4C4C4 !important;
    color: black;
}



#qx-text-78447 > p:nth-child(3) > a {
    color: white;
    background: #000;
    font-size: 80% !important;
    padding: 7px 23px;
    display: block;
    width: 100px;
    margin: 0 auto;
    margin-top: 50px;
}

#qx-text-78447 > p:nth-child(1) {
    font-weight: 700 !important;
    font-size: 38px !important;
    color: #000000;
}

#qx-text-8110 {
    background: #FFFFFF;
}
#qx-text-8110 > p {
    padding: 300px 200px;
    text-align: center;
    font-size: 51px;
}


#qx-row-735 {
    background: white;
}
#qx-text-36206 > p {
    text-align: center;
    font-size: 300px;
    font-weight: 900;
    position: relative;
    top: 50px;
}

#qx-row-70103 {
    background: #F2F2F2;
}

#qx-text-34326 {
    font-size: 40px;
    font-weight: 500;
    line-height: 40px;
}

#qx-row-70103 {
    padding: 110px 100px;
}



#qx-row-58445 {
    background: #E0E0E0;
    padding: 110px 100px;
}

#qx-text-72454 {
    font-size: 40px;
    font-weight: 500;
    line-height: 50px;
    padding: 0 100px;
}

#qx-text-85515 {

    font-size: 300px;
    font-weight: 900;
    position: relative;
    top: 50px;
}


#qx-row-94751 {
    background: #fff;
    padding: 110px 100px;
    font-size: 50px;
    font-weight: 700;
}

#qx-row-40876 {
    padding: 110px 100px;
    background: #fff;
}

#qx-text-60886 > p:nth-child(1) {
    font-size: 50px;
    line-height: 54px;
}

#qx-row-37947 {
    padding: 110px 100px;
    background: #fff;
}

#qx-text-81956 > p:nth-child(1) {
    font-size: 50px;
    line-height: 54px;
}

#qx-row-341078 {
    padding: 110px 100px;
    background: #fff;
}

#qx-text-951076 > p:nth-child(1) {
    font-size: 50px;
    line-height: 54px;
}


#qx-row-21148 {
    background: #fff;
    padding: 110px 100px;
    font-size: 50px;
    font-weight: 700;
}


#qx-row-941214, #qx-row-621223 {
    background: #fff;
    padding: 110px 100px;
}

#qx-row-981600 {
    padding: 110px 100px;
    background: #fff;
    font-size: 50px;
    font-weight: 700;
    line-height: 60px;
}

#qx-text-491594 > p:nth-child(2) {
    font-weight: 400;
}

#qx-row-81665 {
    padding: 110px 100px;
    background: #fff;

}


#qx-row-191731 {
    padding: 110px 100px;
    background: #fff;
}


#qx-row-282029 {
    padding: 110px 100px;
    background: #fff;
}

#qx-text-02034 > p > a {

    color: white;
    background: #000;
    font-size: 80% !important;
    padding: 7px 23px;
    display: block;
    width: 100px;
    margin: 0 auto;
    margin-top: 50px;
}


#qx-text-511228 > p, #qx-text-241289 >p, #qx-text-831350 > p,
#qx-text-781411 > p, #qx-text-121533 >p, #qx-text-01472 >p
{
    text-align: center;
    font-size: 30px;
    line-height: 32px;
    font-weight: 500;
}

#qx-text-511228 > p:first-letter, #qx-text-241289 > p:first-letter, #qx-text-831350 > p:first-letter,
#qx-text-781411 > p:first-letter, #qx-text-121533 > p:first-letter, #qx-text-01472 > p:first-letter
{

    font-size: 100px;
    font-weight: 700;
}

#qx-row-941214 .qx-column .qx-element {
    padding: 67px 20px;
    border: 1px solid;
}

#qx-row-941214 .qx-column {
    padding-right: 0 !important;
    padding-left: 0 !important;
}

#qx-row-941214 .qx-column .qx-element {
    border-right: 0;
    border-bottom: 0;
}

#qx-text-781411, #qx-text-121533, #qx-text-01472 {
    border-bottom: 1px solid !important;
}

#qx-text-831350, #qx-text-01472 {
    border-right: 1px solid !important;
}


#qx-text-41670 > p:nth-child(1) {
    font-size: 50px;
    font-weight: 700;
}


#qx-text-41670 > p:nth-child(2) {
    text-align: center;
    width: 70%;
    margin: 70px auto;
}


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

    * {
        line-height: initial;
    }

    #qx-text-72454 {
        padding: unset;
    }


    #qx-row-941214 .qx-column .qx-element {
        border: 0px solid;
    }


    #qx-text-781411, #qx-text-121533, #qx-text-01472 {
        border-bottom: 0 solid !important;
    }


    #qx-text-781411, #qx-text-121533, #qx-text-01472 {
        border-bottom: 0 solid !important;
    }

    #qx-text-831350, #qx-text-01472 {
        border-right: 0 solid !important;
    }


    #qx-row-981600,  #qx-row-81665, #qx-row-341078, #qx-row-70103, #qx-row-58445, #qx-row-94751, #qx-row-40876, #qx-row-37947, #qx-row-21148, #qx-row-941214 {
        padding: 30px 40px;
    }

    #qx-text-8110 > p {
        padding: 30px 40px;
    }


    #qx-text-34326 {
        text-align: center;
        font-size: 30px;
    }


    #qx-text-72454 {
        text-align: center;
        font-size: 29px;
    }

    #sp-footer-a .footer-logo {
        font-size: 23px;
    }


    #qx-text-41670 > p:nth-child(2), #qx-text-81956 > p:nth-child(2), #qx-text-951076 > p:nth-child(2), #qx-text-60886 > p:nth-child(2) {
        width: 90%;
        margin: 40px auto;
        font-size: 18px;
        line-height: 1.5;
    }

    #sp-footer-b > div > div {
        zoom: 0.4;


    }

    #sp-footer-b {
        position: relative;
        top: -91px;
    }


    /*hello頁面調整*/

    body.site.com-contact.view-contact #sp-component > div > div.container > div:nth-child(1) > div {
        padding: 30px 20px !important;
        font-size: 30px !important;
        padding-top: 120px !important;
    }

    body.site.com-contact.view-contact #sp-component > div > div.container > div:nth-child(2) > div:nth-child(1) > div:nth-child(1),
    body.site.com-contact.view-contact #sp-component > div > div.container > div:nth-child(2) > div:nth-child(2) > div:nth-child(1) {
        font-size: 30px !important;
    }


    body.site.com-contact.view-contact .form-horizontal .controls {
        width: 90%;
    }

    body.site.com-contact.view-contact .form-horizontal input, body.site.com-contact.view-contact .form-horizontal textarea {
        width: 85% !important;
    }


    #sp-header .logo a img {
        max-width: 250%;
    }

    .qx-element-slider .qx-slide {
        height: 300px !important;
    }

    #sp-header #sp-logo .logo {
        height: 50px !important;
    }



    /*手機版的字型大小調整，首頁除外*/
    body.site.com-quix.view-page:not(.itemid-101)  .section-title .qx-subtitle p > span, body.site.com-quix.view-page:not(.itemid-101)  .section-title .qx-subtitle p {
        font-size: 16px !important;
    }
}


body.site.com-quix.view-page h2 {
    font-family: Rigid_Square, sans-serif !important;
    font-weight: 200 !important;
}


@media (min-width: 1200px) {
    #sp-header .container {
        width: 100%;
    }
}


div.qx-element-heading .qx-subtitle {
    font-family: Rigid_Square, sans-serif !important;
    font-weight: 200 !important;
}

/*暫時把footer隱藏*/
#sp-footer {
    display: none;
}


.fullwidth-image img {
    width: 100%;
}


.qx-element-slider .qx-slide {
    background-repeat: no-repeat;
    background-position: center center !important;
    background-size: 100% auto !important;
    position: relative;
    height: 600px;
}

.qx-element-slider .qx-slide .qx-slide__container {
    visibility: hidden;
}

.qx-sliders button {
    visibility: hidden;
}


.scrollup:before {
    color: #fff !important;
}

#sp-header .logo {
    height: 50px !important;
}


#offcanvas-toggler >i {
    color: #999 !important;
}


#sp-menu.col-md-10 {
    width: 100% !important;
}


#sp-logo.col-md-2 {
    width: 19.666667% !important;
}

#sp-menu {
    padding-right: 2%;
}

@media only screen and (min-width: 2160px) {
    #sp-header {
        padding: 1% !important;
    }
}


/*video popup 關掉點擊功能*/
body.site.com-quix.view-page .qx-element.qx-element-video-popup {
    pointer-events: none;
}

#qx-section-8043 .section-title > h3 {
    text-transform:uppercase;
}


/*專案頁面裡頭的圖片都滿版*/
body.site.com-quix.view-page:not(.itemid-101)  .qx-img, body.site.com-quix.view-page:not(.itemid-101) a.vidwrap img  {
    width: 100%;
}


::selection {
    background: #EAFE00;
    color: #333; /* 可自行調整文字顏色 */
}


/*副標都先隱藏*/
body.itemid-101 .qx-element-heading:not(#qx-heading-70118) > div.section-title > div.qx-subtitle > p {
    display: none;
}


/*轉場動畫*/
#loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #fff;  /* 你可改成深色、圖片、動畫 */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.loader {
    width: 40px;
    height: 40px;
    border: 4px solid #ccc;
    border-top-color: #333;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}