.pdp img { width: 100%;}
.pdp .title { line-height: 1.3em;}
.pdp { color: white; background-color: #1a2226; overflow: hidden; line-height: 1.3em; }
.pdp_front { width: 100%; }
.pdp_container { padding: 0 20px; }
.billboard { background-image: url('/shop/sh88/info/pdp_spectre/lube/hero-bg-lube.jpg');  background-position: right 35% center; background-size: cover; }
.boxed_obj_wrapper { display: flex; justify-content: center; position: relative; padding: 30px 0; }
.lube .boxed_obj { display: flex; flex-direction: row; justify-content: center; align-items: center; }
.deco img { width: 100%; }
.deco { width: 320px; position: absolute; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%); z-index: 0;}
.lube .boxed_obj { flex-direction: row; justify-content: center; align-items: center; position: relative; }
.lube_hero_img { width: 200px; }


.billboard_right .boxed_obj .tagline { font-size: 28px;}
.boxed_obj .tagline { font-size:42px; margin:0; color:white; font-weight:300; line-height:1.4em; letter-spacing:.42em; }
.boxed_obj .tagline strong { font-weight:600; }


.lubeconcept .hero { text-align: left; max-width: 1320px; padding-left: 28px; padding-right: 28px; margin: 0 auto;}
/* .lubeconcept .contents_inner { padding: 5em 0; } */
.lubeconcept .contents_inner .pdp_base { position: unset; width: 100%; max-width: 1320px; margin: 0 auto; display: block; padding-left: 28px; padding-right: 28px; padding-top: 300px; padding-bottom: 0; } 
.lubeconcept .contents_inner .pdp_base .text { width: 35%; }
.lubeconcept .lubeconcept_img { background: url('/shop/sh88/info/pdp_spectre/lube/bg-concept.jpg') center 64%; background-size: cover; position: absolute; left: 43%; top: 0; bottom: 0; right: 0; }
.lubeconcept .pdp_block_container { max-width: unset; display: flex;position: relative; }

.center_box .contents_inner { margin-top:auto; margin-bottom:auto; }
.pdp .center_box .contents_inner .baspdp_base { padding-top:0; padding-bottom:0; }

.pdp_block_container { margin:0 auto; display:block; max-width:1320px; width:100%; height: 60%; }

