.products_gif,
.gif{position:relative;width:100%;height:100%;overflow:hidden;transition:all 700ms ease-in-out;}

.products_gif img,
.gif video,
.gif img{height:100%;position:absolute;top:0;left:0;transition:all 700ms ease-in-out;}

.products_gif.opacity_0,
.gif.opacity_0{transition:all 700ms ease-in-out;}

.products_gif.opacity_0 img,
.gif.opacity_0 video,
.gif.opacity_0 img{filter:blur(10px);opacity:0;transition:all 700ms ease-in-out;}

.main_wrp{position:relative;}

.scroll_wrp{position:absolute;top:0px;left:0px;width:100%;z-index: 0;opacity:0;}
.scroll_wrp div{width:100%;opacity: .4;}
.scroll_wrp div:nth-child(1){height: 500vh;background:red;}
.scroll_wrp div:nth-child(2){height: 270vh;background:green;}
.scroll_wrp div:nth-child(3){height: 780vh;background:blue;}
.scroll_wrp div:nth-child(4){height: 410vh;background:yellow;}
.scroll_wrp div:nth-child(5){height: 10vh;background:white;}


.home-sec-01{/*height:400vh;*/overflow: hidden;background:var(--color-01);padding-bottom: 70vh;position:relative}
.home-sec-01 .hb_copy {color: var(--color-02);text-align: center;z-index: 9;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);}
.home-sec-01 .hb_copy h1{font-size:var(--rfs-54);}
.home-sec-01 .hb_copy div{opacity:1;}
.home-sec-01 .hb_copy p{font-size:var(--rfs-18);}

.hero_banner{background-size: cover;width: 100%;height: 100vh;display: flex;align-items: flex-end;justify-content: center;position:relative;}
.hero_banner .pixel_wrp{display: flex;justify-content: center;}
.hero_banner .pixel_wrp,
.hero_banner .pixel_wrp .pp_wrp{width: 70vh;height:60vh;position: relative;}

.hero_banner .pixel_wrp .pixel {width: 10vh;height: 10vh;background-size: 100% 100%;position:absolute;}
 
.hero_banner .pixel_wrp .pixel.p-01 {background-image: url('hero/01.webp');top: -104vh;left: -104vh;transform: scale(0.25);}
.hero_banner .pixel_wrp .pixel.p-02 {background-image: url('hero/02.webp');top: -56vh;left: -68vh;transform: scale(0.25);}
.hero_banner .pixel_wrp .pixel.p-03 {background-image: url('hero/03.webp');top: 17vh;left: -96vh;transform: scale(0.25);}
.hero_banner .pixel_wrp .pixel.p-04 {background-image: url('hero/04.webp');top: -276vh;left: -80vh;transform: scale(0.15);}
.hero_banner .pixel_wrp .pixel.p-05 {background-image: url('hero/05.webp');top: -140vh;left: -27vh;transform: scale(.05);}
.hero_banner .pixel_wrp .pixel.p-06 {background-image: url('hero/06.webp');top: -69vh;left: 103vh;transform: scale(0.1);}
.hero_banner .pixel_wrp .pixel.p-07 {background-image: url('hero/07.webp');top: -83vh;left: 153vh;transform: scale(0.1);}

.hero_banner .pixel_wrp .pixel.p-08 {background-image: url('hero/08.webp');top: -14vh;left: -256vh;transform: scale(0.25);}
.hero_banner .pixel_wrp .pixel.p-09 {background-image: url('hero/09.webp');top: 134vh;left: -110vh;transform: scale(0.05);}
.hero_banner .pixel_wrp .pixel.p-10 {background-image: url('hero/10.webp');top: -58vh;left: -28vh;transform: scale(0.25);}
.hero_banner .pixel_wrp .pixel.p-11 {background-image: url('hero/11.webp');top: -128vh;left: 28vh;transform: scale(0.25);}
.hero_banner .pixel_wrp .pixel.p-12 {background-image: url('hero/12.webp');top: -30vh;left: 110vh;transform: scale(0.25);}
.hero_banner .pixel_wrp .pixel.p-13 {background-image: url('hero/13.webp');top: -17vh;left: 184vh;transform: scale(0.3);} 
.hero_banner .pixel_wrp .pixel.p-14 {background-image: url('hero/14.webp');top: -131vh;left: 122vh;transform: scale(0.1);}

