:root{
--ch-font: "Noto Sans JP", serif;
}
.banner-title-box h1{
font-family: var(--ch-font);
}
.laminator-preamble {
padding: 0 var(--pad-space);
}
.laminator-preamble-box-p-mobile {
display: none;
}
.laminator-preamble>div {
width: 100%;
max-width: 1360px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1fr;
align-items: center;
}
.laminator-preamble-box-svg {
margin-bottom: 10px;
height: 100px;
width: 100px;
display: flex;
align-items: center;
justify-content: center;
}
.laminator-preamble svg {
width: 100%;
height: 100%;
}
.laminator-preamble-box>div:nth-child(2) svg {
width: 92%;
}
.laminator-preamble-box>div:nth-child(3) svg {
width: 92%;
}
.laminator-preamble>div>p {
font-family: var(--ch-font);
font-size: var(--xd-19px);
font-weight: 400;
margin: 0;
color: #000000;
line-height: 2em;
width: 100%;
max-width: 550px;
}
.laminator-preamble-box>div>h6 {
font-family: var(--ch-font);
font-size: var(--xd-19px);
font-weight: 600;
margin: 0;
color: var(--main-color);
line-height: 1.5em;
text-align: center;
}
.laminator-preamble-box {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 30px;
}
.laminator-preamble-box>div {
background: #E8E8E8;
border-radius: 20px;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
padding: 20px 25px;
}
.pouch-laminator>div {
background: #E8E8E8;
padding: 80px 0;
max-width: calc(50% + 680px);
margin-left: auto;
position: relative;
display: flex;
flex-direction: column;
gap: 20px;
}
.pouch-laminator>div::before {
content: "";
width: calc((100vw - (50vw + 680px)) / 2);
height: 100%;
position: absolute;
left: 0;
top: 0;
background: #E8E8E8;
transform: translateX(-99%);
z-index: -1;
border-radius: var(--box-radius) 0 0 var(--box-radius);
}
.pouch-laminator-head {
width: 100%;
max-width: 1360px;
display: grid;
grid-template-columns: 1fr 1fr;
}
.pouch-laminator-control {
width: 100%;
max-width: 1360px;
display: flex;
gap: 25px;
margin-bottom: 30px;
}
.pouch-laminator-slick {
width: 100%;
}
.pouch-laminator h6 {
font-family: var(--en-font);
font-size: var(--xd-65px);
font-weight: 600;
margin: 0;
color: var(--main-color);
}
.pouch-laminator h5 {
font-family: var(--ch-font);
font-size: var(--xd-33px);
font-weight: 600;
margin: 0;
color: var(--main-color);
margin-bottom: 25px;
}
.pouch-laminator p {
font-family: var(--ch-font);
font-size: var(--xd-19px);
font-weight: 400;
margin: 0;
color: #000000;
line-height: 2em;
}
.pouch-laminator button {
padding: 0;
line-height: 1em;
background: transparent !important;
border: unset !important;
outline: unset !important;
width: 45px;
}
.pouch-laminator button svg {
width: 100%;
height: 100%;
}
.pouch-laminator-slick .slick-list {
padding-right: calc( 100% - 1390px);
}
.pouch-laminator-slick .slick-slide{
opacity: 0.5;
}
.pouch-laminator-slick .slick-slide.slick-active{
opacity: 1;
transition: all .5s;
}
.pouch-laminator-slick-box {
background: white;
padding: 40px 60px 40px 40px;
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 60px;
align-items: center;
border-radius: var(--box-radius);
margin-right: 30px;
}
.pouch-laminator-slick-box-img {
aspect-ratio: 644 / 540;
overflow: hidden;
border-radius: 20px;
}
.pouch-laminator-slick-box-img img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
object-position: center;
}
.pouch-laminator-slick-box-text h5 {
font-family: var(--ch-font);
font-size: var(--xd-33px);
font-weight: 500;
margin: 0;
color: var(--main-color);
margin-bottom: 8px;
}
.pouch-laminator-slick-box-text h6 {
font-family: var(--ch-font);
font-size: var(--xd-19px);
font-weight: 400;
margin: 0;
color: #000000;
margin-bottom: 5px;
line-height: 1.6em;
}
.pouch-laminator-slick-box-text p {
font-family: var(--ch-font);
font-size: var(--xd-16px);
font-weight: 400;
margin: 0;
color: #000000;
}
.pouch-laminator-slick-box-text span {
font-family: var(--ch-font);
font-size: var(--xd-16px);
font-weight: 400;
margin: 0;
color: var(--main-color);
line-height: 2em;
}
.pouch-laminator-slick-box-text-list>div {
display: grid;
grid-template-columns: 122px 1fr;
align-items: flex-start;
grid-gap: 10%;
border-bottom: 2px solid #E8E8E8;
grid-gap: 40px;
padding: 5px 0;
}
.pouch-laminator-slick-box-text-list {
margin-top: 20px;
}
.pouch-laminator-slick-relative {
position: relative;
}
.pouch-laminator-control-mobile {
position: absolute;
top: 50%;
left: 0;
width: 100%;
transform: translateY(-50%);
display: none;
justify-content: space-between;
padding: 0 15px;
}
.roll-laminator {
width: 100%;
overflow: hidden;
}
.roll-laminator-head {
display: grid;
grid-template-columns: 1fr 1.1fr;
width: 100%;
max-width: 1360px;
margin: 0 auto;
margin-bottom: 50px;
gap: 40px;
}
.roll-laminator h6 {
font-family: var(--en-font);
font-size: var(--xd-65px);
font-weight: 600;
margin: 0;
color: var(--main-color);
}
.roll-laminator h5 {
font-family: var(--ch-font);
font-size: var(--xd-33px);
font-weight: 600;
margin: 0;
color: var(--main-color);
margin-bottom: 25px;
}
.roll-laminator p {
font-family: var(--ch-font);
font-size: var(--xd-19px);
font-weight: 400;
margin: 0;
color: #000000;
line-height: 2em;
}
.roll-laminator-body {
background: #E8E8E8;
width: 100%;
max-width: 1360px;
margin: 0 auto;
padding: 40px 0;
display: grid;
grid-template-columns: 1fr 1.1fr;
position: relative;
gap: 40px;
}
.roll-laminator-body::before {
position: absolute;
content: "";
width: 50vw;
height: 100%;
top: 0;
left: 0;
background: #E8E8E8;
transform: translateX(-100%);
}
.roll-laminator-body::after {
position: absolute;
content: "";
width: 40px;
height: 100%;
top: 0;
right: 0;
background: #E8E8E8;
transform: translateX(100%);
border-radius: 0 var(--box-radius) var(--box-radius) 0;
}
.roll-laminator-body-img {
aspect-ratio: 782 / 648;
overflow: hidden;
border-radius: 20px;
}
.roll-laminator-body-img img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
object-position: center;
}
.roll-laminator-body-list h5 {
font-family: var(--ch-font);
font-size: var(--xd-33px);
font-weight: 500;
margin: 0;
color: var(--main-color);
margin-bottom: 15px;
}
.roll-laminator-body-list h6 {
font-family: var(--ch-font);
font-size: var(--xd-19px);
font-weight: 400;
margin: 0;
color: #000000;
margin-bottom: 5px;
line-height: 1.6em;
}
.roll-laminator-body-list p {
font-family: var(--ch-font);
font-size: var(--xd-16px);
font-weight: 400;
margin: 0;
color: #000000;
}
.roll-laminator-body-list span {
font-family: var(--ch-font);
font-size: var(--xd-16px);
font-weight: 400;
margin: 0;
color: var(--main-color);
}
.roll-laminator-body-list .pouch-laminator-slick-box-text-list>div {
border-bottom: 2px solid white;
}
.roll-laminator-body-list .pouch-laminator-slick-box-text-list {
margin-top: 15px;
}
.roll-laminator-body-list a {
display: flex;
align-items: center;
gap: 30px;
margin-top: 30px;
}
.roll-laminator-body-list a h6 {
color: var(--main-color);
margin-bottom: 0px;
line-height: 1.5em;
}
.work-station {
width: 100%;
overflow: hidden;
}
.work-station h6 {
font-family: var(--en-font);
font-size: var(--xd-65px);
font-weight: 600;
margin: 0;
color: var(--main-color);
}
.work-station h5 {
font-family: var(--ch-font);
font-size: var(--xd-33px);
font-weight: 600;
margin: 0;
color: var(--main-color);
margin-bottom: 25px;
}
.work-station p {
font-family: var(--ch-font);
font-size: var(--xd-19px);
font-weight: 400;
margin: 0;
color: #000000;
line-height: 2em;
}
.work-station>div {
background: #E8E8E8;
width: 100%;
max-width: 1360px;
margin: 0 auto;
padding: 40px 0;
display: grid;
grid-template-columns: 1fr 1.2fr;
position: relative;
align-items: center;
gap: 40px;
}
.work-station>div::before {
position: absolute;
content: "";
width: 50vw;
height: 100%;
top: 0;
right: 0;
background: #E8E8E8;
transform: translateX(99%);
}
.work-station>div::after {
position: absolute;
content: "";
width: 40px;
height: 100%;
top: 0;
left: 0;
background: #E8E8E8;
transform: translateX(-100%);
border-radius: var(--box-radius) 0 0 var(--box-radius);
}
.work-station-list {
display: flex;
justify-content: center;
}
.work-station-list>div {
width: 100%;
max-width: 510px;
}
.work-station-list h4 {
font-family: var(--ch-font);
font-size: var(--xd-33px);
font-weight: 600;
margin: 0;
color: var(--main-color);
}
.work-station-list h5 {
font-family: var(--en-font);
font-size: var(--xd-65px);
font-weight: 600;
margin: 0;
color: var(--main-color);
margin-bottom: 5px;
}
.work-station-list h6 {
font-family: var(--ch-font);
font-size: var(--xd-19px);
font-weight: 400;
margin: 0;
color: #000000;
line-height: 2em;
margin: 30px 0 60px 0;
}
.work-station-list span {
font-family: var(--ch-font);
font-size: var(--xd-16px);
font-weight: 400;
margin: 0;
color: var(--main-color);
}
.work-station-list p {
font-family: var(--ch-font);
font-size: var(--xd-16px);
font-weight: 400;
margin: 0;
color: #000000;
}
.work-station-img {
aspect-ratio: 660 / 668;
overflow: hidden;
border-radius: 20px;
}
.work-station-img img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
object-position: center;
}
.work-station-list .pouch-laminator-slick-box-text-list>div {
border-bottom: 2px solid white;
}
.product-contact {
background-image: linear-gradient(rgb(0, 0, 0, 0.35), rgb(0, 0, 0, 0.35)), url(//www.tahhsin.com.tw/wp-content/uploads/2024/07/office-desk-still-life.png);
}
.pouch-laminator-slick .slick-track{
display: flex !important;
}
.pouch-laminator-slick .slick-slide{
height: inherit;
}
.pouch-laminator-slick-box{
height: 100%;
}
@media only screen and ( max-width: 1600px) {
.pouch-laminator>div {
max-width: calc(100% - var(--pad-space) - var(--pad-space));
}
.pouch-laminator>div::before {
width: var(--pad-space);
}
.pouch-laminator-slick .slick-list {
padding-right: var(--pad-space);
}
.pouch-laminator-head {
width: 100%;
max-width: unset;
padding-right: var(--pad-space);
}
.roll-laminator-head {
max-width: calc(100% - var(--pad-space) - var(--pad-space));
padding-right: var(--pad-space);
}
.roll-laminator-body {
max-width: calc(100% - var(--pad-space) - var(--pad-space));
padding-right: var(--pad-space);
border-radius: 0 var(--box-radius) var(--box-radius) 0;
}
.roll-laminator-body::after {
display: none;
}
.work-station>div {
max-width: calc(100% - var(--pad-space) - var(--pad-space));
padding-left: var(--pad-space);
border-radius: var(--box-radius) 0 0 var(--box-radius);
}
.work-station>div::after {
display: none;
}
}
@media only screen and ( max-width: 1500px) {
.other-product-body-slick-box h5{
font-size:35px;
}
}
@media only screen and ( max-width: 1400px) {
.laminator-preamble>div {
grid-template-columns: 1fr auto;
grid-template-columns: 300px 1fr;
grid-gap: 30px;
}
.laminator-preamble>div>p{
font-size: 15px;
}
.pouch-laminator p{
font-size: 15px;
}
.roll-laminator p{
font-size: 15px;
}
.pouch-laminator-slick-box-text h6,
.roll-laminator-body-list h6,
.work-station-list h6{
font-size: 15px;
}
}
@media only screen and ( max-width: 1300px) {
.work-station>div {
grid-template-columns: 1fr 1fr;
}
}
@media only screen and ( max-width: 1200px) {
.laminator-preamble>div {
grid-template-columns: 1fr;
}
.laminator-preamble>div>p {
margin: 0 auto;
text-align: center;
}
.pouch-laminator-slick-box {
grid-template-columns: 1fr;
}
.pouch-laminator-slick-box {
padding: 40px;
grid-gap: 25px;
border-radius: 20px;
}
.pouch-laminator-slick-box-img {
aspect-ratio: 644 / 350;
}
.pouch-laminator-slick .slick-list {
padding-right: 15vw;
}
.work-station-list h6 {
margin: 20px 0;
}
.work-station-img {
width: 100%;
height: 100%;
}
.pouch-laminator-head {
grid-template-columns: auto 1fr;
gap: 40px;
}
.roll-laminator-head{
grid-template-columns: auto 1fr;
gap: 40px;
}
.other-product-body-slick-box h5{
font-size:30px;
}
}
@media only screen and ( max-width: 1100px) {
.roll-laminator-body::before {
display: none;
}
.roll-laminator-head {
grid-template-columns: 1fr;
gap: 0;
margin-bottom: 40px;
padding-right: 0px;
}
.roll-laminator-body {
padding: 40px;
border-radius: var(--box-radius);
display: flex;
flex-direction: column-reverse;
gap: 20px;
}
.roll-laminator h6 {
line-height: 1.1em;
}
.roll-laminator h5 {
margin-top: 5px;
margin-bottom: 10px;
}
.roll-laminator-body-img {
aspect-ratio: 782 / 418;
}
.roll-laminator-body-list h6 {
line-height: 1.6em;
}
.work-station>div::before {
display: none;
}
.work-station>div {
padding: 40px;
border-radius: var(--box-radius);
grid-template-columns: 1fr;
gap: 20px;
}
.work-station-list>div {
max-width: unset;
}
.banner-nav-anchor{
grid-template-columns: auto auto auto;
}
}
@media only screen and (max-width: 950px) {
.banner-nav-anchor{
grid-template-columns: auto auto;
}
}
@media only screen and ( max-width: 900px) {
.pouch-laminator-head {
grid-template-columns: 1fr;
gap: 0;
}
.pouch-laminator>div::before {
display: none;
}
.pouch-laminator>div {
margin: 0 auto;
padding: 40px 0 40px var(--pad-space);
border-radius: var(--box-radius);
}
.pouch-laminator h6 {
line-height: 1.1em;
}
.pouch-laminator-slick-box-text h6 {
line-height: 1.6em;
}
.pouch-laminator h5 {
margin-top: 5px;
margin-bottom: 10px;
}
.pouch-laminator-control {
margin-bottom: 10px;
}
.pouch-laminator>div {
gap: 25px;
padding: 0;
background: transparent;
max-width: unset;
}
.pouch-laminator-slick-box-text-list>div {
border-bottom: 2px solid #ffffff;
}
.pouch-laminator-head, .pouch-laminator-control {
padding: 0 var(--pad-space);
}
.pouch-laminator-slick-box {
background: #E8E8E8;
}
.pouch-laminator-slick .slick-list {
padding-right: unset;
padding: 0 var(--pad-space);
}
.pouch-laminator-control {
display: none;
}
.pouch-laminator-slick-box {
margin: 0 10px;
}
.pouch-laminator-control-mobile {
display: flex;
}
}
@media only screen and ( max-width: 850px) {
.other-product-body-slick-box h5{
font-size:25px;
}
}
@media only screen and ( max-width: 767px) {
.other-product-body-slick-box h5{
font-size:25px;
}
}
@media only screen and ( max-width: 750px) {
.laminator-preamble-box>div {
padding: 20px 10px;
}
.laminator-preamble-box {
grid-gap: 15px;
}
.laminator-preamble-box-svg {
height: 80px;
width: 80px;
}
}
@media only screen and ( max-width: 650px) {
.laminator-preamble-box {
grid-gap: 10px;
grid-template-columns: 1fr;
}
.laminator-preamble-box>div {
flex-direction: unset;
gap: 30px;
padding: 12px 20px;
border-radius: 12px;
}
.laminator-preamble-box-svg {
width: 45px;
height: 45px;
margin-bottom: 0;
}
.laminator-preamble-box-p-desk {
display: none;
}
.laminator-preamble-box-p-mobile {
display: block;
}
.laminator-preamble-box>div>h6 {
text-align: left;
}
}
@media only screen and ( max-width: 600px) {
.pouch-laminator h5 {
margin-bottom: 10px;
}
.pouch-laminator p {
line-height: 1.8em;
}
.pouch-laminator-control {
margin-bottom: 0px;
gap: 15px;
}
.pouch-laminator button {
width: 40px;
}
.pouch-laminator-slick-box-img {
border-radius: 10px;
}
.pouch-laminator-slick-box {
padding: var(--pad-space);
margin-right: 15px;
padding-bottom: calc( var(--pad-space) + 5px );
}
.pouch-laminator-slick-box-text-list>div {
grid-gap: 20px;
align-items: flex-start;
}
.pouch-laminator-slick-box {
margin-right: 0px;
margin: 0 5px;
}
.pouch-laminator-slick-box {
grid-gap: 7px;
}
.pouch-laminator-slick-box-text-list {
margin-bottom: 0px;
margin-top: 10px;
}
.pouch-laminator-slick-box-text span {
line-height: 1.8em;
}
.pouch-laminator-control-mobile {
padding: 0 7px;
}
.pouch-laminator button {
width: 35px;
}
.roll-laminator-body {
padding: var(--pad-space);
gap: 10px;
}
.roll-laminator p {
line-height: 1.8em;
}
.roll-laminator-head {
margin-bottom: 25px;
}
.roll-laminator-body-list h6 {
line-height: 1, 8em;
}
.roll-laminator-body-list span {
line-height: 1.8em;
}
.roll-laminator-body-list a {
margin-top: 25px;
margin-bottom: 10px;
}
.work-station>div {
padding: var(--pad-space);
padding-bottom: calc( var(--pad-space) + 5px );
}
.work-station-list h6 {
line-height: 1.7em;
margin: 15px 0;
}
.work-station-list span {
line-height: 2em;
}
}
@media only screen and (max-width: 430px) {
.banner-nav-anchor{
grid-template-columns: auto;
}
}
@media only screen and (max-width: 400px) {
.pouch-laminator-slick-box-text span,
.pouch-laminator p,
.pouch-laminator-slick-box-text h6,
.roll-laminator p,
.roll-laminator-body-list h6,
.roll-laminator-body-list span,
.roll-laminator p{
font-size: 14px;
}
.pouch-laminator-slick-box-text h6, .roll-laminator-body-list h6, .work-station-list h6{
font-size: 14px;
}
.pouch-laminator-slick-box-text-list>div {
grid-template-columns: 112px 1fr;
grid-gap: 15px;
}
.work-station-list p,.work-station-list span{
font-size: 14px;
}
.other-product-body-slick-box h5{
font-size:20px;
}
}