1229 lines
29 KiB
CSS
Executable File
1229 lines
29 KiB
CSS
Executable File
.body{
|
||
font-family:Montserrat-Regular !important;
|
||
}
|
||
.searchimg{
|
||
position: absolute;
|
||
top:50%;
|
||
margin-top: -10px;
|
||
}
|
||
#tuichu1 {
|
||
width: 30%;
|
||
}
|
||
|
||
.nav .navfl .navul li .navlist{width:100%;position:absolute;left:0;right:0;display:block;z-index:999999;background-color: white;box-shadow: 0px 3px 8px rgba(0,0,0,0.1);}
|
||
|
||
|
||
|
||
|
||
.workshop_all .content{ width:55.5%; height: 25.3125rem; z-index: 2;background-color:white; float:left;border-radius:26px 0 0 26px;}
|
||
.workshop_all .content12{ width:55.5%; height: 25.3125rem; z-index: 2;background-color:white; float:left;}
|
||
.workshop_all .content_text{margin-top: 6.2vw;
|
||
width: 60%;
|
||
margin-left: auto;
|
||
margin-right: auto;
|
||
overflow: hidden;
|
||
position: relative;
|
||
height: 124px;}
|
||
.workshop_all .title{
|
||
font-size: 2.625em;
|
||
text-align: center;
|
||
font-weight: 600;
|
||
color: #202020;
|
||
max-height: 82px;
|
||
line-height: 2.625rem;
|
||
height: 100%;
|
||
overflow: hidden;
|
||
}
|
||
.workshop_all .subtitle{ font-size: 1.125rem;
|
||
text-align: center;
|
||
padding-top: 1rem;
|
||
color: #000000;
|
||
}
|
||
|
||
|
||
.navItem dt{font-size: 14px; font-weight: 600; line-height: 16px; margin-inline-start:20px;margin-top:0.5vw; margin-bottom: 0.2vw; font-weight: 600; border-bottom: 1px solid rgba(225,225,225,0.5);padding-bottom: 13px;}
|
||
.navItem dt a{padding-bottom: 1vw;}
|
||
.navItem dt img{height: 16px; }
|
||
.navItem dd{font-size: 14px; line-height: 40px; padding-top:0vw; font-weight: 100; display: inline-block; margin-right:3%; margin-inline-start:40px;}
|
||
.navItem dd a, .two_nav_other a{font-size: 14px!important;}
|
||
.navItem dd img{margin-right: 10px; height: 40px; width:40px;}
|
||
|
||
.tpicture{
|
||
/* margin-left: 56%;
|
||
margin-top: -4%;*/
|
||
display: inline list-item;
|
||
}
|
||
/*.workshop_all :hover .content{position: absolute; width:100%; height: 100%; top:0; background-color:rgba(0,0,0,0.1); z-index: 2; color:#101010;}*/
|
||
.backwhite{
|
||
background-color: white;
|
||
}
|
||
/* 轮播 */
|
||
.swiper-box {
|
||
position: relative;
|
||
}
|
||
|
||
.swiper-box p{
|
||
font-size: 2rem;
|
||
font-weight: 600;
|
||
line-height: 7rem;
|
||
}
|
||
|
||
.swiper-container {
|
||
position: unset;
|
||
}
|
||
|
||
.swiper-wrapper {
|
||
position: unset;
|
||
}
|
||
|
||
.slideshow-btn {
|
||
z-index: 9999;
|
||
width: 40px;
|
||
height: 40px;
|
||
}
|
||
.swiper-button-next, .swiper-container-rtl .swiper-button-prev{
|
||
background-image: none !important
|
||
}
|
||
.swiper-button-prev, .swiper-container-rtl .swiper-button-next {
|
||
background-image: none !important
|
||
}
|
||
/*.swiper-container,.swiper-button-prev,*/
|
||
/*.swiper-button-next {background-color: transparent !important;*/
|
||
/* 设置背景颜色为透明
|
||
border-color: transparent !important; /* 设置边框颜色为透明
|
||
/* color: white !important;*/
|
||
/*}*/
|
||
/*.swiper{*/
|
||
/* --swiper-navigation-color: #fff;*/
|
||
/*}*/
|
||
|
||
.swiper {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
#swiper1{
|
||
width: 116%;
|
||
}
|
||
.swiper-slide {
|
||
text-align: center;
|
||
font-size: 18px;
|
||
background: #fff;
|
||
display: -webkit-box;
|
||
display: -ms-flexbox;
|
||
display: -webkit-flex;
|
||
display: flex;
|
||
-webkit-box-pack: center;
|
||
-ms-flex-pack: center;
|
||
-webkit-justify-content: center;
|
||
justify-content: center;
|
||
-webkit-box-align: center;
|
||
-ms-flex-align: center;
|
||
-webkit-align-items: center;
|
||
align-items: center;
|
||
}
|
||
|
||
.swiper-slide img {
|
||
display: block;
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: cover;
|
||
}
|
||
|
||
.swiper-button-prev,
|
||
.swiper-rtl .swiper-button-next {
|
||
top: 50% !important;
|
||
left: 93.5% !important;
|
||
right: auto;
|
||
}
|
||
|
||
.swiper-button-next,
|
||
.swiper-rtl .swiper-button-prev {
|
||
right: 0% !important;
|
||
top: 50% !important;
|
||
left: auto;
|
||
}
|
||
|
||
.swiperasd {
|
||
width: 85%;
|
||
position: relative;
|
||
height: 6.25rem;
|
||
|
||
}
|
||
.swiperasd1 {
|
||
width: 100%;
|
||
position: relative;
|
||
height: 6.25rem;
|
||
|
||
}
|
||
.swiperasd2 {
|
||
width: 78%;
|
||
position: relative;
|
||
height: 6.25rem;
|
||
|
||
}
|
||
.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
|
||
background-color: #555 !important;
|
||
margin-top: 0px;
|
||
height: 4px;
|
||
}
|
||
.slideshow-pag {
|
||
width: 90% !important;
|
||
position: absolute;
|
||
right: 3% !important;
|
||
top: 50% !important;
|
||
}
|
||
.swt1-Container{
|
||
background-color: white;
|
||
margin-left: auto;
|
||
margin-right: auto;
|
||
|
||
}
|
||
.picture1{
|
||
display: block;
|
||
width: 21.1875rem !important;
|
||
height: 29.375rem !important;
|
||
background: #FFFFFF;
|
||
border-radius: 26px 26px 26px 26px;
|
||
text-align: center;
|
||
|
||
}
|
||
.picture1 img{
|
||
width: 13.5rem;
|
||
height: 12.875rem;
|
||
display: block;
|
||
position: absolute;
|
||
left: 50%;
|
||
top: 30%;
|
||
margin-left: -6.75rem;
|
||
margin-top: -6.4375rem;
|
||
}
|
||
.picture1 img:hover{
|
||
transform: scale(1.1);
|
||
}
|
||
.picture1 a{
|
||
font-size: 0.8rem;
|
||
font-weight: 600;
|
||
/*position: absolute;*/
|
||
/*bottom: 5%;*/
|
||
}
|
||
.picture1 .more{
|
||
font-size: 0.8rem;
|
||
position: absolute;
|
||
bottom: 10%;
|
||
left: 50%;
|
||
margin-left: -65px;
|
||
}
|
||
.picture1 .title{font-size: 1.25rem;
|
||
text-align: center;
|
||
line-height: 1.5rem;
|
||
font-weight: 600;
|
||
margin-top: 18rem;
|
||
padding: 0 20px;
|
||
max-height: 43px;
|
||
overflow: hidden;}
|
||
.picture1 .subtitle{font-size: 1em;
|
||
text-align: center;
|
||
margin-top: 1rem;
|
||
line-height: 1.125rem;
|
||
font-size: medium;
|
||
width: 80%;
|
||
margin: auto;
|
||
margin-bottom: auto;
|
||
margin-top: 1rem;
|
||
margin-bottom: 1.25rem;
|
||
max-height: 33px;
|
||
overflow: hidden;}
|
||
|
||
.da1{
|
||
|
||
width: 80%;
|
||
margin-left: 10%;
|
||
/*height: 18.75rem;*/
|
||
overflow: hidden;
|
||
}
|
||
|
||
.col{
|
||
width: 20%;
|
||
float: left;
|
||
height: 100%;
|
||
text-align: center;
|
||
font-size: 1rem;
|
||
font-weight: bold;
|
||
color: #000000;
|
||
|
||
padding-bottom: 3rem;
|
||
}
|
||
.col img{
|
||
margin-top: 20%;
|
||
display: block;
|
||
margin-left: auto;
|
||
margin-right: auto;
|
||
margin-bottom: 26px;
|
||
}
|
||
|
||
.docking1-1{
|
||
width: 50%;
|
||
text-align: center;
|
||
background-color: white;
|
||
}
|
||
.docking1-2{
|
||
width: 50%;
|
||
background-color: white !important;
|
||
}
|
||
.docking1-2 img{
|
||
margin-left: 10%;
|
||
|
||
}
|
||
|
||
.docking1-1 .title{font-size: 2.25rem;
|
||
text-align: center;
|
||
line-height: 2.375rem;
|
||
font-weight: 700;
|
||
margin-top: 18rem;
|
||
max-height: 69px;
|
||
overflow: hidden;}
|
||
.docking1-1 .subtitle{font-size: 1.25em;
|
||
text-align: center;
|
||
width: 55%;
|
||
margin-left: 25%;
|
||
margin-top: 10px;
|
||
margin-bottom: 10px;
|
||
max-height: 42px;
|
||
line-height: 1.375rem;
|
||
font-size: revert;}
|
||
|
||
.docking1-1 .title a{color:black;}
|
||
/*.docking2-1 .title a{color:white;}*/
|
||
.docking2{
|
||
display: flex;
|
||
width: 100%;
|
||
margin-top:1%;
|
||
}
|
||
.docking2:first-child .docking2-1:first-child .title a{
|
||
color: black;
|
||
}
|
||
|
||
.docking2-1 {
|
||
align-items: flex-start;
|
||
width: 49.5%;
|
||
height: 34rem;
|
||
text-align: center;
|
||
}
|
||
|
||
.docking2-1:last-child {
|
||
margin-left: 1%;
|
||
color: white;
|
||
}
|
||
.docking2-1:last-child .title a{
|
||
color: white;
|
||
}
|
||
|
||
.docking2 .title{font-size: 1.875rem; text-align: center; line-height: 1.8em;font-weight:600;margin-top:1.785rem}
|
||
.docking2 .subtitle{font-size: 1.3em; text-align: center;width:50%;margin-left:25%; line-height:1.4em;margin-bottom:10px}
|
||
.title1{
|
||
color: white;
|
||
}
|
||
.title a{
|
||
font-size:1.20em ;
|
||
color: #004BFA;
|
||
font-weight: 600;
|
||
line-height: 2.0em;
|
||
}
|
||
|
||
.more{
|
||
font-size:1.0rem ;
|
||
color: #004BFA;
|
||
|
||
}
|
||
.picture2{
|
||
display: block;
|
||
width: 100% !important;
|
||
height: 43.75rem!important;
|
||
background: #FFFFFF;
|
||
border-radius: 26px 26px 26px 26px;
|
||
text-align: center;
|
||
|
||
}
|
||
.picture2 .item-img{
|
||
width: 42.625rem;
|
||
height: 40.625rem;
|
||
display: block;
|
||
margin-top: 0.625rem;
|
||
border-radius: 26px 26px 26px 26px;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.picture2 img{
|
||
width: 42.625rem;
|
||
height: 40.625rem;
|
||
display: block;
|
||
margin-top: 0.625rem;
|
||
border-radius: 26px 26px 26px 26px;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.picture2 .title{font-size: 3.65rem; text-align: left; line-height: 1.8em;font-weight:600;width:40%;position:absolute;top:9rem;left:55%}
|
||
.picture2 .subtitle{font-size: 1.25rem;
|
||
text-align: left;
|
||
width: 30%;
|
||
position: absolute;
|
||
top: 16rem;
|
||
left: 55%;
|
||
line-height: 1.375rem;}
|
||
.picture2 a{ text-align: left;width:40%;position:absolute;top:26rem;left:55%; color:#004BFA}
|
||
.Container1{
|
||
background-color: white;
|
||
}
|
||
#shopify-section-template--19206104285484__b0dd93e2-8ffa-4771-a65d-402ac18f05ce,#shopify-section-template--19206104285484__before-after-image{
|
||
background-color: white;
|
||
}
|
||
.swiper-pagination1 {
|
||
position: absolute;
|
||
bottom: 2.5rem !important;
|
||
/*left: 15% !important;*/
|
||
width: 90% !important;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
}
|
||
.swiper-pagination1 .swiper-pagination-bullet {
|
||
z-index: 10;
|
||
margin-right: 31%!important;
|
||
width: 1.25rem;
|
||
height: 1.25rem;
|
||
border-radius: 50%;
|
||
background-color: #ccc;
|
||
margin-bottom: 2.5rem;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.swiper-pagination1 .swiper-pagination-bullet-active {
|
||
background-color: #000;
|
||
}
|
||
#timeline{
|
||
position: relative;
|
||
}
|
||
hr{
|
||
z-index: 1;
|
||
width: 90%;
|
||
position: absolute;
|
||
top: 2.6875rem;
|
||
left: 1rem;
|
||
height: 2px;
|
||
background-color: #F5F5F5;
|
||
}
|
||
.time1{
|
||
position: absolute;
|
||
top: 3.4375rem;
|
||
left: 0.7%;
|
||
height: 2px;
|
||
}
|
||
.time2{
|
||
position: absolute;
|
||
top: 3.4375rem;
|
||
left: 30.2%;
|
||
height: 2px;
|
||
}
|
||
.time3{
|
||
position: absolute;
|
||
top: 3.4375rem;
|
||
left: 59.8%;
|
||
height: 2px;
|
||
}
|
||
|
||
.number-con{
|
||
height: 17rem;
|
||
background-color: #004BF9;
|
||
}
|
||
.number-con>div{
|
||
text-align: center;
|
||
width: 33%;
|
||
height: 17rem;
|
||
float: left;
|
||
color: white;
|
||
}
|
||
|
||
.number-scroll {
|
||
margin-top: 8.4375rem;
|
||
font-size:3.125rem;
|
||
font-weight: bold;
|
||
animation: number-scroll 1s ease-in-out forwards;
|
||
}
|
||
.tex-scroll{
|
||
font-size:1.25rem;
|
||
margin-top: -5.125rem;
|
||
}
|
||
.Container11{
|
||
display: flex;
|
||
background-color: #004BF9;
|
||
}
|
||
@keyframes number-scroll {
|
||
from {
|
||
transform: translateY(0);
|
||
}
|
||
to {
|
||
transform: translateY(-100%);
|
||
}
|
||
}
|
||
|
||
|
||
|
||
.picture3{
|
||
display: flex;
|
||
width: 65.8125rem !important;
|
||
height: 34.75rem!important;
|
||
background: #FFFFFF;
|
||
border-radius: 26px 26px 26px 26px;
|
||
text-align: center;
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
.picture3 img{
|
||
width: 65.8125rem !important;
|
||
height:34.75rem!important;
|
||
display: block;
|
||
border-radius: 26px 26px 26px 26px;
|
||
|
||
}
|
||
.picture3 .title{
|
||
font-size: 2.5rem;
|
||
position: absolute;
|
||
left: 5%;
|
||
bottom: 5%;
|
||
color: white;
|
||
width: 18rem;
|
||
font-weight: 600;
|
||
line-height: 2.4rem;
|
||
text-align: left;
|
||
}
|
||
|
||
.mySwiper2{
|
||
margin-top: 3rem;
|
||
}
|
||
|
||
|
||
.Container9{
|
||
margin-top: 3rem;
|
||
display: flex;
|
||
background-color: white;
|
||
border-radius: 25px;
|
||
min-height:35rem;
|
||
box-shadow: 5px 5px 30px 5px #D6D6DE;
|
||
|
||
}
|
||
.divleft{
|
||
width: 40%;
|
||
height: ;
|
||
}
|
||
.divleft .title{font-size: 4.25rem; text-align: left; font-weight:600;width:70%;margin-left:15%;margin-top:10%}
|
||
.divleft .subtitle{font-size: 1.5em; text-align: left;width:70%;margin-left:15%;margin-top:1%}
|
||
.divleft .subtitle1{font-size: 1em; text-align: left;width:70%;margin-left:15%;margin-top:2%}
|
||
.divright{
|
||
width: 60%;
|
||
display: flex;
|
||
}
|
||
|
||
.accordion {
|
||
border-radius: 10px;
|
||
margin-top: 10%;
|
||
margin-bottom: 14%;
|
||
margin-left: 3%;
|
||
width: 90%;
|
||
/*height: 22.125rem;*/
|
||
min-height: 22.125rem;
|
||
border: 1px solid #D6D6D6;
|
||
border-radius: 10px;
|
||
}
|
||
|
||
.accordion-item {
|
||
margin-left: 5%;
|
||
margin-top: 1%;
|
||
width: 90%;
|
||
margin-bottom: 10px;
|
||
border-bottom: 1px solid #D6D6D6;
|
||
}
|
||
|
||
.accordion-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 10px;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.accordion-header h3 {
|
||
margin: 0;
|
||
}
|
||
.accordion-header span {
|
||
width: 60px;
|
||
height: 30px;
|
||
text-align: center;
|
||
}
|
||
|
||
.accordion-content {
|
||
padding: 10px;
|
||
display: none;
|
||
}
|
||
|
||
.accordion-icon {
|
||
width: 10px;
|
||
height: 10px;
|
||
border: 1px solid #000;
|
||
transform: rotate(0deg);
|
||
transition: transform 0.3s ease;
|
||
}
|
||
|
||
.accordion-item.active .accordion-icon {
|
||
transform: rotate(90deg);
|
||
}
|
||
.Container8{
|
||
display: flex; height:200px;margin-top:3rem;
|
||
}
|
||
.Container8 .col1{
|
||
font-weight：400!important;
|
||
width: 50%;
|
||
}
|
||
.Container8 .col1 img{
|
||
margin-top:2%;
|
||
display: block;
|
||
margin-left: auto;
|
||
margin-right: auto;
|
||
}
|
||
.Container8 .titlea{font-size: 1.25rem; text-align: center; font-weight:600;line-height:2rem;}
|
||
.Container8 .subtitlea{font-size: 1em; text-align: center;line-height:2rem;}
|
||
/* 图片切换 */
|
||
/* Typography (heading) */
|
||
@font-face {
|
||
font-family:Montserrat-Regular !important;
|
||
font-weight: 400;
|
||
font-style: normal;
|
||
font-display: fallback;
|
||
/*src: url("http://fonts.shopifycdn.com/catamaran/catamaran_n4.e84045be8cd3d4914a3d5046417b639b53601e03.woff2?h1=b3JpY28tdGVjaC5hY2NvdW50Lm15c2hvcGlmeS5jb20&h2=b3JpY290ZWNocy5jb20&hmac=b9921c11996e4f9eede5918a182241110a56dcbf078ce2daaf83a48552bff956") format("woff2"), url("https://fonts.shopifycdn.com/catamaran/catamaran_n4.5365680d338b8fc183023a5abb3d544296988f08.woff?h1=b3JpY28tdGVjaC5hY2NvdW50Lm15c2hvcGlmeS5jb20&h2=b3JpY290ZWNocy5jb20&hmac=e2e16a4f64b836a36ff148461f177af513ce9732e20c9e906599c9a60e007baf") format("woff");*/
|
||
}
|
||
|
||
/* Typography (body) */
|
||
@font-face {
|
||
font-family:Montserrat-Regular !important;
|
||
font-weight: 400;
|
||
font-style: normal;
|
||
font-display: fallback;
|
||
/*src: url("http://fonts.shopifycdn.com/catamaran/catamaran_n4.e84045be8cd3d4914a3d5046417b639b53601e03.woff2?h1=b3JpY28tdGVjaC5hY2NvdW50Lm15c2hvcGlmeS5jb20&h2=b3JpY290ZWNocy5jb20&hmac=b9921c11996e4f9eede5918a182241110a56dcbf078ce2daaf83a48552bff956") format("woff2"), url("https://fonts.shopifycdn.com/catamaran/catamaran_n4.5365680d338b8fc183023a5abb3d544296988f08.woff?h1=b3JpY28tdGVjaC5hY2NvdW50Lm15c2hvcGlmeS5jb20&h2=b3JpY290ZWNocy5jb20&hmac=e2e16a4f64b836a36ff148461f177af513ce9732e20c9e906599c9a60e007baf") format("woff");*/
|
||
*/
|
||
}
|
||
|
||
@font-face {
|
||
font-family:Montserrat-Regular !important;
|
||
font-weight: 700;
|
||
font-style: normal;
|
||
font-display: fallback;
|
||
/*src: url("http://fonts.shopifycdn.com/catamaran/catamaran_n7.833cefb687fff43803eb5258b2a69a908a79f6b3.woff2?h1=b3JpY28tdGVjaC5hY2NvdW50Lm15c2hvcGlmeS5jb20&h2=b3JpY290ZWNocy5jb20&hmac=28665271197fa9f0e9430f2987369c2cd8166ab4c4f556b3679d99e4e172a163") format("woff2"), url("https://fonts.shopifycdn.com/catamaran/catamaran_n7.61e26a080765a04cf6b3c3cb52334da048528798.woff?h1=b3JpY28tdGVjaC5hY2NvdW50Lm15c2hvcGlmeS5jb20&h2=b3JpY290ZWNocy5jb20&hmac=222a61d7f99d8c6be2e82f132194c1b149642efc06c494b752e7d38269ab80f5") format("woff");
|
||
*/
|
||
}
|
||
|
||
:root {
|
||
/**
|
||
* ---------------------------------------------------------------------
|
||
* SPACING VARIABLES
|
||
*
|
||
* We are using a spacing inspired from frameworks like Tailwind CSS.
|
||
* ---------------------------------------------------------------------
|
||
*/
|
||
--spacing-0-5: 0.125rem;
|
||
/* 2px */
|
||
/*! --spacing-1: 0.25rem; */
|
||
/* 4px */
|
||
--spacing-1-5: 0.375rem;
|
||
/* 6px */
|
||
--spacing-2: 0.5rem;
|
||
/* 8px */
|
||
--spacing-2-5: 0.625rem;
|
||
/* 10px */
|
||
--spacing-3: 0.75rem;
|
||
/* 12px */
|
||
--spacing-3-5: 0.875rem;
|
||
/* 14px */
|
||
--spacing-4: 1rem;
|
||
/* 16px */
|
||
--spacing-4-5: 1.125rem;
|
||
/* 18px */
|
||
--spacing-5: 1.25rem;
|
||
/* 20px */
|
||
--spacing-5-5: 1.375rem;
|
||
/* 22px */
|
||
--spacing-6: 1.5rem;
|
||
/* 24px */
|
||
--spacing-6-5: 1.625rem;
|
||
/* 26px */
|
||
--spacing-7: 1.75rem;
|
||
/* 28px */
|
||
--spacing-7-5: 1.875rem;
|
||
/* 30px */
|
||
--spacing-8: 2rem;
|
||
/* 32px */
|
||
--spacing-8-5: 2.125rem;
|
||
/* 34px */
|
||
--spacing-9: 2.25rem;
|
||
/* 36px */
|
||
--spacing-9-5: 2.375rem;
|
||
/* 38px */
|
||
--spacing-10: 2.5rem;
|
||
/* 40px */
|
||
--spacing-11: 2.75rem;
|
||
/* 44px */
|
||
--spacing-12: 3rem;
|
||
/* 48px */
|
||
--spacing-14: 3.5rem;
|
||
/* 56px */
|
||
--spacing-16: 4rem;
|
||
/* 64px */
|
||
--spacing-18: 4.5rem;
|
||
/* 72px */
|
||
--spacing-20: 5rem;
|
||
/* 80px */
|
||
--spacing-24: 6rem;
|
||
/* 96px */
|
||
--spacing-28: 7rem;
|
||
/* 112px */
|
||
--spacing-32: 8rem;
|
||
/* 128px */
|
||
--spacing-36: 9rem;
|
||
/* 144px */
|
||
--spacing-40: 10rem;
|
||
/* 160px */
|
||
--spacing-44: 11rem;
|
||
/* 176px */
|
||
--spacing-48: 12rem;
|
||
/* 192px */
|
||
--spacing-52: 13rem;
|
||
/* 208px */
|
||
--spacing-56: 14rem;
|
||
/* 224px */
|
||
--spacing-60: 15rem;
|
||
/* 240px */
|
||
--spacing-64: 16rem;
|
||
/* 256px */
|
||
--spacing-72: 18rem;
|
||
/* 288px */
|
||
--spacing-80: 20rem;
|
||
/* 320px */
|
||
--spacing-96: 24rem;
|
||
/* 384px */
|
||
/* Container */
|
||
--container-max-width: 1300px;
|
||
--container-narrow-max-width: 1050px;
|
||
--container-gutter: var(--spacing-5);
|
||
--section-outer-spacing-block: var(--spacing-14);
|
||
--section-inner-max-spacing-block: var(--spacing-12);
|
||
--section-inner-spacing-inline: var(--container-gutter);
|
||
--section-stack-spacing-block: var(--spacing-10);
|
||
/* Grid gutter */
|
||
--grid-gutter: var(--spacing-5);
|
||
/* Product list settings */
|
||
--product-list-row-gap: var(--spacing-8);
|
||
--product-list-column-gap: var(--grid-gutter);
|
||
/* Form settings */
|
||
--input-gap: var(--spacing-2);
|
||
--input-height: 2.625rem;
|
||
--input-padding-inline: var(--spacing-4);
|
||
/* Other sizes */
|
||
--sticky-area-height: calc(var(--sticky-announcement-bar-enabled, 0) * var(--announcement-bar-height, 0px) + var(--sticky-header-enabled, 0) * var(--header-height, 0px));
|
||
/* RTL support */
|
||
--transform-logical-flip: 1;
|
||
--transform-origin-start: left;
|
||
--transform-origin-end: right;
|
||
/**
|
||
* ---------------------------------------------------------------------
|
||
* TYPOGRAPHY
|
||
* ---------------------------------------------------------------------
|
||
*/
|
||
/* Font properties */
|
||
--heading- font-family:Montserrat-Regular !important;
|
||
--heading-font-weight: 400;
|
||
--heading-font-style: normal;
|
||
--heading-text-transform: normal;
|
||
--heading-letter-spacing: -0.02em;
|
||
--text- font-family:Montserrat-Regular !important;
|
||
--text-font-weight: 400;
|
||
--text-font-style: normal;
|
||
--text-letter-spacing: 0.0em;
|
||
/* Font sizes */
|
||
--text-h0: 2.75rem;
|
||
--text-h1: 2rem;
|
||
--text-h2: 1.75rem;
|
||
--text-h3: 1.375rem;
|
||
--text-h4: 1.125rem;
|
||
--text-h5: 1.125rem;
|
||
--text-h6: 1rem;
|
||
--text-xs: 0.6875rem;
|
||
--text-sm: 0.75rem;
|
||
--text-base: 0.875rem;
|
||
--text-lg: 1.125rem;
|
||
/**
|
||
* ---------------------------------------------------------------------
|
||
* COLORS
|
||
* ---------------------------------------------------------------------
|
||
*/
|
||
/* Color settings */
|
||
--accent: 230 230 233;
|
||
--text-primary: 26 26 26;
|
||
--background-primary: 242 242 242;
|
||
--dialog-background: 255 255 255;
|
||
--border-color: var(--text-color, var(--text-primary)) / 0.12;
|
||
/* Button colors */
|
||
--button-background-primary: 230 230 233;
|
||
--button-text-primary: 0 75 250;
|
||
--button-background-secondary: 0 75 250;
|
||
--button-text-secondary: 255 255 255;
|
||
/* Status colors */
|
||
--success-background: 224 233 254;
|
||
--success-text: 0 75 250;
|
||
--warning-background: 254 237 231;
|
||
--warning-text: 248 103 52;
|
||
--error-background: 254 231 231;
|
||
--error-text: 248 58 58;
|
||
/* Product colors */
|
||
--on-sale-text: 248 103 52;
|
||
--on-sale-badge-background: 248 103 52;
|
||
--on-sale-badge-text: 255 255 255;
|
||
--sold-out-badge-background: 0 0 0;
|
||
--sold-out-badge-text: 255 255 255;
|
||
--primary-badge-background: 128 60 238;
|
||
--primary-badge-text: 255 255 255;
|
||
--star-color: 255 183 74;
|
||
--product-card-background: 255 255 255;
|
||
--product-card-text: 26 26 26;
|
||
/* Header colors */
|
||
--header-background: 252 252 255;
|
||
--header-text: 26 26 26;
|
||
/* Footer colors */
|
||
--footer-background: 0 0 0;
|
||
--footer-text: 255 255 255;
|
||
/* Rounded variables (used for border radius) */
|
||
--rounded-xs: 0.25rem;
|
||
--rounded-sm: 0.375rem;
|
||
--rounded: 0.75rem;
|
||
--rounded-lg: 1.5rem;
|
||
--rounded-full: 9999px;
|
||
--rounded-button: 3.75rem;
|
||
--rounded-input: 0.5rem;
|
||
/* Box shadow */
|
||
--shadow-sm: 0 2px 8px rgb(var(--text-primary) / 0.1);
|
||
--shadow: 0 5px 15px rgb(var(--text-primary) / 0.1);
|
||
--shadow-md: 0 5px 30px rgb(var(--text-primary) / 0.1);
|
||
--shadow-block: 2px 18px 50px rgb(var(--text-primary) / 0.1);
|
||
/**
|
||
* ---------------------------------------------------------------------
|
||
* OTHER
|
||
* ---------------------------------------------------------------------
|
||
*/
|
||
|
||
/* --cursor-close-svg-url: url(//cdn.shopifycdn.net/s/files/1/0745/7911/6332/t/15/assets/cursor-close.svg?v=147174565022153725511684750000);
|
||
--cursor-zoom-in-svg-url: url(//cdn.shopifycdn.net/s/files/1/0745/7911/6332/t/15/assets/cursor-zoom-in.svg?v=154953035094101115921684750000);
|
||
--cursor-zoom-out-svg-url: url(//cdn.shopifycdn.net/s/files/1/0745/7911/6332/t/15/assets/cursor-zoom-out.svg?v=16155520337305705181684750000);
|
||
--checkmark-svg-url: url(//cdn.shopifycdn.net/s/files/1/0745/7911/6332/t/15/assets/checkmark.svg?v=142580986663813899141685501699);*/
|
||
}
|
||
|
||
[dir="rtl"]:root {
|
||
/* RTL support */
|
||
--transform-logical-flip: -1;
|
||
--transform-origin-start: right;
|
||
--transform-origin-end: left;
|
||
}
|
||
|
||
@media screen and (min-width: 700px) {
|
||
:root {
|
||
/* Typography (font size) */
|
||
--text-h0: 3.5rem;
|
||
--text-h1: 2.5rem;
|
||
--text-h2: 2rem;
|
||
--text-h3: 1.625rem;
|
||
--text-h4: 1.375rem;
|
||
--text-h5: 1.125rem;
|
||
--text-h6: 1rem;
|
||
--text-xs: 0.6875rem;
|
||
--text-sm: 0.75rem;
|
||
--text-base: 0.875rem;
|
||
--text-lg: 1.125rem;
|
||
/* Spacing */
|
||
--container-gutter: 2rem;
|
||
--section-outer-spacing-block: var(--spacing-20);
|
||
--section-inner-max-spacing-block: var(--spacing-14);
|
||
--section-inner-spacing-inline: var(--spacing-14);
|
||
--section-stack-spacing-block: var(--spacing-12);
|
||
/* Grid gutter */
|
||
--grid-gutter: var(--spacing-6);
|
||
/* Product list settings */
|
||
--product-list-row-gap: var(--spacing-12);
|
||
/* Form settings */
|
||
--input-gap: 1rem;
|
||
--input-height: 3.125rem;
|
||
--input-padding-inline: var(--spacing-5);
|
||
}
|
||
}
|
||
|
||
@media screen and (min-width: 1000px) {
|
||
:root {
|
||
/* Spacing settings */
|
||
--container-gutter: var(--spacing-12);
|
||
--section-outer-spacing-block: var(--spacing-20);
|
||
--section-inner-max-spacing-block: var(--spacing-18);
|
||
--section-inner-spacing-inline: var(--spacing-18);
|
||
--section-stack-spacing-block: var(--spacing-12);
|
||
}
|
||
}
|
||
|
||
@media screen and (min-width: 1150px) {
|
||
:root {
|
||
/* Spacing settings */
|
||
--container-gutter: var(--spacing-12);
|
||
--section-outer-spacing-block: var(--spacing-24);
|
||
--section-inner-max-spacing-block: var(--spacing-18);
|
||
--section-inner-spacing-inline: var(--spacing-18);
|
||
--section-stack-spacing-block: var(--spacing-12);
|
||
}
|
||
}
|
||
|
||
@media screen and (min-width: 1400px) {
|
||
:root {
|
||
/* Typography (font size) */
|
||
--text-h0: 4.5rem;
|
||
--text-h1: 3.5rem;
|
||
--text-h2: 2.75rem;
|
||
--text-h3: 2rem;
|
||
--text-h4: 1.75rem;
|
||
--text-h5: 1.375rem;
|
||
--text-h6: 1.25rem;
|
||
--section-outer-spacing-block: var(--spacing-28);
|
||
--section-inner-max-spacing-block: var(--spacing-20);
|
||
--section-inner-spacing-inline: var(--spacing-20);
|
||
}
|
||
}
|
||
|
||
@media screen and (min-width: 1600px) {
|
||
:root {
|
||
--section-outer-spacing-block: var(--spacing-32);
|
||
--section-inner-max-spacing-block: var(--spacing-24);
|
||
--section-inner-spacing-inline: var(--spacing-24);
|
||
}
|
||
}
|
||
|
||
body {
|
||
--background: var(--background-primary);
|
||
--text-color: var(--text-primary);
|
||
background: rgb(var(--background));
|
||
color: rgb(var(--text-color));
|
||
font: var(--text-font-style) var(--text-font-weight) var(--text-base) / 1.6 var(--text-font-family);
|
||
letter-spacing: var(--text-letter-spacing);
|
||
margin: 0;
|
||
position: relative;
|
||
}
|
||
|
||
.section {
|
||
padding-block-start: calc(var(--background-differs-from-previous) * var(--calculated-section-spacing-block-start));
|
||
padding-block-end: var(--calculated-section-spacing-block-end);
|
||
}
|
||
|
||
[role="main"] .shopify-section:not(.contents) {
|
||
display: flow-root;
|
||
}
|
||
|
||
[role="main"] .shopify-section {
|
||
--section-is-first: 0;
|
||
--hash-difference: calc(var(--section-background-hash) - var(--previous-section-background-hash, -1));
|
||
--hash-difference-abs: max(var(--hash-difference), -1 * var(--hash-difference));
|
||
--background-differs-from-previous: max(0, min(var(--hash-difference-abs, 1), 1));
|
||
background: rgb(var(--background));
|
||
position: relative;
|
||
}
|
||
|
||
@media screen and (min-width: 1150px) {
|
||
.section-stack__main {
|
||
width: 50%;
|
||
}
|
||
|
||
.section-stack--center {
|
||
justify-items: center;
|
||
}
|
||
}
|
||
|
||
.justify-center {
|
||
justify-content: safe center;
|
||
}
|
||
|
||
.rich-text {
|
||
display: flex;
|
||
}
|
||
|
||
.rich-text__wrapper {
|
||
max-width: var(--rich-text-max-width);
|
||
}
|
||
|
||
.rich-text .prose,
|
||
.split-rich-text .prose {
|
||
font-family:Montserrat-Regular !important;
|
||
align-items: start;
|
||
display: grid;
|
||
}
|
||
|
||
.justify-items-center {
|
||
justify-items: safe center;
|
||
}
|
||
|
||
.text-center {
|
||
text-align: center;
|
||
}
|
||
|
||
.prose> :first-child,
|
||
.prose> :first-child :first-child {
|
||
font-size: 58px;
|
||
font-family:Montserrat-Regular !important;
|
||
font-weight: 600;
|
||
margin-block-start: 0 !important;
|
||
}
|
||
|
||
.hyphenate {
|
||
-webkit-hyphens: auto;
|
||
hyphens: auto;
|
||
}
|
||
|
||
.h1,
|
||
.prose h1:not(.h0, .h1, .h2, .h3, .h4, .h5, .h6) {
|
||
font-size: var(--text-h1);
|
||
line-height: 1.1;
|
||
}
|
||
|
||
@media screen and (min-width: 1150px) {
|
||
.prose :is(.h0, .h1, .h2, h1, h2)+* {
|
||
margin-block-start: var(--spacing-8);
|
||
}
|
||
}
|
||
|
||
|
||
*,
|
||
::before,
|
||
::after {
|
||
box-sizing: border-box;
|
||
border-style: solid;
|
||
border-width: 0;
|
||
border-color: rgb(var(--text-color) / .12);
|
||
}
|
||
|
||
.section {
|
||
--context-section-spacing-block-start: var(--section-outer-spacing-block);
|
||
--context-section-spacing-block-end: var(--section-outer-spacing-block);
|
||
--context-section-spacing-inline: var(--container-gutter);
|
||
--calculated-section-spacing-block-start: var(--section-spacing-block-start, var(--section-spacing-block, var(--context-section-spacing-block-start)));
|
||
--calculated-section-spacing-block-end: var(--section-spacing-block-end, var(--section-spacing-block, var(--context-section-spacing-block-end)));
|
||
--calculated-section-spacing-inline: var(--section-spacing-inline, var(--context-section-spacing-inline));
|
||
--container-inner-width: min((100vw - var(--scrollbar-width, 0px)) - var(--calculated-section-spacing-inline, 0px) * 2, var(--container-max-width));
|
||
--container-outer-width: calc(((100vw - var(--scrollbar-width, 0px)) - var(--container-inner-width, 0px)) / 2);
|
||
--section-stack-spacing-inline: var(--section-inner-spacing-inline, 0px);
|
||
padding-inline-start: max(var(--calculated-section-spacing-inline), 50% - var(--container-max-width) / 2);
|
||
padding-inline-end: max(var(--calculated-section-spacing-inline), 50% - var(--container-max-width) / 2);
|
||
}
|
||
|
||
.prose> :last-child,
|
||
.prose> :last-child :last-child {
|
||
margin-block-end: 0 !important;
|
||
font-size: medium;
|
||
}
|
||
|
||
.prose> :last-child,
|
||
.prose> :last-child :last-child {
|
||
font-family:Montserrat-Regular !important;
|
||
font-size: 20px;
|
||
margin-block-end: 0 !important;
|
||
font-size: medium;
|
||
padding-top: 1.6875rem;
|
||
}
|
||
|
||
blockquote,
|
||
dl,
|
||
dd,
|
||
h1,
|
||
h2,
|
||
h3,
|
||
h4,
|
||
h5,
|
||
h6,
|
||
hr,
|
||
figure,
|
||
p,
|
||
pre {
|
||
margin: 0;
|
||
}
|
||
|
||
.heading,
|
||
.h0,
|
||
.h1,
|
||
.h2,
|
||
.h3,
|
||
.h4,
|
||
.h5,
|
||
.h6,
|
||
.prose :is(h1, h2, h3, h4, h5, h6) {
|
||
font-family: var(--heading-font-family);
|
||
font-weight: var(--heading-font-weight);
|
||
font-style: var(--heading-font-style);
|
||
letter-spacing: var(--heading-letter-spacing);
|
||
text-transform: var(--heading-text-transform);
|
||
overflow-wrap: anywhere;
|
||
}
|
||
|
||
.section-stack {
|
||
gap: var(--section-stack-spacing-block, 0px) var(--section-stack-spacing-inline, 0px);
|
||
grid-auto-columns: minmax(0, 1fr);
|
||
display: grid;
|
||
}
|
||
|
||
@media screen and (min-width: 1150px) {
|
||
.section-stack__main {
|
||
width: var(--section-stack-main, 50%);
|
||
}
|
||
}
|
||
|
||
.shadow {
|
||
filter: drop-shadow(var(--shadow));
|
||
}
|
||
|
||
@media screen and (min-width: 700px) {
|
||
/*img {
|
||
max-width: min(var(--image-max-width, 100%), 100%);
|
||
}*/
|
||
|
||
.before-after {
|
||
--before-after-label-spacing: var(--spacing-8);
|
||
}
|
||
|
||
.before-after__cursor svg {
|
||
width: var(--spacing-10);
|
||
height: var(--spacing-10);
|
||
}
|
||
|
||
.prose :is(.h0, .h1, .h2, .h3, h1, h2, h3)+* {
|
||
margin-block-start: var(--spacing-6);
|
||
}
|
||
}
|
||
|
||
.before-after__label--bottom {
|
||
bottom: var(--before-after-label-spacing);
|
||
}
|
||
|
||
.before-after__label {
|
||
position: absolute;
|
||
}
|
||
|
||
.before-after__cursor {
|
||
top: 50%;
|
||
}
|
||
|
||
.before-after__cursor:not(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
|
||
left: var(--before-after-initial-drag-position, 0px);
|
||
}
|
||
|
||
.before-after__cursor:active {
|
||
cursor: grabbing;
|
||
}
|
||
|
||
.before-after__cursor {
|
||
cursor: grab;
|
||
}
|
||
|
||
.before-after__cursor {
|
||
height: 100%;
|
||
width: max-content;
|
||
touch-action: none;
|
||
transform: translate(calc(var(--transform-logical-flip) * -50% + var(--clip-path-offset, 0px)), -50%);
|
||
cursor: grab;
|
||
filter: drop-shadow(0 1px 2px #0000001a) drop-shadow(0 1px 1px #0000000f);
|
||
will-change: transform;
|
||
place-items: center;
|
||
display: grid;
|
||
position: relative;
|
||
}
|
||
|
||
.text-custom {
|
||
color: rgb(var(--text-color));
|
||
}
|
||
|
||
img,
|
||
video,
|
||
iframe,
|
||
object {
|
||
vertical-align: middle;
|
||
display: block;
|
||
}
|
||
|
||
#shopify-section-template--19206104285484__b0dd93e2-8ffa-4771-a65d-402ac18f05ce {
|
||
--section-background-hash: 0;
|
||
}
|
||
|
||
#shopify-section-template--19206104285484__b0dd93e2-8ffa-4771-a65d-402ac18f05ce+* {
|
||
--previous-section-background-hash: 0;
|
||
}
|
||
|
||
#shopify-section-template--19206104285484__b0dd93e2-8ffa-4771-a65d-402ac18f05ce {
|
||
--rich-text-max-width: 650px
|
||
}
|
||
|
||
#shopify-section-template--19206104285484__before-after-image {
|
||
--section-background-hash: 0;
|
||
}
|
||
|
||
#shopify-section-template--19206104285484__before-after-image+* {
|
||
--previous-section-background-hash: 0;
|
||
}
|
||
|
||
.ba-slider {
|
||
position: relative;
|
||
overflow: hidden;
|
||
height: 725px;
|
||
}
|
||
|
||
.ba-slider img {
|
||
width: 100%;
|
||
display: block;
|
||
max-width: none;
|
||
height: 100%;
|
||
position: absolute;
|
||
object-fit: cover
|
||
}
|
||
|
||
.ba-slider .resize {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
height: 100%;
|
||
width: 50%;
|
||
overflow: hidden
|
||
}
|
||
|
||
.ba-slider .handle {
|
||
position: absolute;
|
||
left: 50%;
|
||
top: 0;
|
||
bottom: 0;
|
||
width: 4px;
|
||
margin-left: -2px;
|
||
display: block;
|
||
background: rgba(255, 255, 255, .5);
|
||
cursor: ew-resize
|
||
}
|
||
|
||
|
||
.ba-slider .handle.ba-draggable:after {
|
||
transform: scale(.8)
|
||
}
|
||
|
||
#shopify-section-template--19206104285484__before-after-image {
|
||
--section-stack-intro: 50%;
|
||
--section-stack-main: 100%;
|
||
--before-after-initial-drag-position: 50%;
|
||
}
|
||
.section-full{
|
||
padding-left: 12.5%;
|
||
padding-right: 12.5%;
|
||
padding-bottom: 5%;
|
||
}
|
||
.ba-slider{
|
||
border-radius: 26px;
|
||
} |