.hero_banner .pixel_wrp .pixel.p-15 {background-image: url('hero/15.webp');top: 60vh;left: -80vh;transform: scale(0.25);}
.hero_banner .pixel_wrp .pixel.p-16 {background-image: url('hero/16.webp');top: 92vh;left: -104vh;transform: scale(0.15);}
.hero_banner .pixel_wrp .pixel.p-17 {background-image: url('hero/17.webp');top: -38vh;left:-20vh;transform: scale(1.5);z-index: 11;}
.hero_banner .pixel_wrp .pixel.p-18 {background-image: url('hero/18.webp');top: 0vh;left: -48vh;}
.hero_banner .pixel_wrp .pixel.p-19 {background-image: url('hero/19.webp');top: -10vh;left: 95vh;transform: scale(0.3);}
.hero_banner .pixel_wrp .pixel.p-20 {background-image: url('hero/20.webp');top: -91vh;left: 264vh;transform: scale(0.1);}
.hero_banner .pixel_wrp .pixel.p-21 {background-image: url('hero/21.webp');top: 45vh;left: 163vh;transform: scale(0.55);}

.hero_banner .pixel_wrp .pixel.p-22 {background-image: url('hero/22.webp');top: 130vh;left: -100vh;transform: scale(0.25);}
.hero_banner .pixel_wrp .pixel.p-23 {background-image: url('hero/23.webp');top: 30vh;left: -70vh;transform: scale(0.25);}
.hero_banner .pixel_wrp .pixel.p-24 {background-image: url('hero/24.webp');top: 50vh;left: -52vh;transform: scale(0.75);}
.hero_banner .pixel_wrp .pixel.p-25 {background-image: url('hero/25.webp');top: -30.5vh;left: 61.5vh;transform: scale(1.65);}
.hero_banner .pixel_wrp .pixel.p-26 {background-image: url('hero/26.webp');top: -31vh;left: 113vh;}
.hero_banner .pixel_wrp .pixel.p-27 {background-image: url('hero/27.webp');top: 6vh;left: 123vh;transform: scale(0.25);}
.hero_banner .pixel_wrp .pixel.p-28 {background-image: url('hero/28.webp');top: 123vh;left: 219vh;transform: scale(0.15);}

.hero_banner .pixel_wrp .pixel.p-29 {background-image: url('hero/29.webp');top: 77vh;left: -66vh;transform: scale(0.15);}
.hero_banner .pixel_wrp .pixel.p-30 {background-image: url('hero/30.webp');top: 71vh;left: -16vh;transform: scale(0.25);}
.hero_banner .pixel_wrp .pixel.p-31 {background-image: url('hero/31.webp');top: -17vh;left: -65vh;transform: scale(2.2);}
.hero_banner .pixel_wrp .pixel.p-32 {background-image: url('hero/32.webp');top: 26vh;left: -34vh;}
.hero_banner .pixel_wrp .pixel.p-33 {background-image: url('hero/33.webp');top: 15vh;left: 126vh;}
.hero_banner .pixel_wrp .pixel.p-34 {background-image: url('hero/34.webp');top: 70vh;left: 100vh;transform: scale(0.15);}
.hero_banner .pixel_wrp .pixel.p-35 {background-image: url('hero/35.webp');top: 140vh;left: 213vh;transform: scale(0.15);}

.hero_banner .pixel_wrp .pixel.p-36 {background-image: url('hero/36.webp');top: 70vh;left: -55vh;transform: scale(0.10);}
.hero_banner .pixel_wrp .pixel.p-37 {background-image: url('hero/37.webp');top: 64vh;left: -50vh;transform: scale(0.15);}
.hero_banner .pixel_wrp .pixel.p-38 {background-image: url('hero/38.webp');top: 34vh;left: -20vh;transform: scale(0.15);}
.hero_banner .pixel_wrp .pixel.p-39 {background-image: url('hero/39.webp');top: 20vh;left: -6vh;transform: scale(1);}
.hero_banner .pixel_wrp .pixel.p-40 {background-image: url('hero/40.webp');top: 93vh;left: 41vh;transform: scale(0.1);}
.hero_banner .pixel_wrp .pixel.p-41 {background-image: url('hero/41.webp');top: 40vh;left: 80vh;transform: scale(0.15);}
.hero_banner .pixel_wrp .pixel.p-42 {background-image: url('hero/42.webp');top: 83vh;left: 129vh;transform: scale(0.1);}

.hero_banner .pixel_wrp .pixel.p-43 {background-image: url('hero/43.webp');top: -60vh;left: -55vh;transform: scale(0.10);}
.hero_banner .pixel_wrp .pixel.p-44 {background-image: url('hero/44.webp');top: -50vh;left: -150vh;transform: scale(0.15);}
.hero_banner .pixel_wrp .pixel.p-45 {background-image: url('hero/45.webp');top: -70vh;left:  120vh;transform: scale(0.15);}
.hero_banner .pixel_wrp .pixel.p-46 {background-image: url('hero/46.webp');top: -50vh;left: -56vh;transform: scale(1);}
.hero_banner .pixel_wrp .pixel.p-47 {background-image: url('hero/47.webp');top: -50vh;left: 141vh;transform: scale(0.1);}
.hero_banner .pixel_wrp .pixel.p-48 {background-image: url('hero/48.webp');top: -50vh;left: -80vh;transform: scale(0.15);}
.hero_banner .pixel_wrp .pixel.p-49 {background-image: url('hero/49.webp');top: -50vh;left: 129vh;transform: scale(0.1);}

