body {background:#000;}

/* wind start */
.layer-stack_wrap {margin:230px 25%;}
.layer-stack_layer {
	height: 215px;
	width: 300px;
	position: absolute;
	transform: rotateX(70deg) rotateZ(45deg) translateZ(0);
  /* box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.15); */
  border-radius: 30px;
	-webkit-border-radius: 30px;
	-moz-border-radius: 30px;
	box-shadow: inset 0px 13px 27px 0px rgba(255,255,255,1),inset 0px 0px 27px 0px rgba(0,0,0,0.5),0px 0px 27px 0px rgba(0,0,0,0.3);
 	-webkit-box-shadow: inset 0px 13px 27px 0px rgba(255,255,255,1),inset 0px 0px 27px 0px rgba(0,0,0,0.5),0px 0px 27px 0px rgba(0,0,0,0.3);
 	-moz-box-shadow: inset 0px 13px 27px 0px rgba(255,255,255,1),inset 0px 0px 27px 0px rgba(0,0,0,0.5),0px 0px 27px 0px rgba(0,0,0,0.3);
  transition: all 0.3s ease-out;
  opacity: 0.7;

}
.layer-stack_layer .divtxt {margin:0 auto; margin-top:50px; color:#fff; text-align:center;}
.layer-stack_layer1 {
  background: #fff;
  opacity: 1;
  border-radius: 30px;
	-webkit-border-radius: 30px;
	-moz-border-radius: 30px;
	box-shadow: inset 0px 13px 27px 0px rgba(255,255,255,1),inset 0px 0px 27px 0px rgba(0,0,0,0.5),0px 0px 27px 0px rgba(0,0,0,0.3);
   	-webkit-box-shadow: inset 0px 13px 27px 0px rgba(255,255,255,1),inset 0px 0px 27px 0px rgba(0,0,0,0.5),0px 0px 27px 0px rgba(0,0,0,0.3);
   	-moz-box-shadow: inset 0px 13px 27px 0px rgba(255,255,255,1),inset 0px 0px 27px 0px rgba(0,0,0,0.5),0px 0px 27px 0px rgba(0,0,0,0.3);
}

.layer-stack_layer2 {
	transform: rotateX(70deg) rotateZ(45deg) translateZ(30px);
  background: #fff;
}

.layer-stack_layer:hover {
  opacity: 0.9;
  z-index: 9;
  transform:translateY(-70px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateZ(100px) scale(1.2);

}
.layer-stack_layer:hover .divtxt {color:#444;}

.layer-stack_layer3 {
	transform: rotateX(70deg) rotateZ(45deg) translateZ(60px);
  background: #fff;
}
.layer-stack_layer4 {
	transform: rotateX(70deg) rotateZ(45deg) translateZ(90px);
  background: #fff;
}
.layer-stack_layer5 {
	transform: rotateX(70deg) rotateZ(45deg) translateZ(120px);
  background: #fff;
  opacity: 1;
}

.wind_box {position:relative; height:550px; width:810PX !important; justify-content: unset; display:flex; left:-5%; z-index: 999; margin: 0 auto !important;}

svg {
	font-family: 'Russo One', sans-serif;
  position: relative;
	width: 100%; height: 100%;
  z-index:999;
  color:#d71d18;
}
svg text {
	text-transform: uppercase;
	animation: stroke 4s 1 alternate;
	stroke-width: 2;
	stroke: #ffffff;
	font-size: 80px;
}

@keyframes stroke {
	0%   {
		fill: rgba(230,14,17,0); stroke: rgba(255,255,255,1);
		stroke-dashoffset: 3%; stroke-dasharray: 0 50%; stroke-width: 2;
	}
	70%  {fill: rgba(230,14,17,0); stroke: rgba(255,255,255,1); }
	80%  {fill: rgba(230,14,17,0); stroke: rgba(255,255,255,1); stroke-width: 2; }
	100% {
		fill: rgba(230,14,17,0); stroke: rgba(255,255,255,1);
		stroke-dashoffset: -25%; stroke-dasharray: 50% 0; stroke-width: 0;
	}
}
.comp_txt {position: absolute; z-index: 990; left:-38%; top:14%; width:100%; height:auto;}

.aboutme_txt { color:#fff; margin:70px auto; z-index: 999; text-align: center;}
.sub_container {margin-top:70px; }
.sub1_bannerwrap {padding:50% 0; width:100%; vertical-align: middle;}
.sub_top_tit {position: relative; margin: 20px 0 0; font-weight: 700; font-size: 7em; line-height: 100px; color: #ffffff; letter-spacing: -0.02em;}
.sub_top_sub_tit { margin: 100px 0 50px 20px; font-weight: 800; font-size: 60px; line-height: 3em; color: #d71d18; text-shadow: 3px 3px 5px rgba(0, 0, 0, 0.5);}
.sub_text {margin: 20px 0 20px 20px; font-weight: 400; font-size: 26px; line-height: 1.7em; color: #ddd; letter-spacing: -0.02em;}
.dot-point{position:relative;
   display:flex;
   align-items:center;
   justify-content:center;
   text-align:left;
   transform:rotate(180deg);
   left:35%;
   top:222px;
   line-height: 28px;
}

.dot-icon{
   transform:rotate(-180deg);
   position: inherit;
   right:10%;
   width:250px;
   color:#ccc;
   font-weight: 200;
	 font-size:1.2em
}

.dot-line{
   position: initial;
   top: 46%;
   left: -170%;
   width: 150px;
   height: 1px;
   background-color: #ccc;
}

.dot-line .dot-line-dot{
   position: absolute;
   top: 50%;
   right: 0;
   transform: translate(50%, -50%);
   width: 9px;
   height: 9px;
   border-radius: 50%;
   background-color: #d43e3c;
}
.wind_table {width:100%; background :#d43e3c;  padding:40px 0; color:#fff; font-size:1.4em;}
.wind_title3 {margin:0 0 40px 40px; font-weight: 800; font-size:22px; color:#222; }
.wind_title3 span {background:#fff; padding:0 20px;}
table { border-collapse: collapse; margin: 0 auto; padding: 0; width: 95%; table-layout: fixed; border-top:2px solid #fff; }
table tr {padding: .35em;}
table th {border:none;}
table th, table td {padding: .625em; text-align: center; border-bottom:1px dotted #fff; word-break: keep-all;}
table th {font-size: .85em; letter-spacing: .1em; text-transform: uppercase;}


@media screen and (max-width: 600px) {
  table {border: 0; border-top:2px solid #fff;}
  table thead { border: none; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px;}
  table tr { display: block; margin-bottom: .625em;}
  table td { border-bottom: 1px dotted #ddd; display: block; font-size: .8em; text-align: right;}
  table td::before {content: attr(data-label); float: left; font-weight: bold; text-transform: uppercase;}
	table td.hidn {display: none;}
	table td:first-child {font-weight: 800;}

        /*
    * aria-label has no advantage, it won't be read inside a table
    content: attr(aria-label);
    */

}

.wind_txt {width:100%; margin:50px 0 50px 0; line-height: 2em; font-size:1.3em; color:#ccc; font-weight: 400;}
.wind_txt ul {margin:0 auto; width:950px;}
.wind_txt li::before {content: "-"; margin-right:15px; }
.comp_box_txt {position: absolute; z-index: 99; text-align: center; width: 100%; top:25%; color:#ccc; font-size:1.5em; font-weight: 800;}

/* mobile */
@media (max-width:480px) {
  .wind_title {font-size:1.8em; margin-top:0px; z-index:10; }
  .wind_box {width:100%; transform: scale(0.6); left:-285px; height:200px; top:-100px;}
  .dot-line {width:70px;}
  .wind_title2 {font-size:2em; height:100px; margin-top:50px; z-index: 10}
	.wind_title3 {margin:0 0 20px 10px;}
  .inner .photo {width:100%; padding:20px; margin:0 auto; display: flex;  }
  .inner .photo ul {width:100%; margin:0 auto;}
	.sub1_bannerwrap {padding-top:10px;}
	.comp_txt {top:-3%; margin-left:5px;}
  .sub_top_sub_tit {margin:50px 0 50px 10px; line-height:2em; font-size:30px; text-shadow: 3px 3px 5px rgba(0, 0, 0, 0.5);}
  .sub_text {font-size:18px; margin: 20px 0 20px 10px; word-wrap: break-word; word-break: keep-all; letter-spacing: -1px;}
  .wind_table { font-size:1.2em !important; padding:20px 0;}
  .wind_txt {font-size:1em;}
  .wind_txt ul {width:95%;}
  .wind_txt li::before {content: "-"; margin-right:15px; margin-left:-20px;}
  .wind_txt li {margin-left:20px; letter-spacing: -1px;}
	.dot-icon {font-size:1em;}
}

@media (max-height:430px) {
  .comp_txt {top:-100px;}
  .sub1_bannerwrap {padding:0; margin-top:-150px;}
  .sub_text {font-size:1em; margin-top:-60px;}
}

/* table height */
@media (min-width:480px) and (max-width:1200px) {
  .img-comp-container {height:40vh;}
  .wind_txt {font-size:1.2em;}
  .wind_box {left:-100px;}
  .dot-line {width:50px;}
  table {border: 0;  border-top:2px solid #fff;}
  table thead { border: none; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px;}
  table tr { display: block; margin-bottom: .625em;}
  table td { border-bottom: 1px dotted #ddd; display: block; font-size: .8em; text-align: right;}
  table td::before {content: attr(data-label); float: left; font-weight: bold; text-transform: uppercase;}
	table td:first-child {font-weight: 800;}
	table td.hidn {display: none;}
}


/* tablet width */
@media (min-width:1200px) and (max-width:1340px)  {
  .layer-stack_wrap {margin:230px -15%}
  .inner .photo img { width:250px; height:auto; border-radius: 5px; }
  .wind_box {position:relative; height:550px; width:35% !important; justify-content: unset; display:flex; left:-5%; z-index: 999; margin: 0 auto !important;}
  .sub1_bannerwrap {padding:100px 0;}
  .comp_txt {top:5%;}
  .dot-point {left:103%;}
}

  /* @media (max-width:991px) {
    .aboutme {
      background:url("../theme/eb4_basic/image/visual/main_3_m.jpg") no-repeat;
      background-size: cover;
    }
} */


/* wind end */

/* ppf start */
/*//// tab ///*/

body {
    background-color: #212428;
    overflow-x: clip;
}

.tabs {
    width: 95%;
    height: 80px;
    margin: auto;
    margin-top: 50px;
    display: flex;
    align-items: center;
    box-shadow: 10px 10px 19px #1c1e22, -10px -10px 19px #262a2e;
    overflow: hidden;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
}

.tabs li {
    background-color: #212327;
    width: 33.33%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #c4cfde;
    font-family: 'Poppins', sans-serif;
    transition: .5s;
    -webkit-transition: .5s;
    -moz-transition: .5s;
    -ms-transition: .5s;
    -o-transition: .5s;
    cursor: pointer;
    font-size:1.4em;
    font-weight: 800;
}

.tabs li:hover {
    background: linear-gradient(145deg, #1e2024, #23272b);
    box-shadow: 10px 10px 19px #1c1e22, -10px -10px 19px #262a2e;
    color: #d71d18;
    position: relative;
    z-index: 1;
    border-radius: 10px;
}

.active {
    background: linear-gradient(145deg, #1e2024, #23272b);
    box-shadow: 10px 10px 19px #1c1e22, -10px -10px 19px #262a2e;
    color: #d71d18 !important;
    position: relative;
    z-index: 1;
    border-radius: 10px;
}

.contents {
    width: 95%;
    margin: auto;
    margin-top: 50px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.box {
    gap: 20px;
    background: linear-gradient(145deg, #1e2024, #23272b);
    box-shadow: 10px 10px 19px #1c1e22, -10px -10px 19px #262a2e;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    padding: 20px;
    width: 100%;
    animation: moving 1s ease;
    -webkit-animation: moving 1s ease;
}

.box img {
    width: 50%;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
}

.box h3 {
    color: #c4cfde;
    font-family: 'Poppins', sans-serif;
    font-size: 2rem;
    margin-bottom: 20px;
}
.box h3 span {background:#d71d18; padding:0 20px; font-weight: 800;}

.box p {
    color: #c4cfde;
    opacity: .5;
    font-family: 'Poppins', sans-serif;
    font-size: 1rem;
}

.show {
    display: flex;
}

.hide {
    display: none;
}

@keyframes moving {
    from {
        transform: translateX(-50px);
        -webkit-transform: translateX(-50px);
        -moz-transform: translateX(-50px);
        -ms-transform: translateX(-50px);
        -o-transform: translateX(-50px);
        opacity: 0;
    }

    to {
        transform: translateX(0px);
        -webkit-transform: translateX(0px);
        -moz-transform: translateX(0px);
        -ms-transform: translateX(0px);
        -o-transform: translateX(0px);
        opacity: 1;
    }
}
/*tab end*/



@media (min-width:480px) and (max-width:1200px) {
  .message {left:550px !important;}
}
.footer {margin-top:0;}

.box_width {width:100%;}
/* ppf end */