@charset "UTF-8";
 
.sub_vi {width:100%; height:100%;   position:relative; box-sizing:border-box; }
.sub_vi_img {position:absolute; width:60%; top:47%; left:50%; transform: translate(-50%, -50%);    animation: animate2 1s linear;   height:15vw; }
h2.guide {font-size:4rem; line-height:1em; font-family: 'Montserrat', sans-serif;}

@media all and (max-width:850px) {
   .sub_vi_img {width:80%; }
}

#scroll-snap {
 
   
}
#scroll-snap_section {
/* 	height: 100%; width:100vw;
	   overflow-y: auto;
	scroll-snap-type: y mandatory;
	scroll-behavior: smooth;  */
}
#scroll-snap section {
	/* height: 100vh;
	scroll-snap-align: center; */
position:relative
}


 #content {width:100%;  display:inline-block;   }
 #content section {width:100%; box-sizing:border-box;  color:#fff; position:relative; z-index:99; }
 #content section .info_box {width:100%;    display:flex; justify-content:space-between;  position:relative;  }
  #content section .info_box:last-child  {margin-bottom:0}
 #content section .info_box p img {width:100%;}
 #content section .info_box div {width:53%;  margin-left:auto; font-size:1.1rem; line-height:1.8em; color:rgba(255,255,255,.9); box-sizing:border-box; padding:8% 4%; font-weight:400}
 #content section .info_box div.right_box {text-align:right; box-sizing:border-box;   margin-right:auto; margin-left:0}

#content section .info_box div.rgba_box {background-color:rgba(0,0,0,.3); width:100%;  }


 #content section .info_box p.work_img {width:45%;  display:inline-block;  position:absolute; overflow:hidden; height:100%; }
 #content section .info_box p.work_img img {position:absolute; top:50%; left:0;  transform: translate(0, -50%); opacity: 0.4; filter: alpha(opacity=40); transition: all 0.3s ease-out;  cursor:pointer }
 #content section .info_box p.work_img img:hover {opacity: 1.0; filter: alpha(opacity=100); }

#content section h1 {font-family: 'Montserrat', sans-serif; }
 #content section .info_box div h4 {padding-bottom:70px; font-weight:800; width:100%; display:inline-block;   position:relative; margin-top:10px;}
 #content section .info_box div h4 p  {color:rgba(255,255,255,.15); font-size:3rem;  position:absolute; top:-35px; width:100%; font-family: 'Montserrat', sans-serif;}
  #content section .info_box div h4 span  {font-size:3.3rem;  color:#fff; position:relative; letter-spacing:-4px; font-weight:800;  }
 
  #content section .info_box_c  { display:inline-block;   }
 #content section .info_box_c div {width:100%; text-align:center}

  #content section .info_box   ul li {width:100%;}
  #content section .info_box   ul li b {color:#fff}

#content section div.cresemble_one_wrap {width:100%; display:flex; justify-content:center; padding:3.5vw 0 ; align-items:center }
#content section div.cresemble_one_wrap p {width:10vw; border:5px solid rgba(255,255,255,.2);  height:10vw; min-width:150px; min-height:150px; display:flex; align-items:center; justify-content :center; text-align:center; border-radius:50%; font-size:1.5rem; font-family: 'Montserrat', sans-serif; transition: all 0.5s ease-out;}
 #content section div.cresemble_one_wrap span.plus {font-size:3rem; line-height:10vw; margin:0 30px}

#content section div.cresemble_one_wrap p:hover {border:5px solid rgba(255,255,255,.8)}


