/*
body {margin: 0;padding: 0;overflow: hidden;background: #333333;}
.container {width: 100vw;height: 100vh;}
.content {display: flex;width: 700%; height: 100%;}
.box {font-size: 0px;width: 100vw;height: 100vh;background-color: lightblue;display: flex;justify-content: center;align-items: center; background-size: 100% 100% !important; }
*/


.btn-scrollTop span.txt:before{content:"left";}

.font-roboto{font-family:'roboto';}
h2 {}

body,
html {margin: 0;padding: 0;overflow-x: hidden;}

.vertical-scroll {pointer-events: none;position: absolute;top: 0px;left: 0px;z-index: 99;}
.vertical-scroll .vs-sec {width: 100vw;height: 100vw;display: flex;background-size: 100% 100% !important;/*border-bottom:1px solid red;*/}
.vertical-scroll .vs-sec:nth-child(1){height:100vh;}

.horizontal-scroll {display: flex;justify-content: flex-start;align-items: center;height: 100vh;width: 700vw;}
.horizontal-scroll .box {width: 100vw;height: 100vh;display: flex;background-size: 100% 100% !important;position: relative;}
.horizontal-scroll .box .sb-100vh{width:100%;height:100vh;display:flex;position: relative;}

.horizontal-scroll .box.b-00 .sb-100vh{width:100vw;display: flex;align-items: center;justify-content: center;}
.b-00 .banner-txt .emc2.e_c span.text {height: 60px;display: flex;align-items: flex-start;justify-content: flex-start;flex-direction: column;}
.b-00 .banner-txt .emc2.e_c span.text {}

