@charset "utf-8";
@import url("base.css");
@import url("layout.css");
@import url("board.css");
@import url("font.css");


body{box-sizing:border-box}

/* 본문바로가기 */
.skip a{display:block;position:absolute;left:-9999px;width:200px;background:#c52227;color:#fff;text-align:center}
.skip a:hover,.skip a:focus,.skip a:active{left:50%;z-index:999999;margin-left:-100px}


/* main 컨텐츠 start */

/* 비주얼 */
.m_visual{height:600px; background: url(../images/m_visual.png) 50% 50% no-repeat;}
.m_visual .cont{width:1200px; height:600px; margin:0 auto;}




.m_pf{margin-top:100px;}
.m_pf .tit{height:30px; line-height: 30px;}
.m_pf .tit b{font-size:32px; font-family: 'arial'; font-weight: 900; color:#fff;}
.m_pf .tit ul{float:right;}
.m_pf .tit li{display:inline-block; padding-left:20px; font-size:15px; color:#999; cursor: pointer;}
.m_pf .tit li:hover, .m_pf .tit li.active{color:#fff; }


/* 포트폴리오, 메인 서브 공통 */
.pf *{transition:all ease 0.3s;}
.pf{margin-left:-10px; margin-right:-10px;}
.pf:after{clear:both; display: block; content: '';}

.pf dl{width:calc(25% - 20px); float:left; margin:0 10px 30px 10px; height:auto; box-sizing: border-box;}   

.pf dt{position:relative; padding:15px 0 15px 5px ; min-height:90px; box-sizing: border-box;}  
.pf dt em{display:block; width:calc(100% - 40px); line-height: 1.8em; height:30px; font-size:16px; color:#fff; text-overflow:ellipsis; white-space:nowrap; overflow:hidden;}  
.pf dt span{display:block; width:calc(100% - 40px); line-height: 2em; height:25px; font-size:12px; color:#999; text-overflow:ellipsis; white-space:nowrap; overflow:hidden;}  
.pf dt i{position:absolute; right:2px; top:15px; display:block; width:38px; height:38px; line-height: 38px; font-size:20px; text-align: center; border-radius:50%; border:1px solid #fff; color:#fff; box-sizing:border-box; } 
.pf dt i:after{display:inline-block; clear:both; content:"\f121"; font-family: 'lineAwesome'; }
.pf dl:hover i{background: #30c3ca; border:1px solid #30c3ca;}

.pf dd{width:100%; height:375px; display:block; overflow: hidden; border:1px solid #858585; background: #333; box-sizing:border-box;}  
.pf dl:hover dd{ border:2px solid #30c3ca;}
.pf dd img{height:100%; width:100%;; object-fit: cover;/* ie,엣지 외 다른브라우저위해 꼭 필요함 */}  




/* 공지, 아이콘 메뉴 */
.m_bot{ padding:70px 0 30px 0; margin-top:80px; border-top:1px solid #333;}
.m_bot .tit{margin-bottom:50px;}
.m_bot .tit span, .m_bot .tit i{display:block; line-height:1.8em; text-align: center;}
.m_bot .tit span{font-size:33px; color:#fff; font-family: 'arial';}
.m_bot .tit span b{ font-weight: 900;}
.m_bot .tit i{font-size:17px; color:#aaa;}

.m_bot .wrapBase{height:290px;}
.m_bot .link{float:left; width:calc(50% - 7px); height:100%; background: #30c3ca url(../images/m_company.png) bottom 0px right 45px no-repeat;}
.m_bot .link a{display:block; height:100%; padding:40px 50px;  color:#fff; box-sizing:border-box;}
.m_bot .link b, .m_bot .link em{display:block; line-height: 1.4em;}
.m_bot .link b{font-size:28px;}
.m_bot .link em{margin-top:15px; font-size:18px;}
.m_bot .link span{display:block; margin-top:90px; font-size:15px; color:#333; font-weight: bold;}
.m_bot .link i{font-size:20px; width:38px; height:38px; line-height:38px; margin-right:10px; text-align: center;  border-radius:50%; background: #fff;}



.m_bot .notice{float:right; width:calc(50% - 7px); height:100%; padding:30px 35px 0 35px; background: #fff; box-sizing:border-box;}
.m_bot .notice dt{height:30px; line-height:30px; margin-bottom:10px;  font-size:23px; color:#333; font-weight: bold;}
.m_bot .notice dt a{float:right; display:inline-block; height:30px; line-height: 30px;  font-size:24px; color:#333; }

.m_bot .notice dd{font-size:16px; }
.m_bot .notice dd:after{clear:both; display:block; content:'';}
.m_bot .notice dd a{float:left; display:block; width:70%; padding-left:10px; height:40px; line-height: 40px; text-overflow:ellipsis; white-space:nowrap; overflow:hidden; background: url(../images/dot.png) 0 50% no-repeat; font-size:16px; color:#666;}
.m_bot .notice dd i{float:right;  height:40px; line-height: 40px;}







/* sub start ---------------------------------------------------------------------------------------------------------------------------------------------------------*/

.contents{padding:0  0 50px 0;}

.contTit{font-size:20px; height:30px; line-height:30px; margin-bottom:10px; margin-top:30px; color:#fff; text-align:left;  font-weight: normal; }
.contTit b{font-weight: normal;}
.contTit i{font-size:14px; margin-left:10px;  }



/* 공통 텍스트  */
.txt_cont{}
.txt_cont li{font-size:18px; color:#777; line-height: 30px;  word-break: keep-all;}
.txt_cont .point{line-height: 40px; margin-bottom:30px; color:#4980e9; font-size:28px; letter-spacing: -0.07em; }



/* 회사소개 */
.company{position:relative; height:600px; margin-top:70px;}
.company .pic{position:absolute; left:0; top:0; width:540px; height:410px; border:10px solid #30c3ca;}
.company .txt{position:absolute; right:0; top:130px; width:760px; height:420px; padding:12px; background: url(../images/pat.png); box-sizing: border-box;}
.company .txt .inner{display:block; width:100%; height:100%; padding:40px; line-height: 30px; word-break: keep-all; background: #fff; color:#333; box-sizing:border-box;}


.company2 .tit{font-size:45px; font-family: arial; color:#30c3ca; text-align: center; width:100%; line-height: 1.4em; font-weight: 900;}
.company2 .tit:after{clear:both; display: block; content: ''; width:60px; height:2px; background: #30c3ca; margin:50px auto;}
.company2 .txt{font-size:18px; color:#fff; text-align: center; width:100%; line-height: 1.8em;}
.company2 .txt i{font-size:24px; color:#30c3ca; text-align: center; width:100%; line-height: 3em;}
.company2 .img{width:100%; text-align: center; margin:100px 0 50px 0;}


/* 오시는 길 */
.map .cont1{display:block; height:400px; background: #333;}
.map .cont2{text-align: center; border-bottom:1px solid #999;padding:40px 0;}
.map .cont2 dl{display:inline-block; width:32%; height:60px; padding-left:75px; text-align: left; color:#fff; box-sizing: border-box;}
.map .cont2 dl:nth-child(1){background: url(../images/map1.png) 0 50% no-repeat;}
.map .cont2 dl:nth-child(2){background: url(../images/map2.png) 0 50% no-repeat;}
.map .cont2 dl:nth-child(3){background: url(../images/map3.png) 0 50% no-repeat;}

.map .cont2 dt{font-size:20px; padding-top:5px;}
.map .cont2 dd{font-size:16px;}
.map .cont2 dt, .map .cont2 dd{line-height: 1.6em; height:1.6em;}