@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@600&display=swap");
.section-hero {
  padding: 150px 0 50px;
  position: relative;
  /* background-color: rgba(17, 17, 17, 0.85); */
  background-color: #151515;
}
@media only screen and (max-width: 640px) {
  .section-hero {
    padding: 70px 0 20px;
  }
}

.section-hero .content .hero_bg_movie {
  position: fixed;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  background: url(/csmembers/images/service/diamond/hero-bg_pc.jpg) no-repeat center center/cover;
  top: 0;
  left: 0;
  z-index: -1;
}
@media only screen and (max-width: 640px) {
  .section-hero .content .hero_bg_movie {
    background: url(/csmembers/images/service/diamond/hero-bg_sp.jpg) no-repeat center center/cover;
  }
}

.section-hero .content .block {
  text-align: center;
  position: relative;
  z-index: 1;
}
.section-hero .content .block .hero_img {
  padding-bottom: 30px;
}
.section-hero .content .block .hero_img img {
  width: 150px;
  max-width: 100%;
}
.section-hero .content .block .hero_name {
  padding: 10px 0;
}
.section-hero .content .block .hero_name img {
  width: 300px;
  max-width: 100%;
}
@media only screen and (max-width: 640px) {
  .section-hero .content .block .hero_img {
    padding-bottom: 10px;
    padding-right: 20px;
    padding-left: 20px;
  }
  .section-hero .content .block .hero_img img {
    width: 80px;
  }
  .section-hero .content .block .hero_name {
    padding: 10px 20px 0;
  }
  .section-hero .content .block .hero_name img {
    width: 200px;
  }
}

