@import url('sub.css'); 



/**** S:: 회사소개 > 인사말 ****/
.greeting-cont {}
.greeting-cont .titBox {margin:0 0 60px;}
.greeting-cont .titBox .fs21 {margin:32px 0 28px;}

.greeting-list {}

.greeting-list dl {position:relative; display:flex; flex-wrap:Wrap;  background:var(--sub);}
.greeting-list dl::after {content:''; width:84px; height:84px; background:url("/company/img/center_ci.png")no-repeat center; position:absolute; bottom:0; left:50%; transform:translate(-50%,50%); z-index:9;}
.greeting-list dl:last-of-type {background:var(--main);}
.greeting-list dl:last-of-type::after {display:none;}
.greeting-list dl:first-of-type dt {order:1;}
.greeting-list dl:first-of-type dd {order:2;}
.greeting-list dl dt {width:50%;}
.greeting-list dl dt img {display: block; width: 100%; height: 100%; object-fit: cover;}
.greeting-list dl dd {width:50%; padding:75px; box-sizing:border-box; display:flex; flex-wrap:wrap; align-content:center;}
.greeting-list dl dd * {width:100%; color:var(--white);}
.greeting-list dl dd .stxt {margin:30px 0 0;}

.greeting-cont .tBox {margin:60px 0 0;}
.greeting-cont .tBox .stxt+.stxt {margin:30px 0 0;}
.greeting-cont .tBox .ceo {display:flex; flex-wrap:Wrap; align-items:center; gap:0 23px; justify-content:center; margin:60px 0 0;}
/**** E:: 회사소개 > 인사말 ****/



