@charset "utf-8";
/* CSS Document */

/*#wrap{position:fixed; top:0; left:0; width:100%;}스크립트에 의해 추가될 속성*/
/************* 헤더 ***************/
#header{background:#fff; width:100%; height:63px; position:relative; border-bottom:2px solid #0e5ba8;}
#header .logo{position:absolute; left:6%; padding-top:22px;}
#header .logo img{width:132px; height:auto;}
#header .openMenu{position:absolute; top:22px; right:6%;}
#header .openMenu img{width:26px; height:auto;}
#header .openSC{position:absolute; top:22px; right:10px;}
#header .openSC img{width:18px; height:auto;}

/************* 컨테이너 ***************/
#container{width:100%; margin-bottom:24px;}
#container .m_visual img{width:100%;}
#container .centerBn{width:100%}
#container .centerBn li{width:25%; float:left;}
#container .centerBn li img{width:100%;}
.m_link{padding:10px 0;}
.m_link ul{float:left; width:100%;}
.m_link ul li{float:left; width:25%; text-align:center;}
.m_link ul li.link_h3{font-size:17px; font-family:'notokr-medium'; background:url(../images/m_arrow.png) no-repeat right 6px; background-size:9%;}
.m_link ul li a{font-size:16px; padding-top:1px; display:block; height:16px; color:#1360ae; font-family:'notokr-medium';}
.m_line{width:100%; height:7px; background:#eeeeee; border-top:#e7e7e7; border-bottom:1px solid #e7e7e7;}

.m_notice{width:100%; padding-top:24px;}
.m_notice h3{font-size:17px; font-family:'notokr-medium'; background:url(../images/m_arrow.png) no-repeat right 6px; background-size:9%; float:left; width:25%; text-align:center;}
.m_notice ul{float:left; width:75%;}
.m_notice ul li{width:87%; padding-left:6%; position:relative;}
.m_notice ul li a{display:block; line-height:14px; padding:4px 0;}
.m_notice li span{margin-left:6px; position:absolute; right:0;}

.m_notice ul li a{}

/************* 푸터 ***************/ 
#footer{}
#footer .fmenu{width:100%; padding:15px 0; border-top:1px solid #d8d9da; border-bottom:1px solid #d8d9da;}
#footer .fmenu li{float:left; border-left:1px solid #d8d9da; width:24.5%; text-align:center; line-height:12px;}
#footer .add{padding:15px 15px 10px;}
#footer p, #footer .fcopy{font-size:12px; color:#a8a9aa;}
#footer p a{color:#a8a9aa;}
#footer .fcopy{padding:0 15px 15px;}

/************* 전체메뉴 ***************/
#gnbM{width:100%; position:relative; display:none;}
#gnbM .opa{position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.6); display:none;}
#gnbM .list{width:300px; position:relative; margin-right:-300px;}/*스크립트 작성을 위한 margin-left:-300px;*/
#gnbM .list .close{display:block; padding:22.5px 15px; background:#0e5ba8; text-align:right;}
#gnbM .list .close img{width:20px;}
#gnbM .list li .m{display:block; padding:10px 15px; background:#444; color:#eee; font-size:14px;}
#gnbM .list li .depth2 li a{display:block; padding:10px 15px; background:#fff; border-bottom:1px solid #bbb; color:#555;}
#gnbM .list li .depth2 li a:hover{color:#0e5ba8;}
#gnbM .list li .depth2 li .depth3{border-bottom:1px solid #bbb;}
#gnbM .list li .depth2 li .depth3 a{padding:8px 30px; border-bottom:none;}


/************* 서브페이지 ***************/
/* 회사소개 */
.ddr_visual{width:100%;}
.ddr_visual img{width:100%;}
.ddr_txt{width:100%;}
.ddr_txt h3{font-size:33px; text-align:center; font-family:'notokr-medium'; letter-spacing:-0.05em; padding:30px 0 15px;}
.ddr_txt h3 span{color:#0e5ba8;}
.ddr_txt p{width:85%; margin:0 auto; font-size:17px; font-family:'notokr-medium'; text-align:center; margin-bottom:15px; padding-bottom:15px; border-bottom:1px solid #0e5ba8; word-break:keep-all;}
.ddr_txt div{font-size:15px; padding-left:12%;}
.ddr_txt div span{color:#0e5ba8; font-family:'notokr-bold';}
.ddr_txt ul{width:90%; margin:30px auto 40px;}
.ddr_txt ul li{float:left; width:50%; text-align:center;}
.ddr_txt ul li a{display:block;}
.ddr_txt ul li a img{width:90%;}
.ddr_map{width:100%; text-align:center; margin-bottom:40px;}
.ddr_map img{width:95%;}

#bottom_link{width:100%; border-top:3px solid #d5d5d6;}
#bottom_link ul{}
#bottom_link ul li{width:25%; float:left;}

/* 서브공통 */
.sub_nav{width:100%; background:#0e5ba8; color:#fff; position:relative; padding:10px 0 13px 20px;}
.sub_nav a{position:absolute; top:10px; right:5%; display:block; padding-right:20px; background:url(../images/home_link.png) no-repeat 45px 2px; background-size:24%; color:#a6b9d6; width:60px;}
.sub_top{width:100%}
.sub_top img{width:100%;}
.sub_con{width:100%; letter-spacing:-0.01em;}
.sub_con h3{text-align:center; font-size:40px; font-family:'notokr-bold'; margin:30px 0 20px;}
.sub_con h3 span{color:#0e5ba8;}
.sub_con p{text-align:center; font-size:19px; letter-spacing:-0.03em; padding:5px 0;}
.sub_con .sub_line{width:15%; margin:25px auto 25px; height:3px; background:#ddd;}
.sub_con .page_link{display:block; width:50%; margin:30px auto 30px; color:#fff; height:50px; background:url(../images/btn_bg.png) no-repeat; background-size:100%; text-align:center; font-size:18px; padding-top:3%;}
.sub_con .page_link img{width:100%; padding:25px 0 35px;}
.con_txt{width:100%; text-align:center; letter-spacing:-0.02em; padding:25px 0; background:url(../images/txt_bg_2.jpg) repeat-x; background-size:100%; margin-bottom:15px;}
.con_txt h3{font-size:23px; font-family:'notokr-medium'; margin-bottom:15px;}
.con_txt p{font-size:17px;}
.con_line{width:100%; height:4px; background:url(../images/txt_bg_1.jpg) repeat-x; background-size:100%;}
.con_box{width:80%; margin:0 auto; border:1px solid #bababa;  border-radius:4px; text-align:left; padding:15px;}
.con_box h4{font-size:19px; font-family:'notokr-medium'; margin-bottom:10px;}
.con_box p{font-size:16px; text-align:left; color:#555;}

/* 웹사이트 */
.web_link{}
.web_link .wl_1{width:90%; margin:0 auto; background:#666; margin-bottom:30px;}
.web_link .wl_1 li{float:left; width:50%}
.web_link .wl_2{width:90%; margin:0 auto; position:relative; height:155px;}
.web_link .wl_2 li{width:49%;}
.web_link .wl_2 .wl_2_1{position:absolute; left:0; top:0;}
.web_link .wl_2 .wl_2_2{position:absolute; right:0; top:0;}

.txt_limit { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.notice_title { float:left; width:70%; }
.notice_date { float:right; width:60px; line-height:14px; padding:4px 0; }

/*21-04-15추가 포트폴리오*/
.port-box{margin:5%;}
.port-box::after{content:""; display:block; clear:both;}
.port-box dd{width:100%;  margin-bottom:6%; cursor:pointer;}
.port-box dd:nth-child(3n){margin-right:0;}
.port-box dd .tite{font-size:16px; letter-spacing:-1px; border:solid 1px #ddd; box-sizing:border-box; padding:10px;}
.pro-wrap{position:relative; overflow:hidden; min-width:100%; max-width:100%; width:100%; text-align:left; line-height:1.4em; font-size:16px;}
.pro-wrap * {-webkit-box-sizing: border-box;box-sizing: border-box;-webkit-transition: all 0.35s ease;transition: all 0.35s ease;}
.pro-wrap img{max-width:100%; width:100%; vertical-align:top;}
.pro-wrap .tbox{position:relative; top:calc(68%); width:100%; background:linear-gradient(to right, rgba(0,197,180,0.8), rgba(0,91,168,0.8)); padding:3% 3% 4%;}
.pro-wrap .tbox:before{position: absolute; content: ''; z-index:2; bottom: 100%; left: 0;width: 100%;}
.pro-wrap h3 {font-weight:500;color:#fff; letter-spacing:-1.0px;font-size:16px; margin:0; text-align:left;}
.pro-wrap p {font-size:14px; opacity:0.9; color:#fff; position:absolute; right:5%; top:10%;}