/* [mn="5102"] .itm .l:after { content: ''; left: 0; bottom: 0; position: absolute; display: block; height: 100%; width: 250px; background: rgb(254,254,254); background: linear-gradient(90deg, rgba(235,235,235,1) 0%, rgba(235,235,235,0) 100%); } */ [mn="5102"] { :is(input, textarea, select){ border-radius: 3px; } .mapbx{ .bimg{ padding-top: 77%; } } ._iframe { position: absolute; left: 0; top: 0; height: 100%; width: 100%; line-height: 0; aspect-ratio: auto; } ._iframe iframe { height: 100%; width: 100%; } } [mn="5102"] ._content { line-height: 1.8; } @media (max-width: 1100px) { } @media (max-width: 767px) { [mn="5102"] { align-items: flex-start; min-height: auto; } [mn="5102"] .main { position: inherit; height: 350px } [mn="5102"] .main + div { padding: 30px 15px } } [mn="5102"] { &.dsg_1{ & .formbx { padding-top: 60px; padding-bottom: 60px } @media (min-width: 767px) { & .infow { width: 800px; max-width: calc(100% - 60px); margin: 0 auto; } } } &.dsg_2{ } } [mn="8003"] { padding: 3px 0; line-height: 1; z-index: 5; } [mn="8003"] .mediabx { --iconclr: var(--clr01); --iconhovclr: #fff; --bgclr: #fff; --bghovclr: var(--clr02); --square: 30px; } [mn="8003"] .mediabx a { border-radius: 50%; padding: 6px } [mn="8003"] .mediabx .unit { margin: 3px } [mn="8003"] .searchbx { position: relative; width: 150px; } [mn="8003"] .searchbx input { margin: 0; padding: 6px 9px 6px 30px; width: 100%; border-radius: 50px; border: 2px solid #ccc; font-size: inherit; } [mn="8003"] .searchbx i { position: absolute; left: 9px; top: 50%; translate: 0 -50%; color: #ccc; width: 12px; } [mn="8003"] .logo { margin: 0 0; position: relative; z-index: 0; padding: 15px 0; } [mn="8003"] .logo:before { content: ''; position: absolute; height: calc(100% + 200px); width: 100vw; bottom: 0; right: 0; translate: 0 3px; z-index: -1; background-color: var(--clr01, #fff); } [mn="8003"] .logo:after { content: ''; position: absolute; height: 100vw; width: 100vw; bottom: 0; right: 0; translate: 0px 3px; rotate: 30deg; transform-origin: right bottom; z-index: -1; background-color: var(--clr01, #fff); } [mn="8003"] .logo img { max-height: 90px } [mn="8003"] img { max-height: 90px } [mn="8003"] .logobx { flex: 0 0 350px; max-width: 350px; } [mn="8003"] .navbx { flex: 0 0 calc(100% - 350px); max-width: calc(100% - 350px); } [mn="8003"] nav > ul > li { margin: 0; } [mn="8003"] nav ul ul a { color: initial } [mn="8003"] nav ul ul a:hover { color: var(--clr01) } /* ======================= */ nav { line-height: 1; } nav :is(ul, li){ list-style: none; list-style-type: none; margin: 0; padding: 0; display: inline-flex; justify-content: center; align-items: center; flex-wrap: wrap; } nav a { display: inline-flex; justify-content: center; align-items: center; font-family: var(--ft-nav); text-transform: uppercase; text-decoration: none; color: inherit; cursor: pointer; } nav a:hover, nav a.active{ color: var(--clr01) !important } nav > ul { gap: 15px } nav > ul > li { margin: 0; padding: 0; position: relative } @media (max-width: 767px) { nav ul { width: 100%; } nav > ul > li > ul { padding: 0 0 0 12px } nav > ul > li > ul li { width: 100%; font-size: 70%; } nav > ul > li > ul li ~ li { border-top: 1px solid #eee } nav > ul > li > ul a { text-transform: initial; width: 100%; justify-content: flex-start; } } @media (min-width: 767px) { nav > ul > li > ul { position: absolute; bottom: -43px; right: 50%; translate: 50% 100%; scale: 1 0; /* display: none; */ min-width: 200px; background-color: var(--clr01x, rgba(0,0,0,.85)); color: #fff; border: 0 solid #eee; padding: 9px; transition: .6s all .3s ease ; display: block; transform-origin: top; } nav > ul > li:hover > ul { transition: .6s all ease; scale: 1 1; } nav > ul > li > ul a { text-transform: initial; width: 100%; justify-content: flex-start; color: #fff !important } nav > ul > li > ul a.active, nav > ul > li > ul a:hover { color: var(--clr01) !important } nav > ul > li > ul li { width: 100%; justify-content: flex-start; } nav > ul > li > ul li ~ li { margin-top: 9px; } } @media (min-width: 767px) { /* nav > ul > li::after { content: ''; display: block; right: 0; top: 50%; translate: 0 -50%; height: 12px; width: 2px; background-color: #999; position: absolute; } nav > ul > li:last-child::after { display: none; } */ } .mobilenav .mediabx a { --bgclr: #000; --iconclr: #fff; --iconhovclr: #fff; } .mobilenav { position: fixed; height: 100vh; background-color: rgba(0 0 0 / 50%); z-index: 50; padding: 0 0 0 0; width: 100% !important; display: block; translate: -101% 0; opacity: 0; transition: .6s all .3s ease; } .mobilestickbx { position: fixed; top: 0; left: 0; padding: 17px 15px; width: 100% !important; background-color: var(--clr01x, #fff); z-index: 50; border-bottom: 1px solid #ccc; } .mobilestickbx img { max-height: 24px } .mobilenav nav a { flex: 0 0 100%; width: 100%; justify-content: flex-start; color: inherit; text-decoration: none; padding: 6px 0; font-size: 120%; } .mobilenav.active { translate: 0 0; opacity: 1; transition: .3s all ease; } .mobilenavw { transition: .3s all cubic-bezier(0.075, 0.82, 0.165, 1); height: 100vh; background-color: #fff; width: calc(100% - 90px) !important; display: block; overflow: hidden; overflow-y: auto; translate: -101% 0; opacity: 0; max-width: 400px; } .mobilenav.active .mobilenavw { transition: .9s all .3s cubic-bezier(0.075, 0.82, 0.165, 1); translate: 0 0; opacity: 1; } .mobilenav nav{ padding: 90px 24px 15px; } .mobilenav .infobx { padding: 0 24px 60px; } .mobilenav .infow { border-top: 1px solid #ccc; padding: 15px 0; } .mobilenav nav :is(ul, li) { margin: 0 } .mobilenav nav > ul > li { flex: 0 0 100%; } .mobilenav nav a { flex: 0 0 100%; width: 100%; justify-content: flex-start; color: inherit; text-decoration: none; } .mobilenav .mediabx .unit { margin: 3px 3px 3px 0 } /* ===================== */ .menuburger { --square: 35px; --height: 3px; --top: 9px; --vpadding: 12px; --bgclr: var(--clr02, #fff); --radius: 5px; position: fixed; width: var(--square)!important; height: var(--square); top: var(--vpadding); left: calc(var(--vpadding) + -6px); transition-duration: 0.5s; display: flex; justify-content: center; align-items: center; z-index: 55; scale: 0.7; } .menuburger.open { --bgclr: var(--clr01); } .menuburger .icon { transition-duration: 0.5s; position: relative; height: var(--height); width: var(--square); top: 0; background-color: var(--bgclr); border-radius: var(--radius) } .menuburger .icon:before { transition-duration: 0.5s; position: absolute; width: var(--square); height: var(--height); background-color: var(--bgclr); content: ""; top: calc(-1 * var(--top)); border-radius: var(--radius) } .menuburger .icon:after { transition-duration: 0.5s; position: absolute; width: calc(var(--square) / 2); height: var(--height); background-color: var(--bgclr); content: ""; top: var(--top); border-radius: var(--radius) } .menuburger.open .icon { transition-duration: 0.5s; transform: rotateZ(180deg); } .menuburger.open .icon:before { transform: rotateZ(45deg) scaleX(0.75) translate(var(--top), -6px); } .menuburger.open .icon:after { width: var(--square); transform: rotateZ(-45deg) scaleX(0.75) translate(var(--top), 6px); } .mobilestickbxp, .dekstickbx { width: 100% !important; } .dekstickbx { padding: 9px 0; position: fixed; left: 0; top: 0; z-index: 10; background-color: #fff; border-bottom: 1px solid #eee; transition: 2s all cubic-bezier(0.075, 0.82, 0.165, 1); translate: 0 -101%; } body.scrolled .dekstickbx { translate: 0 0; } .dekstickbx .logo img { max-height: 45px; } @media (max-width: 767px) { .dekstickbx, [mn="8003"] { display: none; } } @media (min-width: 767px) { .menuburger, .mobilestickbxp, .mobilestickbx, .mobilenav { display: none !important; } } .langbx { font-family: var(--ft-t1); margin: 0 0 0 15px; } .langbx > * ~ * { margin: 0 0 0 3px; } .dekstopnav .langbx > * ~ * { margin: 0 0 0 6px; padding: 0 0 0 6px; border-left: 2px solid var(--secftclr); } .langbx a { text-decoration: none; } .mobilenav .langbx { margin: 6px 0 0 0; } .mobilenav .langbx a { padding: 6px; display: block; color: #fff; background-color: #000; } nav i { margin: 0 0 0 3px; } .top{ padding: 6px 0; background-color: var(--clr01); z-index: 15; }[mn="8206"] { margin-top: auto; font-size: 90%; padding-bottom: 0; border-top: 3px solid var(--clr01); .containerw{ padding-bottom: var(--secpt); } .foot_logo_2 { display: none; } .contact { --div: 17px; .l { flex: 0 0 var(--div); max-width: var(--div); padding: 3px 0 0; text-align: center; .bg-mask{ background-color: var(--clr01); } .bimgw{ width: 25px; } } .r { flex: 0 0 calc(100% - var(--div)); max-width: calc(100% - var(--div)); padding-left: 0px; /* white-space: nowrap; */ } .l, .r{ flex: 0 0 100%; max-width: 100%; } & img { max-height: 21px; max-width: 21px; } /* @media(width<767px){ .l, .r { flex: 0 0 100%; max-width: 100%; padding: 0 !important; } } */ } .contactbx{ @media(width>991px){ justify-content: flex-end; } /* @media(width<=767px){ justify-content: center; } */ } .foot_logo{ margin: 0 0 21px; } .sitemap :is(ul) { list-style-type: none; list-style: none; margin: 0; padding: 0; line-height: 1.1; } .sitemap li~li { margin: 12px 0 0 } ._imgobj { margin: 0 0 3px } a { color: inherit; text-decoration: none; } .mediabx { --gap: 6px; --square: 35px; --iconclr: var(--clr01x, #fff); --iconhovclr: var(--clr01x, #fff); --bgclr: var(--clr01, transparent); --bghovclr: var(--clr02, #fff); --mediaborder: 2px solid transparent; --mediahovborder: 2px solid var(--clr02, #fff); margin: 0; & a { padding: 6px; border-radius: 50%; } } .ttl { font-size: 110%; line-height: 1; margin: 0 0 12px; font-family: var(--ft-t1); & ~ * { font-size: 90%; } &::after { /* content: ''; */ display: block; height: 3px; width: 45px; background-color: var(--secftclr); margin: 9px 0 0; } } .copyright { padding: 30px 0; color: #fff; text-align: center; background-color: var(--clr01); } &::after { /* content: ''; */ display: block; height: 2px; position: absolute; width: 100%; background-color: #ccc; top: 0; left: 0; } a { text-underline-offset: 3px; } a:hover { text-decoration: underline; } @media (max-width: 991px) { .empty { display: none; } } @media (max-width: 767px) { .copyright .container>.f { justify-content: center; text-align: left; } .copyright .container>.f>* { flex: 0 0 100%; max-width: 100%; } } } /* =========================================== */ /* =========================================== */ [mn="1000"]{ --ttlClru_default: var(--secttlclr); &.btn_full{ .taste .btn{ width: 100%; border-radius: 50px; } } ._ittl{ .h4{ color: var(--ttlClru_default); } } ._subttl { text-align: var(--ttlalign); } .txtbx~.txtbx { margin-top: 30px; } ._content { margin: 0; } ._imgobj { text-align: center; margin: 15px 0; } .taste { margin: 15px 0; display: flex; flex-wrap: wrap; gap: 15px; justify-content: var(--secalign); } .ttlbx { margin: 0 0 45px; border-left: 9px solid var(--clr01); padding-left: 21px; text-align: left; font-family: var(--ft-t1); .h4 { text-align: inherit; } } } [mn="2000"]{ min-height: 350px; z-index: 1; --secttlmarg_default: 0; /* --ttlsize: 260%; */ ._subttl{ font-size: 180%; } &:has(._content){ .ttldecor-btm{ &::after{ content: ''; width: 120px; max-width: 100%; height: 3px; margin: 9px 0; background-color: #fff; display: inline-block; } } } .container{ /* filter: drop-shadow(2px 4px 3px rgba(0,0,0,.75)); */ } .tst-w > * { width: 100% } .main { padding: 60px 15px; } .content { font-size: 150% } h4 { &::before{ display: none; } } .bg-lay { background-position: top center } .bg-lay, .bg-layer { position: absolute; left: 0; top: 0; height: 100%; width: 100%; z-index: -2 } .bg-layer { z-index: -1; background-size: auto; background-repeat: repeat; display: none; } .subttl { font-size: var(--font-xl); } @media (max-width: 1000px) { .ttl { font-size: var(--font-xxl) } } @media (max-width: 767px) { min-height: auto; .main { padding: 0 15px; } } } [mn="7025"] { background-attachment: fixed; --itmdiv: 3 } [mn="7025"] .itms { margin: 0 -9px; padding-top: 10px } [mn="7025"] .itm { flex: 0 0 calc(100% / var(--itmdiv)); max-width: calc(100% / var(--itmdiv)); padding: 9px 9px 30px; text-align: center } [mn="7025"] .itm>div { height: 100%; } [mn="7025"] .txt .smr { font-size: 80%; display: block; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; margin: 0 0 15px; } [mn="7025"] .infobx { line-height: 1.1; margin: 0; padding: 9px 0; transition: all ease-in-out .4s; width: 100%; flex: 1 0 0; position: absolute; z-index: 1; top: 50%; translate: 0 -50%; color: #fff; } [mn="7025"] ._subttl { margin: 6px 0 0; } [mn="7025"] .ttl { font-size: 150%; margin: 0 0 6px; color: inherit; font-family: var(--ft-t1); } [mn="7025"] .bimgbx { z-index: 1; line-height: 0; .bimgw{ border-radius: 15px; } } [mn="7025"] .bimg { padding-top: 72%; transition: all ease-in-out .4s; transform: scale(1) } [mn="7025"] .bimg:after { position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: -1; background-color: rgba(0,0,0,.35); mix-blend-mode: multiply; opacity: 1; transition: .4s all ease; display: block; content: ''; } [mn="7025"] .itm.mitgal>*:hover .bimg { transform: scale(1.05); } [mn="7025"] div.add { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); max-width: 90%; opacity: 0; transition: all ease-in-out .4s; z-index: 3; color: #fff } [mn="7025"] .itm>* { cursor: pointer; &:hover{ .bimg{ scale: 1.15; } } } [mn="7025"] .itm.mitgal>*:hover div.add { opacity: 1; } [mn="7025"] .itm>*>* { flex-direction: column } [mn="7025"] .date { font-size: 80%; } [mn="7025"] .bimg-w { background-color: #000; } @media screen and (max-width: 767px) { [mn="7025"] { --itmdiv: 2; } } @media screen and (max-width: 575px) { [mn="7025"] { --itmdiv: 1; } } .licht_7025{ .categorylistbx{ --listset-count: 3; @media(width<=575px){ --listset-count: 2; } } .h4{ text-align: center; } }[mn="5112"] { margin-top: auto; } [mn="5112"] .main { max-width: 900px; } [mn="5112"] .sitemap :is(ul) { list-style-type: none; list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; line-height: 1; justify-content: center; } [mn="5112"] .sitemap li { padding: 0 9px; border-right: 2px solid #fff; } [mn="5112"] .sitemap li:last-child{ border: 0; } [mn="5112"] a { color: inherit; text-decoration: none; } [mn="5112"] .info- { padding: 9px 15px; } [mn="5112"] .mediabx { margin: 15px 0 } [mn="5112"] .mediabx > * { justify-content: center; } [mn="5112"] .mediabx a { padding: 9px; --iconclr: #fff; --iconhovclr: #fff; --bgclr: var(--clr02x,transparent); --bghovclr: var(--clr01,#fff); --square: 45px; margin: 3px 6px; border-radius: 50%; border: 2px solid #fff } [mn="5112"] .mediabx a:hover { border: 2px solid var(--clr01) } [mn="5112"] ._content { margin: 0; } [mn="5112"] .iconbx { --div: 60px; } [mn="5112"] .ttl { font-size: 130%; line-height: 1; margin: 0 0 8px; font-family: var(--ft-t2); } [mn="5112"] .infoblock { width: 550px; max-width: 100%; } [mn="5112"] .infoblock .item ~ .item { margin: 15px 0 } [mn="5112"] .secInfo ~ .secInfo { margin: 45px 0 0 } [mn="5112"] .formbx { padding: 35px 30px; color: #fff; background-color: var(--clr01); border: 6px solid var(--clr01) } [mn="5112"] .formbx .formsecttl{ margin: 0 0 30px; } /* [mn="5112"] .aft:after { left: -21px; background-color: var(--clr01); height: calc(100% + 45px); top: 50%; translate: 0 -50%; } */ @media (max-width: 991px) { [mn="5112"] .empty { display: none; } } @media (max-width: 767px) { [mn="5112"] .iconbx .icon- { flex: 0 0 100% !important; max-width: 100% !important; text-align: center; } } @media (min-width: 767px) { [mn="5112"] .imagelink { text-align: right } } [mn="3036"] { --secftclr: #fff; --secttlclr: #fff; --ttlsize: 200%; color: #fff; .main::after { content: ''; width: 50%; height: calc(100% + 60px); position: absolute; left: 0; top: 50%; translate: -30px -50%; background-color: var(--clr01); z-index: -1; clip-path: polygon(0 0, 100% 0, calc(100% - 100px) 100%, 0% 100%); } .infobx { padding: 15px } .bimgbx { line-height: inherit; } .bimgw { width: 100vw; line-height: inherit; } .bimg { --bpt: 0%; aspect-ratio: 1373 / 565; z-index: 1; position: relative; } .formbx { padding: 30px 45px; @media(width>991px){ padding: 30px 60px } } .swiper{ /* overflow: visible; */ } .swiper-slide:has(._content){ .formbx:after { content: ''; position: absolute; height: calc(100% + 100px); width: 100%; background-image: linear-gradient(0deg,rgba(0, 0, 0, 0.84) 15%, rgba(0, 0, 0, 0) 100%);; bottom: 0; right: 0; z-index: -1; } } .swiper-button-next, .swiper-button-prev { --square: 25px; aspect-ratio: 1 / 1 !important; background-color: var(--clr01); width: var(--square); height: var(--square); height: auto; border-radius: 50%; z-index: 2; } .swiper-button-next:after, .swiper-button-prev:after { color: #fff; font-size: 15px; } /* .swiper-button-next, .swiper-button-prev { aspect-ratio: 1 / 1 !important; background-color: var(--clr01); width: 30px; height: auto; border-radius: 0%; } .swiper-pagination-bullet { background-color: var(--clr01x, #fff); } .swiper-pagination-bullet-active { background-color: var(--clr01); } */ .btn { min-width: auto; padding: 9px 15px; border: 2px solid #fff; background-color: transparent; border-radius: 50px; &:hover{ background-color: #fff; color: var(--clr01); } } @media only screen and (max-width: 767px) { .swiper-button-next, .swiper-button-prev { width: 21px; padding: 6px; &::after{ font-size: 9px; } } } @media only screen and (max-width: 575px) { .bimg { aspect-ratio: 1373 / 565; } } @media only screen and (min-width: 767px) { .bimg:after { background: linear-gradient(132deg,rgba(35, 152, 210, 0.76) 0%, rgba(0, 66, 99, 1) 100%); } } /* .bar-h{ display: inline-block; height: 2px; width: 30px; background-color: var(--clr01); vertical-align: middle; margin: 0 6px; } */ .swiper-slide{ --transition: .9s all .9s ease; ._subttl, ._ittl{ transition: var(--transition); opacity: 0; translate: 0 -100px; } ._subttl{ transition: .9s all 1.3s ease; } ._content{ transition: var(--transition); opacity: 0; translate: 100px 0; } ._link{ transition: var(--transition); opacity: 0; } &.swiper-slide-active{ ._subttl, ._ittl, ._content, ._link { opacity: 1 !important; translate: 0 0 !important; } } } .swiper-pagination-bullet { width: auto; height: auto; padding: 3px 0; margin: 3px 6px !important; background-color: transparent; color: #fff; font-family: var(--ft-t1); border-bottom: 3px solid transparent; border-radius: 0; opacity: 1; line-height: 1; text-align: center; font-weight: bold; } .swiper-pagination{ text-align: right; padding: 9px 15px; @media(width>767px){ padding: 9px 60px; } } .swiper-pagination-bullet { opacity: .5; } .swiper-pagination-bullet-active { opacity: 1; font-size: 130%; } } [mn="1037"]{ .main{ /* max-width: 1000px; */ } } [mn="7023"] { background-attachment: fixed; --itmdiv: 4 } [mn="7023"] .itms { margin: 0 -9px; padding-top: 10px; text-align: center; } [mn="7023"] .itm { flex: 0 0 calc(100% / var(--itmdiv)); max-width: calc(100% / var(--itmdiv)); padding: 9px 9px 30px; } [mn="7023"] .itm>div { height: 100%; } [mn="7023"] .txt .smr { font-size: 80%; display: block; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; margin: 0 0 15px; } [mn="7023"] .infobx { line-height: 1.1; padding: 12px 0; transition: all ease-in-out .4s; width: 100%; flex: 1 0 0; font-family: var(--ft-t1); } [mn="7023"] ._subttl { margin: 6px 0 0; font-size: 75%; } [mn="7023"] .ttl { font-family: var(--ft-t1); font-size: 120%; margin: 6px 0 0; color: #000; } [mn="7023"] .bimgbx{ line-height: 0; .bimgw{ border-radius: 15px; } .bimg { padding-top: 100%; transition: all ease-in-out .4s; transform: scale(1) } } [mn="7023"] .itm>*:hover .bimg:after { opacity: .5; } [mn="7023"] .itm>*:hover .bimg { transform: scale(1.15); } [mn="7023"] div.add { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); max-width: 25%; width: 90px; aspect-ratio: 1 / 1; opacity: 0; transition: all ease-in-out .4s; background-image: url(_src/add.png); z-index: 3; } [mn="7023"] .itm>* { cursor: pointer; border-bottom: 6px solid var(--clr01); } [mn="7023"] .itm>*:hover div.add { opacity: 1; } [mn="7023"] .itm>*>* { flex-direction: column } [mn="7023"] ._date { font-size: 80%; } @media screen and (max-width: 767px) { [mn="7023"] { --itmdiv: 2; } } @media screen and (max-width: 575px) { [mn="7023"] { --itmdiv: 1; } } .licht_7023{ .categorylistbx{ --listset-count: 3; @media(width<=575px){ --listset-count: 2; } } .h4{ text-align: center; } } [mn="7608"]{ min-height: 50svh; } [mn="7608"]:has(.level_detail) { .col-l{ @media(width>991px){ padding-right: 90px; } } .totalamountbx{ line-height: 1; margin-bottom: 21px; padding-bottom: 21px; border-bottom: 1px solid #ddd; font-size: 200%; font-family: var(--ft-t1); .total{ } .title{ margin: 0; font-size: 50%; } } .item_desc .colorbx{ --gap: 9px; .colorw{ gap: var(--gap) } .color-{ aspect-ratio: 1; width: 30px; border-radius: 50%; cursor: pointer; border: 3px solid transparent; &.active{ border: 3px solid #000; } } } .item_desc{ & > * { margin-bottom: 21px; padding-bottom: 21px; } } .planbx{ --gap: 6px; .planw{ gap: var(--gap); } .plan-{ flex: 0 0 100%; max-width: 100%; padding: 15px 21px; border-radius: 15px; background-color: #fff; border: 2px solid #ccc; cursor: pointer; font-family: var(--ft-t1); } .plan-:hover, .plan-.active{ background-color: #000; border: 2px solid #000; color: #fff; } } .mainimgbx{ .bimgw{ padding: 15px; border: 1px solid #eee; margin: 0 0 21px; @media(width<=991px){ width: 450px; } } } .related_product{ margin: 30px 0 0; padding: 30px 0 0; border-top: 1px solid #ccc; ._relatedList{ .categorylistbx { --listset-count: 4; --listset-gap: 21px; padding: 21px 0; @media(width<767px){ --listset-count: 2; } .categorybx{ overflow: clip; border-radius: 21px; border: 1px solid #eee; background-color: #fff; padding: 21px; } } .taste{ text-align: right; margin: 15px 0; padding: 9px 0; border-bottom: 1px solid #ddd; border-top: 1px solid #ddd; .btn{ min-width: unset; } } .infobx { margin: 9px 0 0; line-height: 1.3; text-align: center; .titlebx{ margin-bottom: 0; padding-bottom: 0; border: 3px solid var(--clr01); border-radius: 6px; padding: 9px; .title { font-size: 80%; color: #1f3870; letter-spacing: 1px; margin: 0; } .sku{ font-size: 80%; } } .btnbx{ margin: 6px 0 0; .btn{ font-size: 80%; padding: 12px; border-radius: 50px; } } } .blurb{ font-family: var(--ft-t1); line-height: 1.3; font-size: 80%; } .bimgw { .bimg { transition: .3s all ease; } } a:hover { .bimg { scale: .85; } } .colorbx{ --gap: 3px; .colorw{ gap: var(--gap) } .color-{ aspect-ratio: 1; width: 30px; border-radius: 50%; } } } } .galdisplayer{ .categorylistbx{ --listset-count: 3; } .bimgw{ border: 1px solid #ddd; padding: 12px; border-radius: 6px; } .bimg{ padding-top: 100%; scale: 1 !important; } .gal-:hover{ .bimgw{ border: 1px solid var(--clr01); } } } .prodtitlebx{ margin-bottom: 21px; padding-bottom: 21px; h1{ margin: 0; font-size: 170%; } } .galdisplayer .mySwiper { /* overflow: visible; */ width: 100%; .bimgw{ border: 0; } .gal-:hover{ .bimgw{ border: 0 } } .swiper-button-next, .swiper-button-prev { --swiper-navigation-sides-offset: -15px; aspect-ratio: 1 / 1 !important; background-color: var(--clr01); width: 40px; height: auto; border-radius: 50%; } .swiper-button-next:after, .swiper-button-prev:after { color: #fff; font-size: 15px; } .swiper-pagination-bullet-active { background-color: var(--clr01); } .swiper-pagination { position: relative; margin: 15px 0 0; } .swiper_cus_nav{ margin-top: 9px; } .categorybx{ overflow: clip; border-radius: 6px; border: 1px solid #eee; background-color: #fff; padding: 0; } } ._relatedList .mySwiper { overflow: visible; width: 100%; .swiper-button-next, .swiper-button-prev { --swiper-navigation-sides-offset: -15px; aspect-ratio: 1 / 1 !important; background-color: var(--clr01); width: 40px; height: auto; border-radius: 50%; } .swiper-button-next:after, .swiper-button-prev:after { color: #fff; font-size: 15px; } .swiper-pagination-bullet-active { background-color: var(--clr01); } .swiper-pagination { position: relative; margin: 15px 0 0; } .swiper_cus_nav{ margin-top: 60px; } .categorybx{ overflow: clip; border-radius: 21px; border: 1px solid #eee; background-color: #fff; padding: 21px; } } .testimonialbx{ &:not(:has(.mySwiper)){ display: none; } &:has( .mySwiper ){ padding-top: 60px; } .swiper { overflow: visible; } } .testimonialbx .mySwiper { @media (width <=575px) { overflow: visible; } .swiper-slide{ box-shadow: 3px 3px 9px rgba(0, 0, 0, .13); border-radius: 45px; overflow: clip; .bimgbx { display: flex; justify-content: center; align-items: flex-end; } ._imgobj { margin: 0 } } .swiper-pagination { position: relative; margin: 15px 0 0; } .swiper-button-next, .swiper-button-prev { aspect-ratio: 1 / 1 !important; /* background-color: var(--clr01); */ width: 40px; height: auto; border-radius: 50%; } .swiper-button-next:after, .swiper-button-prev:after { color: #fff; font-size: 15px; } .swiper-pagination-bullet-active { background-color: var(--clr01x, #fff); border: 2px solid var(--clr02); outline: 2px solid var(--clr02x, #fff); outline-offset: 1px; } .bg-decorbx { &.decor-1 { left: 0; bottom: 0; &>* { width: 210px; } } &.decor-2 { right: 0; bottom: 0; &>* { width: 210px; } } } .otherbx { padding: 15px 21px; ._content{ line-height: 1.3; margin: 0; } } .btm{ margin-top: auto; padding: 0 21px 21px; } .quotebx { gap: 3px; .quote { aspect-ratio: 224 / 36; width: 90px; background-image: url(_src/7608_star_rate.jpg); right: 15px; bottom: 15px; background-size: contain; background-repeat: no-repeat; display: inline; } } .profile_image { .bimgw { width: 100%; max-width: 100%; } .bimg{ aspect-ratio: 7 / 5; } } .title { flex: 1 0 0; line-height: 1.2; } .subtitle { font-style: italic; } .cardbx { background-color: #fff; border-radius: 21px; } .content { font-size: 90%; } } .iframebx:has(.iframew){ margin: 60px 0 0; gap: 21px; ._iframe{ border-radius: 15px; overflow: clip; } } } [mn="7608"]:has(.level_item) { .categorylistbx { --listset-count: 4; --listset-gap: 21px; padding: 21px 0; @media(width<=767px){ --listset-count: 2; } @media(width<=575px){ --listset-count: 1; } .categorybx{ overflow: clip; border-radius: 21px; border: 1px solid #eee; background-color: #fff; padding: 21px; } } .taste{ text-align: right; margin: 15px 0; padding: 9px 0; border-bottom: 1px solid #ddd; border-top: 1px solid #ddd; .btn{ min-width: unset; } } .infobx { margin: 9px 0 0; line-height: 1.3; text-align: center; .titlebx{ margin-bottom: 0; padding-bottom: 0; border: 3px solid var(--clr01); border-radius: 6px; padding: 9px; .title { font-size: 80%; color: #1f3870; letter-spacing: 1px; margin: 0; } .sku{ font-size: 80%; } } .btnbx{ margin: 6px 0 0; .btn{ font-size: 80%; padding: 12px; border-radius: 50px; } } } .blurb{ font-family: var(--ft-t1); line-height: 1.3; font-size: 80%; } .bimgw { .bimg { transition: .3s all ease; } } a:hover { .bimg { scale: .85; } } .colorbx{ --gap: 3px; .colorw{ gap: var(--gap) } .color-{ aspect-ratio: 1; width: 30px; border-radius: 50%; } } } [mn="7608"]:has(.level_category) { .categorylistbx { --listset-count: 2; --listset-gap: 21px; text-align: center; @media(width<=767px){ --listset-count: 2; } @media(width<=575px){ --listset-count: 2; } .categorybx{ border-bottom: 6px solid var(--clr01); } } .infobx { /* position: absolute; */ font-size: 120%; top: 0; left: 0; width: 100%; z-index: 10; padding: 15px 21px 21px; /* background-image: linear-gradient(0deg, rgba(255, 255, 255, 0) 13%, rgba(255, 255, 255, .9) 60%); */ } .bimgw { border-radius: 35px; .bimg { transition: .3s all ease; padding-top: 80%; } } .title { font-size: inherit; color: #1f3870; letter-spacing: 1px; } a:hover { .bimg { scale: 1.15; } } } [mn="7608"] .accordionbx { margin: 60px auto 0; max-width: 100%; width: 100%; & > h4 { margin: 0 0 30px !important; } .accordiontab { margin: 0 0 21px; gap: 0; position: relative; z-index: 1; &::after{ content: ''; display: block; position: absolute; width: 100%; height: 1px; background-color: #ccc; z-index: -1; left: 0; bottom: 0; } } .accordiontxtbx { /* padding: 21px; */ /* background-color: #efefef; */ /* border: 1px solid #ccc; */ min-height: 150px; padding-bottom: 21px; } & [tablist] { display: inline-flex; padding: 12px 15px; /* background-color: #999; */ border-bottom: 3px solid transparent; font-family: var(--ft-t2); cursor: pointer; line-height: 1; font-size: 120%; z-index: 1; &.active{ color: #fff; border-bottom: 3px solid var(--clr01); background-color: var(--clr01); border-radius: 15px 15px 0 0; } &:not(.active):hover{ color: var(--clr02); border-bottom: 3px solid var(--clr02); } } & table{ width: 100% !important; background-color: #fff; line-height: 1.4; & tbody > tr:first-child{ background-color: var(--clr01); font-family: var(--ft-t1); color: #fff; & > * { background-color: transparent; } } } } .licht_7608{ .titlebx{ margin: 0 0 30px; padding: 0 0 15px; border-bottom: 1px solid #ccc; h4{ margin: 0; } } .divbx{ line-height: 1.3; .divw{ gap: 21px 0; } @media(width<575px){ .div-l, .div-r{ flex: 0 0 100%; max-width: 100%; } } .infomain{ & > * ~ * { margin-top: 15px; } } .value{ font-size: 120%; } .title{ margin: 0; } } .formain{ border: 1px solid #ccc; margin-top: 30px; padding: 21px; border-radius: 21px; } .notice{ color: orangered; line-height: 1.1; font-size: 90%; } canvas{ max-width: 100% !important; &:not([height]){ display: none; } } } [mn="7608"] .detailbx .taste{ margin: 30px 0 0; display: flex; gap: 9px 12px; & > * { flex: 1 0 0; max-width: 100%; padding: 15px } a { .bimgw { width: 21px; } .bg-mask { --mkclr: #fff; transition: .4s all ease; } } .btn.btnWahtsapp { --btnclr: #fff; --btnclrhov: #fff; background-color: #27d367; border-color: #27d367; } .btn.btnWahtsapp:hover { background-color: #11b24c; border-color: #11b24c; } .btn.btnEnquire { background-color: var(--clr02x, #999); border: 2px solid var(--clr02x, #999); } .btn.btnEnquire:hover { background-color: var(--clr01, #999); border: 2px solid var(--clr01, #999); .bg-mask{ --mkclr: var(--btnclrhov); } } } [mn="7608"] .accordionbx_2{ --tabBgClr: var(--tabBgClr_default, transparent); --tabBgClrActive: var(--tabBgClrActive_default, transparent); --tabTxtClr: var(--tabTxtClr_default, var(--clr01x, #000)); --tabTxtClrActive: var(--tabTxtClrActive_default, var(--clr01)); margin: 30px 0; border-bottom: 1px solid #ccc; .title{ margin: 0; } .accordiontabbx{ width: 900px; max-width: 100%; margin: 0 auto; } .accordiontab{ border-top: 1px solid #ccc; position: relative; & ~ & { margin: 0; } & > * { padding: 15px 45px 15px 0; } & > .btm { padding-right: 15px; padding-top: 0px; } .slide { display: none; } .title{ --div: 25px; .ttl-{ &.ttl-l{ flex: 0 0 var(--div); max-width: var(--div); } &.ttl-r{ flex: 0 0 calc(100% - var(--div)); max-width: calc(100% - var(--div)); padding-left: 12px; } } } ._content{ margin: 0; } .top { line-height: 1; font-family: var(--ft-t1); cursor: pointer; background-color: var(--tabBgClr); color: var(--tabTxtClr); transition: .6s all ease; &::after { content: ''; aspect-ratio: 1 / 1; width: 21px; /* background-image: url(_src/arrow.svg); background-size: contain; background-position: center; background-repeat: no-repeat; */ -webkit-mask-image: url(_src/7608_arrow.svg); mask-image: url(_src/7608_arrow.svg); mask-size: contain; -webkit-mask-size: contain; mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat; mask-position: center; -webkit-mask-position: center; background-color: var(--tabTxtClr); position: absolute; right: 15px; top: 15px; rotate: 0deg; transform-origin: center; transition: .6s all ease; @media (max-width: 575px){ width: 18px; } } } &.active .top{ background-color: var(--tabBgClrActive); color: var(--tabTxtClrActive); &::after { rotate: 180deg; background-color: var(--tabTxtClrActive); pointer-events: none; } } } } [mn="4004"]{ .tabbx { overflow: hidden; overflow-x: auto; padding: 0 0 30px } .tabbxw { flex-wrap: nowrap; } .tab- { padding: 6px; flex: 0 0 33.333%; max-width: 33.333%; min-width: 200px; } .tab- > * { padding: 45px; box-shadow: 0px 2px 9px rgba(0,0,0,.2); font-family: var(--font-t1); color: var(--clr01); background-color: #fff; cursor: pointer; } .tab-.active > *, .tab- > *:hover { background-color: var(--clr01); color: #fff; } .tabw > i { position: absolute; left: 9px; top: 9px; font-size: 80%; } .DISP { padding: 20px 0 0; } } [mn="7205"]{ .main{ max-width: 1000px; } } [mn="7205"] .rowitm .bimg.objimg { padding-top: 100%; } [mn="7205"] .rowitm .bimgw { padding: 15px; background-color: #ebebeb } [mn="7205"] .rowitm ~ .rowitm { border: 0; } [mn="7205"] .rowitm { --div: 30%; & ~ & { margin-top: 6px; } .txt { flex: unset; padding-top: 3px; @media(width>991px){ width: 90%; margin: 0 0 0 auto; } } .ttl { font-family: var(--ft-t1); font-size: 133%; line-height: 1; } .l { flex: 0 0 var(--div); max-width: var(--div); text-align: center; } .r { flex: 0 0 calc(100% - var(--div)); max-width: calc(100% - var(--div)); flex-direction: row; } .taste { margin: 0; } ._imgobj{ img{ max-height: 120px; } @media(width > 767px){ padding-right: 21px; position: relative; z-index: 1; &::after{ content: ''; height: 120px; width: 3px; background-color: #ccc; position: absolute; right: 0; top: 50%; translate: 0 -50%; } } } } [mn="7205"] .tabbx { line-height: 1; margin: 0 0 60px; & * { position: relative; } } [mn="7205"] [tabid] { cursor: pointer; padding: 0 12px; margin: 6px 0; cursor: pointer; display: inline-flex; & ~ [tabid] { border-left: 1px solid #ccc; } } [mn="7205"] .taste:not(.backbtn) .btn { min-width: auto; padding: 0; color: var(--clr01); background-color: transparent; border: 0; } @media (max-width: 991px) { [mn="7205"] .tabbx { display: none; } } @media (max-width: 575px) { [mn="7205"] .rowitm .l, [mn="7205"] .rowitm .r { flex: 0 0 100%; max-width: 100%; } [mn="7205"] .rowitm .bimgm { max-width: 100%; } } [mn="7205"] .divlrw { margin: 0 -15px; .divlr- { --div: 300px; padding: 0 15px; } .divlr-.l, .divlr-.r { flex: 0 0 100%; max-width: 100% } } [mn="7205"] .catbx { padding: 15px 0; line-height: 1; .calttl { font-family: var(--ft-t1); font-size: 120%; margin: 0 0 6px; } & [tabid] { width: 100%; padding: 6px 0; display: inline-flex; justify-content: unset; align-items: center; } } [mn="7205"] .rowitm{ .bimgm:after { display: none; } & a:hover .bimg { transform: scale(1) } } [mn="3508"] { overflow: clip; .categorybx{ overflow: clip; border-radius: 21px; border: 1px solid #eee; background-color: #fff; padding: 21px; } .infobx { margin: 9px 0 0; line-height: 1.3; text-align: center; .titlebx{ margin-bottom: 0; padding-bottom: 0; border: 3px solid var(--clr01); border-radius: 6px; padding: 9px; .title { font-size: 80%; color: #1f3870; letter-spacing: 1px; margin: 0; } .sku{ font-size: 80%; } } .btnbx{ margin: 6px 0 0; .btn{ font-size: 80%; padding: 12px; border-radius: 50px; } } } .blurb{ font-family: var(--ft-t1); line-height: 1.3; font-size: 80%; } .bimgw { .bimg { transition: .3s all ease; } } a:hover { .bimg { scale: .85; } } .colorbx{ --gap: 3px; .colorw{ gap: var(--gap) } .color-{ aspect-ratio: 1; width: 30px; border-radius: 50%; } } .mySwiper { overflow: visible; width: 100%; .swiper-button-next, .swiper-button-prev { --swiper-navigation-sides-offset: -15px; aspect-ratio: 1 / 1 !important; background-color: var(--clr01); width: 40px; height: auto; border-radius: 50%; } .swiper-button-next:after, .swiper-button-prev:after { color: #fff; font-size: 15px; } .swiper-pagination-bullet-active { background-color: var(--clr01); } .swiper-pagination { position: relative; margin: 15px 0 0; } .swiper_cus_nav{ /* margin-top: 60px; */ } } }