.section-hero .content .block .symbol_box .symbol {
  position: relative;
}
.section-hero .content .block .symbol_box .symbol .symbol_in {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 147px;
  animation: symbol_in 10s ease-out infinite;
}
.section-hero .content .block .symbol_box .symbol .symbol_out {
  width: 241px;
  animation: symbol_out 15s ease-in-out infinite 1s;
}
@keyframes symbol_in {
  0% {
    transform: translate(-50%, -50%) rotate(0);
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}
@keyframes symbol_out {
  0% {
    transform: rotate(0);
  }
  20% {
    transform: rotate(-260deg);
  }
  70% {
    transform: rotate(0);
  }
}

.section-hero .elem-hero-logo .hero_name{
  margin-top: 30px;
}
.section-hero .elem-hero-logo .part1>img,
.section-hero .elem-hero-logo .part2>img{
  width: 100%;
}
.section-hero .elem-hero-logo .hero_img{
  position: relative;
  width: 150px;
  height: 150px;
  margin-left: auto;
  margin: auto;
}
.section-hero .elem-hero-logo .part1,
.section-hero .elem-hero-logo .part2{
  width: 100%;
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  /* outline: 1px solid #FFF; */
}
@media only screen and (max-width: 640px) {
  .section-hero .elem-hero-logo .hero_name{
    margin-top: 10px;
  }
}



/*
// 3D ver
.section-hero .elem-hero-logo.anitype1 .hero_img{
  transform-style: preserve-3d;
  perspective: 150px;
}
.section-hero .elem-hero-logo.anitype1 .hero_name{
  transform-origin:center center -100px;
  animation: ani-part10 2.0s cubic-bezier(0,.6,.3,1) 1.3s 1 both;
}
@keyframes ani-part10 {
  0% {transform:rotateY(-40deg);opacity: 0;}
  100% {transform:rotateY(0deg);opacity: 1;}
}

.section-hero .elem-hero-logo.anitype1 .part1{
  transform-origin:center center -40px;
  animation: ani-part11 3s cubic-bezier(0,.6,.3,1) 1s 1 both;
}
@keyframes ani-part11 {
  0% {transform:rotateY(80deg);opacity: 0;}
  100% {transform:rotateY(0deg);opacity: 1;}
}

.section-hero .elem-hero-logo.anitype1 .part2{
  transform-origin:center center -40px;
  animation: ani-part12 2.0s cubic-bezier(0,.6,.3,1) 1.2s 1 both;
}
@keyframes ani-part12 {
  0% {transform:rotateY(-90deg);opacity: 0;}
  100% {transform:rotateY(0deg);opacity: 1;}
}


@media only screen and (max-width: 640px) {
  .section-hero .elem-hero-logo .hero_name{
    margin-top: 10px;
  }
  .section-hero .elem-hero-logo .hero_img{
    width: 80px;
    height: 80px;
  }
  .section-hero .elem-hero-logo.anitype1 .hero_name{
    transform-origin:center center -50px;
  }
  .section-hero .elem-hero-logo.anitype1 .part1{
    transform-origin:center center -20px;
  }
  .section-hero .elem-hero-logo.anitype1 .part2{
    transform-origin:center center -20px;
  }
}

*/




/*
//
.section-hero .elem-hero-logo.anitype2{
  margin-top: -145px;
}
.section-hero .elem-hero-logo.anitype2 .part1,
.section-hero .elem-hero-logo.anitype2 .part2{
  opacity: 0;
}
.section-hero .elem-hero-logo.anitype2 .part1{
  animation: ani-part21 3s cubic-bezier(0,.6,.3,1) 0.9s 1 both;
}
.section-hero .elem-hero-logo.anitype2 .part2{
  animation: ani-part21 3s cubic-bezier(0,.6,.3,1) 1.1s 1 both;
}
@keyframes ani-part21 {
  0% {opacity: 0;}
  100% {opacity: 1;}
}


.section-hero .elem-hero-logo.anitype2 .hero_name{
  position: relative;
  display: inline-block;
  font-size: 0;
  line-height: 1;
}
.section-hero .elem-hero-logo.anitype2 .hero_name_dup{
  position: absolute;
  top: 0;
  left: 50%;
  width: 100%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  opacity: 0;
  padding: 10px 0;
  animation:ani-part23 1.2s linear 1.2s 1 both;
}
.section-hero .elem-hero-logo.anitype2 .hero_name .part3{
  opacity: 0;
  animation:ani-part24 0.5s linear 1.2s 1 both;
}
*/





.sv-path1,
.sv-mask1{
  width: 140px;
  display: block;
  margin: 0 auto;
  -webkit-transform: rotate(45deg);
	transform: rotate(45deg);
  filter: blur(6px);
}
#cir1 {
  stroke-dasharray:450px;
  animation:line_move1 0.7s cubic-bezier(.75,0,.25,1) 0.5s 1 both;
}
#cir2 {
  stroke-dasharray:350px;
  animation:line_move2 0.7s cubic-bezier(.75,0,.25,1) 0.7s 1 both;
}
.st1{
  fill: none;
  stroke: #FFF;
  stroke-width: 8;
  stroke-miterlimit: 40;
}
.st2{
  fill: none;
  stroke: #FFF;
  stroke-width: 6;
  stroke-miterlimit: 40;
}
@media only screen and (max-width: 640px) {
  .section-hero .elem-hero-logo.anitype2{
    margin-top: -78px;
  }
  .sv-path1{
    width: 75px;
    filter: blur(2.5px);
  }
  .st1{
    stroke-width: 6;
  }
  .st2{
    stroke-width: 4;
  }
}

@keyframes line_move1 {
  0% {stroke-dashoffset:455px;}
  50% {stroke-dashoffset:0px;}
  100% {stroke-dashoffset:-450px;}
}
@keyframes line_move2 {
  0% {stroke-dashoffset:355px;}
  50% {stroke-dashoffset:0px;}
  100% {stroke-dashoffset:-345px;}
}
@keyframes ani-part23 {
  0% {filter: blur(3px) brightness(400%);opacity: 0;}
  1%{filter: blur(3px) brightness(400%);opacity: 1;}
  100% {filter: blur(1px) brightness(100%);opacity:0;}
}
@keyframes ani-part24 {
  0% {opacity: 0;}
  100% {opacity: 1;}
}



.elem-hero-logo .pc{display: block;}
.elem-hero-logo .sp{display: none;}
@media only screen and (max-width: 640px) {
  .elem-hero-logo .pc{display: none;}
  .elem-hero-logo .sp{display: block;}
}

