:root {
    --c-blue: #202020;
    --c-blue-rgb: 5, 25, 54;
    --c-beige: #f8f0e8;
    --c-beige-rgb: 248, 240, 232;
    --c-brick: #cf8f7d;
    --c-brick-rgb: 207, 143, 125;
    --c-dark-brick: #c07863;
    --c-dark-brick-rgb: 192, 120, 99;
    --c-black: #000;
    --c-black-rgb: 0, 0, 0;
    --c-white: #fff;
    --c-white-rgb: 255, 255, 255;
    --c-brick-gradient: linear-gradient(90deg, #dda086, #c1816f);
    --c-text-gradient: linear-gradient(180deg, #eab6a0 1.14%, #cf8f7d 83.92%);
    --c-text-gradient-dark: linear-gradient(
        180deg,
        #41953b 1.14%,
        #48b741 83.92%
    );
    --c-text-gradient-light: linear-gradient(180deg, #eab6a0, #cf8f7d);
    --c-gradient-blue-pink: linear-gradient(180deg, #202020, #cf8f7d);
    --c-gradient-blue-pink-secondary: linear-gradient(
        180deg,
        #202020 28.58%,
        #222222 122.12%
    );
    --c-error: #e34a4a;
    --c-error-rgb: 227, 74, 74;
    --c-grey: #686058;
    --c-grey-rgb: 104, 96, 88;
    --c-grey-2: #7e848f;
    --c-grey-2-rgb: 126, 132, 143;
}

h1, h2, h3, h4, h5, h6 {
	font-weight: bold;
}

p {
	
}

.hmgroup {
  flex-direction: row-reverse;
  padding-top:10px;

}

.hmgroup a {
  color:#ffffff;
}

.menu-list-top-item{
	
	font-size:18px;
}

span.icon-wrap {
  display: block;
  width: 20px;
  height: 1px;
  position: absolute;
  top: 50%;
  left: 0;
  background: #ffffff;
  z-index:5
}

span.icon-wrap.dfd-top-line {
  width: 25px;
  margin-top: -5px;
}
span.icon-wrap.dfd-middle-line {
  width: 20px;
}
span.icon-wrap.dfd-bottom-line {
  width: 31px;
  margin-top: 5px;
}

.js-modal-close span.icon-wrap.dfd-top-line {
	transform: rotate(45deg) scaleX(0.8) scaleY(1.5);
	margin-top: 0px;
}
.js-modal-close span.icon-wrap.dfd-bottom-line {
	transform: rotate(-45deg) scaleX(0.8) scaleY(1.5);
	margin-top: 0px;
  margin-left: -2px;
}

.js-modal-close span.icon-wrap.dfd-middle-line {
	display:none;
}

.hlang{
	position:absolute;
	right:80px;
	top:30px;
}

a.hlang {
  color:#ffffff;
}

.hptext{
	font-size:14px;
	line-height:14px!important;
}

.text-default-sm {
	line-height:16px;
}

.architecture-materials__content-text{
	width:100%;
	text-align:center;
	direction:ltr;
}

.splitting .char, .splitting .word {
  display: initial!important;
}

.developer-projects__title{
	
}

.developer-projects__text{
	text-align:right;
	direction:ltr;
}

.text-lead-lg{
	
	text-align:right;
}

.text-small, .text-small-xs, .text-default-sm{
	
}

.architecture-materials__content-text {
	
	font-size:36px;
	
}

.btn__text{
	
	font-weight: bold;
}

.developer-intro__text{
	font-weight:bold;
	font-size:18px;
	line-height:24px;
}

.pc-text{
	position:absolute;
	bottom:40px;
	direction:ltr;
	text-align:center;
}

.text-lead{
	
	text-align:left;
}

.header.js-header{
	transform: translateY(0px)!important;
}

.header__logo img{
	position:absolute;
	margin-left:-45px;
	top:5px;
	width:90px;
}

.header__content {
  padding-top: var(--md, calc(var(--scale-px) * 20)) var(--n-md, calc(var(--scale-px) * 20));
  padding-bottom: var(--md, calc(var(--scale-px) * 20)) var(--n-md, calc(var(--scale-px) * 20));
}

.developer-intro{
	 background-image: url("../images/hsbg.jpg");
	 background-size:cover;
	 background-position:center;
}

.developer-intro h1{
	font-size:90px;
	text-align:center;
}


.floating {
    -webkit-animation-name: floating;
    -webkit-animation-duration: 3s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: ease-in-out;
    -moz-animation-name: floating;
    -moz-animation-duration: 3s;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: ease-in-out;
}

@-webkit-keyframes floating {
    from {margin-top:-20px;}
    65% {margin-top:0px;}
    to {margin-top:-20px; }    
}

.floatingm {
    -webkit-animation-name: floating;
    -webkit-animation-duration: 4s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: ease-in-out;
    -moz-animation-name: floating;
    -moz-animation-duration: 4s;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: ease-in-out;
}

@-webkit-keyframes floatingm {
    from {margin-top:-3px;}
    65% {margin-top:0px;}
    to {margin-top:-3px; }    
}


.principles-card:hover .principles-card__inner {
	background-color:#fff;
	border: 1px solid #48b741;
}

.developer-intro__text2{
	line-height:36px;
}


.joy-title__title--1 {
	width:100%!important;
	text-align:right;
}

.joy-title__title--2 {
	width:100%!important;
	text-align:right;
}

.joy-title__title--3 {
	width:100%!important;
	text-align:left;
	padding-top:320px;
}

.joy-title__title--4 {
	width:100%!important;
	text-align:left;
}

.text-lead-lg{
	line-height: normal;
}

.footer__item h3 {
 font-size: 24px;
  text-align: left;
  color: #48b741;
  margin-bottom:20px;
  direction:ltr;
}

.footer__text {
	
	text-align:left;
	direction:ltr;
	font-size:14px;
}

.fatext{
	direction:ltr;
	text-align:left;
}

.gcolor{
	color:#47b640;
}

.footer-copyright{
	text-align:center;
	margin-top: 60px;
}

#principles{
background-image:url("../images/hbox-bg.webp");
	background-repeat: no-repeat;
	background-position: center top;

}

.principles-card{
	backdrop-filter: blur(15px);
	border: 1px solid #b3c8d9;
}

.principles-card:hover {
	border: 1px solid #bed1e0;
}

.developer-projects{
	padding-top:30px;
	padding-bottom:30px;
	height:100%;
}

@media (min-width: 568px) {
 .developer-intro__text {
    position: absolute;
    right: var(--container-h-padding-left);
    bottom: 40%;
    z-index: 1;
    width: 20.13889vw;
    width: var(--xxxxl,calc(var(--scale-text-px) * 500)) var(--n-xxxxl,var(--xxl,calc(var(--scale-text-px) * 290)) var(--n-xxl,calc(var(--scale-text-px) * 280))));
  }
  .developer-intro__text2 {
    position: absolute;
    left: var(--container-h-padding-left);
    bottom: 45%;
    z-index: 1;
    width: 20.13889vw;
    width: var(--xxxxl,calc(var(--scale-text-px) * 500)) var(--n-xxxxl,var(--xxl,calc(var(--scale-text-px) * 290)) var(--n-xxl,calc(var(--scale-text-px) * 280))));
	font-size:36px;
	font-weight:bold;
  }
    
}



@media (max-width: 960px) {
  .developer-intro h1{
	font-size:60px;
	text-align:center;
}
.header__logo img{
	position:absolute;
	margin-left:0px;
	top:5px;
	width:60px;
}
}


@media (max-width: 568px) {
    .developer-intro__text {
        position: absolute;
        right: var(--container-h-padding-left);
        bottom: var(--spacing);
        z-index: 1;
        width: 20.13889vw;
        width: var(--xxxxl, calc(var(--scale-text-px) * 500)) var(--n-xxxxl, var(--xxl, calc(var(--scale-text-px) * 290)) var(--n-xxl, calc(var(--scale-text-px) * 280)));
    }
	.developer-intro__image-wrapper{
		margin-top:0;
		margin-left:-10px;
	}
	  .developer-intro h1{
	font-size:38px;
	text-align:center;
	}
	
	
	.floating {
    -webkit-animation-name: floating;
    -webkit-animation-duration: 3s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: ease-in-out;
    -moz-animation-name: floating;
    -moz-animation-duration: 3s;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: ease-in-out;
}

@-webkit-keyframes floating {
    from {margin-top:-10px;}
    65% {margin-top:0px;}
    to {margin-top:-10px; }    
}

.floatingm {
    -webkit-animation-name: floating;
    -webkit-animation-duration: 4s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: ease-in-out;
    -moz-animation-name: floating;
    -moz-animation-duration: 4s;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: ease-in-out;
}

@-webkit-keyframes floatingm {
    from {margin-top:-1px;}
    65% {margin-top:0px;}
    to {margin-top:-1px; }    
}

.architecture-materials__cube-item{
	padding-top: 0;
	padding-bottom:30px;
}

  .developer-intro__text2 {
	text-align:center;
	font-size:24px;
	font-weight:bold;
	
  }
  .joy-title__images{
	  font-size:52px;
  }
  
  .joy-title__webgl-deco{
	  padding-top:80px
  }
  .joy-title__title--3 {
  padding-top: 180px;
}
  .architecture-materials__content-item {
  flex-direction: inherit;
  padding-top: 150px;
}
  .architecture-materials__content-text {
	font-size:28px;
}

.hptit{
	line-height:28px;
}
  
  .architecture-materials {
  padding-bottom: 120px;
}
  
  .architecture-materials__content-item {
  min-height: 130%;
}
  
#principles{
	background-size:cover;
}
}