html { font-size: 100px;}

:root {
  --vw-ratio: calc(100vw / 19.2);
}

@media (min-width: 2560px) {
  :root {
    --vw-ratio: calc(100vw / 19.2);
  }
  html {
    font-size: 200px; 
  }
}

@media (max-width: 1023px) {
  :root {
    --vw-ratio: calc(100vw / 10.23);
  }
  html {
    font-size: calc(100px * 10.23); 
  }
}
	
@media (max-width: 768px) {
  :root {
    --vw-ratio: calc(100vw / 7.5);
  }
  html {
    font-size: calc(100px * 0.75); 
  }
}

body{background: #16141a;}	
	
.mobile-banner {
    display: none
}

/* framework */
#content{padding-top: 0.64rem;}
.dwrapper { width:100%; max-width:62.65625vw; margin:0 auto;padding: 3.64583vw 0;}
@media screen and (max-width: 1023px) {
	#content{ padding-top: 0;}
}
@media screen and (max-width: 1200px) {
	.dwrapper{max-width: 90%;}	
}	

@media screen and (max-width: 992px) {
    .pc-banner { display: none}
    .mobile-banner { display: block}
}

/* font */
.dcontainer p{ color:#FFF; font-size:18px;}
.dcontainer p strong { display:block; font-family:"Manrope-ExtraBold",sans-serif; background-image: var(--bgimg); -webkit-background-clip: text; color: var(--dcolor); font-weight:normal; font-size: calc(0.36 * var(--vw-ratio)); padding-bottom: calc(0.2 * var(--vw-ratio));}
/*
.dcontainer  p { color:#ffffff; font-family:"Manrope-Regular",sans-serif; font-weight:normal; font-size:1.25vw; margin:.52083vw 0; padding-right:.52083vw}	
*/
@media screen and (max-width: 1200px) {	
	.dcontainer  p strong { }	
	.dcontainer  p { font-size:1.93333vw; margin:2vw 0}	
}
@media screen and (max-width: 768px) {
	.dcontainer  p strong { margin-bottom:5px}	
	.dcontainer  p { font-size:14px; margin:10px 0}
}


/* p-banner */
.d-banner { position:relative; width:100%; height:350px}
.d-banner .bg { width:100%; height:100%; object-fit:cover}
.d-banner .text {position:absolute; display:inline-block; left:50%; top:50%; transform:translate(-50%, -50%)}
.d-banner .text h1 { font-family:"Manrope-ExtraBold"; font-weight:normal; font-size:56px; text-align:center; background-image: var(--bgimg);
  -webkit-background-clip: text; color: var(--dcolor);}
.d-banner .text img { position:absolute; width:37.1875vw; max-width:unset; left:50%; top:50%; transform:translate(-50%, -50%)}



@media screen and (max-width: 992px) {
	.d-banner { height:60vw}
}

.dtitle{ text-align:center; font-size:2.25vw !important;}
@media screen and (max-width: 768px) {
	.dtitle{ font-size:20px !important;}
}


.dfont36{ font-size:36px !important;}
.dfont18{ font-size:18px !important;}


@media screen and (max-width: 768px) {
	.dfont36{ font-size:24px !important;}
    .dfont18{ font-size:14px !important;}
}


.g-banner{position: relative; width: 100%; height: 350px; z-index:3;}
.g-banner .bg { width:100%; height:100%; object-fit:cover}
.g-banner .text {position:absolute; display:inline-block; left:50%; top:50%; transform:translate(-50%, -50%); width:100%;}

.page-id-23 .g-banner, .page-id-31 .g-banner, .page-id-32 .g-banner{ height:auto;}

.g-ntitle{font-size:calc(0.56 * var(--vw-ratio)); font-family: "Manrope-ExtraBold";  text-align: center; background-image: var(--bgimg); -webkit-background-clip: text; color: var(--dcolor);}
.g-ntitles{ font-size:calc(0.36 * var(--vw-ratio)); margin: 20px 0 calc(0.4 * var(--vw-ratio)); font-family: "Manrope-ExtraBold"; background-image: var(--bgimg); -webkit-background-clip: text; color: var(--dcolor); text-align:center; text-transform: uppercase;}
.g-nstitles{margin: 20px 0 0; font-family: "Manrope-Regular"; font-weight: normal; color: #fff; font-size:calc(0.2 * var(--vw-ratio)); text-align: center;}

.g-wrap{ max-width: 1230px; width: 100%; margin: 0 auto; padding:30px 0;}
.g-mb0{ margin-bottom:0px;}
.g-mb40{ margin-bottom:40px;}
.g-wrap-content{ text-align:center;}
.g-list{width: 100%; display: flex; flex-flow: row wrap;}
.g-list .item{ width:33.33333%; margin: 0; padding: 0 15px 30px; position: relative;}

.g-ncontainer{background: #000; border-radius: 12px; padding:40px; color:#fff;}
.g-ncontainer p{font-family: "Manrope-Regular", sans-serif;}
.g-ncontainer p strong{font-family: "Manrope-ExtraBold"; font-size:calc(0.18 * var(--vw-ratio));}
.g-ncontainer2{ padding:40px;}
.g-ncontainer3{ }

@media screen and (max-width: 1023px) {
	.g-wrap{ padding:10px 0;}
	.g-ncontainer{ padding:20px 10px; margin:0 10px;}
	.g-ncontainer2{ padding:20px 10px; margin:0 10px;}
	.g-ncontainer p strong{font-size:calc(0.22 * var(--vw-ratio));}
  
}

@media screen and (max-width: 768px) {
	.g-ncontainer p strong{font-size:calc(0.36 * var(--vw-ratio));}
	.page-id-contact .g-ncontainer p strong{font-size:calc(0.26 * var(--vw-ratio));}  
     
	.g-nstitles{ font-size:calc(0.26 * var(--vw-ratio)); }  
}