@font-face {
    font-family: 'GmarketSansMedium';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

#vision4 .flex1{display:flex; flex-wrap: wrap;  justify-content: space-between; align-items: center;  }
#vision4 .flex1 .item{   width:47%;  }
#vision4 .flex1 .item .tit {font-family: 'GmarketSansMedium'; font-weight:600; font-size:45px;  line-height:60px; margin-bottom:30px}
#vision4 .flex1 .item .txt {font-size:18px; line-height:28px;}

#vision4 .vision {padding-top:80px; position:relative}

#vision4 .floatL {width:60%}
#vision4 .floatR {width:35%;padding-top:0px; text-align:center;}

#vision4 h3 {font-size:38px; line-height:50px; font-weight:600; text-align:center; font-family: 'GmarketSansMedium'; }
#vision4 h3 strong {color: #ea9803}
#vision4 h4 {font-size:28px;  text-align:center;  margin:30px 0 0 0 }
/*#vision4 h3 span{position: relative; padding:0 16px;}
#vision4 h3 span:before { content: "";  width: 10px; height: 10px; background-color:#0071ce ;  position: absolute; 
right: 0; bottom: 12px;   border-radius: 50%;}*/

#vision4 img {vertical-align:top; max-width:100%;}
#vision4 .flex2{display:flex; flex-wrap: wrap;  justify-content: space-between; margin:50px auto 0 auto; width:1050px }
#vision4 .flex2 .item{  width:370px; height:370px;  text-align:center; }
#vision4 .flex2 .item:nth-child(even) {margin:0 -63px; }
#vision4 .flex2 .item:nth-of-type(1) .ico {background-color:rgba(38,145,141,0.8);}
#vision4 .flex2 .item:nth-of-type(2) .ico {background-color:rgba(0,91,172,0.8);}
#vision4 .flex2 .item:nth-of-type(3) .ico {background-color:rgba(25,45,165,0.8);}
#vision4 .flex2 .ico {/*border:1px dashed #aaa;*/  height:100%; width:100%; margin:0 auto; border-radius:50%; 
background-position:center 25%; background-repeat:no-repeat; }
#vision4 .flex2 .ico1 {background-image:url(../img/ico1.png);}
#vision4 .flex2 .ico2 {background-image:url(../img/ico2.png);}
#vision4 .flex2 .ico3 {background-image:url(../img/ico3.png);}
#vision4 .flex2 .txt { font-size:25px; width:100%; margin:-180px auto 10px auto; color:#fff; font-weight:500}
#vision4 .flex2 .txt span {display:block; font-size:16px; padding-top:15px; font-weight:500}
#vision4 .flex2 .txt2 { font-size:18px; font-weight:500; margin-top:50px;}
#vision4 .tit1 {font-size:20px; text-align:center;  padding:20px; 0}

#vision4 .cont2 {background:#f5f5f5; overflow:hidden; padding:60px 70px; }
#vision4  .flex4 {display:flex; justify-content: space-between;   padding:5px 0;   }
#vision4  .flex4 .item { font-size:16px;line-height:30px;  border-radius:0px; }
#vision4  .flex4 .item:first-child {width:100px; font-weight:600; padding:18px 0 0 0 }
#vision4  .flex4 .item:last-child {width:calc(100% - 110px); border:1px solid #dfdfdf; background:#fff; 
 font-size:16px; line-height:30px;padding:15px 25px; }

#vision4  .flex4 .tit{ position:relative;  color:#005BAC; }
/*#vision4  .flex4 .tit:before { content: "";  width: 28px; height: 1px; background-color: #bbb;  position: absolute;
 left:-35px; transform:rotate(40deg); top: 15px;   }*/

#vision4  .flex4 .item ul li {position:relative; padding-left:13px; margin-bottom:5px; }
#vision4  .flex4 .item ul li:before { content: "";  width: 4px; height: 4px; background-color: #555;  position: absolute; left: 0; top: 14px;   border-radius: 50%;}
#vision4  .flex4 .item .txt {padding-bottom:10px;}


/*---------------------------------------
  MOBILE RESPONSIVE              
-----------------------------------------*/
@media (max-width: 1023px) {
#vision4 h3 {font-size:22px; line-height:32px  }
#vision4 h3 span{ padding:0 12px;}
#vision4 h4 {font-size:18px;  text-align:center;  margin:30px 0 0 0 }
/*#vision4 h3 span:before { content: "";  width: 6px; height: 6px;   position: absolute; 
right: 0; bottom: 7px;   border-radius: 50%;}*/

#vision4 .vision {padding-top:50px; position:relative}
#vision4 .floatL {width:100%}
#vision4 .floatR {width:100%;text-align:center; padding:20px}
#vision4 .floatR img {max-width:100%}

#vision4 .flex2{display:flex; flex-wrap: wrap;  justify-content: space-between; align-items: start; margin-top:20px;  width:100% }
#vision4 .flex2 .item{  width:100%; margin-bottom:20px;  text-align:center; height:200px }
#vision4 .flex2 .item:nth-child(even) {margin:0px 0 20px 0; }
#vision4 .flex2 .item:nth-child(even) .ico {background-color:rgba(0,0,0,0.35);}
#vision4 .flex2 .ico {/*border:1px dashed #aaa;*/ background-color:rgba(2,125,182,0.7); height:100%; width:auto; margin:0 auto; border-radius:0%; 
background-position:center 20%; background-repeat:no-repeat; background-size:80px }

#vision4 .flex2 .txt { font-size:18px; font-weight:500 ; line-height:18px; width:auto; margin:-85px auto 10px auto; padding:0 1px}
#vision4 .flex2 .txt span{ font-size:13px; padding-top:10px;  font-weight:500;}
#vision4 .flex2 .plus:before {display:none;}

#vision4 .tit1 {font-size:15px; text-align:center;  padding:10px; 0}

#vision4 .cont2 {overflow:hidden; padding:0px 20px 20px 20px; margin-top:10px; }
#vision4  .flex4 {flex-direction: column;  padding:5px 0;   }
#vision4  .flex4 .item { font-size:16px;line-height:25px;  padding:10px 0px;  }
#vision4  .flex4 .tit:before { content: "";  width: 30px; height: 1px; background-color: #aaa;  top: 0px;   }
#vision4  .flex4 .item:first-child {width:100%; padding:2px 0px 5px 0; }
#vision4  .flex4 .item:last-child {width:calc(100% - 0px);  font-size:14px; line-height:22px; padding:15px }
#vision4  .flex4 .item ul li {position:relative; padding-left:10px; margin-bottom:5px; }
#vision4  .flex4 .item ul li:before { content: "";  width: 3px; height: 3px; top: 11px;  }

@media (max-width: 768px) {
}
@media (max-width: 640px) {
}
@media (max-width: 480px) {
}
@media (max-width: 320px) {
}