@media all and (max-width:850px) {

#content section .info_box div h4 p  { font-size:3rem;  }
#content section .info_box div h4 span  {font-size:3rem;  }

}
 @-webkit-keyframes ani-mouse {
	0% {
	opacity: 1;
	top: 29%;
	}
	15% {
	opacity: 1;
	top: 50%;
	}
	50% {
	opacity: 0;
	top: 50%;
	}
	100% {
	opacity: 0;
	top: 29%;
	}
}
@-moz-keyframes ani-mouse {
	0% {
	opacity: 1;
	top: 29%;
	}
	15% {
	opacity: 1;
	top: 50%;
	}
	50% {
	opacity: 0;
	top: 50%;
	}
	100% {
	opacity: 0;
	top: 29%;
	}
}
@keyframes ani-mouse {
	0% {
	opacity: 1;
	top: 29%;
	}
	15% {
	opacity: 1;
	top: 50%;
	}
	50% {
	opacity: 0;
	top: 50%;
	}
	100% {
	opacity: 0;
	top: 29%;
	}
}
 .scroll-btn {
	display: block;
	position: absolute;
	left: 0; bottom:10%;
	right: 0;  
	text-align: center;  
}
.scroll-btn p {
width:100%;
	display: inline-block;
	line-height: 18px;
	font-size: 13px;
	font-weight: normal;
 	color: #ffffff; margin-top:-10px;
 	letter-spacing: 2px;
}
.scroll-btn > *:hover,
.scroll-btn > *:focus,
.scroll-btn > *.active {
	color: #ffffff;
}
.scroll-btn > *:hover,
.scroll-btn > *:focus,
.scroll-btn > *:active,
.scroll-btn > *.active {
	opacity: 0.8;
	filter: alpha(opacity=80);
}
.scroll-btn .mouse {
	position: relative;
	display: block;
	width: 35px;
	height: 55px; 
	margin: 0 auto 20px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	border: 3px solid white;
	border-radius: 23px;
}
.scroll-btn .mouse > * {
	position: absolute;
	display: block;
	top: 29%;
	left: 50%;
	width: 8px;
	height: 8px;
	margin: -4px 0 0 -4px;
	background: white;
	border-radius: 50%;
	-webkit-animation: ani-mouse 2.5s linear infinite;
	-moz-animation: ani-mouse 2.5s linear infinite;
	animation: ani-mouse 2.5s linear infinite;

}

.square {width:650px; height:400px; display:inline-block; position:relative; }
.square * {font-family: 'Montserrat', sans-serif !important;}
.square  div.box {transform: translate(-50%, -50%) !important; position:absolute; top:50%; left:50%;  width:250px; height:250px; text-align:center; border:5px solid rgba(255,2555,255,.3); box-sizing:border-box;

}

.square  div.box  img  {transform: translate(-50%, -50%) !important; position:absolute; top:50%; left:50%;  }


.square  p {display:inline-block;   position:absolute; font-size:2rem; font-weight:600; color:rgba(255,2555,255,.7); cursor:pointer;
/* -webkit-animation: scale-up-center 2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both infinite;
	        animation: scale-up-center 2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both infinite; */}


