@import url("sub.css");



.vision_diagram {width:700px; aspect-ratio: 700 / 647; background:url("/eng/about/img/vision_diagram.svg")no-repeat center / 100% auto; margin:0 auto; }
.vision_diagram .diagram_in {width:100%; height:100%; position:relative;}
.vision_diagram .diagram_in dl {position:absolute; display:flex; flex-wrap:nowrap; gap:0 80px;}
.vision_diagram .diagram_in dl dt {position:relative; aspect-ratio: 1 / 1; width:300px; display:flex; flex-wrap:wrap; align-content:center; justify-content:center; text-align:center;}
.vision_diagram .diagram_in dl dt::after {content:''; width:20px; height:20px; border-radius:100%; border:5px solid var(--white); box-sizing:border-box; position:absolute; z-index:10;}
.vision_diagram .diagram_in dl dt .fs24 {width:100%; color:var(--white); margin:10px 0 0;}
.vision_diagram .diagram_in dl dd .fs20 {position:relative; color:var(--black); margin:0 0 5px;}
.vision_diagram .diagram_in dl dd .fs20::after {content:''; width: 50px; height: 1px; background:var(--border); position:absolute; top:50%;}
.vision_diagram .diagram_in dl dd .fs20 .fs16 {display:block;}

.vision_diagram .diagram_in dl.one {top:0; left:-220px; align-items:center; }
.vision_diagram .diagram_in dl.one dt {order:2;}
.vision_diagram .diagram_in dl.one dt::after {background:var(--sub2); top:45%; left:0; transform:translate(-50%,-50%);}
.vision_diagram .diagram_in dl.one dd {order:1; text-align:right;}
.vision_diagram .diagram_in dl.one dd .fs20::after {right:-80px;}
.vision_diagram .diagram_in dl.two {bottom:0; right:-430px; gap:0 8px;}
.vision_diagram .diagram_in dl.two dt::after {background: linear-gradient(99deg, #23A3DD -0.22%, #3FAC4B 99.66%); top:0; right:70px;}
.vision_diagram .diagram_in dl.two dd {max-width:422px;  transform:translateY(-65%);}
.vision_diagram .diagram_in dl.two dd .fs20::after {left:-90px; width: 76.5px; height: 177px; background:transparent url("/eng/about/img/dia_line.svg")no-repeat center;}

.vision_diagram .diagram_in dl.three {bottom:0; left:-350px; align-items:flex-end;}
.vision_diagram .diagram_in dl.three dt {order:2;}
.vision_diagram .diagram_in dl.three dt::after {background:var(--sub); top:60%; left:0;}
.vision_diagram .diagram_in dl.three dd {order:1; text-align:right; position:relative; bottom:60px;}
.vision_diagram .diagram_in dl.three dd .fs20::after {right:-92px;}








/*******************************************************************************
@media ~1500px
*******************************************************************************/
@media all and (max-width:1650px) {

.vision_diagram {width:480px;}
.vision_diagram .diagram_in dl {gap:0 40px;}
.vision_diagram .diagram_in dl dt {width:200px;}
.vision_diagram .diagram_in dl dt img {width:60px;}
.vision_diagram .diagram_in dl dd {max-width:200px;}
.vision_diagram .diagram_in dl dd .fs20::after {width:25px;}
.vision_diagram .diagram_in dl.one {left:-100px;}
.vision_diagram .diagram_in dl.one dt::after {top:36%;}
.vision_diagram .diagram_in dl.one dd .fs20::after {right:-40px;}
.vision_diagram .diagram_in dl.two {right:-288px;}
.vision_diagram .diagram_in dl.two dt::after {top:4px; right:109px;}
.vision_diagram .diagram_in dl.two dd {max-width:280px; transform:translate(-15%,-80%);}
.vision_diagram .diagram_in dl.three {left:-238px;}
.vision_diagram .diagram_in dl.three dt::after {top:29%; left:-9px;}
.vision_diagram .diagram_in dl.three dd .fs20::after {right:-42px;}


}
/*******************************************************************************
@media ~1500px
*******************************************************************************/
@media all and (max-width:1500px) {




}
/*******************************************************************************
@media ~1300px
*******************************************************************************/
@media all and (max-width:1200px) {

.vision_diagram .diagram_in dl.two dd {transform:translate(-15%,-111%); }
.vision_diagram .diagram_in dl.two dt::after {top:-24px;}


}
/*******************************************************************************
@media 769~980px
*******************************************************************************/
@media all and (max-width:980px) {



.vision_diagram {width:340px;}
.vision_diagram .diagram_in dl {gap:0 40px;}
.vision_diagram .diagram_in dl dt {width:150px;}
.vision_diagram .diagram_in dl dt img {width:50px;}
.vision_diagram .diagram_in dl dt .fs24 {font-size:18px;}
.vision_diagram .diagram_in dl dd {max-width:135px;}
.vision_diagram .diagram_in dl dd .fs20::after {width:25px;}
.vision_diagram .diagram_in dl.one {left:-81px;}
.vision_diagram .diagram_in dl.one dt::after {top:25%; left:7px;}
.vision_diagram .diagram_in dl.one dd .fs20::after {right:-40px;}
.vision_diagram .diagram_in dl.two {right:-209px; bottom:-22px;}
.vision_diagram .diagram_in dl.two dt::after {top:11px; right:66px;}
.vision_diagram .diagram_in dl.two dd {max-width:200px;transform:translate(-15%,-80%);}
.vision_diagram .diagram_in dl.two dd .fs20::after {background-position:top left; left:-56px; width:44.5px; height:142px;}
.vision_diagram .diagram_in dl.three {left:-175px;}
.vision_diagram .diagram_in dl.three dt::after {top:10%; left:9px;}
.vision_diagram .diagram_in dl.three dd .fs20::after {right:-42px;}



}
/*******************************************************************************
@media 481~680px
*******************************************************************************/
@media all and (max-width:680px) {

.vision_diagram {width:100%; aspect-ratio: unset; background:transparent;}
.vision_diagram .diagram_in dl {position:relative; gap:0 30px !important; top:0 !important; right:0 !important; left:0 !important; bottom:0 !important; align-items:center !important;}
.vision_diagram .diagram_in dl+dl {margin:15px 0 0;}
.vision_diagram .diagram_in dl dt {width:120px; border-radius:100%; order:1 !important; padding:10px; box-sizing:border-box;}
.vision_diagram .diagram_in dl dt::before {content:''; width:20px; height:1px; background:var(--border); position:absolute; top:50%; right:-20px;}
.vision_diagram .diagram_in dl dt::after {border-width:2px; width:10px; height:10px; top:50% !important; left:auto !important; right:0 !important; transform: translate(50%, -50%) !important;}
.vision_diagram .diagram_in dl dt img {width:40px;}
.vision_diagram .diagram_in dl dt .fs24 {font-size:15px; margin:5px 0 0;}
.vision_diagram .diagram_in dl dd {flex:1; order:2 !important; text-align:left !important; top:0 !important; right:0 !important; left:0 !important; bottom:0 !important; transform:translateY(0) !important; max-width:100% !important;}
.vision_diagram .diagram_in dl dd .fs20::after {display:none;}

.vision_diagram .diagram_in dl.one dt {background:var(--sub2);}
.vision_diagram .diagram_in dl.two dt {background:linear-gradient(154deg, #23A3DD 17.1%, #3FAC4B 100%);}
.vision_diagram .diagram_in dl.three dt {background:var(--sub);}




}