@charset "utf-8";

/* 메인 레이아웃 /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
.mainCtn {width:100%; overflow:hidden;}
.mainCtn .MCVisual {width:100%; height:478px; background:url('../images/main/visual_lineBg.gif') repeat-x;}
.mainCtn .MCArea {width:1260px; margin:0 auto; padding-bottom:40px; overflow:hidden;}
.mainCtn .MCArea .mcaL {float:left; width:280px; margin-right:40px;}
.mainCtn .MCArea .mcaC {float:left; width:490px; margin-right:40px;}
.mainCtn .MCArea .mcaR {float:left; width:410px;}





/* 비주얼영역 /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
.MCVArea {width:1260px; height:446px; margin:0 auto; background:url('../images/main/visual_bg.gif') no-repeat;}
.MCVArea .bigImg {width:770px; margin:0 auto; padding-top:28px; overflow:hidden;}
.MCVArea .bigImg li {float:left; margin:0 8px 0 8px;}
.MCVArea .smallImg {width:100%; margin-top:42px; overflow:hidden;}
.MCVArea .smallImg .siL {float:left; width:175px; padding-left:50px;}
.MCVArea .smallImg .siC {float:left; width:810px;}
.MCVArea .smallImg .siC dl {width:100%; overflow:hidden;}
.MCVArea .smallImg .siC dl dt {float:left; width:135px; text-align:center;}
.MCVArea .smallImg .siR {float:left; width:175px; padding-right:50px; text-align:right;}




/* 컨텐츠 /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/* 로그인 */
.MCLogin {height:173px; padding:10px 30px 10px 30px; border-top:#155da7 2px solid; border-left:#d5d5d5 1px solid; border-right:#d5d5d5 1px solid; border-bottom:#d5d5d5 1px solid;}
.MCLogin dl {width:100%; margin:10px 0 5px 0; overflow:hidden;}
.MCLogin dl dt {float:left; width:140px;}
.MCLogin dl dt p {margin-top:4px;}
.MCLogin dl dt input {width:135px; height:22px; padding:2px 5px 2px 5px; border:#d5d5d5 1px solid; border-radius:3px;}
.MCLogin dl dd {float:right; width:60px;}
.MCLogin ul {width:100%; margin-top:3px; overflow:hidden;}
.MCLogin ul li {float:left;}
.MCLogin .CTFC {width:126px; height:30px; padding:4px 0 0 92px; background:url('../images/main/login_certificate_bg.gif') 0 0 no-repeat;}
.MCLogin .CTFC label {display:none;}
.MCLogin .CTFC a {display:inline-block; margin-right:1px;}

/* 나의정보 */
.MCMyInfor {height:173px; padding:10px 30px 10px 30px; border-top:#155da7 2px solid; border-left:#d5d5d5 1px solid; border-right:#d5d5d5 1px solid; border-bottom:#d5d5d5 1px solid;}
.MCMyInfor .myInforType1 {height:68px; padding:15px; margin-top:10px; font-size:14px; line-height:20px; background:url('../images/main/myInfor_boxBg.gif') no-repeat;}
.MCMyInfor .myInforType1 span {font-size:16px; font-weight:bold; color:#3e5064;}
.MCMyInfor .myInforType2 {height:68px; padding:15px; margin-top:10px; background:url('../images/main/myInfor_boxBg.gif') no-repeat;}
.MCMyInfor .myInforType2 span {font-size:14px; font-weight:bold; color:#3e5064;}
.MCMyInfor .myInforType2 div {margin-top:8px;}
.MCMyInfor ul {width:100%; margin-top:3px; overflow:hidden;}
.MCMyInfor ul li {float:left;}

/* 설치/안내 */
.MCInstall {width:100%; margin-top:20px;}
.MCInstall div {background:url('../images/main/title_bg.gif') repeat-x;}
.MCInstall ul {width:100%; overflow:hidden;}
.MCInstall ul li {margin-top:10px;}

/* 게시물 */
.MCNews {border-top:#155da7 2px solid; border-left:#d5d5d5 1px solid; border-right:#d5d5d5 1px solid; border-bottom:#d5d5d5 1px solid;}
.MCNews ul {width:100%; overflow:hidden;}
.MCNews ul li {float:left;}
.MCNews ul li a {display:block; width:121px; padding:10px 0 10px 0; font-size:14px; font-weight:bold; text-align:center; border-right:#d5d5d5 1px solid; border-bottom:#d5d5d5 1px solid;}
.MCNews ul li a:hover {background:#f8fcfd; border-bottom:#f8fcfd 1px solid; color:#39374c;}
.MCNews ul li a.on {background:#f8fcfd; border-bottom:#f8fcfd 1px solid; color:#39374c;}
.MCNews ul li a.last {width:122px; border-right:none;}
.MCNews dl {height:120px; padding:14px 20px 17px 20px; background:#f8fcfd; overflow:hidden;}
.MCNews dl dt {float:left; width:73%; padding:2px 0 2px 2%; background:url('../images/main/news_icn.gif') 0 9px no-repeat;}
.MCNews dl dd {float:right; width:25%; text-align:right;}
.MCNews p {position:absolute; margin:-23px 0 0 424px;}

/* 알림판 */
.MCInfor {width:100%; margin-top:20px;}
.MCInfor .inforTitle {width:100%; background:url('../images/main/title_bg.gif') repeat-x; overflow:hidden;}
.MCInfor .inforTitle dt {float:left;}
.MCInfor .inforTitle dd {float:right; font-size:0;}
.MCInfor .inforCtn {height:163px; margin-top:10px; padding:20px; border:#d5d5d5 1px solid; background:#f8fcfd; overflow:auto;}
.MCInfor .inforCtn p {margin-bottom:15px; font-size:16px; font-weight:bold; color:#4f546a; text-decoration:underline;}

/* 전략물자 기술홍보관 */
.MCPr {padding:10px 20px 10px 20px; border-top:#155da7 2px solid; border-left:#d5d5d5 1px solid; border-right:#d5d5d5 1px solid; border-bottom:#d5d5d5 1px solid;}
.MCPr dl {width:100%; height:140px; margin-top:10px; overflow:hidden;}
.MCPr dl dt {float:left; width:172px;}
.MCPr dl dd {float:right; width:172px;}
.MCPr dl div {border:#d5d5d5 1px solid;}
.MCPr dl p {padding-left:10px; margin-top:10px; background:url('../images/btnIcn/icn_dot2.gif') 0 5px no-repeat;}

/* 빠른서비스 */
.MCService {width:100%; margin-top:20px;}
.MCService div {background:url('../images/main/title_bg.gif') repeat-x;}
.MCService dl {width:100%; margin-top:10px; overflow:hidden;}
.MCService dl dt {float:left; margin-right:6px;}
.MCService dl dd {float:left;}


/* 담당업무 */
.MCMyWork {position:fixed; bottom:0; right:0; width:250px; border:#0969b3 2px solid; z-index:100;}
.MCMyWork p {padding:10px 0 10px 0; font-size:16px; font-weight:bold; color:#0969b3; text-align:center; border-bottom:#0969b3 1px solid; background:#f8fcfd;}
.MCMyWork ul {padding:15px; background:#fff; overflow:hidden;}
.MCMyWork ul li {padding:2px 0 2px 8px; font-size:14px; color:#333; background:url('../images/btnIcn/icn_dot1.gif') 0 8px no-repeat;}
.MCMyWork ul span {color:#b82b00; font-weight:bold;}
.MCMyWork ul li a:hover {color:#0969b3;}

/*배너영역*/

@font-face {font-family: 'Pretendard'; font-weight: 400; font-display: swap; src: local('Pretendard Regular'), url('../../../packages/pretendard/dist/web/static/woff2/Pretendard-Regular.woff2') format('woff2'), url('../../../packages/pretendard/dist/web/static/woff/Pretendard-Regular.woff') format('woff');}
@font-face {font-family: 'Pretendard'; font-weight: 700; font-display: swap; src: local('Pretendard Bold'), url('../../../packages/pretendard/dist/web/static/woff2/Pretendard-Bold.woff2') format('woff2'), url('../../../packages/pretendard/dist/web/static/woff/Pretendard-Bold.woff') format('woff');}
#main_banner{height: 390px;} 
#main_banner .container {width:1402px; margin:0 auto;}
#main_banner #visual {display:flex; align-items:center; justify-content:center; width:100%; height:370px;}
#main_banner #visual .visual-items {display:flex; align-items:center; justify-content:space-between;}
#main_banner #visual .visual-item {position:relative; width:calc(100%/3 - 20px); height:330px; background:#fff; border-radius:10px; box-shadow: #00000017 2px 2px 14px; overflow:hidden;}
#main_banner #visual .visual-item .item-filter {position:absolute; top:0; width:100%; height:100%; background:linear-gradient(rgba(255,255,255,0) 45%, #00369a 300%); z-index:1; border-radius:10px;}
#main_banner #visual img.item-backSVG {position:absolute; top:0; left:0; width:100%;}
#main_banner #visual img.item-svg {position:absolute; top:12px; left:17%; width:72%;}
#main_banner #visual .item-textWrap {z-index:2; position:absolute; display:flex; flex-direction:column; justify-content:flex-end; height:315px; color:#fff; padding-left:30px;}
#main_banner #visual .item-title {font-size:26px; font-weight:900; margin:10px 0 14px 0; color:#000;}
#main_banner #visual .item-content {font-size:17px; font-weight:500; line-height:24px; color:#000;}
#main_banner #visual .item-textHover {position:absolute; z-index:2; display:flex; flex-direction:column; justify-content:center; align-items:center; width:100%; height:100%; background:#00369aeb; border-radius:10px; opacity: 0; transition: .3s;}
#main_banner #visual .visual-item:hover .item-textWrap, #main_banner #visual .visual-item.hover .item-textWrap {display:none;}
#main_banner #visual .visual-item:hover .item-textHover, #main_banner #visual .visual-item.hover .item-textHover  {opacity: 1;}
#main_banner #visual .item-textHover a {text-align:center;line-height: 46px;width:320px; height:50px; border:2px solid #fff; color:#fff; background:none; border-radius:100px; font-size:18px; transition:background .3s; cursor:pointer;}
#main_banner #visual .item-textHover a:focus{outline-color:#fff;}
#main_banner #visual .item-textHover a:hover {background:#fff; color:#000; font-weight:700;}
#main_banner #visual .item-textHover a:not(last-child) {margin-bottom:10px;}