.hero_banner .pixel_wrp .p_thumb{width: 33.65vh;height: 20vh;background-size: cover;background-position: top left;z-index: 12;position:absolute;}
.hero_banner .pixel_wrp .p_thumb.care {background-image: url('hero/thumb-care.webp');top: 29.95vh;left: 73.5vh;}
.hero_banner .pixel_wrp .p_thumb.eye  {background-image: url('hero/thumb-eye.webp');top: -8vh;left: 85vh;}
.hero_banner .pixel_wrp .p_thumb.lip  {background-image: url('hero/thumb-lip.webp');top: 23vh;left: -44vh;}
.hero_banner .pixel_wrp .p_thumb.skin {background-image: url('hero/thumb-skin.webp');top: -33vh;left: -16.7vh;transform: scale(.75);}
 
.hero_banner .pixel_wrp .p_thumb .pt_data {color: var(--color-02);text-align: left;padding: 20px 0px 70px 0px;position: absolute;top:100%;left: 0%;visibility:hidden;}
.hero_banner .pixel_wrp .p_thumb .pt_data h3{margin-bottom:20px}
.hero_banner .pixel_wrp .p_thumb .pt_data p{max-width: 330px;}
.hero_banner .pixel_wrp .p_thumb .pt_data .btn_km{position: absolute;left: 0px;bottom: 0;}

.home-sec-02{}
.home-sec-02 .horizontal-section {position: relative;height: 100vh;overflow: hidden;}
.home-sec-02 .horizontal-section .horiz-wrapper {display: flex;height: 100%;}
.home-sec-02 .horizontal-section .horiz-wrapper .panel {height: 100vh;display: flex;/* align-items: center; */justify-content: flex-start;}