.lubes_wrapper { display: flex; flex-wrap: wrap; margin: 0 auto; justify-content: center; }
.contents_text_wrapper { position: absolute; left: 70%; max-width: 400px; z-index: 1; }
.lubes .contents_text.active { display: flex; flex-direction: column; align-items: flex-end; }
.lubes .contents_text { color: white;  display: none; }
.lubes .contents_text .tag { font-size: 14px; font-weight: 100; font-weight: 600; padding: 4px 9px; background-color: white;color: #000000; margin: 0 3px 4px 0; display: inline-block; border-radius: 0 0 5px 5px; }
.lubes .contents_text hr { background-color: #555A5E; }
.lubes .contents_text .mobile_title { display: none; }
.product_catalog .mobile_title .prod_name { padding-left: 0; }
.lubes .contents_text .info_block {display: flex; flex-direction: column; align-items: flex-end; width: 100%; }
.info_gp { width: 100%; }


.pdp_contents { position:relative; width:100%; float:left; }

.pdp_contents .text { color:white; padding: 0 30px; }
.pdp_contents .text .title { font-weight:600; font-size:28px; margin-bottom:48px; letter-spacing:.1em; text-transform:uppercase; }
.pdp_contents .text p { font-family:"proxima-nova-condensed","微軟正黑體","Microsoft Jhenghei", Helvetica, Arial, sans-serif; color:white; }
.pdp_contents .text *:first-child { margin-top:0; }
.pdp_contents .text *:last-child { margin-bottom:0; }

.pdp_contents .btn {
	font-size:14px; font-family:"proxima-nova"; text-transform:uppercase; color:white; border-radius:4px; border:1px solid white; padding:14px 40px; line-height:1;
	transition:background-color 300ms; -webkit-transition:background-color 300ms; -ms-transition:background-color 300ms;
}
.pdp_contents .btn:hover { background-color:rgba(255,255,255,.3); }

/* .pdp_contents.text_wrapper .pdp_base { padding: 100px 80px; display: flex; align-items: center; } */
.pdp_contents.text_wrapper .contents_inner.full .pdp_container { max-width:none; }
.pdp_contents.text_wrapper .contents_inner.full .pdp_container { width:50%; display:flex; float:left; justify-content:center; z-index:2; position:relative; }
.pdp_contents.text_wrapper .contents_inner.full.right .pdp_container { float:right; }
.pdp_contents.text_wrapper .contents_inner.full .pdp_container .pdp_base { max-width:540px; }

.pdp_contents.text_wrapper .bg { width:100%; height:100%; position:absolute; z-index:1; right:0; }

.pdp_contents.whatspectre .contents_inner { background-image:url('../img/bg-whatspectre.jpg'); background-size:cover; background-position:center center; width:100%; position:relative; }
.pdp_contents.whatspectre .logo { width:322px; padding: 0 30px; }
.pdp_contents.whatspectre .text p { color:#bdbdbd; max-width:706px; width:100%; }
.pdp_contents.whatspectre .pdp_hero br { display:none; }

.pdp_contents.whyspectre .pdp_hero { background-color:#12171a; }

.pdp_contents.text_wrapper .contents_inner.full.pocket { background-color:#1a1a1a; }
.pdp_contents.text_wrapper .contents_inner.full.pocket .bg { background-image:url('../img/bg-pocket.jpg'); background-repeat:no-repeat; background-position:right center; }
.pdp_contents.text_wrapper .contents_inner.full.pocket .text p { color:#bdbdbd; }

.pdp_contents.text_wrapper .contents_inner.full.manufacturedinhk .bg { background-image:url('../img/bg-hk.jpg'); background-repeat:no-repeat; background-size:cover; background-position:left 60% center; }
.pdp_contents.text_wrapper .contents_inner.full.manufacturedinhk .text p { color:#bdbdbd; }


.pdp_contents.percentage .contents_inner { background:url('../img/bg-percentage.jpg') center center no-repeat; background-size:cover; }

.pdp_contents.howtoapply { background-color:#182226; }
.pdp_contents.howtoapply .pdp_hero br { display:none; }

.pdp_contents.contact .contents_inner { padding-bottom:120px; }

.pdp_hero { background-color: #1a2226; padding:100px 0 58px; margin:0; color:white; font-size:35px; font-weight:600; letter-spacing:.1em; text-align:center; text-transform:uppercase; line-height: 1.3em; }
.pdp_hero div { display:inline; position:relative; }
.pdp_hero div::after { content:""; width:65px; height:5px; background-color:white; position:absolute; left:0; top:105%; }
.pdp_hero.simple div::after { content:unset; width:unset; height:unset; background-color:unset; position:unset; left:unset; top:unset; }

.flex .pdp_hero { padding-bottom:0; }

/* lineup */

.lube_swiper.swiper-container {}
.lube_swiper { text-align: center; width: fit-content; width:100%; padding:5em 0; }
.lineup .lubes { position: relative; width: 100%; justify-content: center; background: url('/shop/sh88/info/pdp_spectre/lube/hero-bg-lube-blur.jpg') center center; background-size: cover; margin-top: 28px;}
.lineup .lubes .lube_pd_img_slide { display: flex; flex-direction: column; }

.lineup .lubes .info { color: white; float: unset; }
.lineup .lubes .info .title { font-size:20px; font-weight:600; letter-spacing:.42em; margin-right: -.42em; text-transform:uppercase; color:white; line-height:1.65em; margin-top:40px; }
/* .lineup .lubes .info .prod_volume { font-family:"proxima-nova","微軟正黑體","Microsoft Jhenghei", Helvetica, Arial, sans-serif; } */
.pdp .prod_name , .pdp .prod_volume { letter-spacing: .2em;}
.lineup .product_catalog { padding-bottom: 0;}
.info .check_circle { display: flex; }
.info .check_circle::before { content: ""; margin-right: 10px; display: flex; width: 30px; height: 30px; aspect-ratio: 1/1; background: url('/shop/sh88/info/pdp_spectre/lube/check_icon.png') center center; background-size: cover; margin-top: -4px; }

.lube_gallery { display: flex;  width: 100%; width:50%; flex-direction: row-reverse; padding: 5em 0; padding:0 0; }
.lube_pd_swiper .swiper-button-prev, .lube_pd_swiper .swiper-container-rtl .swiper-button-next { left: unset; }

.lube_pd_img img { width: 100%; }
.lube_pd_img  { width: 200px; position: relative; z-index: 2; }
.lube_pd_img_wrapper {  width: 100%; display: flex; align-items: center; justify-content: center; position: relative; }
.lube_pd_img_wrapper .bg { width: 380px; aspect-ratio: 1/1; border-radius: 50%; position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); }

.lube_pd_img_wrapper.dylan .bg { background: url('/shop/sh88/info/pdp_spectre/lube/bg-dylan.jpg') center center; background-size: cover; }
.lube_pd_img_wrapper.koa .bg { background: url('/shop/sh88/info/pdp_spectre/lube/bg-koa.jpg') center center; background-size: cover; }
.lube_pd_img_wrapper.filia .bg { background: url('/shop/sh88/info/pdp_spectre/lube/bg-filia.jpg') center center; background-size: cover; }
.lube_pd_img_wrapper.ferno .bg { background: url('/shop/sh88/info/pdp_spectre/lube/bg-ferno.jpg') center center; background-size: cover; }

.lube_pd_img_thumbs { position: absolute; top: 25%; right: 64%; cursor: grab; }
.lube_pd_img_thumbs.swiper-container {}
.lube_pd_img_thumbs .swiper-wrapper { width:auto; }
.lube_pd_img_thumbs a {
	width:fit-content; margin:0 15px; border:1px solid transparent; padding: 3px; transition: transform 300ms;
	transform: scale(95%);
}

.info_gp .prod_spec { display: flex; align-items: center; justify-content: space-between; padding-top: 10px; padding-bottom: 10px; border-bottom: 1px solid #555A5E; }
.info_gp .prod_spec p {  font-size: 28px; line-height: 1em; font-weight: 100; font-family: "proxima-nova-condensed","微軟正黑體","Microsoft Jhenghei", Helvetica, Arial, sans-serif; margin-bottom: 0px; margin-right: 15px;  }
.info_gp .prod_spec .btn { padding: 10px 20px; }
.info_block .info { margin-bottom: 28px;}

.steps_wrapper { width:100%; position:relative; margin-bottom:74px; }
.steps { width:100%; display:flex; }
.step_item { flex:1; border-radius: 8px; overflow: hidden; }
.step_item:first-child { margin-right:18px; }
.step_item:last-child { margin-left:18px; }
.step_img { width:100%; margin-bottom:25px; }
.step_title { font-size:24px; font-weight:600; text-transform:uppercase; color:white; margin-bottom:10px; }
.step_desc { font-family:"proxima-nova-condensed","微軟正黑體","Microsoft Jhenghei", Helvetica, Arial, sans-serif; font-weight:300; color:white; line-height:1.3em; margin-bottom:0; }


.percentitems_wrapper { width:100%; position:relative; display:flex; justify-content:space-between; align-items:center; padding:190px 0; font-size:24px; }
.percentitem { flex:1; text-align:center; }
.percentitem .title { font-size:1em; font-weight:600; letter-spacing:.42em; text-transform:uppercase; line-height:1.6em; color:white; }
.percentitem .value { font-size:1.33em; font-weight:300; letter-spacing:.42em; margin-bottom:.75em; color:white; }
.pdp_contents.percentage .contents_inner { background:url('/shop/sh88/info/pdp_spectre/lube/bg-percentage-lube.jpg') center center no-repeat; background-size:cover; }

.pdp_contents.howtoapply { background-color:#182226; }
.pdp_contents.howtoapply .pdp_hero br { display:none; }

.pdp_contents.contact .contents_inner { padding-bottom:120px; }

.whyspectre .pdp_base , .howtoapply .pdp_base { max-width: 900px; margin: 0 auto 50px;  }

.whyspectre { background-color: #12171a;}
.why_lube { width: 100%; display: flex; align-items: flex-start; }
.why_lube .title { font-size: 28px; font-weight: 600; margin: 10px 0; }
.why_lube .contents_block { width: 48%; margin: 1%; color: white; padding: 35px; display: flex; align-items: flex-end; }
.why_lube .contents_text { width: 75%; position: relative; }
.why_lube .contents_text h2 { font-weight: 600; }
.why_lube .contents_block { aspect-ratio: 1/1; position: relative; }
.why_lube .contents_block:last-child { margin-top: 120px; }
.why_lube .contents_block .bg_1 { background: url('/shop/sh88/info/pdp_spectre/lube/bg-why-1.jpg') center 30%; background-size: cover; position: absolute; top: 0; right: 0; bottom: 0; left: 0;  border-radius: 8px;}
.why_lube .contents_block .bg_2 { background: url('/shop/sh88/info/pdp_spectre/lube/bg-why-2.jpg') center center; background-size: cover; aspect-ratio: 1 / 1; position: absolute; top: 0; right: 0; bottom: 0; left: 0;  border-radius: 8px; }

.pdp_hero { padding:72px 0 36px; }
.lube_gallery { flex-direction: column; justify-content: center; width: 50%; padding-bottom: 0;}
.lube_swiper{ width: 100%; padding-bottom: 2em; }
.lube_pd_img_thumbs { position: static; order: 3; width: 80%; padding: 5px 0; margin: 0 auto 4em; background-color: #171717cd; border-radius: 70px; }
.lube_pd_img_thumbs .swiper-wrapper { justify-content: center; }
.lube_pd_img_thumbs .lube_pd_img { width: 35px; }
.lubes .contents_text_wrapper { position: static; width: 40%; max-width: unset; padding: 0 20px 20px 20px; background-color: #1d2328ac; }
.lineup .lubes .lube_pd_img_slide .info { margin-bottom: 0; }

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

}
@media screen and (max-width: 1215px) {
    .lubeconcept .contents_inner .pdp_base { padding-top: 240px; }
	.lubeconcept .contents_inner .pdp_base .text { width: 40%; }
    .percentitems_wrapper { padding: 140px 0; }

	.info_gp .prod_spec { flex-direction: column; align-items: normal; padding: 15px 0;}
	/* .info_gp .prod_spec p { margin-bottom: 10px;} */
}
@media screen and (max-width: 959px) {

	.boxed_obj .tagline { font-size: 38px; }

    .pdp_hero { font-size:36px; padding: 56px 28px 28px; }
    .pdp_hero_img { height:240px; }

    .lubeconcept .contents_inner .pdp_base { padding-top: 120px; }
	.lubeconcept .contents_inner .pdp_base .text { width: 47%;}
    .lubeconcept .lubeconcept_img { left: 50%; }

    .percentitems_wrapper { width:100%; flex-wrap:wrap; padding:2.6em 0; font-size:20px; }
	.percentitem { flex:1 1 100%; text-align:center; margin-bottom:2.4em; }
	.percentitem:last-child { margin-bottom:0; }

    .lineup .lubes { background-color: #29333B; background-image: none;}
	.lubes_wrapper { flex-direction: column; padding: 20px; }
	.lube_gallery { width: 100%; }

	.lubes .contents_text_wrapper { width: 100%; max-width: unset; margin: 0 auto; background-color: unset; padding: 0; }
	.lubes .contents_text .mobile_title { display: block; width: 100%; border-top: 1px solid #404040; padding: 30px 0; }
	.lineup .lubes .info .title { margin-top: 15px; margin-bottom: 5px;}
	.product_catalog .info { margin-bottom: 15px; }
    .pdp .info { padding: 0 20px; }

    .mobile_title .info { margin-bottom: 0; }
	.lube_pd_img_thumbs { order: unset;}
	.lube_swiper .info { display: none;}
	.lube_swiper { background: url('/shop/sh88/info/pdp_spectre/lube/hero-bg-lube.jpg') center center; background-size: cover; }
    .lubes .info_block { margin: 0 auto; background-color: #1D2328; }
	.lubes .info_block .tag { margin: 0 15px 0; }

    .lubeconcept .contents_inner .pdp_base { padding-top: 120px; }
	.lubeconcept .contents_inner .pdp_base .text { width: 47%;}
    .lubeconcept .lubeconcept_img { left: 50%; }
	.lube_pd_img_thumbs { background-color: unset; width: 100%; border-radius: 0; margin: 1em 0; }
	.lube_pd_img_thumbs .lube_pd_img { width: 52px; }
	.lube_pd_img_thumbs a { margin: 0 8px; }

	.lube_swiper.swiper-container { width: 100%; padding: 20px 0;}

	.info_gp .prod_spec { flex-direction: row; align-items: center; justify-content: flex-start; flex-wrap: wrap; }
	.info_gp .prod_spec p { margin-bottom: 0; white-space: nowrap; }
	.info_gp .prod_spec .btn { flex: 0; }

	.why_lube .contents_text { width: 90%; }

}

@media screen and (max-width: 767px) {/* Essential */	
    #pdp_hero { margin-bottom:10px; margin-bottom:0; }
	#pdp_hero .pdp_base { padding-top:0; }

    .padding_box { padding:0 18px; }

    .lube_hero_img { width: 170px; }

    .boxed_obj { justify-content:flex-start; align-items:unset; padding:36px 28px; }
	.boxed_obj .tagline { text-align:left; font-size:28px; }
    .lube .boxed_obj { flex-direction: column; }
	.lube .tagline { order: 2; text-align: center; }
	.lube .deco { width: 280px; top: 40%; }

    .lubeconcept .contents_inner .pdp_base { padding-top: 0; }
	.lubeconcept .contents_inner .pdp_base .text { width: 100%; position: relative; z-index: 3; padding: 30px 0 200px 0; }
	.lubeconcept .hero { text-align: center; padding-top: 0;}
	.lubeconcept .pdp_base .text .title { font-size: 28px; text-align: center; }
	.lubeconcept .lubeconcept_img { width: 100%; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-position: center 45% ;  }
	.lube_pd_img_wrapper .bg { width: 300px; }
	.lube_pd_img { width: 160px; }

	.lineup .lubes .info .prod_volume { font-size: 12px; }
	.lineup .lubes .info .title { font-size: 18px; }

	.why_lube { flex-direction: column; }
	.why_lube .contents_block { width: 100%; aspect-ratio: unset; padding: unset; display: block; }
	.why_lube .contents_text { width: 100%; position: static; }
	.why_lube .contents_block .bg_1 { height: 250px;  position: static; }
	.why_lube .contents_block .bg_2 { height: 250px;  position: static; width: 100%; }
	.why_lube .contents_block {margin-left: 0px; margin-right: 0; }
	.why_lube .contents_block:last-child { margin-top: 0px; }
	
	.whyspectre .pdp_base , .howtoapply .pdp_base { margin-bottom: 30px;  }
}

@media screen and (max-width: 669px) {/* Essential */
	.pdp_hero { font-size:28px; line-height: 1em; }

	.boxed_obj .logo_cologne { margin-bottom:28px; }

    .lubeconcept .lubeconcept_img { background-position: center 30% ; background-size: 620px; }

    .pdp_contents.whatspectre .pdp_hero br { display:unset; }
	.pdp_contents.howtoapply .pdp_hero br { display:unset; }

	.steps_wrapper { margin-bottom:48px; }
	.steps { flex-wrap:wrap; flex-direction: column; align-items: center; max-width: 240px; margin: 0 auto; padding: 10px;}
	.step_item:first-child { margin-right:0; }
	.step_item:last-child { margin-left:0; }
	.step_item { margin-top: 30px;}

	.prod_spec { font-size: 28px; }
	.info_gp .prod_spec p { font-size: 22px; }
	.why_lube .title { font-size: 22px; }
}

@media screen and (max-width: 479px) {/* Essential */
	.pdp_hero span { display:inline-block; }

	.pdp_shop .pdp_base .logo_sampson { width:90%; height:auto; }

	.pdp_contents.text_wrapper .contents_inner.full .bg { width:calc(100vw - 36px); margin-left:18px; }
	
	.pdp_contents.whatspectre .pdp_hero br { display:unset; }
	.pdp_contents.howtoapply .pdp_hero br { display:unset; }

	.pdp_contents.text_wrapper .pdp_base { padding: 50px 20px; }
	.pdp_contents.whatspectre .logo { padding: 0;}
	.pdp_contents .text { padding: 0;}

    .boxed_obj .tagline { font-size:22px; }
    .lube_hero_img { width: 140px; }
    .lube .deco { width: 190px;  }

	.lube_pd_img_wrapper .bg { width: 230px; }
	.lube_pd_img { width: 130px; }
	.lube_pd_img_thumbs .lube_pd_img { width: 40px; }

	.lineup .lubes .info .title { font-size: 16px; }

	.info_gp .prod_spec { flex-direction: column; align-items: flex-start; }
	.info_gp .prod_spec p { margin-bottom: 10px; }
	.info_gp .prod_spec .btn { flex: 1; }
	
	.why_lube .contents_block .bg_1 { height: 150px; }
	.why_lube .contents_block .bg_2 { height: 150px; }
	.whyspectre .pdp_container { padding: 0; }
}