.b-00{justify-content: center;align-items: center;z-index: 9;}
.b-00 .banner-txt{display: inline-block;position: relative;}
.b-00 .banner-txt h1{font-size: calc(24px + 4vh + 3vw);font-weight: 600;position: relative;z-index: 9;}
.b-00 .banner-txt h1 span{background-clip: text !important;-webkit-background-clip: text !important;-webkit-text-fill-color: transparent !important;}
.b-00 .banner-txt h1 span:nth-child(1){background: linear-gradient(270deg, #F08900 -18.41%, #14897D 116.34%);}
.b-00 .banner-txt h1 span:nth-child(2){background: linear-gradient(90deg, #14897D -44.3%, #F68D1E 152.33%);}
.b-00 .banner-txt h1 span:nth-child(3){background: linear-gradient(90deg, #14897D -57.94%, #F68D1E 62.16%);}
.b-00 .banner-txt h1 sup{font-size:30%;top: calc(28px - 6vh - 3vw);}
.b-00 .banner-txt .emc2{font-size: 21px;position: absolute;}
.b-00 .banner-txt .emc2 .text{font-size: 18px;display: inline-block;}
.b-00 .banner-txt .emc2 .dots_line{position: absolute;}
.b-00 .banner-txt .emc2 .dots_line:before{content:"";width:10px;height:10px;background: var(--color-02);border-radius: 100px;position:absolute;}
.b-00 .banner-txt .emc2 .dots_line:after{content:"";background: var(--color-02);position:absolute;}

.b-00 .banner-txt .emc2.e_e{top: 16%;left: -280px;width: 100%;}
.b-00 .banner-txt .emc2.e_e .dots_line{top: 10px;margin-left: 10px;}
.b-00 .banner-txt .emc2.e_e .dots_line:before{}
.b-00 .banner-txt .emc2.e_e .dots_line:after{top: 4px;width: 177px;height: 1px;}

.b-00 .banner-txt .emc2.e_m{bottom: -162px;right: -51%;width: 100%;} 
.b-00 .banner-txt .emc2.e_m .dots_line{left: 0px;top: -10px;}
.b-00 .banner-txt .emc2.e_m .dots_line:before{}
.b-00 .banner-txt .emc2.e_m .dots_line:after{bottom: 0px;left: 4px;width: 1px;height: 156px;}

.b-00 .banner-txt .emc2.e_c{top: -165px;left: 82%;width: 100%;}
.b-00 .banner-txt .emc2.e_c .dots_line{top: 65px;left: 0;}
.b-00 .banner-txt .emc2.e_c .dots_line:before{}
.b-00 .banner-txt .emc2.e_c .dots_line:after{left: 4px;width: 1px;height: 157px;}


.b-00 .banner-txt svg#lines_green  {width: 52vw;height: auto;position: absolute;top: 84%;right: 92%;transform: translateY(-50%);}
.b-00 .banner-txt svg#lines_orange {width: 52vw;height: auto;position: absolute;top: -90%;left: 85%;transform: translateY(1%);}



.hs-data{padding: 30px 0px;gap: 50px;display: flex;flex-direction: column;}
.hs-data h2.font-gradient-01{background: linear-gradient(90deg, #ffffff 0%, #14897D 0%, #F08900 71.26%);background-clip: text;-webkit-background-clip: text;-webkit-text-fill-color: transparent;font-size: 40px;font-weight: 600;margin-bottom: 0px;}
.hs-data h2.font-gradient-02{background: linear-gradient(90deg, #333333 0%, #ffffff 0%, #F08900 71.26%);background-clip: text;-webkit-background-clip: text;-webkit-text-fill-color: transparent;font-size: 48px;font-weight: 600;margin-bottom: 0px;}
.hs-data .seprator{position: relative;}
.hs-data .seprator:before{content:"";width:10px;height:10px;background: var(--color-11);border-radius: 100px;position:absolute;left: 20%;}
.hs-data .seprator:after{content:"";background: var(--color-11);width: 100%;max-width:700px;height: 1px;position:absolute;top: 4px;right: 80%;}
.hs-data p{font-size: 18px;margin-left: 20%;max-width: 640px;}

.image-01-bg{display:inline-block;overflow:hidden;border-radius:30px 30px 0px 0px;position:relative;bottom: -10vh;}
.image-01-bg img{}
.image-01-product{width: 88vw;pointer-events: none;position: absolute;left: 40%;transform: translateX(-50%);z-index:9;}

.image-02-bg{}
.image-02-product{position: relative;z-index:5;height: 100vh;}

.image-03-bg{}
.image-03-product{max-width:100%;pointer-events: none;z-index:9;position: relative;}

.image-04-bg{max-width: 70%;height: 100vh;display: inline-block;position: relative;z-index: 9;overflow: hidden;}
.image-04-bg img{height: 100vh;transform-origin: center center !important;}

.image-05-product{}
.image-05-line-green{width: 100%;height: 100%;position:absolute;top: 50%;left: 39%;transform: translate(-50%,-50%) scale(1.5);}


.image-06-bg{}
.image-07-product{}

.essentials-box{color: var(--color-01);position: absolute;}
.essentials-box h3{font-size: 21px;font-weight: 600;text-transform: none;}
.essentials-box ul{margin: 0px;padding: 0px;list-style-type: none;}
.essentials-box ul li{font-size: 16px;padding: 3px 5px 3px 25px;position: relative;}
.essentials-box ul li:before{content:"";position: absolute;top: 15px;left: 0;width: 10px;height: 1px;background: var(--color-01);}
.essentials-box br{display:none;}

.box.b-01 .image-02-product{position:relative;z-index:3;}
.box.b-01 .hs-data{position:relative;z-index:1;}
.box.b-01 .hs-data .seprator:after{;width: 100%;height: 1px;}
.box.b-01 .essentials-box.eb-01{padding: 95px 50px 40px 50px;background: var(--color-11);border-radius: 0px 0px 30px 30px;max-width: 370px;top: 0;right: -25vh;margin-bottom:-30px;z-index: 9;}


.box.b-02 .hs-data{position:relative;z-index:1;top:80px;}
.box.b-02 .hs-data .seprator:after{;width: 150%;max-width:150%;height: 1px;}
.box.b-02 .essentials-box.eb-02{padding: 70px 50px 70px 50px;background: var(--color-13);border-radius: 0px 30px 0px 0px;bottom: 0px;right: 0px;margin-bottom:-30px;max-width: 460px;min-height: 44%;z-index: 3;}
.box.b-02 .essentials-box.eb-02:after{content:"";width: 194%;height: 100%;background: var(--color-13);position: absolute;top: 0;right: 0;z-index: -2;border-radius: 0px 30px 0px 0px;}


.box.b-03 .hs-data{position:relative;z-index:1;/* top:80px; */}
.box.b-03 .hs-data .seprator:before{background: var(--color-13);}
.box.b-03 .hs-data .seprator:after{width: 60%;max-width:100%;height: 1px;background: var(--color-13);}
.box.b-03 .hs-data p{max-width:480px;}
.box.b-03 .essentials-box.eb-03{padding: 60px 50px 70px 50px;background: var(--color-13);border-radius: 30px 30px 0px 0px;bottom: 0px;right: -100px;margin-bottom:-30px;max-width: 400px;z-index: 3;}
 
.box.b-04 .hs-data{position:relative;z-index:1;/* top:80px; */}
.box.b-04 .hs-data .seprator:before{background: var(--color-01);}
.box.b-04 .hs-data .seprator:after{width:100%;max-width:100%;height: 1px;background: var(--color-01);}
.box.b-04 .essentials-box.eb-04{color:var(--color-02);padding: 90px 50px 50px 50px;background: var(--color-01);border-radius: 0px 0px 30px 30px;box-shadow: 0px 0px 10px rgba(0,0,0,.2);max-width: 400px;top: 0px;right: -100px;margin-bottom:-30px;z-index: 3;}
.box.b-04 .essentials-box.eb-04 ul li:before{background: var(--color-02);}
.box.b-04 .image-04-line-white{width: 100%;position:absolute;bottom: 0;left:0;z-index: 10;}



.box.b-05 .pie-osf-wrp{display: inline-block;position: relative;z-index:9;}
.box.b-05 .pie-osf-wrp .icon-reset{width: calc(50px + 8vh);position: absolute;top: 49.5%;left: 49.5%;transform: translate(-50%,-50%);z-index: 9;}
.box.b-05 .pie-osf-wrp .circle-edge{color: var(--orange);font-weight: 500;text-transform: uppercase;width: calc(50px + 8vh);height: calc(50px + 8vh);background: var(--color-01);border-radius: 100px;position: absolute;top: 49.5%;left: 49.5%;transform: translate(-50%,-50%);z-index: 9;display: flex;align-items: center;justify-content: center;}

.box.b-05 .pie-osf-wrp:before{content:"";position: absolute;top: 50%;left: -10%;width: 120%;border: 1px dashed #ccc;}
.box.b-05 .pie-osf-wrp:after{content:"";position: absolute;top: -10%;left: 48.7%;height: 120%;border: 1px dashed #ccc;}
.box.b-05 .pie-osf-wrp ul{width: 60vh;height: 60vh;margin: 0px;display: inline-block;background: #ededed;border-radius: 100%;}
.box.b-05 .pie-osf-wrp ul li{width: 48.5%;height: 50%;display: inline-block;/* border: 1px solid #000; */position: relative;}
.box.b-05 .pie-osf-wrp ul li .posf-box{width: 100%;height: 100%;display: inline-block;padding-left: 10%;padding-right: 10%;}
.box.b-05 .pie-osf-wrp ul li .posf-box h3{font-size: 18px;font-weight: 600;}
.box.b-05 .pie-osf-wrp ul li .posf-box-hover{background: var(--color-13);position: absolute;top: 0;left: 0;width: 100%;height: 100%;padding: 10%;opacity:0;transform: scale(1);transition:all 300ms ease-in-out;}
.box.b-05 .pie-osf-wrp ul li .posf-box-hover h3{font-size: 16px;font-weight: 500;color: #ffffff;}
.box.b-05 .pie-osf-wrp ul li .posf-box-hover p{color: #fff;font-size: 12px;max-width: 190px;display: inline-block;}
.box.b-05 .pie-osf-wrp ul li .posf-box-hover a{display: none;color: #fff;font-size: 15px;font-weight: 500;position: relative;padding-bottom: 5px;}
.box.b-05 .pie-osf-wrp ul li .posf-box-hover a:after{content:"";position:absolute;bottom:0;left:0;width:30px;height:2px;background:#fff;}


.box.b-05 .pie-osf-wrp ul li:nth-child(1){border-radius: 100% 0px  0px 0px;text-align: right;}
.box.b-05 .pie-osf-wrp ul li:nth-child(2){text-align: left;border-radius: 0px 100% 0px 0px;}
.box.b-05 .pie-osf-wrp ul li:nth-child(3){text-align: right;border-radius: 0px 0px 0px 100%;}
.box.b-05 .pie-osf-wrp ul li:nth-child(4){text-align: left;border-radius: 0px 0px 100% 0px;}


.box.b-05 .pie-osf-wrp ul li:nth-child(1) .posf-box{padding-top: 65%;text-align: right;}
.box.b-05 .pie-osf-wrp ul li:nth-child(2) .posf-box{padding-top: 59%;border-radius: 0px 100% 0px 0px;}
.box.b-05 .pie-osf-wrp ul li:nth-child(3) .posf-box{padding-top: 41%;border-radius: 0px 0px 0px 100%;text-align: right;}
.box.b-05 .pie-osf-wrp ul li:nth-child(4) .posf-box{padding-top: 35%;border-radius: 0px 0px 100% 0px;}


.box.b-05 .pie-osf-wrp ul li:nth-child(1) .posf-box-hover{border-radius: 100% 0px  0px 0px;}
.box.b-05 .pie-osf-wrp ul li:nth-child(2) .posf-box-hover{border-radius: 0px 100% 0px 0px;}
.box.b-05 .pie-osf-wrp ul li:nth-child(3) .posf-box-hover{border-radius: 0px 0px 0px 100%;}
.box.b-05 .pie-osf-wrp ul li:nth-child(4) .posf-box-hover{border-radius: 0px 0px 100% 0px;}


.box.b-05 .pie-osf-wrp ul li:hover:nth-child(1) .posf-box-hover{opacity:1;transform: scale(1.2) translate(-10%,-8%);padding-top: 32%;text-align: right;transition:all 300ms ease-in-out;}
.box.b-05 .pie-osf-wrp ul li:hover:nth-child(2) .posf-box-hover{opacity:1;transform: scale(1.2) translate(6%,-8%);padding-top: 27%;transition:all 300ms ease-in-out;}
.box.b-05 .pie-osf-wrp ul li:hover:nth-child(3) .posf-box-hover{opacity:1;transform: scale(1.2) translate(-10%,8%);padding-top: 17%;text-align: right;transition:all 300ms ease-in-out;}
.box.b-05 .pie-osf-wrp ul li:hover:nth-child(4) .posf-box-hover{opacity:1;transform: scale(1.2) translate(6%,8%);padding-top: 18%;transition:all 300ms ease-in-out;}



.box.b-00{background: linear-gradient(107deg, #E9FFFD 25.25%, #FFF 99.5%);}
.box.b-01{align-items: flex-end;z-index: 9;}
.box.b-02{overflow: hidden;;z-index: 8;}
.box.b-03{align-items: flex-end;z-index: 7;}
.box.b-04{background:var(--color-11);position: relative;z-index: 6;}
.box.b-05{background:var(--color-03);align-items: center;}
/*
.box.b-06{background: url("edge-06.jpg") no-repeat left bottom;}
.box.b-07{background: url("edge-07.jpg") no-repeat left bottom;}
*/

.horizontal-scroll .box.b-01 .sb-100vh,
.horizontal-scroll .box.b-03 .sb-100vh{align-items: flex-end;}

.horizontal-scroll .box.b-05 .sb-100vh{align-items: center;}


/* Smartphones (landscape) ----------- */
@media only screen 
and (min-width : 1280px) 
and (max-width : 1660px) {

	.horizontal-scroll
	.hs-data{gap:30px;}
	.hs-data h2{font-size: 38px !important;}
	.hs-data p{font-size:18px;max-width: 500px;}
	

	.essentials-box h3{font-size: 20px;}
	.essentials-box ul li{font-size:15px;}
	
	.box.b-01 .essentials-box.eb-01{padding: 90px 25px 25px 25px;max-width: 320px;}

	.box.b-02 .essentials-box.eb-02{padding: 60px 50px 70px 40px;max-width: 410px;}
	.box.b-02 .essentials-box.eb-02:after{width: 211%;}

	.box.b-03 .essentials-box.eb-03{padding: 40px 30px 60px 30px;max-width: 350px;border-radius: 20px 20px 0px 0px;}
	
	.box.b-04 .essentials-box.eb-04{border-radius: 0px 0px 20px 20px;padding: 90px 25px 25px 25px;max-width: 300px;}

	.box.b-05 .pie-osf-wrp .circle-edge{font-size: 13px;width: calc(40px + 7vh);height: calc(40px + 7vh);}
	
	.box.b-05 .pie-osf-wrp ul li .posf-box h3{font-size:15px;}
	.box.b-05 .pie-osf-wrp ul li .posf-box-hover h3{font-size:13px;}
	.box.b-05 .pie-osf-wrp ul li .posf-box-hover p{font-size:10px;}

	.box.b-05 .pie-osf-wrp ul li:nth-child(1) .posf-box-hover p{padding-left:20px ;}
	.box.b-05 .pie-osf-wrp ul li:nth-child(2) .posf-box-hover p{padding-right:20px ;}
	.box.b-05 .pie-osf-wrp ul li:nth-child(3) .posf-box-hover p{padding-left:40px ;}
	.box.b-05 .pie-osf-wrp ul li:nth-child(4) .posf-box-hover p{padding-right:35px ;}
	

}
 


/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-width : 120px) 
and (max-width : 768px) {
	
.b-00 .banner-txt .emc2.e_c .text{top: -20px;position:relative;}
	.btn-scrollTop span.txt:before{content:"Top" !important;}

	.pin-spacer {padding: 0px !important;height: auto !important;}

	.b-00 .banner-txt .emc2 .text{font-size: 14px;line-height: 18px;width: 110px;}

	.b-00 .banner-txt .emc2.e_e{top: -118%;left: 3%;width: 100%;}
	.b-00 .banner-txt .emc2.e_e .dots_line{top: 30px;margin-left: 0px;left: 0px;}
	.b-00 .banner-txt .emc2.e_e .dots_line:before{left: 0px;}
	.b-00 .banner-txt .emc2.e_e .dots_line:after{top: 4px;left: 4px;width: 1px;height: 117px;}
	
	.b-00 .banner-txt .emc2.e_m{bottom: -162px;right: -51%;width: 100%;} 
	.b-00 .banner-txt .emc2.e_m .dots_line{left: 0px;top: -10px;}
	.b-00 .banner-txt .emc2.e_m .dots_line:before{}
	.b-00 .banner-txt .emc2.e_m .dots_line:after{bottom: 0px;left: 4px;width: 1px;height: 156px;}
	
	.b-00 .banner-txt .emc2.e_c{top: -180px;left: 80%;width: 100%;} /* left: 81% */
	.b-00 .banner-txt .emc2.e_c .dots_line{top: 39px;left: 0px;}
	.b-00 .banner-txt .emc2.e_c .dots_line:before{}
	.b-00 .banner-txt .emc2.e_c .dots_line:after{left: 4px;width: 1px;height: 187px;}

	
	.hs-data h2.font-gradient-01,
	.hs-data h2.font-gradient-02{font-size:36px;}

	.hs-data h2.font-gradient-01 {background: linear-gradient(90deg, #ffffff 0%, #14897D 0%, #F08900 71.26%) !important;background-clip: text !important;-webkit-background-clip: text !important;	-webkit-text-fill-color: transparent;}
	.hs-data h2.font-gradient-02 {background: linear-gradient(90deg, #333333 0%, #ffffff 0%, #F08900 71.26%) !important;background-clip: text !important;-webkit-background-clip: text !important;}
	.hs-data p  div,
	.essentials-box ul li div{font-size: 15px;}

	.essentials-box h3{font-size:21px;}

	.hs-data p  div,
	.essentials-box ul li div,
	.essentials-box h3 div{opacity:1 !important;transform: inherit !important;}

	.vertical-scroll .vs-sec {width: 100vw;height: 78vh;}

	.image-01-bg{bottom: 0px;transform: inherit !important;margin: 0px 40px;}
	.image-01-product{bottom: 7px;left: -51%;transform: inherit !important;width: 200%;}

	.image-02-product{height:auto;width: 110%;transform: inherit !important;margin-left: -15px;}

	.image-03-product{max-width: 100%;}

	.image-04-bg{max-width: 100%;height: 400px;}
	.image-04-product{}
	.image-04-bg img{width:100%;max-width: inherit;}
	.box.b-04 .image-04-line-white{bottom: 7px;}
	.box.b-02 .hs-data{top: 0px;}

	.box.b-02 .essentials-box.eb-02{min-height: auto;margin: 0px !important;}
	.box.b-02 .essentials-box.eb-02:after{width: auto;}

	.box.b-03 .essentials-box.eb-03{margin-bottom:0px;}

	.box.b-04 .essentials-box.eb-04{margin:0px 15px;border-radius: 30px 30px 0px 0px;}


	.box.b-01 .essentials-box.eb-01{margin: 0px 15px;border-radius: 30px 30px 0px 0px;}
	
	.horizontal-scroll .box.b-01 .sb-100vh,
	.horizontal-scroll .box.b-02 .sb-100vh,
	.horizontal-scroll .box.b-03 .sb-100vh,
	.horizontal-scroll .box.b-04 .sb-100vh,
	.horizontal-scroll .box.b-05 .sb-100vh{display: flex;flex-direction: column;height: auto;}

	.horizontal-scroll .box{height:auto;}
	
	.essentials-box{position:static !important;max-width: 100% !important;transform: inherit !important;padding: 45px 30px 40px 40px !important;}
	
	.horizontal-scroll{/* width: calc(1920px * 7) !important; */height:auto;transform: inherit !important;display: flex;flex-direction: column;align-items: flex-start;}
	.horizontal-scroll .box{/* width: 1920px; */transform: inherit !important;}

	.box.b-05 .pie-osf-wrp{margin-bottom:50px;}
	.box.b-05 .pie-osf-wrp:before,
	.box.b-05 .pie-osf-wrp:after{display:none;}
	.box.b-05 .pie-osf-wrp .circle-edge{display:none;}
	.box.b-05 .pie-osf-wrp ul{width: auto;height: auto;background:transparent;border-radius: 0px;}
	.box.b-05 .pie-osf-wrp ul li{width: 100%;height: 100%;}
	.box.b-05 .pie-osf-wrp ul li .posf-box{width: 100%;height: 100%;display: inline-block;padding-left: 10%;padding-right: 10%;opacity: 0;padding-top: 210px !important;}
	.box.b-05 .pie-osf-wrp ul li .posf-box h3{font-size: 18px;font-weight: 600;}

	.box.b-05 .pie-osf-wrp ul li{border-radius: 0px !important;margin-bottom: 5px;}
	.box.b-05 .pie-osf-wrp ul li .posf-box-hover{opacity:1;border-radius: 10px !important;}

	.box.b-05 .pie-osf-wrp ul li:nth-child(1) .posf-box-hover,
	.box.b-05 .pie-osf-wrp ul li:nth-child(3) .posf-box-hover{background: linear-gradient(225deg, #f0890073 0%, #f089001f 30%, transparent 80%);}

	
	.box.b-05 .pie-osf-wrp ul li:nth-child(2) .posf-box-hover,
	.box.b-05 .pie-osf-wrp ul li:nth-child(4) .posf-box-hover{background: linear-gradient(135deg, #f0890073 0%, #f089001f 30%, transparent 80%);}
	
	.box.b-05 .pie-osf-wrp ul li .posf-box-hover h3{font-size:21px;}
	.box.b-05 .pie-osf-wrp ul li .posf-box-hover p{font-size:15px;max-width: 100%;}

				
	.box.b-05 .pie-osf-wrp ul li:hover .posf-box-hover:hover,
	.box.b-05 .pie-osf-wrp ul li:hover .posf-box-hover{transform:scale(1);padding: 10%;}

	.image-05-line-green{display:none;}

	.hs-data{padding-top: 45px;}
	
}

@media only screen and (min-width : 1024px) and  (max-width : 1280px){
	
	.box.b-05 .pie-osf-wrp ul { width: 80vh;height: 80vh;}
	.box.b-05 .pie-osf-wrp ul li .posf-box h3 {font-size: 15px;}
	.box.b-05 .pie-osf-wrp ul li .posf-box-hover h3 {font-size: 12px;}
	.box.b-05 .pie-osf-wrp ul li .posf-box-hover p {font-size: 10px;}
	.box.b-05 .pie-osf-wrp ul li .posf-box-hover {padding: 5%}
	
} 
/* zooming to 110% */
@media only screen and (min-width : 1660px) and (max-width: 1800px) {
 	.box.b-05 .pie-osf-wrp ul {width: 65vh;height: 65vh;}
	
}