.square  p:hover {color:#fff}
.square  p:nth-child(1) {top:0; left:50%; transform: translate(-50%, 0) !important; }
.square  p:nth-child(2) {top:50%;  left:0;  transform: translate(0, -50%) !important; }
.square  p:nth-child(3) {bottom:0; left:50%;  transform: translate(-50%, 0) !important; }
.square  p:nth-child(4) {top:50%;  right:0;  transform: translate(0, -50%) !important; }



.sub11 {width:250px; height:250px;transform: translate(-50%, -50%) !important; position:absolute; top:50%; left:50%;   box-sizing:border-box;}
.sub11Inner {width:250px; height:250px;transform: translate(-50%, -50%) !important; position:absolute; top:50%; left:50%;   }

.sub11:before,
.sub11:after,
.sub11Inner:after,
.sub11Inner:before {transition:all 0.3s ease; display:block; content:''; position:absolute; background:#fff; z-index:9999999999999999; }

.sub11:before {top:0; left:0; right:100%; height:4px; }
.sub11:after {top:0; right:0; bottom:100%; width:4px; }

.sub11:hover:before{-webkit-transition-delay:0s; transition-delay:0s; right:0;}
.sub11:hover:after {-webkit-transition-delay:.2s; transition-delay:.2s; bottom:0;}

.sub11Inner:after {bottom:0; right:0; left:100%; height:5px;}
.sub11Inner:before {bottom:0; left:0; top:100%; width:5px;}

.sub11Inner:hover:after {-webkit-transition-delay:.4s; transition-delay:.4s; left:0;}
.sub11Inner:hover:before {-webkit-transition-delay:.6s; transition-delay:.6s; top:0;}


@-webkit-keyframes scale-up-center {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  30% {
    -webkit-transform: scale(1.15);
            transform: scale(1.15);
  }
  
  60% {
    -webkit-transform: scale(1.15);
            transform: scale(1.15);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }

}
@keyframes scale-up-center {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  30% {
    -webkit-transform: scale(1.15);
            transform: scale(1.15);
  }
  
  60% {
    -webkit-transform: scale(1.15);
            transform: scale(1.15);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }

}

.about_t {width:100%;  text-align:center; line-height:1.7em; font-size:1.15rem; line-height:2.2em;   color:rgba(255,255,255,.7); margin-top:700px;}
 .about_t b {font-size:1.1em; color:#fff}



.target { display:inline-block; width:100%;   }
.target h2 {font-size:3rem; width:100%; display:block; padding-bottom:30px; font-weight:600; font-family: 'Montserrat', sans-serif;}
 
section div.history { color:#fff; width:100%; box-sizing:border-box;  padding:0 18% 0 18%;  margin-top:8%}
section div.history li {width:100%; font-size:1.15rem; padding-bottom:10px }
section div.history li:last-child {padding-bottom:0}
section div.history li span {font-family: 'Montserrat', sans-serif; font-size:1.25rem; width:150px; display:inline-block}
section div.history   span.year {font-size:3rem; width:100%; display:block; padding-bottom:30px; font-weight:600; font-family: 'Montserrat', sans-serif; }


section div.ci { color:#fff; width:100%; box-sizing:border-box;   padding:0 18% 0 18%; margin-top:8%}
section div.ci img[src$=".gif"], img[src$=".png"] {
                   image-rendering: -moz-crisp-edges;         /* Firefox */
                   image-rendering:   -o-crisp-edges;         /* Opera */
                   image-rendering: -webkit-optimize-contrast;/* Webkit (non-standard naming) */
                   image-rendering: crisp-edges;
                   -ms-interpolation-mode: nearest-neighbor;  /* IE (non-standard property) */
                 }
section div.partners { color:#fff; width:100%; box-sizing:border-box;  padding:0 18% 0 18%; margin-top:8% }
section div.partners ul.partners_logo {width:100%; display:flex; flex-wrap:wrap}
section div.partners ul.partners_logo li {width:24%; margin-right:1.3% }
section div.partners ul.partners_logo li:nth-child(4n) { margin-right:0 }
section div.partners ul.partners_logo li img {width:100%}



@media all and (max-width:1240px) {
section div.history  {  padding:0 3% 0 3% !important;  }
section div.ci  {  padding:0 3% 0 3% !important;  }
section div.partners  {  padding:0 3% 0 3% !important;  }
 
}

.svg_box {position:relative; width:100%; text-align:Center; display:inline-block;  margin-top:100px; height:250px;   }
.svg_box svg { margin-top:0px; height:250px; width:300px}


 .sub_vi_text_wrap {position:absolute; width:57%;  top:50%;  left:50%; transform: translate(-45%, -60%); height:17vw;  box-sizing:border-box; animation: t_ani 1s linear;   }
 
 .sub_vi_text_wrap .text {font-size:7vw; font-weight:800; position:absolute; font-family: 'Montserrat', sans-serif; letter-spacing:-0.4vw !important; color:#505050; line-height:1em !important; }
 
 .sub_vi_text_wrap .text1 {
	position: absolute;
	 z-index:999;
	display: inline-block;
	left:36vw;  	bottom:-0.3vw;  
 	font-size:3vw;
   color:#fff;
 	font-weight:700; 
	user-select: none; letter-spacing:-0.3vw !important; 
}
.sub_vi_text_wrap .text3 {
	position: absolute;
	 z-index:999;
	display: inline-block;
	left:5vw; 
	font-family: 'Montserrat', sans-serif;
	font-size:7.5vw;
	top:50%;  transform: translate(0, -55%);   color:#fff;
 	font-weight:800;
	user-select: none; letter-spacing:-0.4vw !important
}
 .sub_vi_text_wrap .text3:first-letter {color:#b12121}


 
 @keyframes t_ani {
  0% {opacity:0}
   50% {opacity:30% }
   80% {opacity:50% }
   100% {opacity:100%}
}