.home-sec-02 .horizontal-section .horiz-wrapper .box_content{color: var(--color-02);width: 100%;max-width: 460px;padding: 30px 30px 20px 30px;background: linear-gradient(135deg, #ffffffb5 20%, #00000017 100%);backdrop-filter: blur(10px);position: relative;left: 2px;}
.home-sec-02 .horizontal-section .horiz-wrapper .box_content h3{font-size: var(--rfs-30);font-weight: 600;line-height: 1.2;margin-bottom: 20px;}
.home-sec-02 .horizontal-section .horiz-wrapper .box_content p{font-size: var(--rfs-18);margin-bottom: 30px;}

.home-sec-02 .horizontal-section .horiz-wrapper .box_heading{padding: 40px 40px 20px 60px;max-width: 550px;}
.home-sec-02 .horizontal-section .horiz-wrapper .box_heading h2{font-size: var(--rfs-54);line-height: 1.2;}
.home-sec-02 .horizontal-section .horiz-wrapper .box_heading h3{font-size: var(--rfs-36);line-height: 1.2;margin-bottom: 20px;}

.panel:nth-child(1) {background-color: transparent !important;min-width:100vw;align-items: flex-start;padding-top: 10vh;padding-left: 2vh;}
.panel:nth-child(2) {min-width: 50vw;align-items: flex-end;padding-bottom: 10vh;}
.panel:nth-child(3) {min-width: 50vw;align-items: center;}
.panel:nth-child(4) {min-width: 50vw;align-items: end;padding-bottom: 13vh;}
.panel:nth-child(5) {min-width: 50vw;align-items: center;}
.panel:nth-child(6) {min-width: 50vw;align-items: end;padding-bottom: 10vh;}
.panel:nth-child(7) {min-width: 50vw;align-items: center;padding-bottom: 2vh;}
.panel:nth-child(8) {min-width: 50vw;justify-content: center !important;align-items: center;}

video.circle-animation{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:100vh;border-radius:1000px;}


.hs_bg{position: fixed;top: 0px;left: 0px;width:400vw;height: 100vh;/* background-image: url(circles/circle_01.webp); */background-position: center center;background-repeat: no-repeat;background-size: 40vw;background-attachment: fixed;}
.hs_bg .hb_wrp{display: flex;height: 100%;position: relative;}
.hs_bg .hb_wrp .panel {background: #ffffff;height: 100vh;background-position: center center;background-repeat: no-repeat;background-size: 40vw;background-attachment: fixed;border-left: 1px solid #000000;position: relative;}

/* Panel backgrounds */
.hs_bg .hb_wrp .panel:nth-child(1) {/* background-image: url('circles/circle_01.webp'); */}
.hs_bg .hb_wrp .panel:nth-child(2) { background-image: url('circles/circle_02.webp'); }
.hs_bg .hb_wrp .panel:nth-child(3) { background-image: url('circles/circle_03.webp'); }
.hs_bg .hb_wrp .panel:nth-child(4) { background-image: url('circles/circle_04.webp'); }
.hs_bg .hb_wrp .panel:nth-child(5) { background-image: url('circles/circle_05.webp'); }
/*.hs_bg .hb_wrp .panel:nth-child(6) { background-image: url('circles/circle_06.webp'); }
.hs_bg .hb_wrp .panel:nth-child(7) { background-image: url('circles/circle_07.webp'); }*/
.hs_bg .hb_wrp .panel:nth-child(6) {background: #c5212af5;backdrop-filter: blur(5px);border-left: none;}
.hb_wrp video {position: absolute;top: 50%;left: 50%;width:100vh;transform: translate(-50%, -50%);}

section.home-sec-ztm{/* background:var(--color-01); */background: linear-gradient(180deg, #FFF 0%, #E2E2E2 100%);padding-bottom:60px;}
section.home-sec-ztm .ztm_big_scale{padding-bottom: 20vh;height:100vh;display:flex;align-items:flex-end;justify-content:center;overflow:hidden;}
section.home-sec-ztm .ztm_big_scale h2{color:var(--color-11);font-size:var(--rfs-54);font-weight:900;margin-bottom: 0px;}

section.home-sec-ztm .ztm_heading{text-align: center;padding: 30px 60px 60px 60px;}
section.home-sec-ztm .ztm_heading .ztm_logo{padding:30px 0px;border-top:1px solid var(--color-05);border-bottom:1px solid var(--color-05);margin-bottom: 70px;}
section.home-sec-ztm .ztm_heading h2{font-size:var(--rfs-54);}

section.home-sec-ztm .ztm_content{padding-bottom: 60px;}

ul.ztm_list{margin: 0px 0px 0px 0px;padding: 0px;list-style-type: none;gap: 2.5%;display: flex;justify-content: space-between;}
ul.ztm_list li{background: var(--color-01);min-height: 400px;width: 100%;position: relative;}
ul.ztm_list li:after{content:"";position:absolute;bottom:0;left:0;background: var(--color-11);width: 100%;height:0%;z-index: 1;transition: all 400ms ease-in-out;}
ul.ztm_list li a{color: var(--color-02);text-decoration: none;padding: 30px;height: 100%;display: flex;flex-direction: column;justify-content: space-between;position: relative;z-index: 5;transition: all 500ms ease-in-out;}
ul.ztm_list li a:before{content:"";position:absolute;bottom: -40px;left: -20px;background: url("ztm/hover_boxes.png") no-repeat bottom left;width: 0%;height: 0%;z-index: 1;transition: all 300ms ease-in-out;}
ul.ztm_list li a:after{content:"";position:absolute;bottom:0;left:0;background: url("../templates/img/arrow-big-white.png") no-repeat left bottom;background-size: cover;width: 10vh;height: 10vh;z-index: 1;transform-origin: left bottom;transform: scale(0);transition: all 400ms ease-in-out;}
ul.ztm_list li a h3{font-size: var(--rfs-24);font-weight: 600;line-height: 1.3;}
ul.ztm_list li a p{}

ul.ztm_list li:hover{}
ul.ztm_list li:hover:after{height:100%;transition: all 400ms ease-in-out;}
ul.ztm_list li:hover a{color:var(--color-01);padding-bottom: 60%;transition:all 300ms ease-in-out;}
ul.ztm_list li:hover a:before{width: 100%;height:50%;transition: all 400ms ease-in-out;}
ul.ztm_list li:hover a:after{transform:scale(1);left: 30px;bottom: 40px;transition:all 400ms ease-in-out;}
ul.ztm_list li:hover a h3{}
ul.ztm_list li:hover a p{}

@media (max-width:768px){
	ul.ztm_list li p {font-size: 12px;}
	ul.ztm_list li a {padding:20px;}
	ul.ztm_list li {min-height: 250px;}
}
@media (max-width:576px){
	section.home-sec-ztm .ztm_big_scale h2 { font-size: 1rem;}
	ul.ztm_list {flex-direction: column;}
	ul.ztm_list li {min-height: auto;}
	ul.ztm_list li a {flex-direction: row; justify-content:space-between; gap:30px;}

}

@media (max-width:480px){
	section.home-sec-ztm .ztm_big_scale h2 {font-size: 0.6rem;}
}