.section-hero .elem-hero-logo.anitype3 .svg,
.part-rect1,
[id*="clip-path-sq-"],
.section-hero .elem-hero-logo.anitype3 .hero_img,
.section-hero .elem-hero-logo.anitype3 .hero_img .elem-ani,
.section-hero .elem-hero-logo.anitype3 .part0{
  width: 150px;
  height: 150px;
}

.section-hero .elem-hero-logo.anitype3 .svg{
  position: absolute;
}

/* .part-rect1{
  x: 75px;
} */
[id*="clip-path-sq-"]{
  transform-origin:50% 50%;
}
.section-hero .elem-hero-logo.anitype3 .hero_img{
  padding-bottom: 0;
}
.section-hero .elem-hero-logo.anitype3 .hero_img .elem-ani{
  position: relative;
}
.section-hero .elem-hero-logo.anitype3 .hero_img .elem-ani>*{
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  height: 100%;
  background-size: 150px;
  background-position: 0 0;
}
.section-hero .elem-hero-logo.anitype3 .part1l,
.section-hero .elem-hero-logo.anitype3 .part1r{
  width: 50%;
  background-image: url(/csmembers/images/service/diamond/logo-symbol-out.svg);
}

.section-hero .elem-hero-logo.anitype3 .part1l{
  clip-path:url(#clip-path-sq-1l);
}
.section-hero .elem-hero-logo.anitype3 .part1r{
  clip-path:url(#clip-path-sq-1r);
  transform: rotate(180deg);
  transform-origin:100% 50%;
}
.section-hero .elem-hero-logo.anitype3 .part2l,
.section-hero .elem-hero-logo.anitype3 .part2r{
  width: 50%;
  background-image: url(/csmembers/images/service/diamond/logo-symbol-in-framed.svg);
}
.section-hero .elem-hero-logo.anitype3 .part2l{
  clip-path:url(#clip-path-sq-2l);
}
.section-hero .elem-hero-logo.anitype3 .part2r{
  clip-path:url(#clip-path-sq-2r);
  transform: rotate(180deg);
  transform-origin:100% 50%;
}


@media only screen and (max-width: 640px) {
  .section-hero .elem-hero-logo.anitype3 .svg,
  .part-rect1,
  [id*="clip-path-sq-"],
  .section-hero .elem-hero-logo.anitype3 .hero_img,
  .section-hero .elem-hero-logo.anitype3 .hero_img .elem-ani,
  .section-hero .elem-hero-logo.anitype3 .part0{
    width: 75px;
    height: 75px;
  }
  .section-hero .elem-hero-logo.anitype3 .hero_img .elem-ani>*{
    background-size: 75px;
  }


  .section-hero .elem-hero-logo.anitype3 .part1l{
    clip-path:url(#clip-path-sq-1l_sp);
  }
  .section-hero .elem-hero-logo.anitype3 .part1r{
    clip-path:url(#clip-path-sq-1r_sp);
  }
  .section-hero .elem-hero-logo.anitype3 .part2l{
    clip-path:url(#clip-path-sq-2l_sp);
  }
  .section-hero .elem-hero-logo.anitype3 .part2r{
    clip-path:url(#clip-path-sq-2r_sp);
  }
  /* .part-rect1{
    x: 37.5px;
  } */
  .section-hero .elem-hero-logo.anitype3 .hero_img{
    padding: 0;
  }
}


.section-hero .elem-hero-logo.anitype3 .hero_img .elem-ani{
  filter: blur(2px) brightness(400%);
  animation:ani-part32 0.2s linear 0.5s 1 both;
}

#clip-path-sq-1l,
#clip-path-sq-1l_sp{
  animation:ani-part31 0.5s linear 0.0s 1 forwards;
}
#clip-path-sq-1r,
#clip-path-sq-1r_sp{
  animation:ani-part31 0.5s linear 0.25s 1 forwards;
}
#clip-path-sq-2l,
#clip-path-sq-2l_sp{
  animation:ani-part31 0.5s linear 0.2s 1 forwards;
}
#clip-path-sq-2r,
#clip-path-sq-2r_sp{
  animation:ani-part31 0.5s linear 0.45s 1 forwards;
}



@keyframes ani-part31 {
  0% {transform: rotate(0deg)}
  100% {transform: rotate(360deg);}
}


.section-hero .elem-hero-logo.anitype3 .part0{
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  opacity: 0;
  animation:ani-part33 0.8s linear 0.5s 1 both;
}

@keyframes ani-part32 {
  0% {opacity: 1;}
  100% {opacity: 0;}
}
@keyframes ani-part33 {
  0% {opacity: 0;}
  100% {opacity: 1;}
}

.section-hero .elem-hero-logo.anitype3 .hero_name{
  position: relative;
  display: inline-block;
  font-size: 0;
  line-height: 1;
}
.section-hero .elem-hero-logo.anitype3 .hero_name_dup{
  position: absolute;
  top: 0;
  left: 50%;
  width: 100%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  opacity: 0;
  padding: 10px 0;
  animation:ani-part23 1.2s linear 1.2s 1 both;
}
.section-hero .elem-hero-logo.anitype3 .hero_name .part3{
  opacity: 0;
  animation:ani-part24 0.5s linear 1.2s 1 both;
}












.service_wrap {
  background: url(/csmembers/images/service/diamond/bg.jpg) repeat top left/100% auto;
  position: relative;
  overflow: hidden;
}
.service_wrap .service_out {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: transparent;
}

.section-service {
  padding-top: 80px;
  padding-bottom: 100px;
}
@media only screen and (max-width: 640px) {
  .section-service {
    padding-top: 40px;
    padding-bottom: 65px;
  }
}

/* .section-service .content .service_block {
  padding-right: 20px;
  padding-left: 20px;
} */
@media only screen and (max-width: 640px) {
  .section-service .content .service_block {
    padding: 0;
  }
}

@media only screen and (min-width: 641px) {
  .section-service .content .block_01clol {
    margin-bottom: 55px;
  }
  .section-service .content .block_02clol {
    margin-bottom: 20px;
  }
}
.section-service .content .block_01clol {
  position: relative;
}
.section-service .content .block_01clol:before {
  content: "";
  width: 100vw;
  max-width: 1440px;
  padding-top: 80%;
  /* padding-top: 70%; */
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  /* background: url(/csmembers/images/service/diamond/block_01clol-bg_pc.png) no-repeat center center/100% 100%; */
  z-index: 0;
  /* background: radial-gradient(rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)); */
  /* background: radial-gradient(#fff, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.1), transparent 70%); */
  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffffff+0,ffffff+100&1+0,0+49 */
  background: -moz-radial-gradient(center, ellipse cover, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 70%, rgba(255, 255, 255, 0) 100%); /* FF3.6-15 */
  background: -webkit-radial-gradient(center, ellipse cover, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 70%, rgba(255, 255, 255, 0) 100%); /* Chrome10-25,Safari5.1-6 */
  background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 70%, rgba(255, 255, 255, 0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
  background-repeat: no-repeat;
  /* background-size: 100% 100%; */
}
.section-service .content .service_item > dt {
  cursor: pointer;
  transition: all 0.3s ease-in;
}
@media only screen and (min-width: 641px) {
  .section-service .content .service_item > dt:hover {
    transform: scale(1.02);
  }
  .section-service .content .service_item.active > dt:hover {
    transform: scale(1);
  }
}
@media only screen and (max-width: 640px) {
  .section-service .content .block_01clol:before {
    padding-top: 100%;
    width: calc(100vw + 75px);
    background: url(/csmembers/images/service/diamond/block_01clol-bg_sp.png) no-repeat center center/100% 100%;
  }
}

.section-service .content .block_01clol .service_item .item {
  text-align: right;
  position: relative;
}
.section-service .content .service_item .item {
  box-shadow: 10px 10px 10px #000;
}
.section-service .content .service_item .item img {
  width: 100%;
  max-width: 100%;
}
.section-service .content .service_item .item_figcaption {
  text-align: left;
  color: #fff;
  background-color: #000;
  padding: 15px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 18px;
}
.section-service .content .service_item .item_figcaption:after {
  content: attr(data-en-name);
  /* font-family: "Montserrat", sans-serif; */
  font-family: freight-display-pro, serif;
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  white-space: pre;
  padding-left: 10px;
  line-height: 1.3;
}
.section-service .content .block_02clol {
  position: relative;
}
.section-service .content .service_item {
  position: relative;
  transition: all 0.3s ease-in;
  /* padding: 5px 20px 20px; */
  padding: 5px 40px 55px;
}
@media only screen and (min-width: 641px) {
  .section-service .content .service_item.active {
    padding-bottom: 55px;
  }
  .section-service .content .service_item.active {
    /* transform: scale(1.1);
    transform-origin: center center; */
    box-shadow: 0px 0px 15px 0px rgba(255, 255, 255, 0.3);
    background-color: #000;
  }
}
@media only screen and (min-width: 641px) {
  .section-service .content .block_02clol {
    display: flex;
  }
  /* .section-service .content .service_item.active:hover {
    width: 100%;
  } */
  .section-service .content .service_item:hover {
    /* width: calc(100% + 40px); */
    transform-origin: center center;
  }
}
@media only screen and (max-width: 640px) {
  .section-service .content .service_item {
    padding: 5px 15px;
    margin-bottom: 20px;
  }
  .section-service .content .service_item .item_figcaption {
    padding: 10px;
    font-size: 12px;
  }
  .section-service .content .service_item .item_figcaption:after {
    font-size: 10px;
  }
}

.section-service .content .service_item > dt {
  position: relative;
}
/* .section-service .content .service_item.active > dt {
  box-shadow: none;
} */
.section-service .content .service_item > dt:before {
  content: "";
  width: 30px;
  height: 30px;
  background-color: #000;
  position: absolute;
  bottom: 0;
  left: calc(50% - 15px);
  z-index: 1;
}
.section-service .content .service_item > dt:after {
  content: "";
  width: 8px;
  height: 8px;
  position: absolute;
  bottom: 10px;
  left: calc(50% - 4px);
  border-left: 1px solid #fff;
  border-bottom: 1px solid #fff;
  transform: rotate(-45deg);
  transition: all 0.3s ease;
  z-index: 1;
}
.section-service .content .service_item.active > dt:after {
  transform: rotate(135deg);
}
/* .section-service .content .block_02clol .service_item:nth-child(odd) {
  margin-right: 35px;
} */
@media only screen and (min-width: 641px) {
  .section-service .content .block_02clol .service_item {
    width: 50%;
  }
}

.section-service .content .service_item > dd {
  text-align: left;
  width: 100%;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #000;
  padding: 0 20px 20px;
  z-index: 2;
  /* transition: all 0.3s ease; */
  /* opacity: 0; */
}
.section-service .content .service_item.active > dd {
  /* opacity: 1; */
  box-shadow: 0px 8px 15px 0px rgba(255, 255, 255, 0.3);
}
@media only screen and (max-width: 640px) {
  .section-service .content .service_item > dd {
    padding: 20px 15px 25px;
  }
}
@media only screen and (min-width: 641px) {
  .section-service:last-of-type .content .block_02clol:last-of-type .service_item:nth-last-child(-n + 2) > dd {
    position: relative;
    top: 0;
    box-shadow: none;
    padding: 40px 0 0;
  }
}
@media only screen and (max-width: 640px) {
  .section-service:last-of-type .content .block_02clol:last-of-type .service_item:last-of-type > dd {
    position: relative;
    top: 0;
    box-shadow: none;
    padding: 40px 0 0;
  }
}

.section-service .content .service_item .service_list > li a {
  color: #fff;
  display: block;
  font-size: 14px;
  padding: 5px;
}
.section-service .content .service_item .service_list > li a .service_name {
  position: relative;
  padding-left: 40px;
  display: inline-block;
}
.section-service .content .service_item .service_list > li a .service_name:before {
  content: "";
  width: 1em;
  height: 1em;
  /* transform: skewX(-45deg); */
  /* background: #4d4d4d; */
  background: url(/csmembers/images/service/diamond/logo-symbol.svg) no-repeat center center/100% 100%;
  position: absolute;
  left: 20px;
  top: calc(50% - 0.5em);
}
.section-service .content .service_item .service_list > li a .service_name:after {
  content: "";
  position: absolute;
  height: 1px;
  left: 40px;
  bottom: 0;
  background-color: #999999;
  width: 0;
  transition: all 0.3s ease;
}
@media only screen and (min-width: 641px) {
  .section-service .content .block_01clol .service_item .service_list {
    display: flex;
    flex-wrap: wrap;
  }
  .section-service .content .block_01clol .service_item .service_list > li {
    width: 50%;
  }
  .section-service .content .block_01clol .service_item .service_list > li:nth-child(odd) {
    padding-right: 10px;
  }
  .section-service .content .block_01clol .service_item .service_list > li:nth-child(even) {
    padding-left: 10px;
  }
  .section-service .content .service_item .service_list > li a:hover .service_name:after {
    width: calc(100% - 40px);
  }
}
@media only screen and (max-width: 640px) {
  .section-service .content .service_item .service_list > li a {
    font-size: 12px;
  }
  .section-service .content .service_item .service_list > li a .service_name {
    padding-left: 30px;
  }
  .section-service .content .service_item .service_list > li a .service_name:before {
    left: 10px;
  }
}

.section-service.howtouse {
  background-color: rgba(0, 0, 0, 0.4);
}
.section-service .headline {
  padding-top: 25px;
  padding-bottom: 70px;
}
.section-service .headline .headline__title {
  padding-top: 20px;
  padding-bottom: 20px;
  text-align: center;
  color: #fff;
  font-size: 23px;
  position: relative;
}
.section-service .headline .headline__title:before {
  content: "";
  width: 30px;
  height: 100%;
  transform: skewX(-45deg);
  background: rgba(255, 255, 255, 0.08);
  position: absolute;
  left: calc(50% - 15px);
  top: calc(50% - 50%);
}
@media only screen and (max-width: 640px) {
  .section-service .headline {
    padding-bottom: 40px;
  }
  .section-service .headline .headline__title {
    font-size: 14px;
    padding-top: 10px;
    padding-bottom: 10px;
  }
  .section-service .headline .headline__title:before {
    width: 20px;
    left: calc(50% - 10px);
  }
}






.service_item .item-imgp{
  position: relative;
  width: 100%;
}
.service_item .item-imgp:before{
  content:"";
  display: block;
  padding-top: 220px;
}
.service_item .item-imgp>*{
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-size: cover;
    background-position: 50%;
}
@media only screen and (min-width: 641px) {
  .section-service .content .block_02clol{
    align-items: flex-start;
  }
  .service_item.expMT{
    margin-top: -100px;
  }
  .service_item.expSZ .item-imgp:before{
    padding-top: 320px;
  }
  /*
  .service_block,
  .service_grid--{
    display: none;
  }
  .service_grid{
    display: grid;
    gap: 40px;
    grid-template-columns: repeat(2, 1fr);
    align-items:self-start;
  }
  .section-service .service_grid .service_item{
    display: block;
    padding: 0;
  }
  .service_grid .service_item img{
    height: 300px;
  }
  .service_grid .service_item.gsL img{
    height: 400px;
  }
  .service_grid .service_item.gpL{
    margin-top: -100px;
  } */
}



@media only screen and (max-width: 640px) {
  .service_item .item-imgp:before{
    padding-top: 50%;
  }
}



.service_item .target-ani{
  opacity: 0;
}
.service_item .is-ani{
  top: 0px;
  opacity: 1;
  animation: movein 0.5s cubic-bezier(0,.6,.6,1) 0s 1 both;
}
@keyframes movein {
  0% {top:30px;opacity: 0;}
  100% {top:0;opacity: 1;}}