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

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

#vision3 .vision {padding-top:200px; position:relative}
#vision3 .vision:before {content:""; width:1px; height:100px; background:#ccc; position:absolute; left:50%; top:65px;   transform:rotate(25deg);}
#vision3 .vision:nth-of-type(1) {padding-top: 0;}
#vision3 .vision:nth-of-type(1):before {display: none;}

#vision3 h3 {font-size:45px; font-weight:600; text-align:center; font-family: 'GmarketSansMedium'; }
#vision3 h3 span{position: relative; padding:0 16px;}
#vision3 h3 span:before { content: "";  width: 10px; height: 10px; background-color:#2F88EF ;  position: absolute; 
right: 0; bottom: 12px;   border-radius: 50%;}

#vision3 img {vertical-align:top; max-width:100%;}
#vision3 .flex2{display:flex; flex-wrap: wrap;  justify-content: space-between; align-items: center; margin-top:50px }
#vision3 .flex2 .item{  width:260px;  text-align:center;}
#vision3 .flex2 .ico {border:1px dashed #aaa; height:260px; width:260px; margin:0 auto; border-radius:50%; 
background-position:center 22%; background-repeat:no-repeat; background-size:80px; }
#vision3 .flex2 .ico1 {background-image:url(../img/ico1.png);}
#vision3 .flex2 .ico2 {background-image:url(../img/ico2.png);}
#vision3 .flex2 .ico3 {background-image:url(../img/ico3.png);}
#vision3 .flex2 .ico4 {background-image:url(../img/ico4.png);}
#vision3 .flex2 .tit {background-color:#333; border-radius:50px ; color:#fff; padding:7px 7px 8px 7px;  font-size:18px;
width:180px; margin:-115px auto 10px auto; font-weight:500;}
#vision3 .flex2 .txt { font-size:20px; font-weight:500;}
#vision3 .flex2 .txt2 { font-size:18px; font-weight:500; margin-top:50px;}
#vision3 .flex2 .plus {position:relative}
#vision3 .flex2 .plus:before {content:""; width:30px; height:30px;  background:url(../img/plus.jpg)no-repeat  center;
position:absolute; top:40%; right:-42px; z-index: 9}

#vision3 .tit1 {font-size:20px; text-align:center;  padding:20px; }
#vision3  .flex3 {display:flex; justify-content: center;  margin-top:40px; text-align:center; column-gap: 40px; }
#vision3  .flex3 .item {width:22%; border:1px solid #dbdde0; font-size:25px; font-weight:600; padding:70px 0; border-radius:30px; background-color: #fff; }
#vision3 .flex3 .item span {display:block; font-size:18px; font-weight:400;  padding-top:15px; color:#5e5e5e ;}
#vision3 .flex3 .item img {max-width:40%; margin-bottom: 10px;}
#vision3 .diagram img {height: 620px;}

#vision3 .cont2 {background:#f5f5f5; overflow:hidden; padding:70px 80px; margin-top:40px; }
#vision3  .flex4 {display:flex; justify-content: space-between; align-items: center;   padding:10px 0;   }
#vision3  .flex4 .item { font-size:25px;line-height:30px;  padding:30px 0px; border-radius:0px; }
#vision3  .flex4 .item:first-child {width:300px; font-weight:600; }
#vision3  .flex4 .item:last-child {width:calc(100% - 300px); border:1px solid #dfdfdf; background:#fff; 
text-align:center;  font-size:20px; line-height:30px; font-weight:500 }

#vision3 .info_img65 img {width:65%;}
#vision3 .info_img80 img {width:80%;}
#vision3 .info_img90 img {width:90%;}

#vision3 .prov { margin: 90px auto 0 auto; text-align: center;}
#vision3 .prov p.best {font-family: 'GmarketSansMedium'; font-size: 30px; margin-bottom: -10px; color: #545454;}
#vision3 .prov p.best2 {font-family: 'GmarketSansMedium'; font-size: 25px; color: #2f88ef;}
#vision3 .prov_part img {height: 50px;;}
#vision3 .part_zip {display:flex; margin-top: 30px; justify-content:space-around;}
#vision3 .prov_Teng {margin-top: 10px; font-size: 22px; font-weight: 800;}
#vision3 .prov_Tkor {font-size: 18px; font-weight: 500;}
#vision3 .prov_info {color:#898989; font-size: 16px; margin-top: 5px;}

