
.sub_vi {background:url('/common/img/sub_vi3.png') no-repeat center center / cover, rgba(0, 0, 0, 0.35); background-blend-mode: multiply;width:100%; height:50vh; position:relative} 
.sub_vi1 {background:url('/common/img/sub_vi1_.png') no-repeat center center / cover, rgba(0, 0, 0, 0.4); } 
.sub_vi2 {background:url('/common/img/sub_vi_moto_.png') no-repeat center center / cover, rgba(0, 0, 0, 0.4); } 
.sub_vi4 {background:url('/common/img/sub_vi4_.png') no-repeat center bottom / cover, rgba(0, 0, 0, 0.3); }
.sub_vi5 {background:url(/common/img/bg_none.png) no-repeat top right / cover, url(/common/img/bg_none.png) no-repeat top right / cover, linear-gradient(267deg, rgb(255 255 255 / 70%), rgb(215 215 215) 50%);background-blend-mode:normal;}

.sub_vi .in{position:relative; height:100%}
.sub_vi .t {  position:absolute;  left:50%; width:100%;  color:#fff; z-index:99; transform: translate(-50%, 0);  max-width:1400px; top:44%;  }
.sub_vi .t h3 { font-size:4rem; font-weight:500; text-shadow:4px 4px 10px rgba(0,0,0,.2)}
.sub_vi .t p {font-size:1.1rem; margin-top:20px; color:rgba(255,255,255,.9)}

section.sub_cont  { background-color:#fff; padding:100px 0; position:relative}
.sub_cont .text_box { color:#333; width:100% }
.sub_cont .text_box h3 { color:#000; }
.sub_cont .text_box h4 { font-size:1.25em }
.sub_cont .text_box h5 { font-size:1.1em; margin-bottom:3px }

.sub_cont .text_box h3:after { background:#ddd;   }
.sub_cont .text_box ul {gap:10px}
.sub_cont .text_box ul li {width:50%; background-color:#f5f5f5;  padding:20px 15px; box-sizing:border-box}


@media all and (min-width:900px) {
     .sub_vi .t  br {display:none}

}
@media all and (max-width:1400px) {
	.sub_vi5 {background:url(/common/img/bg_1400.png) no-repeat top right / cover, linear-gradient(267deg, rgb(255 255 255 / 70%), rgb(215 215 215) 50%);background-blend-mode:normal;}
}
  @media all and (max-width:900px) {
		.sub_vi {height:360px}
		.sub_vi2 {background:url('/common/img/m_sub_vi2.png') no-repeat top center / cover, rgba(0, 0, 0, 0.3); } 
		.sub_vi3 {background:url('/common/img/m_sub_vi.png') no-repeat top center / cover, rgba(0, 0, 0, 0.35); } 
		.sub_vi4 {background:url('/common/img/m_sub_vi4.png') no-repeat top center / cover, rgba(0, 0, 0, 0.3); } 
		.sub_vi5 {background:url(/common/img/bg_900.png) no-repeat center / cover, linear-gradient(267deg, rgb(255 255 255 / 70%), rgb(215 215 215) 50%);background-blend-mode:normal;}
		.sub_vi .t {  top:43%;  }
		.sub_vi .t h3 { font-size:2.5rem; width:100%; padding-left:5%;   box-sizing:border-box }
		.sub_vi5 .t h3{display:none}
		.sub_vi .t p {display:none}

		section.sub_cont  {   padding:80px 0;  }
		.h3_div {margin-bottom:0}
		.sub_cont .text_box ul {gap:0}
		.sub_cont .text_box ul li {width:100%; margin-bottom:10px}
		.sub_cont .text_box ul li:last-child {margin-bottom:0}
.sub_cont .text_box h4 { font-size:1.2em }



}
.contactus {margin-top:0;  }


.visual_lnb{position: absolute; left:0; bottom:0;  animation: text-active-animation 0.8s ease both; animation-delay:0.7s; z-index:999;  background:var(--main_c); display:flex; align-items:center;  height:60px}
.visual_lnb dl {display:flex; align-items:center;}
.visual_lnb dl dt {width:60px; text-align:center}
.visual_lnb dl dt a {display:block; color:#fff}
.visual_lnb dl dd {position:relative;  height:60px; display:flex; align-items:center;}
.visual_lnb dl dd:before {content:' ';   display:block; position:relative; width:1px; height:24px; background:rgba(255,255,255,0.7); margin-right:20px  }
.visual_lnb dl dd .txt {  font-size:1.1em; color:#fff;  display:flex; align-items:center; justify-content:space-between; width:250px;}
.visual_lnb dl dd .txt span {margin-right:20px; font-weight:300; font-size:14px}
.visual_lnb dl dd .txt.on:after{transform:rotate(180deg);}
.visual_lnb dl dd ul {display:none; position:absolute; top:60px; left:0; width:100%; background-color:#fff; border:1px solid #ddd; border-top:none; padding:20px 15px; box-sizing:border-box} 
.visual_lnb dl dd:hover ul {display:block;} 
.visual_lnb dl dd  ul:hover {display:block;} 
.visual_lnb dl dd ul li:hover {text-decoration:underline} 


  @media all and (max-width:900px) {
	.visual_lnb {width:100%}
	.visual_lnb dl dt {display:none}
	.visual_lnb dl {width:100%}
	.visual_lnb dl dd:before {  margin-right:15px  }
	.visual_lnb dl dd:nth-child(2):before {background:rgba(255,255,255,0); }
	.visual_lnb dl dd {width:50%}
	.visual_lnb dl dd .txt {  font-size:1em;  width:100%;}


}



.company01{display:flex;align-items:center;gap:80px;}
.company01:last-child{flex-direction:row-reverse;margin-top:80px;}
.company01 .imgbox{width:40%;position:relative;}
.company01 .imgbox::after{
    position: absolute;
    top: 0;
    left: -45px;
    content: 'VISION DELIVERY';
    color: #ccc;
    writing-mode: vertical-rl;
    letter-spacing: 5px;
    font-weight: 900;
    font-family: 'Giants-Inline';
    font-size: 2em;
}
.company01:last-child .imgbox::after{
	left:auto;
    right: 0;
    top: -45px;
    writing-mode: horizontal-tb;
}
.company01 .txtbox{width:60%;line-height:1.6;font-size:1.05em;font-weight:300;}
.company01 .txtbox b{font-size:1.6em;font-weight:700;}
.company01 .txtbox span{color:var(--main_c)}
.company01:last-child .imgbox{width:60%;}
.company01:last-child .txtbox{width:40%;}
.company01 img{width:100%;}

@media all and (max-width:900px) {
	.company01{display:block;}
	.company01 .imgbox{width:100%;}
	.company01 .txtbox{width:100%;}
	.company01 .imgbox::after{top:10px;left:0px;}
	.company01:last-child .imgbox{width:100%;}
	.company01:last-child .txtbox{width:100%;}
 }

.company03 .txtbox{font-size:1.2em;margin-top:40px;color:#333}
.company03 .txtbox li{margin-bottom:15px;display:flex;align-items:center;justify-content:center;}
.company03 .txtbox li:last-child{margin-bottom:0;}
.company03 .txtbox i{margin-right:10px; color:var(--main_c);font-size:1.4em;animation: ani 2s linear infinite;}
.company03 .txtbox li:nth-child(2) i{animation: ani2 2s linear infinite;}
.company03 .txtbox li:nth-child(3) i{animation: ani3 3s linear infinite;}
@keyframes ani{
	0%{opacity:1}
	50%{opacity:.3}
    100% {opacity:1}
}
@keyframes ani2{
	0%{opacity:.3}
	50%{opacity:1}
	100%{opacity:.3}
}
@keyframes ani3{
	0%{opacity:1}
	50%{opacity:.3}
    70% {opacity:1}
    100% {opacity:.3}
}
.service01 .txtbox{position:relative;width:90%;margin:0 auto;margin-top:-120px;padding:60px 40px;text-align:center;box-sizing:border-box;background:#fff;font-size:1.15em;line-height:1.6;box-shadow:1px 1px 5px 0px rgba(0, 0, 0, 0.2);color:#000;background:url(/common/img/bg.png) no-repeat center center / cover, rgb(255 255 255 / 94%);background-blend-mode:hue;font-weight:300;}
@media all and (max-width:900px) {
	.service01 .txtbox{width:100%;margin-top:0;padding:20px;font-size:1em;}
}

 /*조직도*/

.organ > div {position:relative;}
.organ .box_wrap  {position:relative; z-index:9; display:flex; flex-wrap:wrap; justify-content : space-between; align-items:flex-start; margin-top:70px}
.organ .box_wrap div {width:25%; text-align:center; }
.organ .box_wrap p.b {width:100%;  background-color:#a7a7a7; line-height:60px; font-size:1.1rem; font-weight:500; color:#fff; position:relative}
.organ .box_wrap p.b:after {content: '';
    width: calc(100% - 10px);
    height: calc(100% - 10px);
    display: inline-block;
    border: 1px solid #fff;
    position: absolute;
    top: 5px;
    left: 5px;
    box-sizing: border-box;
}

.organ .box_wrap p.s {width:100%;  background-color:#f1f1f1;  margin-top:10px; line-height:40px;   font-size:1rem; font-weight:500; color:#666;}
.organ  .box1 {width:270px; text-align:center; background-color:#333; line-height:60px; font-size:1.3rem; color:#fff; margin:0 auto; border-radius:60px; font-weight:600; position:relative; z-index:9;}
 
.organ .line_x {width:76%; height:1px; background-color:#999; display:inline-block; position:absolute; left:12%; top:90px}
.organ .line_y {width:1px; height:50px;  background-color:#999; display:inline-block; position:absolute;  top:90px}
.organ .line_y:nth-child(1) {left:12%;}
.organ .line_y:nth-child(2) {left:50%; top:40px; height:100px}
.organ .line_y:nth-child(3) {right:12%;}


@media all and (max-width:900px) {
	.organ .box_wrap{margin-top:50px;display:block;}
	.organ .box_wrap div {width: 220px;margin:0 auto;margin-bottom:20px;}
	.organ .line_x {display:none}
	.organ .line_y:nth-child(1) {display:none}
	.organ .line_y:nth-child(2){height:240px;}
	.organ .line_y:nth-child(3) {display:none}

  }



.menual{}
.menual .in{display:flex;gap:30px;flex-wrap:wrap;}
.menual .box{padding:30px;box-sizing:border-box;width:calc(33.33% - 20px);box-shadow:2px 10px 15px 3px rgb(41 41 41 / 15%);border-top:2px solid #000;}
.menual dl{margin-bottom:20px;}
.menual dt{color:#fff;background:#83c037;color:#fff;padding:3px 20px;border-radius:30px;box-sizing:border-box;display:inline-block;margin-bottom:10px;}
.menual dd h4{font-size:1.2em;font-weight:700;color:#555;margin-bottom:5px;display:flex;align-items:center;}
.menual dd span{color:#333;display:inline-block;width:100%;font-weight:300;margin-bottom:5px;}
.menual dd b{font-size:1.8em;letter-spacing:-1px;font-style:italic;margin-right:15px;}
.menual img{max-width:100%;width:80%;}
@media all and (max-width:1000px) {
/* 	.menual .in{display:block;} */
	.menual .box{width:calc(50% - 20px);margin-bottom:30px;}
}
@media all and (max-width:600px) {
/* 	.menual .in{display:block;} */
	.menual .box{width:100%;padding:20px;}
}
.menual02 table{width:90%;border-top:3px solid #83c037;margin:0 auto;}
.menual02 th,td{text-align:center;border-box;border:1px solid #ddd;}
.menual02 th{padding:15px;box-sizing:border-box;font-weight:600;font-size:1.1em;background:#f9f9f9;}
.menual02 td{width:25%;}
.menual02 td:last-child{width:50%;}
.menual02 img{width:50%;}
@media all and (max-width:600px) {
	.menual02 img{width:100%;}
}

.menual04 dd b{font-size:1.5em;}
.menual05 img{width:100%;}

.menual06 .box{width:100%;}
.menual06 li{margin-bottom:10px;font-size:1.1em;    display: flex;    align-items: center;}
.menual06 b{font-size:1.6em;letter-spacing:-1px;margin-right:10px;background:#83c037;color:#fff;padding:5px 10px;box-sizing:border-box;border-radius:10px;}

@media all and (max-width:1000px) {
	.menual06 li{align-items:flex-start}
}
