.bg_01 {z-index:0; position:absolute; top:1038px; left:0; width:100%; height:100%; background-repeat:no-repeat; background-position: center top; pointer-events:none;} .bg_02 {z-index:0; position:absolute; top:2513px; left:0; width:100%; height:100%; background-repeat:no-repeat; background-position: center top; pointer-events:none;} .bg_03 {z-index:0; position:absolute; top:2500px; left:0; width:100%; height:100%; background-repeat:no-repeat; background-position: center top; pointer-events:none;} /*版頭輪播*/ .Area_main { position: relative; } .Area_main .hero-btn-wrap {z-index:99 ; position: absolute; top:30px; right: 22%; -webkit-transform: translateX(-50%); transform: translateX(-50%); } .pdbg_a{ z-index: 0; display: block; position:absolute; width:2000px; height:1039px; top: 0px; left: 50%; transform: translateX(-50%); } .pdbg_a .bg01 { z-index:-51;position:relative; top:0; left:0; width:100%; height:100%; background-size: 100%; background-position: center top; pointer-events:none; background: url(bg_01.png?t=1793362873717) no-repeat; } .pdbg_a .bg02 { z-index:-51;position:relative; top:0; left:0; width:100%; height:100%; background-size: 100%; background-position: center top; pointer-events:none; background: url(bg_02.png?t=1793362873717) no-repeat; } .pdbg_a .bg03 { z-index:-51;position:relative; top:0; left:0; width:100%; height:100%; background-size: 100%; background-position: center top; pointer-events:none; background: url(bg_03.png?t=1793362873717) no-repeat; } .pdbg_a .bg04 { z-index:-51;position:relative; top:0; left:0; width:100%; height:100%; background-size: 100%; background-position: center top; pointer-events:none; background: url(bg_04.png?t=1793362873717) no-repeat; } .pdbg_a .bg05 { z-index:-51;position:relative; top:0; left:0; width:100%; height:100%; background-size: 100%; background-position: center top; pointer-events:none; background: url(bg_05.png?t=1793362873717) no-repeat; } .pdbg_a ul { margin: 0; padding: 0; } .pdbg_a img { width: 100%; height: 100%; } .pdbg_c{ z-index: 10; position:absolute; width:960px; height:auto; top: 395px; left: 50%; transform: translateX(-50%); } .pdbg_c ul { margin: 0; padding: 0; } @media screen and (max-width:767px){ .pdbg_a{ width:100%; height:150vw;} .pdbg_a .bg01 { z-index:-51;position:relative; top:0; left:0; width:100%; height:150vw; background-size: 100%!important; background-position: center top; pointer-events:none; background: url(m_01.jpg?t=1793362873717) no-repeat; } .pdbg_a .bg02 { z-index:-51;position:relative; top:0; left:0; width:100%; height:150vw; background-size: 100%!important; background-position: center top; pointer-events:none; background: url(m_02.jpg?t=1793362873717) no-repeat; } .pdbg_a .bg03 { z-index:-51;position:relative; top:0; left:0; width:100%; height:150vw; background-size: 100%!important; background-position: center top; pointer-events:none; background: url(m_03.jpg?t=1793362873717) no-repeat; } .pdbg_a .bg04 { z-index:-51;position:relative; top:0; left:0; width:100%; height:150vw; background-size: 100%!important; background-position: center top; pointer-events:none; background: url(m_04.jpg?t=1793362873717) no-repeat; } .pdbg_a .bg05 { z-index:-51;position:relative; top:0; left:0; width:100%; height:150vw; background-size: 100%!important; background-position: center top; pointer-events:none; background: url(m_05.jpg?t=1793362873717) no-repeat; } .pdbg_c{ width:100%; height:auto; top: 55vw; left: 51%; } } /*輪播特效*/ @media screen and (min-width:768px){ .Area_main .pdbg_a .Area_swiper .swiper-slide .PD_img { opacity: 0; transform: translate(0,0%);} .Area_main .pdbg_a .Area_swiper .swiper-slide-active .PD_img { opacity: 1; transition: 1.5s ease-out; transform: translate(0,0);} .Area_main .pdbg_b .Area_swiper .swiper-slide .PD_img{ opacity: 0; transform: translate(0%,0);} .Area_main .pdbg_b .Area_swiper .swiper-slide-active .PD_img{ opacity: 1; transition: 1.5s ease-out; transform: translate(0,0);} } /*版頭*/ .Area_top {height:1039px; pointer-events: none;} @media screen and (max-width:767px){ .Area_top {width:100%;height:108vw;} } /*選單錨點*/ @media screen and (min-width:768px){ .Area_tag {z-index: 10; position: relative; display: block; height: 270px;} .Area_tag .menu {position: absolute; display: flex; flex-wrap: wrap;margin: 0 0 80px 0;height: 100px;box-sizing: border-box;justify-content:center;} .Area_tag .menu a { margin:30px 0 10px 0;} .Area_tag .menu a:nth-child(1) {width: 43%; padding-right:7vw;} .Area_tag .menu a:nth-child(2) {width: 28%; } .Area_tag .menu a:nth-child(3) {width: 53%; padding-right:6vw;} .Area_tag .menu a:nth-child(4) {width: 30%; } .Area_tag .menu a:hover{filter: brightness(1.2);} .Area_tag .menu a img {width: 100%;} } @media screen and (max-width:767px){ .Area_tag {z-index: 10; position: relative; display: block; height:26vw;} .Area_tag .menu {display: flex;flex-wrap: wrap; margin: 2vw 0vw 0vw 0vw; height: 30vw;box-sizing: border-box; justify-content:center;} .Area_tag .menu a:nth-child(1) {width: 43%;height: 13vw; padding-right:7vw;} .Area_tag .menu a:nth-child(2) {width: 28%;height: 13vw;} .Area_tag .menu a:nth-child(3) {width: 53%;height: 13vw; padding-right:6vw;} .Area_tag .menu a:nth-child(4) {width: 29%;height: 13vw;} .Area_tag .menu a:hover{filter: brightness(1.2);} .Area_tag .menu a img {width: 100%;} .Area_tag .m_menu_bg {position: absolute; top: -2vw; left: 0; z-index:-1;} } .about .PD_layout[data-pd-li=BN] ul, .PD_layout[data-pd-li=BN-AWD] ul, .PD_layout[data-pd-li=PDBN] ul { padding: 0; grid-gap: 0; } @media screen and (min-width: 768px) { .Area02 { height:2618px;} .Area_K1{ width:100%; height:2600px; overflow: hidden; } } @media screen and (max-width: 767px) { .Area02 { height:280vw;} .Area_K1{ width:100%; height:270vw; overflow: hidden; } } /*版頭輪播*/ @media screen and (min-width: 768px) { .Area_K1 .car01 { z-index:-51;position:relative; top:0; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); width:2000px; height:2463px; background-size: 100%!important; background-position: center top; pointer-events:none; background: url(2000_sentra.png?t=1793362873717) no-repeat; } .Area_K1 .car02 { z-index:-51;position:relative; top:0; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); width:2000px; height:2463px; background-size: 100%!important; background-position: center top; pointer-events:none; background: url(2000_kicks.png?t=1793362873717) no-repeat; } .Area_K1 .car03 { z-index:-51;position:relative; top:0; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); width:2000px; height:2463px; background-size: 100%!important; background-position: center top; pointer-events:none; background: url(2000_xtrail.png?t=1793362873717) no-repeat; } .Area_K1 .car04 { z-index:-51;position:relative; top:0; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); width:2000px; height:2463px; background-size: 100%!important; background-position: center top; pointer-events:none; background: url(2000_epower.png?t=1793362873717) no-repeat; } .Area_K1 .car05 { z-index:-51;position:relative; top:0; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); width:2000px; height:2463px; background-size: 100%!important; background-position: center top; pointer-events:none; background: url(2000_ariya.png?t=1793362873717) no-repeat; } .page_box {margin-top: -100px;} } @media screen and (max-width: 767px) { .Area_K1 .car01 { z-index:-51;position:relative; top:0; left:0; width:100%; height:270vw; background-size: 100%!important; background-position: center top; pointer-events:none; background: url(960_sentra.png?t=1793362873717) no-repeat; } .Area_K1 .car02 { z-index:-51;position:relative; top:0; left:0; width:100%; height:270vw; background-size: 100%!important; background-position: center top; pointer-events:none; background: url(960_kicks.png?t=1793362873717) no-repeat; } .Area_K1 .car03 { z-index:-51;position:relative; top:0; left:0; width:100%; height:270vw; background-size: 100%!important; background-position: center top; pointer-events:none; background: url(960_xtrail.png?t=1793362873717) no-repeat; } .Area_K1 .car04 { z-index:-51;position:relative; top:0; left:0; width:100%; height:270vw; background-size: 100%!important; background-position: center top; pointer-events:none; background: url(960_epower.png?t=1793362873717) no-repeat; } .Area_K1 .car05 { z-index:-51;position:relative; top:0; left:0; width:100%; height:270vw; background-size: 100%!important; background-position: center top; pointer-events:none; background: url(960_ariya.png?t=1793362873717) no-repeat; } } /* -------------------------------------- * Page 頁籤_202405291900 * -------------------------------------- */ .NavArea_tabbar_page { margin: 0 auto 10px ; } .NavArea_tabbar_page .Nav { overflow: visible; transform: translate3d(-30.5%, 0, 0);} .NavArea_tabbar_page .Nav_box { border-radius: 8px; overflow: hidden; padding: 0 2%;} .NavArea_tabbar_page[data-num="2"] .Nav-wrapper { transform: translate3d(55.5%, 0, 0)!important} .NavArea_tabbar_page[data-num="3"] .Nav-wrapper { transform: translate3d(43.0%, 0, 0)!important} .NavArea_tabbar_page[data-num="4"] .Nav-wrapper { transform: translate3d(30.5%, 0, 0)!important} .NavArea_tabbar_page[data-light="box"] .Nav ul { padding: 0 } .NavArea_tabbar_page .Nav li { overflow: visible; } @media screen and (min-width:768px){ .NavArea_tabbar_page { display: block; } } /*頁籤高亮顏色設定 */ .NavArea_tabbar_page .Nav .swiper-slide-active a { color:#fff;} .NavArea_tabbar_page .Nav .swiper-slide-active i { display:block; border: 1px solid #000000 !important; background-color: #000000 !important;} /*推編輯按鈕 */ .NavArea_tabbar_page .Nav input { position: fixed; left: 30%} /*登記卡*/ @media screen and (min-width:768px){ .danji-pd-container{ z-index: 1;} .Area_danji .bg_01 {z-index: -1;position: absolute;top: 10px;left: -390px;width: 2000px;height: 100%;background-repeat: no-repeat;background-position: center top;pointer-events: none;background-size: 100%;} .danji-pd-container{background: url(danji_bg.png?t=1793362873717)top center no-repeat;background-size: 100%;} .danji-pd-container{width: min(88%, 880px);margin-inline: auto;} .Area_danji .danji-pd-body{display: flex;text-align: left;align-items: center;gap: 1rem;padding:1rem 1.75rem 3.45rem;} .Area_danji .danji-pd-body .pd-img {width: 50%;} .Area_danji .danji-pd-head{font-size: 2.5rem;padding-block: .25rem;color: #eee;z-index: 9;} .danji-pd-body .pd-info-brand{font-weight: bolder;font-size: 2.5rem;margin-left: -0.35em;color: #000;letter-spacing: -0.025em;} .danji-pd-body .pd-info-name{font-weight: bolder;font-size: 2.5rem;color: #000;letter-spacing: -0.025em;} .danji-pd-body .pd-info-btn{margin-bottom: 1rem; margin-top: 2rem;} .danji-pd-body .pd-info-rest{font-weight: bold;font-size: 1.5rem;color:#666666;} .danji-pd-body .pd-info-notice{font-size: 1.5rem;color: #bebebe;} .danji-pd-foot{font-size: 1.75rem;padding-bottom:2rem;margin-top: 0.1rem;color: #eee;} } @media screen and (max-width:767px){ .danji-pd-container{ padding-bottom:5%;} .danji-pd-container{background: url(danji_bg.png?t=1793362873717)top center no-repeat;background-size: 100%;} .Area_danji .danji-pd-body{display: flex; text-align: left; gap:.6rem; padding: 0.6rem;} .Area_danji .danji-pd-body .pd-img {width:75%;} .Area_danji .danji-pd-head{font-size: 1.15rem;padding-block: .25rem;color: #eee;} .danji-pd-body .pd-info-brand{font-weight: bolder;font-size: 1.25rem;margin-left: -0.4em;color: #000;} .danji-pd-body .pd-info-name{font-weight: bolder;font-size: 1rem;color: #000;} .danji-pd-body .pd-info-btn{width: min(77%, 280px); margin:.7rem 0 .7rem 0; } .danji-pd-body .pd-info-rest{font-weight: bold;font-size: .75rem;color: rgb(102, 102, 102);} .danji-pd-body .pd-info-notice{font-size: .75rem;color: #b2b2b2;} .danji-pd-foot{font-size: .75rem; padding-block: .25rem; color:#FFF;} } .try{padding-bottom: 60px;} @media screen and (max-width:767px){ .try{padding-bottom: 5vw;} } .fixedfooterArea { z-index: 201; position: fixed; left: 0px; right: 0px; width: 124px; height: 34px; text-align: center; font-size: 14px; line-height: 34px; color: rgb(0, 0, 0); font-family: 微軟正黑體, "Microsoft JhengHei", Arial; background-color: rgba(0, 0, 0, 0); bottom:0; margin: auto; padding: 0px; } .fixedfooterArea .fixedBox_1 { z-index: 1; position: absolute; top: 0px; left: 0; width: 100%; text-align: center; -webkit-animation: fixedBox_1-play 1s 1; animation: fixedBox_1-play 1s 1; } .fixedfooterArea { z-index: 201; position: fixed; left: 0px; right: 0px; width: 124px; height: 34px; text-align: center; font-size: 14px; line-height: 34px; color: rgb(0, 0, 0); font-family: 微軟正黑體, "Microsoft JhengHei", Arial; background-color: rgba(0, 0, 0, 0); bottom:20vw; margin: auto; padding: 0px; } .fixedfooterArea .fixedBox_1 ul { position: relative; margin: 0; padding: 0; width: 100%; list-style: none outside none; white-space: nowrap; } .fixedfooterArea .fixedBox_1 ul li { z-index: 1; position: relative; display: inline-block; padding: 0; border-radius: 44px; height: 34px; -webkit-box-shadow: 0 1px 0 #f2f2f2, 0 0 10px rgba(0, 0, 0, .2); box-shadow: 0 1px 0 #f2f2f2, 0 0 10px rgba(0, 0, 0, .2); background-color: hsla(0, 0%, 100%, .95); } .fixedfooterArea .fixedBox_1 ul li a { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 0 24px 0 20px; } .fixedfooterArea a { display: block; color: #454545; text-decoration: none; } .fixedfooterArea .fixedBox_1 ul { position: relative; margin: 0; padding: 0; width: 100%; list-style: none outside none; white-space: nowrap; } .fixedfooterArea .fixedBox_1 ul li a span { width: 24px; height: 24px; background-image: url(data:image/svg+xml,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%2034%2034%22%20style%3D%22enable-background%3Anew%200%200%2034%2034%3B%22%20xml%3Aspace%3D%22preserve%22%3E%20%3Cg%3E%20%3Cg%3E%20%3Crect%20style%3D%22fill-rule%3Aevenodd%3Bclip-rule%3Aevenodd%3Bfill%3Anone%3B%22%20width%3D%2234%22%20height%3D%2234%22%2F%3E%20%3C%2Fg%3E%20%3C%2Fg%3E%20%3Cg%3E%20%3Cg%3E%20%3Cpath%20style%3D%22fill-rule%3Aevenodd%3Bclip-rule%3Aevenodd%3Bfill%3A%23000%3B%22%20d%3D%22M29.3%2C11.9c0.4-0.6%2C0.5-1.3%2C0.3-1.9c-0.2-0.6-0.6-1.2-1.3-1.5l-3.7-2c-0.6-0.3-1.4-0.4-2.1-0.2%20c-0.7%2C0.2-1.3%2C0.6-1.6%2C1.2l-0.5%2C0.8l-1.8%2C2.8L14%2C18.3l-0.5%2C0.8l-0.6%2C8.2h-8v1.7h19.4v-1.7h-8.6l6.2-3.8%20C24.4%2C19.6%2C26.9%2C15.7%2C29.3%2C11.9z%20M22.6%2C8.3C22.7%2C8.2%2C22.8%2C8%2C23%2C8c0.2%2C0%2C0.4%2C0%2C0.6%2C0.1l3.7%2C2c0.2%2C0.1%2C0.3%2C0.3%2C0.4%2C0.4%20c0.1%2C0.2%2C0%2C0.4-0.1%2C0.5l-0.5%2C0.8L22%2C9.2L22.6%2C8.3z%20M20.9%2C10.9l1.1%2C0.6l-4.3%2C6.8l-1.1-0.6L20.9%2C10.9z%20M17.2%2C24.2l-2.1-1.1l0.3-3.7%20c0.8%2C0.3%2C1.6%2C0.9%2C2.3%2C1.8c1.2%2C0%2C2.3%2C0.2%2C3.1%2C0.8L17.2%2C24.2z%22%2F%3E%20%3C%2Fg%3E%20%3C%2Fg%3E%20%3C%2Fsvg%3E); } /*浮層嘿嘿*/ .blackBox { display:none; z-index:99999; position:absolute; top:0px; left:0px; width:100%; height:100%; background-color: rgba(34,34,34,0.75); } .blackBox * { font-family:"微軟正黑體", "Microsoft JhengHei", Arial; box-sizing:border-box;} .blackBox a { text-decoration:none;} /*浮層基本*/ .blackBox .box .button { border-top:1px solid #d6d6d6; text-align:center; font-size:1.25rem; line-height:3.5rem; font-weight:bold;} .blackBox .box .but-close { clear:both; width:100%;} .blackBox .box .but-close a { display:inline-block; width:100%; height:100%; color:#333;} .blackBox .box h3 span.close { position:absolute; top:6px; right:5px; display:block; border:2px solid #333; border-radius:5px; width:63px; height:33px; font-size:1rem; line-height:2rem; text-align:center;} .blackBox .box h3 span.close a { display:inline-block; width:100%; height:100%; color:#333;} .blackBox .Boxclose { position:absolute; top:0px; left:0px; width:100%; height:100%; background-color: transparent;} .blackBox .box h4 {height: 3rem; font-size: 0.8rem; font-weight: 100; text-align: center; color: #000;} /*IT用*/ .blackBox_IT { display:block; z-index:inherit; position:static; width:auto; height:auto; background: none;} /*通知浮層*/ .agreeArea { z-index:1; position:relative; top:5%; margin:0 auto 30px; width:94%; max-width:700px; font-family:"Century Gothic", "微軟正黑體", sans-serif; /*text-align:justify; word-break:break-all;*/ font-size: 16px ;} .agreeArea img{ width:100%; height:auto;} .agreeArea .box { border-radius:10px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); background-color:#fff; overflow:hidden;} .agreeArea .box .txtArea { height:60vh; overflow:auto; overflow-y:auto; -webkit-overflow-scrolling:touch;} .agreeArea .box h3 { margin:0; padding:0; height:3rem; font-size:1.25rem; font-weight:800;line-height:3rem; text-align:center; color:#000; background-color:#ffd710;} .agreeArea .box p { margin:10px auto; margin-top:1rem; padding:0 0 0 24px; text-align:center; font-size:1em; text-align:left; line-height:1.2em; color:#000;} .agreeArea .box p b { display:block; padding-bottom:0px;} .agreeArea .box p span { } .agreeArea .box .qrcodeimg { text-align:center; } .agreeArea .box .qrcodeimg a { color:#006afe;} .agreeArea .box .qrcodeimg img { width:100%; height:auto;} .agreeArea .box .agree_table table { margin:20px auto; border-collapse:collapse; width:90%; text-align:center;} .agreeArea .box .agree_table th { padding:5px; border:1px solid #CCC; width:33%; font-size:0.9em; } .agreeArea .box .agree_table td { padding:5px; border:1px solid #CCC; font-size:0.9em; } .agreeArea .box .agree_table th a{ color:#c70026; text-decoration:underline;} .agreeArea .box .xxx{ display:block; width:80%; height:40px; font-size:1.5em; text-align:center; line-height:40px; color:#FFF; background-color:#7048A0; margin:0 auto; margin-bottom:20px; margin-top:10px; font-weight:bold; border-radius:10px;} .agreeArea .box ul, .agreeArea .box ol { margin:0; text-align: left; } .agreeArea .box li { margin:0 20px 10px 0px; font-size:0.9em;} .agreeArea .box table { margin: 0 5%; width:90%; border-collapse:collapse;} .agreeArea .box th { padding:5px; border:1px solid #CCC; background:#eee; font-size:0.8em; } .agreeArea .box td { padding:5px; border:1px solid #CCC; font-size:0.8em; vertical-align:top; } .agreeArea .box table ul, .agreeArea .box table ol { padding:0 0 0 20px;} .agreeArea .box table li { margin:0 0 10px 0px;} /*浮層輪播*/ .agreeArea .box_pic { padding:5% 5% 0; overflow: hidden; -webkit-box-sizing:border-box; box-sizing:border-box; } .agreeArea .box_pic .pic_swiper {} .agreeArea .box_pic .pic_swiper ul { margin:0; padding:0; list-style:none;} .agreeArea .box_pic .pic_swiper li { margin:0; padding:0;} .agreeArea .box_pic .pic_swiper li.cate-active {} /*商品大圖*/ .agreeArea .box_pic .box_picimg { position:relative; overflow:hidden;} .agreeArea .box_pic .box_picimg .pagination { padding:0 10px; text-align:right; -webkit-transform-origin:bottom right; transform-origin:bottom right; -webkit-transform: translateZ(0) scale(0.8); transform: translateZ(0) scale(0.8);} .agreeArea .box_pic .box_picimg .pagination span { display: inline-block; padding: 0 10px; border-radius: 50px; background-color: rgba(255,255,255,0.7);} /*商品列表*/ .agreeArea .box_pic .box_piclist { padding-top:2%;} .agreeArea .box_pic .box_piclist li { background-color:#000; cursor: pointer;} .agreeArea .box_pic .box_piclist li img { opacity:0.75;} .agreeArea .box_pic .box_piclist li.cate-active img { opacity:1;} /*樣式--圖片放大*/ .agree_piczoom { } .agree_piczoom .Boxclose { cursor: pointer;} .agree_piczoom .agreeArea { pointer-events: none; } .agree_piczoom .box { position: relative; top: -8vh; overflow: visible; box-shadow: none; background: none;} .agree_piczoom .box img { width: 100%; height: auto; box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);} /*關閉btn*/ .agree_piczoom .box .but-close { position: fixed; top:10px; right:10px; width: auto;} .agree_piczoom .box .but-close a { display: block;} .agree_piczoom .box .but-close a i { display: inline-block; position:relative; top:3px; left:0; width:44px; height:44px;} .agree_piczoom .box .but-close a i { -webkit-transform: scale(1) rotate(0); transform: scale(1) rotate(0); -webkit-transform-origin:50% 50%; transform-origin:50% 50%; } .agree_piczoom .box .but-close a i::before, .agree_piczoom .box .but-close a i::after { content: ""; position:absolute; top:50%; left:0; width:100%; height:6%; background-color:rgba(255,255,255,1);} .agree_piczoom .box .but-close a i::before { transform: rotate(45deg);} .agree_piczoom .box .but-close a i::after { transform: rotate(135deg);}