/*---------------------------------------
  MOBILE RESPONSIVE              
-----------------------------------------*/
@media (max-width: 1023px) {
#vision3 h3 {font-size:25px;  }
#vision3 h3 span{ padding:0 12px;}
#vision3 h3 span:before { content: "";  width: 6px; height: 6px;   position: absolute; 
right: 0; bottom: 7px;   border-radius: 50%;}

#vision3 .flex1{display:flex; flex-wrap: wrap;  justify-content: space-between; align-items: center;  }
#vision3 .flex1 .item{   width:100%;  }
#vision3 .flex1 .item .tit {font-family: 'GmarketSansBold'; font-size:25px;  line-height:32px; margin:20px 0}
#vision3 .flex1 .item .txt {font-size:15px; line-height:22px;}

#vision3 .vision {padding-top:150px; position:relative}
#vision3 .vision:before { height:80px;  top:35px;   transform:rotate(25deg);}

#vision3 .flex2{display:flex; flex-wrap: wrap;  justify-content: space-between; align-items: start; margin-top:30px }
#vision3 .flex2 .item{  width:48%; margin-bottom:20px;  text-align:center;}
#vision3 .flex2 .ico {border:1px dashed #aaa; height:180px; width:100%; border-radius:0%; background-position:center 15px; background-size:70px }
#vision3 .flex2 .tit {background-color:#333; border-radius:50px ; color:#fff; padding:5px;  font-size:15px;
width:80%; margin:-85px auto 10px auto; font-weight:500; line-height:20px;}
#vision3 .flex2 .txt { font-size:16px; font-weight:500 ; line-height:20px;}
#vision3 .flex2 .txt2 { font-size:15px;  font-weight:500; margin-top:30px;}
#vision3 .flex2 .plus:before {display:none;}

#vision3 .tit1 {font-size:16px; text-align:center;  padding:10px;}
#vision3  .flex3 {  margin-top:10px; column-gap:10px;}
#vision3  .flex3 .item {width:100%; font-size:20px; padding:50px 10px; margin-top:10px; }
#vision3 .flex3 .item span {font-size:13px; padding-top:5px;}
#vision3 .diagram img {height: 357px;}

#vision3 .cont2 {overflow:hidden; padding:30px 20px 35px 20px; margin-top:30px; }
#vision3  .flex4 {flex-direction: column;  padding:10px 0;   }
#vision3  .flex4 .item { font-size:20px;line-height:25px;  padding:10px 0px; text-align:center; }
#vision3  .flex4 .item:first-child {width:100%; padding:0px 0px 10px 0; }
#vision3  .flex4 .item:last-child {width:calc(100% - 0px);  font-size:15px; line-height:22px;}

#vision3 .info_img65 img {width:80%; margin-top: 10px;}
#vision3 .info_img80 img {width:90%; margin-top: 10px;}


@media (max-width: 768px) {
  #vision3 .flex3 .item img {max-width: 60% !important;}
  #vision3 .info_img65 img {width:100%; margin-top: 10px;}
  #vision3 .info_img80 img {width:100%; margin-top: 10px;}
  #vision3 .info_img90 img {width:100%; margin-top: 10px;}

  #vision3 .part_zip {flex-wrap: wrap; grid-gap: 20px;}
  #vision3 .prov p.best {font-size: 25px;}
  #vision3 .prov p.best2 {font-size: 20px;}
  #vision3 .prov_part img {height: 30px;}
  #vision3 .prov_Teng {font-size: 16px; margin-top: 5px;}
  #vision3 .prov_Tkor {font-size: 15px;}
  #vision3 .prov_info {font-size: 13px;}
  #vision3 .prov_part {width: 45%;}

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

}