/**** S:: 회사소개 > 기업이념 ****/
.ideology-cont {}
.ideology-cont .titBox {margin:0 0 50px;}
.ideology-cont .titBox .fs21 {margin:32px 0 0;}
.ideology-cont .map-cont {background:url("/company/img/map_bg.png")no-repeat center / 100% auto;}
.ideology-cont .diagram {width: 723px;  height: 762px; margin:0 auto; position:relative; background:url("/company/img/dia_bg.png")no-repeat center / 100% auto;}
.ideology-cont .diagram dl {position:absolute; display:flex; flex-wrap:nowrap; align-items:center; gap:0 40px; }
.ideology-cont .diagram dl.center {display:block; text-align:center; top:50%; left:57%; transform:translate(-50%,-50%);}
.ideology-cont .diagram dl.center p {color: var(--black); font-size: 1.1666rem; font-weight: 300; line-height:157.143%;  }
.ideology-cont .diagram dl.center .gra-txt {font-size: 2.1111rem; font-weight: 800; line-height:100%;  margin:6px 0 0;}
.ideology-cont .diagram dl.one {width:634px; top: -9px;right: -310px;}
.ideology-cont .diagram dl.two {width:616px; top: 229px;left: -317px;}
.ideology-cont .diagram dl.two dt {order:2;}
.ideology-cont .diagram dl.two dd {order:1; text-align:right;}
.ideology-cont .diagram dl.three {width:600px; bottom: -13px; right: -274px;}
.ideology-cont .diagram dl dt {width:300px; aspect-ratio: 3 / 3; display:flex; flex-direction:column; flex-wrap:wrap; align-content:center; justify-content:center; gap:14px 0; text-align:center;}
.ideology-cont .diagram dl dt span {wwidth:100%; color: var(--white); font-size: 1.444rem; font-weight: 700; line-height:126.154%;  display:block;}
.ideology-cont .diagram dl dd {width:calc(100% - 340px);}
.ideology-cont .diagram dl dd br {display:block;}
.ideology-cont .diagram dl dd h4 {color: #2180BE; font-size: 1.1666rem; font-weight: 700; line-height:157.143%;  margin:0 0 6px;}
.ideology-cont .diagram dl dd .stxt {color:var(--black);}

.vision-list {display: grid;  grid-template-columns: repeat(3, 1fr); grid-gap:30px; margin:90px 0 0;}
.vision-list li {text-align:center; padding:90px 30px 70px; box-sizing:border-box;}
.vision-list li i {display:block; width:100%; margin:0 0 30px;}
.vision-list li span {font-family:var(--eng); font-weight: 700;}
.vision-list li .fs25 {color:var(--white); margin:8px 0 10px; font-size: 1.388rem; font-weight: 700; line-height:148%; }
.vision-list li .stxt {color:rgba(255,255,255,0.8);}
.vision-list li:nth-of-type(1) {background:url("/company/img/vision_bg01.jpg")no-repeat center / cover;}
.vision-list li:nth-of-type(2) {background:url("/company/img/vision_bg02.jpg")no-repeat center / cover;}
.vision-list li:nth-of-type(3) {background:url("/company/img/vision_bg03.jpg")no-repeat center / cover;}
/**** E:: 회사소개 > 기업이념 ****/


.ci-cont .titBox {margin:0 0 32px;}
.checkBox {background:
	linear-gradient(to bottom, transparent 14px, #f4f4f4 14px) 0 0 / 100vw 15px repeat-y,
	linear-gradient(to right, transparent 14px, #f4f4f4 14px) 0 0 / 15px 100vh repeat-x
	white; border:1px solid var(--border); box-sizing:border-box;}
.checkBox.oneBox {padding:130px 50px; box-sizing:border-box; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:15px 70px;}
.checkBox img {max-width:100%;}
.ci_layout {display:flex; flex-wrap:Wrap; margin:120px 0 0;}
.ci_layout h4 {width:290px;}
.ci_layout > div {width:calc(100% - 290px);}


.symbol-list {display: grid;  grid-template-columns: repeat(2, 1fr); grid-gap:30px;}
.symbol-list dl {background:var(--grayBg);}
.symbol-list dl dt {padding:90px 40px; box-sizing:border-box; display:flex; flex-wrap:wrap; align-items:center; justify-content:center;}
.symbol-list dl dt img {max-width:100%;}
.symbol-list dl dd {padding:32px 20px; box-sizing:Border-box;  text-align:center;  }

.ex-list {display: grid;  grid-template-columns: repeat(2, 1fr); grid-gap:30px;}
.ex-list dl {}
.ex-list dl dt {color: var(--white); font-size: 1.1666rem; font-weight: 700; line-height:157.143%;  text-align:center; background: var(--sub); padding:22px; box-sizing:border-box;}

.ex-list dl:last-of-type dt {background: var(--main);}
.ex-list dl dd {padding:40px; box-sizing:border-box; text-align:center;}
.ex-list dl dd .cate {display:block; width:140px; height:37px; line-height:35px; border:1px solid var(--sub); color:var(--sub); box-sizing:border-box; border-radius:50px; font-family: var(--eng); font-size: 0.833rem; font-weight: 700; background:var(--white); margin:60px auto 20px;}
.ex-list dl dd img {max-width:100%;}
.ex-list dl dd .ci-box {display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:10px 40px;}
.ex-list dl dd .cate:first-of-type {margin-top:0;}
.ex-list dl:last-of-type dd .cate {border-color:var(--main); color:var(--main);}








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


/**** S:: 회사소개 > 기업이념 ****/
.ideology-cont .diagram {width:550px; height:640px;}
.ideology-cont .diagram dl.center .gra-txt {font-size:1.811rem;}
.ideology-cont .diagram dl.one {top:20px; width:560px; right:-315px;}
.ideology-cont .diagram dl.two {top:212px; left:-309px; width:530px;}
.ideology-cont .diagram dl.three {bottom:15px; width:530px; right:-284px;}
.ideology-cont .diagram dl dt {width:225px;}
.ideology-cont .diagram dl dt img {max-height:65px;}
.ideology-cont .diagram dl dd {width:calc(100% - 265px);}

/**** E:: 회사소개 > 기업이념 ****/



.symbol-list dl dd br {display:none;}


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


/**** S:: 회사소개 > 인사말 ****/
.greeting-list dl dd {padding:10% 5%;}
/**** E:: 회사소개 > 인사말 ****/


/**** S:: 회사소개 > 기업이념 ****/
.ideology-cont .diagram {width:38vw; height:41vw;}
.ideology-cont .diagram dl {gap:0 20px;}
.ideology-cont .diagram dl.one {top:0; right:0; transform:translate(21vw,0); width:auto;}
.ideology-cont .diagram dl.two {top:0; left:0; transform:translate(-22vw,12vw); width:auto; justify-content: flex-end;}
.ideology-cont .diagram dl.three {bottom:0; right:0; transform:translate(20.5vw,1vw); width:auto;}

.ideology-cont .diagram dl.center {font-size:1.4vw;}
.ideology-cont .diagram dl.center .gra-txt {font-size:2.2vw;}
.ideology-cont .diagram dl dt {width:16vw;}
.ideology-cont .diagram dl dt img {max-height:5vw;}
.ideology-cont .diagram dl dt span {font-size:1.7vw;}
.ideology-cont .diagram dl dd {width:calc(100% - 16vw - 20px);}
.ideology-cont .diagram dl dd h4 {font-size:1.5vw;}
.ideology-cont .diagram dl dd .stxt {font-size:1.2vw;}
/**** E:: 회사소개 > 기업이념 ****/





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

/**** S:: 회사소개 > 인사말 ****/
.greeting-cont .titBox .fs21 {margin:25px 0;}
.greeting-cont .tBox .stxt+.stxt {margin:20px 0 0;}
.greeting-list dl dd .stxt {margin:20px 0 0;}

.greeting-list dl::after {width:70px; height:70px; background-size:100% auto;}
.greeting-list dl dt {order:1 !important; width:100%;}
.greeting-list dl dd {order:2 !important; width:100%; padding:30px 25px;}
.greeting-list dl dd .stxt {margin:10px 0 0;}
/**** E:: 회사소개 > 인사말 ****/

/**** S:: 회사소개 > 기업이념 ****/
.vision-list {grid-template-columns: repeat(1, 1fr); grid-gap:20px;}
.vision-list li {padding:60px 30px;}
.vision-list li i img {max-height:80px;}
/**** E:: 회사소개 > 기업이념 ****/


.ci_layout {margin:90px 0 0;}
.ci_layout h4 {width:100%; margin:0 0 25px;}
.ci_layout > div {width:100%;}


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


/**** S:: 회사소개 > 인사말 ****/
.greeting-cont .titBox {margin:0 0 30px;}
.greeting-cont .titBox .fs21 {margin:15px 0 10px;}
.greeting-cont .tBox {margin:35px 0 0;}
.greeting-cont .tBox .stxt+.stxt {margin:15px 0 0;}
.greeting-cont .tBox .ceo {margin:30px 0 0;}
.greeting-cont .tBox .ceo img {max-width:60px;}

/*.greeting-list dl::after {width:70px; height:70px; background-size:100% auto;}
.greeting-list dl dt {order:1 !important; width:100%;}
.greeting-list dl dd {order:2 !important; width:100%; padding:30px 25px;}
.greeting-list dl dd .stxt {margin:10px 0 0;}*/
/**** E:: 회사소개 > 인사말 ****/



/**** S:: 회사소개 > 기업이념 ****/
.ideology-cont .titBox {margin:0 0 30px;}
.ideology-cont .titBox .fs21 {margin:10px 0 0;}
.ideology-cont .diagram {width:100%; height:auto; background:transparent;}
.ideology-cont .diagram dl {position:relative; width:100%; transform:translate(0,0) !important;}
.ideology-cont .diagram dl+dl {margin:15px 0 0;}
.ideology-cont .diagram dl.center {width:100%; position:relative; top:0; left:0; transform:translate(0,0); background: rgba(255, 255, 255, 0.40); padding:4px; box-sizing:border-box; font-size:1.11rem; height:100px; display:flex; flex-wrap:wrap; align-content:center; justify-content:center; border-radius:10px; gap:5px;
border:3px solid transparent;
  background-image:linear-gradient(#fff, #fff),var(--gra);
  background-origin: border-box;
  background-clip: content-box, border-box;
}
.ideology-cont .diagram dl.center .gra-txt {font-size:1.66rem; margin:0;}
.ideology-cont .diagram dl.center p {width:100%;}
.ideology-cont .diagram dl dt {order:1 !important; width:100px; background:var(--main); border-radius:100%; gap:10px 0;}
.ideology-cont .diagram dl.two dt {background:var(--sub);}
.ideology-cont .diagram dl.three dt {background:#2180BE;}
.ideology-cont .diagram dl dt img {max-height:35px;}
.ideology-cont .diagram dl dt span {font-size:1.025rem;}
.ideology-cont .diagram dl dd {order:2 !important; width:calc(100% - 120px); text-align:left !important;}
.ideology-cont .diagram dl dd h4 {font-size:1.2rem;}
.ideology-cont .diagram dl dd .stxt {font-size:1rem;}
.ideology-cont .diagram dl dd br {display:none;}

.vision-list {grid-template-columns: repeat(1, 1fr); grid-gap:10px; margin:50px 0 0;}
.vision-list li {padding:40px 20px;}
.vision-list li i {margin:0 0 15px;}
.vision-list li i img {max-height:60px;}
.vision-list li .fs25 {font-size:1.22rem;}
/**** E:: 회사소개 > 기업이념 ****/


.ci-cont .titBox {margin:0 0 25px;}
.checkBox.oneBox {padding:60px 50px;}
.ci_layout {margin:60px 0 0;}
.symbol-list {grid-template-columns: repeat(1, 1fr); grid-gap:15px;}
.symbol-list dl dt {padding:40px;}
.symbol-list dl dt img {max-width:120px;}
.symbol-list dl dd {padding:20px;}

.ex-list {grid-template-columns: repeat(1, 1fr); grid-gap:15px;}
.ex-list dl dt {padding:15px;}
.ex-list dl dd {padding:20px;}
.ex-list dl dd img {max-height:150px;}
.ex-list dl dd .cate {width:110px; height:32px; line-height:30px; margin:30px auto 10px;}


}


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

/**** S:: 회사소개 > 기업이념 ****/
.ideology-cont .diagram dl.center {height:120px;}
.ideology-cont .diagram dl.center .gra-txt {line-height:120%;}
.ideology-cont .diagram dl {align-items:flex-start;}
/**** E:: 회사소개 > 기업이념 ****/


}