.main_vi {width:100%; background-color:#333; height:calc(100vh - 123px); display:flex; align-items:center; position:relative}
 .main_vi .t1 {margin-top: 0.3em; font-size: 70px; color: rgb(255, 255, 255); font-weight: 600; line-height: 1.2; opacity: 1;}
 .main_vi iframe {width:100%; height:100%; position:absolute; left:0; top:0}
 .text_contents {position:Relative; z-index:9; margin-top:-60px}
 hr {height:100px}

 @media all and (max-width:900px) {
    .main_vi .t1 {font-size:30px}
 
}

.section1 .__title2 {margin-bottom:.8em; font-size: 62px; color: #222222; font-weight:700; line-height:1.3;}



.section3 {padding:100px 0 }
.section3 .contents_ul {margin-top:60px}
.section3 .contents_ul > li{display: block;}
.section3 .contents_ul > li + li{margin-top:40px;}
.section3 .contents_wrap{min-height:270px; background: #f6f6f6;}
.section3 .text_area{padding:50px 60px;}
.section3 .img_area{width:41.1%; flex-shrink:0}
 


.section4 .contents_ul {display:flex; flex-wrap:wrap; gap:40px 30px; margin-top:60px}
.section4 .contents_ul li {width:calc(50% - 20px); background-color:#333; box-sizing:border-box;  padding-top:350px    }

.section4 .contents_ul li div { font-size: 26px; color: #fff; font-weight: 500; line-height:1.2; ; background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0% 0% , rgba(0, 0, 0, 0.8) 100%);  padding:30px; box-sizing:border-box}
.section4 .contents_ul li div p {border-top:1px solid rgba(255,255,255,.9); padding-top:30px}
 
 a.basic_btn {color: #583cf2 ; border-color: #583cf2 ; border: 1px solid #583cf2; font-weight: normal; font-weight: bold; display: inline-flex; align-items: center; gap: 5px; padding: 10px 30px; padding-top:10px }
  a.basic_btn2 {color: #fff;background-color:#583cf2;  font-weight: normal; font-weight: bold; display: inline-flex; align-items: center; gap: 5px; padding: 10px 30px }
.section6 {padding:70px 0; display:inline-block; width:100%; background-color: transparent; background:url('/common/img2/main_section6_bg.png') no-repeat center; background-size:cover; }



.scroll_me {position:absolute; bottom:50px;   width:100px; height:100px; margin-left:-50px;  left:50%}


 .scroll-btn {
	display: block;
	position: absolute;
	left: 0;
	right: 0;
	text-align: center;
}
.scroll-btn > * {
	display: inline-block;
  
 }
 
 
.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: 2px 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;


}

.scroll-btn  p {width:100%; color: #ffffff;  }

@-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%;
	}
}


  @media all and (max-width:900px) {
		.__title2 {font-size:30px !important}
		.__title3 {font-size:30px !important}
		.__title2 br {display:none !important}
		.__subTitle3  {font-size:1em !Important}
		.section3 .img_area {width:100%; height:200px; order:1 }
		.section3 .text_area {order:2}
		.section4 .contents_ul {gap:10px}
		.section4 .contents_ul li {width:calc(50% - 5px)  ; padding-top:100px }
		.section4 .contents_ul li div {font-size:1.2em}
		.__title2 span {font-size:30px !Important}
		.section7 .contents_ul li {width:50%}
		.section7 .contents_ul img {width:100%}
 		.section7 .contents_ul li ul li {width:100%}

}