@charset "UTF-8";
@font-face {
    font-family: 'Acumin Variable Concept';
    src: url('../fonts/Acumin-Variable-Concept.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}


body {
    background-color: black;
}
body * {
    font-family: 'Acumin Variable Concept', sans-serif;
    color: white;
}

a {
    text-decoration: none;
}

.fc-y {
    color: yellow !important;
}
.fc-b {
    color: #279bcd !important;
}
.fc-w {
    color: white !important;
}
.fc-r {
    color: red !important;
}

.xyz_ul ul {
    list-style: none;
    padding-left: 20px;
}

.xyz_ul li {
    position: relative;
}

.xyz_ul li::before {
    content: "";
    width: 5px;
    height: 5px;
    background: #279bcd;
    position: absolute;
    left: -15px;
    top: 6px;
}

/*----上方Menu與Logo----*/
.nav-bar {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    z-index: 100;
    padding: 2rem 5%;
    background-image: url('/PubImages/navbar.png');
    background-size: 100% 100%;
    z-index: 10;
}
.nav-bar .logo {
    width: 20%;
    position: relative;
}
.nav-bar .logo a {
    position: absolute;
    left: 0;
    top: 0;
    transform: translateY(-50%);
}
.nav-bar .menu {
    width: 65%;
}

.menu-body {
    display: flex;
    justify-content: space-between;
}
.menu-body a {
    font-size: 20px;
}
.menu-body a:hover {
    color: yellow;
}

.menu-body-parent {
    position: relative;
}
.menu-body-parent:hover > a {
    color: yellow;
}
.menu-body-event {
    width: 100%;
    height: 4rem;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    cursor: pointer;
}
.menu-body-children {
    position: absolute;
    left: -1rem;
    bottom: -2rem;
    transform: translateY(100%);
    background-image: url('/PubImages//navbar-c.png');
    background-size: 100% 100%;
    width: max-content;
    padding: 1rem;
    transition: 0.2s;
    opacity: 0;
    pointer-events: none;
}
.menu-body-children div:not(:last-child) {
    margin-bottom: 1rem;
}

/*----Footer----*/
.footer-section {
    width: 100%;
    padding: 2rem 2rem 2rem 6rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-image: url('/PubImages/footer.png');
    background-size: 100% 100%;
}

.footer-section-right img {
    width: 20vw;
}

/*----Basic----*/
.basic-body-b {
    padding: 20vh 10vw;
}

.basic-body-s {
    padding: 20vh 20vw;
}

.basic-body-xs {
    padding: 20vh 25vw;
}

.wheels-body-xs {
    padding: 3rem 15vw;
}

.header-img {
    width: 100%;
    height: 60vh;
    overflow: clip;
}

/*----Home----*/
.home-body {
    background-image: url('/Images/Home/bg.png');
    background-size: 100% auto;
}

.home-body-btnnlock {
    padding: 0 20%;
    margin-top: -2rem;
}

.home-body-btnnlock-btn {
    width: 100%;
    height: 40vh;
    position: relative;
    overflow: hidden;
    margin-bottom: 2rem;
    cursor: pointer;
}
.home-body-btnnlock-btn h2 {
    position: absolute;
    left: 5%;
    bottom: 0;
    font-weight: bold;
    letter-spacing: 1px;
}
.home-body-btnnlock-btn img {
    width: 100%;
    transition: 0.2s;
}
.home-body-btnnlock-btn:hover img {
    transform: scale(1.05);
    transition: 0.2s;
}

/*----ABOUT US----*/
.aboutus-body {
    background-color: white;
    
}
.aboutus-body * {
    color: black;
}

/*.aboutus-header {
    padding: 0 10%;
    background-color: black;
}*/

.aboutus-titleblock1 {
    padding: 0 5%;
    display: flex;
    align-items: center;
}
.aboutus-titleblock1 h1 {
    font-size: 100px;
    font-weight: bold;
    letter-spacing: 3px;
}

.aboutus-textblock1 {
    padding: 0 12%;
}
.aboutus-textblock1 h1 {
    font-size: 60px;
    text-align: center;
    font-weight: bold;
    letter-spacing: 2px;
    margin-bottom: 2rem;
}
.aboutus-textblock1 h5 {
    line-height: 36px;
}

.aboutus-textblock2 {
    padding: 0 10%;
}
.aboutus-textblock2 h1 {
    font-size: 60px;
    font-weight: bold;
    letter-spacing: 3px;
    margin-bottom: 2rem;
}
.aboutus-textblock2 h5 {
    line-height: 36px;
}

.aboutus-textblock3 {
    padding: 200px 5%;
}
.aboutus-textblock3 h5 {
    line-height: 32px;
}

.aboutus-textblock4 {
    padding: 150px 0;
}
.aboutus-textblock4 h5 {
    line-height: 32px;
}

/*----MEDIA----*/
.media-title {
    padding: 0px 25vw;
    text-align: center;
}
.media-title h3 {
    background-image: url('/Images/MEDIA/title.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    padding: 20px 0 15px 0;
}

.media-body-videolist {
    display: flex;
    flex-wrap: wrap;
}
.media-body-videoblock {
    width: 25%;
    padding: 1rem;
    margin-bottom: 5rem;
}
.media-body-video {
    background-image: url('/Images/MEDIA/border.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    -webkit-mask: linear-gradient(135deg, transparent 15px, #fff 0) top left;
}
.media-body-video a .text {
    padding: 15px 20px;
    min-height: 80px;
}
.media-body-video a:hover div {
    color: yellow;
}

/*----Warranty----*/
.warranty-table table td {
    padding: 1rem;
    border: 1px solid #333;
}

.warranty-table table .productline {
    background-color: #333;
}

.warranty-table table .title td {
    background-color: #279bcd;
    text-align: center;
    padding: 2rem 0;
}
.warranty-table table .title td:not(:last-child),
.warranty-table table .body td:not(:last-child) {
    border-right: 1px solid #333;
}
.warranty-table table .warning {
    background-color: yellow;
    color: red;
    font-size: 24px;
    font-weight: bold;
}

/*----FAQ----*/
.FAQbody details:not([open]) {
    margin-bottom: 1rem;
}
.FAQbody details summary {
    padding: 1rem;
    background-color: #279bcd;
    list-style-type: none;
    position: relative;
}
.FAQbody details summary i {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 20px;
}
.FAQbody details:not([open]) summary i::before {
    content: '\f64d';
}
.FAQbody details .content {
    padding: 2rem;
}
.FAQbody details .content table td {
    border: 1px solid #279bcd;
    padding: 10px;
}

.FAQbtnblock {
    display: flex;
    justify-content: center;
    margin-bottom: 1.5rem;
}
.FAQbtn {
    text-align: center;
    width: 200px;
    padding: .5rem;
    border: 1px solid #279bcd;
    cursor: pointer;
}
.FAQbtn.is_click {
    background-color: #279bcd;
}

/*----Coilover Index----*/

.coilover-index-btnblock {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding: 3rem 0 5rem 0;
}
.coilover-index-btn {
    background-repeat: no-repeat;
    background-size: 100% 100%;
    padding: 10px 0 5px 0;
    min-width: 300px;
    text-align: center;
    text-transform: uppercase;
    font-size: 22px;
    letter-spacing: 2px;
    cursor: pointer;
}
.coilover-index-btn.left {
    background-image: url('/Images/COILOVER/btn-left.png');
}
.coilover-index-btn.right {
    background-image: url('/Images/COILOVER/btn-right.png');
}
.coilover-index-btn.center {
    min-width: 600px;
    background-image: url('/Images/COILOVER/btn-center.png');
}
.coilover-index-btn:hover a {
    color: yellow;
}

.coilover-index-productblock {
    display: grid;
    justify-content: space-between;
    grid-auto-flow: row;
    grid-template-columns: repeat(4, max-content);
    gap: 0;
}
.coilover-index-product {
    position: relative;
    margin-bottom: 5rem;
    cursor: pointer;
}
.coilover-index-product p {
    text-transform: uppercase;
    position: absolute;
    left: 0;
    top: 0;
    transform: rotate(90deg);
    transform-origin: left top;
}

.coilover-index-product-img {
    background-image: url('/Images/COILOVER/border.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    width: 200px;
    padding: 5px 15px;
}
.coilover-index-product:hover .coilover-index-product-img {
    background-image: url('/Images/COILOVER/borderbg.png');
}


/*----Coilover Menu----*/
.coilover-menu {
    width: 25vw;
    position: relative;
    overflow: clip;
}

.coilover-menu-line {
    width: 100px;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
}

.coilover-menu-list {
    position: absolute;
    top: 300px;
    right: -50px;
}
.coilover-menu-item {
    background-image: url('/Images/COILOVER/menuborder.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    position: relative;
    width: 350px;
    font-size: 14px;
    padding: 5px 40% 5px 0;
    text-align: center;
    margin-bottom: 2rem;
    transition: 0.2s;
}
.coilover-menu-item a {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.coilover-menu-item:hover,
.coilover-menu-item.active {
    color: #279bcd;
    background-image: url('/Images/COILOVER/menuborder-blue.png');
    transform: translateX(-50px);
    transition: 0.2s;
}

/*----Coilover Detail----*/
.basic-coilover-body {
    width: 75vw;
    padding: 20vh 10vw;
}

.coilover-detail-title {
    font-size: 36px;
    color: #279bcd;
    margin-bottom: 2rem;
    text-transform: uppercase;
}
.coilover-detail-up-text {
    margin-bottom: 5rem;
}


.DampingCancellationKit-BrandTable td {
    border: 1px solid white;
    padding: 5px 2px;
    text-align: center;
    background-color: #2A2A2A;
    width: 16.6666%;
}

.DampingCancellationKit-title {
    width: 100%;
    border: 1px solid white;
    font-weight: bold;
    text-align: center;
    letter-spacing: 1px;
}

.DampingCancellationKit-BrandTitle {
    width: 100%;
    border: 1px solid white;
    font-weight: bold;
    text-align: center;
    background-color: white;
    color: black;
}

.DampingCancellationKit-Table th {
    background: #969696;
    color: black;
    padding: 5px;
    text-align: center;
    border: 1px solid white;
}
.DampingCancellationKit-Table td {
    padding: 5px;
    text-align: center;
    border: 1px solid white;
}

/*----Wheels Index----*/
.wheels-body {
    background-color: white;
}
.wheels-body * {
    color: black;
}

.Wheels-Index-videoblock {
    width: 32%;
}
.Wheels-Index-videoblock video {
    width: 100%;
}

.Wheels-ImgHrefBlock {
    display: flex;
    justify-content: space-between;
}
.Wheels-ImgHref {
    width: 23%;
    position: relative;
}

.Wheels-ImgHref a img {
    width: 100%;
}
.Wheels-ImgHref a:hover + div > img {
    transform: translateX(30px);
    transition: .2s;
}
.Wheels-ImgHref-TextBlock {
    position: absolute;
    top: 40%;
    left: 20%;
    pointer-events: none;
}
.Wheels-ImgHref-TextBlock img {
    transition: .2s;
}

.Wheels-HrefBlock {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 5rem 0;
}
.Wheels-Href {
    width: 13%;
    border: 1px solid black;
    text-align: center;
    margin-bottom: 1rem;
    transition: .2s;
}
.Wheels-Href:hover {
    background-color: #dcdcdc;
    transition: .2s;
}
.Wheels-Href a {
    padding: 6px;
    display: block;
}

.WheelsMain-wheels {
    padding: 0 10%;
    margin-top: 2rem;
}
.WheelsMain-wheels-page {
    display: grid;
    grid-auto-flow: row;
    grid-template-columns: repeat(5, 1fr);
    row-gap: 50px;
    column-gap: 5%;
}

.WheelsMain-wheels-item img {
    margin-bottom: 16px;
    transition: .2s;
}
.WheelsMain-wheels-item:hover img {
    transform: scale(1.05);
    transition: .2s;
}
.WheelsMain-wheels-item p {
    margin-bottom: 0;
    font-size: 16px;
    border-bottom: 1px solid black;
}
.WheelsMain-title-left,
.WheelsMain-title-right {
    position: absolute;
    top: 1rem;
    font-size: 68px;
    font-weight: bold;
    font-style: italic;
    color: white;
    letter-spacing: 2px;
    text-shadow: 5px 5px 3px #0000006e;
    opacity: 0;
    transition: opacity 0.6s ease, transform 0.6s ease;
    will-change: opacity, transform;
}
.WheelsMain-title-left.show,
.WheelsMain-title-right.show {
    transform: translateX(0);
    opacity: 1;
}
.WheelsMain-title-left {
    left: 3rem;
    transform: translateX(-80px);
    text-align: left;
}
.WheelsMain-title-right {
    right: 3rem;
    transform: translateX(80px);
    text-align: right;
}

.wheels-body-block {
    padding: 0 5rem;
}

.wheels-title {
    padding: 10px 60px;
    font-size: 24px;
    color: #279bcd;
    background-image: url('/Images/WHEELS/CarbonBorder.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    width: max-content;
    letter-spacing: 2px;
    margin-bottom: 1rem;
    margin-top: 3rem;
}

.wheels-price table {
    width: 100%;
    text-align: center;
    margin-bottom: 1rem;
}
.wheels-price .basic-table th:first-child {
    width: 10%;
}
.wheels-price .basic-table th:nth-child(n+2) {
    width: 9%;
}
.wheels-price .basic-table td {
    border: 3px solid white;
}
.wheels-price .basic-table td[rowspan] {
    background-color: #fff;
    color: black;
}
.wheels-price .basic-table td[colspan] {
    background-color: #838383;
    border-bottom: 1px solid white;
}
.wheels-price .basic-table .table-body td:nth-child(2n-1) {
    border-top: 0;
    border-right: 1px solid white;
}
.wheels-price .basic-table .table-body td:nth-child(2n) {
    border-top: 0;
    border-left: 0;
}
.wheels-price .long-table td {
    border: 3px solid white;
}
.wheels-price .long-table td[rowspan] {
    background-color: #fff;
    color: black;
}
.wheels-price .long-table .table-title td:nth-child(2) {
    background-color: #838383;
    border-left: 0;
    border-bottom: 1px solid white;
}
.wheels-price .long-table .table-body td {
    border-top: 0;
    border-left: 0;
}
.wheels-price .text-table tbody tr:first-child td:first-child {
    border-bottom: 3px solid white;
    border-left: 3px solid white;
    background-color: white;
    color: black;
}
.wheels-price .text-table tbody tr:first-child td:nth-child(2) {
    border-bottom: 3px solid white;
}
.wheels-price .text-table tbody tr:nth-child(n+2) td {
    text-align: left;
    padding: 0 5px;
    border-left: 3px solid white;
    border-right: 3px solid white;
    border-bottom: 1px solid white;
}
.wheels-price .text-table tr:last-child td {
    border-bottom: 3px solid white !important;
}


.wheels-carbon {
    position: relative;
}
.wheels-carbon .bg-img {
    position: absolute;
    top: 4rem;
    left: 50%;
    transform: translateX(-50%);
    width: 99vw;
    z-index: -1;
}

.wheels-carbon-title {
    margin-top: 6rem;
    padding: 0 15%;
    text-align: center;
}

.wheels-carbon-infoblock {
    margin-top: 3rem;
    background-image: url('/Images/WHEELS/CarbonDarkBG.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    padding-bottom: 2rem;
}


.wheels-sn-block {
    padding: 0 10rem;
}

.wheels-sn-textblock1 {
    background-image: url('/Images/WHEELS/SnSeriesBlueBorder.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    padding: 3rem 5rem;
    margin-top: 5rem;
    margin-bottom: 10rem;
}

.wheels-sn-infoblock {
    margin-top: 3rem;
    background-image: url('/Images/WHEELS/SnSeriesBlueBorder2.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    padding-bottom: 2rem;
    margin-bottom: 10rem;
}

/*----Brakes----*/
.brakes-index-lefttext {
    position: absolute;
    width: 90%;
    left: 0;
    bottom: 0;
    transform: translateY(50%);
}
.brakes-index-righttext {
    position: absolute;
    width: 90%;
    right: 0;
    bottom: 0;
    transform: translateY(50%);
}

.brakes-index-leftimg {
    width: 90%;
    position: absolute;
    top: 0;
    left: -20%;
    opacity: 0;
    
}
.brakes-index-leftimg.show {
    left: 0;
    opacity: 1;
    transition: 1s;
}

.brakes-index-rightimg {
    width: 90%;
    position: absolute;
    top: 0;
    right: -20%;
    opacity: 0;
}
.brakes-index-rightimg.show {
    right: 0;
    opacity: 1;
    transition: 1s;
}

.brakes-index-item-text {
    background-image: url('/Images/BRAKES/brakes_btn_7.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    padding: 1rem 0;
    width: 100%;
    text-align: center;
    margin-bottom: 0;
}

.brakes-index-special,
.brakes-index-monoblock {
    margin-top: 150px;
    padding: 0 5%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.brakes-index-item {
    overflow: hidden;
}
.brakes-index-item img {
    transition: .2s;
}
.brakes-index-item:hover img {
    transform: scale(1.05);
    transition: .2s;
}
.brakes-index-other {
    margin-top: 150px;
    padding: 0 5%;
    display: flex;
    flex-wrap: wrap;
}
.brakes-index-other-text {
    background-image: url('/Images/BRAKES/brakes_btn_blue.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    padding: 1.5rem 0;
    min-width: 400px;
    text-align: center;
    margin-bottom: 0;
}
.brakes-index-other img {
    transition: .2s;
}
.brakes-index-other a:hover img {
    transform: scale(1.05);
    transition: .2s;
}

.RearEnlargedDiscKit-body {
    padding: 20vh 15vw;
}
.RearEnlargedDiscKit-Title {
    border-top: 1px solid white;
    border-left: 1px solid white;
    border-right: 1px solid white;
    background-color: yellow;
    font-size: 20px;
    padding: 10px;
    text-align: center;
    color: black;
}
.RearEnlargedDiscKit-Title1 {
    border-top: 1px solid white;
    border-left: 1px solid white;
    border-right: 1px solid white;
    font-size: 16px;
    padding: 10px;
    text-align: center;
}
.RearEnlargedDiscKit-Brand td {
    border: 1px solid white;
    padding: 10px 2px;
    text-align: center;
    width: 16.6666%;
}
.RearEnlargedDiscKit-BrandName {
    border: 1px solid white;
    background-color: white;
    color: black;
    text-align: center;
    font-weight: bold;
    padding: 5px;
}
.RearEnlargedDiscKit-Model th {
    background-color: #969696;
    padding: 10px;
    text-align: center;
    color: black;
    border: 1px solid white;
}
.RearEnlargedDiscKit-Model td {
    border: 1px solid white;
    padding: 5px;
    text-align: center;
    height: 60px;
}

.brake-md-ImgBlock {
    position: relative;
}
.brake-md-ImgBlock h2 {
    position: absolute;
    top: 15px;
    left: 10px;
}

/*----Camber Kit----*/
.camber-title {
    padding: 1.5rem 0 1rem 0;
    margin-bottom: 3rem;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: url('/Images/CAMBER KIT/text_bg.png');
    background-size: 100% 100%;
}

.camber-swiper {
    position: relative;
}
.camber-swiper .swiper-button-prev,
.camber-swiper .swiper-button-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}
.camber-swiper .swiper-button-prev {
    left: -48px;
}
.camber-swiper .swiper-button-next {
    right: -48px;
}

.camber-slide {
    position: relative;
    margin-bottom: 1.5rem;
}
.camber-slide .glass {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    pointer-events: none;
}

/*----XYZ Goods----*/
.goods-title h1 {
    text-align: center;
    color: #279bcd;
    letter-spacing: 1px;
}

.goods-itemblock {
    width: 13%;
    border: 1px solid #279bcd;
    padding: 1.5rem 1rem 0 1rem;
    text-align: center;
    margin: 0 .5rem 1rem .5rem;
    cursor: pointer;
}
.goods-itemblock:hover p {
    color: yellow;
}

/*----Form----*/
.xyzform-line {
    display: flex;
    border-bottom: 1px solid white;
    margin-bottom: 2rem;
}

.xyzform-line div {
    white-space: nowrap;
}

.xyzform-line input[type="text"],
.xyzform-line input[type="email"] {
    margin-left: 1.5rem;
    width: 100%;
    background-color: black;
    border: none;
    outline: none;
    box-shadow: none;
}

.xyzform-line input[type="text"]:focus,
.xyzform-line input[type="email"]:focus {
    border: none;
    outline: none;
    box-shadow: none;
}

.xyzform-btn {
    background-color: white;
    color: black;
    padding: 5px 15px;
    border: none;
    min-width: 120px;
}

.xyzform-warning {
    padding: 1rem;
    border: 1px solid white;
    margin-top: 2rem;
}