.sub_vi {width:100%; display:inline-block; background:url('/common/img/21495464.jpg') no-repeat bottom; background-size:cover; height:450px; color:#fff; text-align:center; position:relative;   background-attachment: fixed;}
.sub_vi::after {width:100%; height:100%; position:absolute; top:0; left:0; background:rgb(0,0,0,.5); display:inline-block; z-index:9; content:''}
.sub_vi div {position:absolute; top:50%; left:50%; color:#fff;  z-index:99;  transform: translate(-50%, -30%);  font-size:4rem; font-weight:600}
.sub_vi div span {font-size:1.2rem; color:rgba(255,255,255,.9); font-weight:400; display:block; margin-top:10px} 

.sub_vi.bg2 { background:url('/common/img/sub_vi2.jpg') no-repeat center; background-size:cover;}
.sub_vi.bg3 { background:url('/common/img/sub_vi3.jpg') no-repeat bottom; background-size:cover;}
.sub_vi.bg4 { background:url('/common/img/sub_vi4.jpg') no-repeat center; background-size:cover;}
.sub_vi.bg5 { background:url('/common/img/sub_vi5.jpg') no-repeat bottom; background-size:cover;}



#sub_con {margin-top:80px; width:100%;  font-size:17px;  line-height:1.4}

aside.sub_menu {width:230px; margin-bottom:50px  }
aside.sub_menu h3 {font-size:1.7em; line-height:1; display:none}
aside.sub_menu ul {width:100%; margin-top:0;  border-top:1px solid #ddd}
aside.sub_menu ul li {width:100%; font-size:1.05em; border-bottom:1px solid #ddd; position:relative; box-sizing:border-box; padding-left:10px; font-weight:500}
aside.sub_menu ul li a {color:#111; width:100%; display:inline-block;  padding:15px 0;}
aside.sub_menu ul li:after {content:'-'; position:absolute; right:15px; top:13px;  font-size:20px; transition: all 0.3s ease-out; color:#000; font-weight:300;   font-family: 'SUIT-Regular';}
aside.sub_menu ul li.ov {background-color:var(--main_c); }
aside.sub_menu ul li.ov:after {content:'+';     }
aside.sub_menu ul li.ov * {color:#fff}
aside.sub_menu ul li.ov:after {color:#fff}


aside.sub_menu ul li:hover {background-color:var(--main_c); }
aside.sub_menu ul li:hover:after {content:'+';     }
aside.sub_menu ul li:hover * {color:#fff}
aside.sub_menu ul li:hover:after {color:#fff}


#sub_con .sub_con_in {width:calc(100% - 300px); margin-left:auto; box-sizing:border-box; margin-bottom:100px; }
.sub_con_in .text {font-size:1.2em; }
 
.guide {width:100%; font-size:2em; border-bottom:1px solid #ddd; padding-bottom:10px; margin-bottom:40px; display:flex; align-items:flex-end }
.guide  p {margin-left:auto; font-size:.97rem; color:#333; font-weight:400 }
.guide  p span {color:var(--main_c)}


@media all and (max-width:900px) {
		#sub_con {margin-top:-10px; font-size:16px}
		#sub_con .in {padding:0}
		aside.sub_menu {width:100%; border-bottom:1px solid #ddd; overflow-x:auto}
		aside.sub_menu ul {display:flex; border-top:none;}
		aside.sub_menu ul li {width:auto;  padding:0;  border-bottom:none; white-space:nowrap;  }
		aside.sub_menu ul li a { width:auto;   padding:10px 20px;  }
		aside.sub_menu ul li:after {display:none}

		#sub_con .sub_con_in {width:100%; margin-top:50px; padding:0 5%; box-sizing:border-box}
		.guide    {justify-content:center}
		.guide  p {display:none }
		.sub_vi div {width:100%;   font-size:3rem; box-sizing:border-box; padding:0 5% }
       .sub_vi div span {font-size:1rem;  } 
 

}


/* div.img_box {border:1px solid #ddd; width:100%; text-align:center; margin-top:10px; border-radius:10px; padding:10px 0}
 */
.sub_img {width:370px; height:400px;  position:relative; flex-shrink:0; }
.sub_img p  {width:calc(100% - 50px); float:right; height:calc(100% - 50px); display:inline-block; background:url('/common/img/21495464.jpg') no-repeat center; background-size:cover !important;   position:relative; z-index:99; }
.sub_img p.p_2 { opacity:.4;  position:absolute; left:0; bottom:0; z-index:9;  } 


.bg_box {width:100%; display:inline-block; padding:80px 10%; box-sizing:border-box;  background:url('/common/img/21419104.jpg') no-repeat center; background-size:cover; position:relative; color:#fff;  text-align:center; }
.bg_box:before {width:calc(100% - 20px); height:calc(100% - 20px); position:absolute; left:10px; top:10px; border:1px solid #fff; box-sizing:border-box; content:''}
.bg_box:after {position:absolute; left:0; top:0; background:rgba(0,0,0,.7); width:100%; height:100%; content:'';}
.bg_box p {position:relative; z-index:99; font-size:1.6em; letter-spacing: 0px;  font-weight:500}
.bg_box p b {width:100%; font-weight:500; font-size:3em; display:inline-block; }




.about1 { width:100%; }
.about1 .bg_box  + div {   display:flex; flex-wrap:wrap}
.about1 dl {display:flex; border-bottom:1px solid #ddd;  font-size:16px; color:#444;  width:100%; padding-bottom:15px;  box-sizing:border-box;   margin-bottom:15px}
.about1 dl dt {width:160px; flex-shrink:0; display:flex; align-items:center }
.about1 dl dt i {color:#222; font-size:19px}
.about1 dl dt i + div {width:calc(100% - 35px); flex-shrink:0; margin-left:auto}
.about1 dl b {font-size:1.1em; color:#000; line-height:1.2; font-weight:500}
.about1 dl dd b {  display:inline-block; margin-bottom:3px;  }

.about1 dl.dl_50 {width:50%; }


.about2 {width:100%; display:flex}



.about2 .sub_img + div {width:calc(100% - 420px); margin-left:auto}


.history ul li {width:100%; display:flex; margin-bottom:20px}
.history ul li b {width:150px; flex-shrink:0}


.history_box {display:flex}
.history_box h3 {width:230px; flex-shrink:0; font-weight:500; letter-spacing:0px; line-height:1;  font-size:70px; color:#ddd}
.history_box ul {width:100%; margin-left:auto;   position:relative; padding:40px 0}
.history_box ul:before {content:''; width:1px; height:100%; background-color:var(--main_c);   position:absolute; left:10px; top:0;   }
.history_box ul li {width:100%; display:flex; margin-bottom:20px; line-height:1.5; position:Relative; padding-left:45px; box-sizing:border-box;   }
.history_box ul li:last-child {margin-bottom:0}
.history_box ul li b {width:170px; font-weight:500; flex-shrink:0; font-size:1.1em;  color:var(--main_c)}

.history_box ul li:before {width:15px; height:15px; background-color:var(--main_c);  box-sizing:border-box;  border-radius:50%; display:inline-block; content:''; position:absolute; left:3px; top:6px; }  
.history_box ul li:after { width:15px; height:15px;  content: ''; display: block; background-color: var(--main_c); opacity:0.2; border-radius: 50%; position: absolute; left:3px; top:6px; z-index: -1;  animation: dots 1.5s ease-in-out infinite;  }
.history_box ul li strong {font-weight:600; font-size:1.1em; color:#111; display:block;  }
.history_box ul li strong + p {margin-top:5px; display:inline-block}



@keyframes dots {
    0%{
      opacity: 0.5;
      transform: scale(1);
    }
    100%{
      opacity: 0;
      transform: scale(3.5);
    }
}




.product   {width:100%; display:flex; }
.product ul {width:37%; }
.product ul li img {width:100%; }
.product div {width:60%; margin-left:auto}
.product div h4 {font-size:1.5em}
.product table {width:100%; margin-top:15px; }
.product table td {border:1px solid #ddd; padding:10px}


.business .flex .img_box {width:50%; flex-shrink:0;  border-radius:0; position:relative}
.business .flex .img_box:before {background:rgba(255,255,255,.8); z-index:9; width:40px; height:1px; display:inline-block; position:absolute; right:0; top:80px; content:''}
.business .flex .img_box:after {background-color:var(--main_c); z-index:99; width:40px; height:1px; display:inline-block; position:absolute; right:-40px; top:80px; content:''}
.business .flex + .flex .img_box:before {right:auto; left:0;}
.business .flex + .flex .img_box:after {right:auto; left:-40px;}

.business .flex .text_box {width:50%; box-sizing:border-box; padding:110px 40px 130px 40px; font-size:1.06em; line-height:1.5}
.business .flex .text_box h4 {margin-bottom:15px; font-size:1.7em; color:#000}

.business .flex + .flex .text_box {text-align:right}

@media all and (min-width:900px) {
	  .history_box h3 {  writing-mode: vertical-lr;  }
}
 

@media all and (max-width:900px) {
			.about1 dl.dl_50 {width:100%}
			.about1 dl   {flex-wrap:wrap  }
			.about1 dl dt {width:100%;  margin-bottom:10px }
			.about1 dl dt br {display:none}
			.about1 dl dt i + div {width:calc(100% - 30px) }

			.about2 {flex-wrap:wrap}
			.sub_img {width:100%; height:200px;   }

			.about2 .sub_img + div  {width:100%; margin-top:50px;}

			.history_box {flex-wrap:wrap}
			.history_box h3 {width:100%; font-size:2.3em; text-align:center}
			.history_box h3 br {display:none }
			.history_box ul {width:100%; position:relative; padding:20px 0; margin-top:30px}
			.history_box ul li {display:inline-block;  padding-left:40px; margin-bottom:25px }

			.business .flex .img_box {width:100%; height:200px; order:1}
			.business .flex .text_box {width:100%; padding:20px 0; order:2}
			.business .flex + .flex .text_box {text-align:left}
			.business .flex .text_box h4  {font-size:1.5em}
			.business .flex .img_box:before {display:none } 
			.business .flex .img_box:after {display:none } 

			.product {flex-wrap:wrap}
			.product ul {width:100%; display:flex}
			.product ul li {width:50%;   overflow:hidden;  }
			.product ul li  img {min-height:100%; min-width:100%; max-width:none; }
			.product div {width:100%; margin-top:30px}


	}