@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@300;700;900&display=swap');

/*
  danny 201707
  1. $Reset
  2. $body,html
  3. $共用
  4. $Mobile
  5. $Pc
*/





/* $Mobile
--------------------------------------------------------------------------------------*/
/* ▼▼▼ loading ▼▼▼ */
#loading{ position:absolute; width:100%; height:100%; left:0; top:0; overflow-x:hidden; }
.loader{ position:absolute; left:50%; top:50%; width:40px; height:50px; margin:-25px 0 0 -15px; text-align:center; display:inline-block; vertical-align:top; z-index:100000;}
.mask2{position:fixed; background:rgba(0,0,0,1); width:100%; height:100%; z-index:99900; left:0; top:0; overflow-x:hidden; }
/* Loading Animation  */
div#loadingAnimation{width:60%; position:absolute; top:50%; left:50%; margin:0 0 0 -30%; z-index:100000; text-align:center; font-size:0.9375rem;}
.ltr{ color:white; }
.loader span:nth-child(1){-webkit-animation-delay:100ms; animation-delay:100ms; }
.loader span:nth-child(2){-webkit-animation-delay:200ms; animation-delay:200ms; }
.loader span:nth-child(3){-webkit-animation-delay:300ms; animation-delay:300ms; }
.loader span:nth-child(4){-webkit-animation-delay:400ms; animation-delay:400ms; }
.loader span:nth-child(5){-webkit-animation-delay:500ms; animation-delay:500ms; }
.loader span:nth-child(6){-webkit-animation-delay:600ms; animation-delay:600ms; }
.loader span:nth-child(7){-webkit-animation-delay:700ms; animation-delay:700ms; }
.blink{animation-name:blinker; animation-duration:1.75s; animation-timing-function:linear; animation-iteration-count:infinite; -webkit-animation-name:blinker; -webkit-animation-duration:1.75s; -webkit-animation-timing-function:linear; -webkit-animation-iteration-count:infinite; }
@-moz-keyframes blinker{0%{opacity:1.0; } 50%{opacity:0.0; } 100%{opacity:1.0; } }
@-webkit-keyframes blinker{0%{opacity:1.0; } 50%{opacity:0.0; } 100%{opacity:1.0; } }
@keyframes blinker{0%{opacity:1.0; } 50%{opacity:0.0; } 100%{opacity:1.0; } }
.delayed span.blink{-webkit-animation-duration:.8s; animation-duration:.8s; }
.spinner{z-index:100000; width:40px; height:40px;  position:absolute; left:50%; transform:translateX(-50%); top:calc(50% - 50px);}
.double-bounce1, .double-bounce2{width:100%; height:100%; border-radius:50%; background-color:#333; opacity:0.6; position:absolute; top:0; left:0; -webkit-animation:sk-bounce 2.0s infinite ease-in-out; animation:sk-bounce 2.0s infinite ease-in-out; }
.double-bounce2{-webkit-animation-delay:-1.0s; animation-delay:-1.0s; }
@-webkit-keyframes sk-bounce{0%, 100%{ -webkit-transform:scale(0.0) } 50%{ -webkit-transform:scale(1.0) } }
@keyframes sk-bounce{0%, 100%{transform:scale(0.0); -webkit-transform:scale(0.0); } 50%{transform:scale(1.0); -webkit-transform:scale(1.0); } }
.loadingtxt{ display:inline-block; color:#fff; font-size:1rem; position:absolute; top:250px; left:50%; transform:translateX(-50%);  z-index:100000; letter-spacing:5px;}
/* ▲▲▲ loading ▲▲▲  */

/* gototop */
.goto-box>li.gotosearch{ display:block; width: 68px; height: 109px; background: url(../../car/image/elite__gotosearch.png); background-position: 0 0;  }
.goto-box>li.gototop{ width: 68px; height: 69px; background: url(../../car/image/elite__gototop.png); background-position: 0 0; }

html,body{ background:#000; }
.wrapper{ overflow-y:visible; overflow-x:hidden; width:100%; }
.mainnav{ position:fixed; }
.header__submenu>li>a{ cursor:pointer; }
.container{ padding:0 10px; width:100%; box-sizing:border-box; margin:0 auto; font-family:'Noto Sans TC','微軟正黑體','Microsoft JhengHei','Apple LiGothic Medium',sans-serif; }
a.btn{ cursor:pointer; display:block; pointer-events:auto; position:relative; }
.text-right{ text-align:right; }
picture ,img{ width:100%; }
.truck-duty .anchor{ height:100px; width:100%; margin-top:-100px; display:block; } 
.truck-duty h1,
.truck-duty h2,
.truck-duty h3,
.truck-duty h4,
.truck-duty h5,
.truck-duty h6,
.truck-duty p{ font-weight:300; line-height:1;}
.truck-duty p{ line-height:1.5 }
.truck-duty h1 b,
.truck-duty h2 b,
.truck-duty h3 b,
.truck-duty h4 b,
.truck-duty h5 b,
.truck-duty h6 b,
.truck-duty p b{ font-weight:700; }
.truck-duty{ color:#fff; background:url(../images/truck_bg.jpg) repeat-y; background-size:300% auto; }
.truck-duty header{ background:url(../images/kv_light@0.5x.png) left bottom no-repeat,url(../images/kv.jpg) center top no-repeat; background-size:200% auto,300% auto; }
.truck-duty header .kv{ display:flex; justify-content:center; align-items:center; min-height:100vh; flex-direction:column; padding-bottom:0; } 
.truck-duty header .kv h1{ font-size:2.1rem; margin:1em 0 .6em;  }
.truck-duty header .kv p{ text-align:center; font-size:1.1rem; line-height:1.5;}
.truck-duty header .info{ display:flex; flex-direction:column; color:#dab95b; padding-bottom:80px;}
.truck-duty header .info .image_block{ width:65%; margin:0 auto 20px; }
.truck-duty header .info .text_block h2{ font-size:2rem; margin-bottom:1em; text-align:center; line-height:1.4; }
.truck-duty header .info .text_block ul{ display:flex; flex-direction:column; width:fit-content; margin:0 auto;}
.truck-duty header .info .text_block li{ font-size:1rem; margin-bottom:.4em; }
.truck-duty header .info .text_block li:before{ content:''; display:inline-block; width:1em; height:1em; background:url(../images/icon_check.svg) center 0 no-repeat; background-size:90% auto; vertical-align:middle; margin-right:4px; }

.truck-duty section{ padding-bottom:80px; }
.truck-duty section .banner{ position:relative;}
.truck-duty section .banner:before,
.truck-duty section .banner:after{ content:''; display:block; z-index:1; }
.truck-duty section .banner:before{ width:100%; padding-top:38%; background-size:cover; }
.truck-duty section .banner:after{ position:absolute; left:5%; bottom:0; width:40%; height:100%; background:linear-gradient(to bottom, rgba(195,150,82,.7) 50%,rgba(195,150,82,0) 100%); transform:skewX(45deg); transform-origin:100% 100%;   }
.truck-duty section:nth-of-type(even) .banner:after{ background:linear-gradient(to top, rgba(195,150,82,.7) 50%,rgba(195,150,82,0) 100%); left:-15%; transform:skewX(-45deg); transform-origin:0 100%;    }
.truck-duty section .banner h2{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:100%; z-index:2; font-size:1.5rem; line-height:1.4; text-shadow:8px 8px 10px rgba(0,0,0,.6);}
.truck-duty section.duty_euro_spec .banner:before{ background-image:url(../images/duty_euro_spec_banner.jpg); }
.truck-duty section.duty .banner:before{ background-image:url(../images/duty_banner.jpg); }
.truck-duty section.duty_products .banner:before{ background-image:url(../images/product_banner.jpg); }

.truck-duty section .product_box{ margin-top:90px; }
.truck-duty section .product_box .title{ padding:15px 0; border:solid 1px #afafaf; border-right:none; border-left:none; color:#c39652; display:flex; justify-content: space-between; margin-bottom:40px;}
.truck-duty section .product_box .title h3{ font-size:1.6rem; font-weight:400; line-height:1.4; }
.truck-duty section .product_box .title h4{ font-size:1.2rem; font-weight:400; line-height:1.4; }
.truck-duty section .product_box .title .icon_block img{ width:auto; height:30px; margin-left:4px; margin-top:.4em; }
.truck-duty section .product_box > .text_block p.level{ margin:-26px 0 0; }
.truck-duty section .product_box > .text_block p{ margin:40px 0 60px; }
.truck-duty section .product_box > .text_block p.note{ font-size:.93em; margin-bottom:30px; }
.truck-duty section .product_box > .text_block p.note span{ font-size:.8em; display:block; margin-top:.8em; }
.truck-duty section .product_box > .text_block p.level img{ display:inline-block; width:auto; height:1.2em; vertical-align: middle;}
.truck-duty section .product_box > .text_block p.level img + img{ margin-left:4px; }
.truck-duty section .product_box > .text_block p.legalize{ font-size:.93em; border:solid 1px #c39652; color:#c39652; padding:2px 0.5em; margin-bottom:-10px;}
.truck-duty section .product_box > .text_block ul{ margin-left:1.4em; }
.truck-duty section .product_box > .text_block ul li:before{ content:''; margin-left:-1.3em; width:1em; height:1em; margin-right:0.4em; display:inline-block; background:url(../images/icon-sup.svg) center center no-repeat; background-size:cover; vertical-align:middle; }
.truck-duty section .product_box .download-block{ display:flex; flex-wrap:wrap; align-items:flex-start; color:#c39652; }
.truck-duty section .product_box .download-block ul{ display:flex; flex-direction:column; width:100%; margin-bottom:20px; }
.truck-duty section .product_box .download-block ul:nth-last-of-type(1){ margin-right:0; }
.truck-duty section .product_box .download-block ul li{ margin-bottom:.4em; }
.truck-duty section .product_box .download-block ul a{ border:solid 1px rgba(81,81,81,.2); padding:1em; display:block; width:100%; box-sizing:border-box; font-size:.8em; color:inherit; text-decoration:none; }
.truck-duty section .product_box .download-block ul a:before{ content:''; display:inline-block; width:1.375em; height:1em; margin-right:4px; background:url(../images/icon-download.svg) center center no-repeat; background-size:cover;  }

.truck-duty section.duty_products .product_box:nth-of-type(7) > .text_block ul li + li{ margin-top:1.2em; }



/* $ 限定 Mobile
--------------------------------------------------------------------------------------*/
@media screen and (max-width:768px){
.for-pc{ display:none; }
.goto-box > li.gotosearch{ display:none; }
.goto-box > li.gototop{width:40px; height:40px; line-height:46px; color:#fff; font-size:0.875rem; text-align:center; background:none; background:#989898; border-radius:50%; text-indent:0; position:relative; }


}
/* $Pad
--------------------------------------------------------------------------------------*/
@media screen and (min-width:600px) and (max-width:1024px){
.container{ padding:0 20px; }






}
/* 橫的版型 */
@media screen and (orientation:landscape){ 





}
/* $Pc
--------------------------------------------------------------------------------------*/
/* @media screen and (min-width:768px){ */
@media screen and (min-width:1025px){
.for-mobile{ display:none; }
.for-pc{ display:block; }
.container{ max-width:1280px; padding:0 20px;}
.truck-duty .anchor{ height:60px; margin-top:-60px; }
.truck-duty{ background-size:100% auto; }
.truck-duty header{ background-image:url(../images/kv_light.png),url(../images/kv.jpg); background-size:100% auto,cover;}
.truck-duty header .kv h1{ font-size:3.1rem; letter-spacing:.05em; }
.truck-duty header .kv p{ font-size:1.25rem; letter-spacing:.05em; }
.truck-duty header .kv p span,
.truck-duty section .banner h2 span{ display:block;}
.truck-duty header .info{ display:flex; flex-direction:row; align-items:center; }
.truck-duty header .info .image_block{ flex:0 0 360px; margin:0 40px 0 0; }
.truck-duty header .info .text_block{ flex:1 1 auto; }
.truck-duty header .info .text_block h2{ font-size:2.2rem; text-align:left; }
.truck-duty header .info .text_block ul{ flex-wrap:wrap; height:8em; width:100%; }
.truck-duty header .info .text_block li{ font-size:1.25rem; }
.truck-duty section .banner h2{ font-size:3.1rem; letter-spacing:.05em;}

.truck-duty section .product_box .title h3{ font-size:2.5rem; }
.truck-duty section .product_box .title h4{ font-size:1.75rem; }
.truck-duty section .product_box .title .icon_block img{ height:40px; }
.truck-duty section .product_box > .text_block p{ font-size:1.25rem;}
.truck-duty section .product_box .download-block ul{ width:calc(96% / 4); margin-right:1%; }



}





/* $1025~1279
--------------------------------------------------------------------------------------*/
@media screen and (min-width:1025px) and (max-width:1279px){



}0