@charset "utf-8";

.vision_sec01 { text-align: center}
.vision_sec01 .tit { font-weight: 600; font-size: 2em; color:#000; line-height: 1.5;}
.vision_sec01 .substance{ font-weight: 600; font-size: 1.5em;  color:#000}
.vision_sec01 .substance strong { color:var(--thm-primary); font-weight: 600; }
.vision_sec01 p { font-size: 1.1em}
.vision_sec01 .vi_ul { display: flex; width:90%; margin:0 auto; position: relative; }
.vision_sec01 .vi_ul li{padding:0 70px; width:50%; text-align: center}
.vision_sec01 .vi_ul li:after { content:''; width:1px; height:90%; position: absolute; top:20px;  right:0; border-left:dotted 2px #ddd}
.vision_sec01 .vi_ul li:last-child:after { display: none}
.vision_sec01 .vi_ul.second{ border-top:dotted 2px #ddd}
.vision_sec01 .vi_ul li .ico{ display: block; width:150px; height:150px; background-size: 55%; background-repeat: no-repeat; background-position: center; border-radius: 100%; background-color:var(--thm-primary);  position: relative; margin:0 auto 30px auto}
.vision_sec01 .vi_ul li .ico.ico_01 { background-image: url("../images/introduce/ico_01.png")}
.vision_sec01 .vi_ul li .ico.ico_02 { background-image: url("../images/introduce/ico_02.png")}
.vision_sec01 .vi_ul li .ico.ico_03 { background-image: url("../images/introduce/ico_03.png")}
.vision_sec01 .vi_ul li .ico.ico_04 { background-image: url("../images/introduce/ico_04.png")}
.vision_sec01 .vi_ul li .ico.ico_05 { background-image: url("../images/introduce/ico_05.png")}
.vision_sec01 .vi_ul li .ico.ico_06 { background-image: url("../images/introduce/ico_06.png")}
.vision_sec01 .vi_ul li p{ font-size: 1em; line-height: 1.5}
.middelWrap {height:390px; position: relative; overflow: hidden; background-image: url("../images/introduce/bg_introduce.png"); background-attachment: fixed; background-size: cover}


.vision_sec02 ul.boxUl  {}
.vision_sec02 ul.boxUl > li {padding:0 0 40px; display: flex;}
.vision_sec02 ul.boxUl li > .leftCon { width:25%;}
.vision_sec02 ul.boxUl li > .leftCon h2 { font-size:1.4em; color:#222;  line-height: normal; font-weight: 600}

.vision_sec02 ul.boxUl li > .rightCon { width:75%;  padding:0 0 40px; border-bottom:dotted 2px #ccc;}
.vision_sec02 ul.boxUl li:last-child > .rightCon  { border:0; padding:0;}
.vision_sec02 ul.boxUl li > .rightCon .visionBox { background:var(--thm-primary); color:#fff; text-align: center; height:100px; line-height: 100px; font-size: 1.2em }
.vision_sec02 ul.boxUl li > .rightCon ul.viUl01 { display: flex; justify-content: space-around}
.vision_sec02 ul.boxUl li > .rightCon ul.viUl01 li { color:var(--thm-primary); width:33%; background: #f0f2f1; height:100px; line-height: 100px; text-align: center }
.vision_sec02 ul.boxUl li > .rightCon ul.viUl02 { display: flex; justify-content: space-around}
.vision_sec02 ul.boxUl li > .rightCon ul.viUl02 li {  width:20%; font-size: .95em; line-height: 1.3; padding:0; text-align: center; margin-top:-20px;}

.vision_sec02 ul.boxUl li > .rightCon ul.viUl02 li .ico{ display: block; width:100%; height:120px; background-size: 35%; background-repeat: no-repeat; background-position: center}
.vision_sec02 ul.boxUl li > .rightCon ul.viUl02 li .ico.ico_01 { background-image: url("../images/introduce/ico_viUl02_01.png")}
.vision_sec02 ul.boxUl li > .rightCon ul.viUl02 li .ico.ico_02 { background-image: url("../images/introduce/ico_viUl02_02.png")}
.vision_sec02 ul.boxUl li > .rightCon ul.viUl02 li .ico.ico_03 { background-image: url("../images/introduce/ico_viUl02_03.png")}
.vision_sec02 ul.boxUl li > .rightCon ul.viUl02 li .ico.ico_04 { background-image: url("../images/introduce/ico_viUl02_04.png")}
.vision_sec02 ul.boxUl li > .rightCon ul.viUl02 li .ico.ico_05 { background-image: url("../images/introduce/ico_viUl02_05.png")}
.vision_sec02 ul.boxUl li > .rightCon ul.viUl03 { }
.vision_sec02 ul.boxUl li > .rightCon ul.viUl03 > li { width:50%; float: left; font-size: .95em; line-height: 1.2; margin-bottom:10px;}
.vision_sec02 ul.boxUl li > .rightCon ul.viUl03 > li:last-child { margin-bottom:0;}
.vision_sec02 ul.boxUl li > .rightCon ul.viUl03 > li:before { content:'-'; display: inline-block; margin:0 16px 0 10px; font-size: .8em;  color:var(--thm-primary); }

.vision_sec02 ul.boxUl li > .rightCon ul.viUl04 {background: #f0f2f1; padding: 40px 20px; }
.vision_sec02 ul.boxUl li > .rightCon ul.viUl04 > li { font-size: .95em; line-height: 1.2; margin-bottom:10px; color:#666; }
.vision_sec02 ul.boxUl li > .rightCon ul.viUl04 > li:last-child { margin-bottom:0;}
.vision_sec02 ul.boxUl li > .rightCon ul.viUl04 > li:before { content:'-'; display: inline-block; margin:0 16px 0 10px; font-size: .8em;  color:var(--thm-primary); }

/*가로 992 이상 가로모드*/

@media  (min-width: 1280px) {
    .vision_sec01 .vi_ul li:last-child { padding:0 75px;}
}


@media  (min-width: 992px) and  (max-width: 1571px) and (orientation: landscape) {
}

@media (max-width: 991px) {
    .vision_sec01 { text-align: center}
    .vision_sec01 .tit {font-size: 1.2em; margin-top:20px;}
    .vision_sec01 .substance{ font-size: .85em; line-height: 1.4; font-weight: 500; text-align:justify}
    .vision_sec01 p { font-size: .8em; line-height: 1.4; text-align:justify}
    .vision_sec01 .vi_ul { display: flex; width:100%; margin:0 auto;}
    .vision_sec01 .vi_ul:after { top:20px;}
    .vision_sec01 .vi_ul li{padding:0 4vw; position: relative; width:50%;}
    .vision_sec01 .vi_ul li:first-child { padding-left:0;}
    .vision_sec01 .vi_ul li:last-child { padding-right:0;}
    .vision_sec01 .vi_ul li .ico{ display: block; width:90px; height:90px; margin-bottom:10px;}
    .vision_sec01 .vi_ul li p{ text-align:center; font-size: .7em; line-height: 1.3;}
    .middelWrap {height:180px;}
    .vision_sec02 ul.boxUl > li {padding:0 0 20px; display: flex; flex-direction:column}
    .vision_sec02 ul.boxUl li > .leftCon { width:100%;}
    .vision_sec02 ul.boxUl li > .leftCon h2 { font-size:1em; margin-bottom:15px; }
    .vision_sec02 ul.boxUl li > .rightCon { width:100%;  padding:0 0 20px;}
    .vision_sec02 ul.boxUl li > .rightCon .visionBox { height:50px; line-height: 50px; font-size: .8em }
    .vision_sec02 ul.boxUl li > .rightCon ul.viUl01 { display: flex; flex-direction:column;}
    .vision_sec02 ul.boxUl li > .rightCon ul.viUl01 li { width:100%; height:auto; line-height: 1.4; font-size: .75em;  padding:0 0 0 15px; text-align: left}
    .vision_sec02 ul.boxUl li > .rightCon ul.viUl01 li:before { content:'-'; margin-right:10px;}
    .vision_sec02 ul.boxUl li > .rightCon ul.viUl01 li:first-child { padding-top:20px;} 
    .vision_sec02 ul.boxUl li > .rightCon ul.viUl01 li:last-child {padding-bottom:20px;} 
    .vision_sec02 ul.boxUl li > .rightCon ul.viUl02 { display: flex; flex-wrap: wrap}
    .vision_sec02 ul.boxUl li > .rightCon ul.viUl02 li {  width:33%; font-size: .7em; line-height: 1.3; padding:0 10px ; text-align: center; margin:-25px 0 10px;}
    .vision_sec02 ul.boxUl li > .rightCon ul.viUl02 li .ico{ display: block; width:100%; height:110px; background-size: 60%; background-position: center 40px}
	.tooltip-inner { font-size: .8em; padding:.8em}
    .vision_sec02 ul.boxUl li > .rightCon ul.viUl03 { display: flex; justify-content:flex-end; flex-direction:column}
    .vision_sec02 ul.boxUl li > .rightCon ul.viUl03 > li {  width:100%;  padding:0; text-align: center}
    .vision_sec02 ul.boxUl li > .rightCon ul.viUl03 > li { font-size: .75em; line-height: 1; padding:0 0 10px 0; margin:0; min-width:33.33%}
    .vision_sec02 ul.boxUl li > .rightCon ul.viUl03 > li:last-child { margin-bottom:auto;}
    .vision_sec02 ul.boxUl li > .rightCon ul.viUl03 > li:before { content:'#'; margin:0 5px 0 0}
    .vision_sec02 ul.boxUl li > .rightCon ul.viUl04 {background: #f0f2f1; padding: 20px; }
    .vision_sec02 ul.boxUl li > .rightCon ul.viUl04 > li { font-size: .75em; line-height: 1.2; margin-bottom:5px; position: relative; padding-left:15px; }
    .vision_sec02 ul.boxUl li > .rightCon ul.viUl04 > li:last-child { margin-bottom:0;}
    .vision_sec02 ul.boxUl li > .rightCon ul.viUl04 > li:before { content:'-';  font-size: .8em;  color:var(--thm-primary); position: absolute; top:0; left:-10px; }

    
    
    }

@media (max-width: 767px) {
}