@charset "UTF-8";
/* general */
body { font-family: 'Pretendard', sans-serif; letter-spacing: -0.02em; }
.thin { font-weight: 300; }
.mark { background: linear-gradient(to bottom, transparent 40%, var(--mark) 40%) ; padding-right: 0.2em; padding-left: 0.2em; }

/* layout */
.inner { max-width: 1200px; }

/* color */
body {
    --theme-color: #2f73b6;
    --emph1: #FCF301;
}
.color { color: var(--theme-color); }
.emph1 { color: var(--emph1); }

/* header */
.header { position: fixed; left: 0; top: 0; width: 100%; border-bottom: 1px solid #ddd; background-color: #fff; z-index: 9999; }
.header .inner { height: 5.625em; display: flex; justify-content: space-between; align-items: center; }
.header .logo img { max-width: 144px; }
.header .nav {  }
.header .nav li a:hover { color: var(--theme-color); }
.header .gnb { display: flex; }
.header .gnb > li { font-size: 1.25em; padding: 0.5em 0; margin: 0 1.5em; font-weight: 600; position: relative; }
.header .gnb .lnb { padding: 0.7em 1.5em; background-color: #fff; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); text-align: center; border-radius: 0.7em; border: 1px solid #ddd; display: none; }
.header .gnb .lnb li { white-space: nowrap; margin-bottom: 0.625em; font-weight: 400; font-size: 0.9em; color: #666; }
.header .gnb .lnb li:last-child { margin-bottom: 0; }
.header .gnb > li:hover .lnb { display: block; }
.header.idx { background-color: transparent; color: #fff; border-bottom-color: transparent; }
.header.idx .logo img { filter: grayscale(1) brightness(3); }

/* footer */
.footer { padding: 3em 0 5em; background-color: #000; color: #aaa; text-align: center; }
.footer .logo img { max-width: 144px; filter: grayscale(1) brightness(1.375); }
.footer address { font-size: 1em; line-height: 1.4; margin: 1em 0; }
.footer .copyright { font-size: 0.875em; }

/* common */
.section { padding: 8em 0; }

/* sub visual */
.sub-visual { padding-top: 12em; text-align: center; background: #222 no-repeat center/cover; color: #fff; }
.sub-visual h2 { font-size: 3em; font-weight: 700; }
.sub-visual h2::before { content:""; display: block; width: 1em; height: 0.05em; margin: 0 auto 0.5em; background-color: #fff; }

/* sub content */
.sub-content .tit { margin-bottom: 3.5em; text-align: center; font-weight: 700; }
.sub-content .tit h3 { font-size: 2.5em; }
.sub-content .tit h4 { font-size: 1.875em; }
.sub-content .tit p { font-size: 1.5em; margin-top: 0.5em; font-weight: 400; }
.sub-content .con { margin-bottom: 6em; }
.sub-content .con:last-child { margin-bottom: 0; }
.sub-content .tab { margin-bottom: 3em; }
.sub-content .tab ul { display: flex; justify-content: center; }
.sub-content .tab li { font-weight: 600; font-size: 1.5em; margin: 0 1em; border-bottom: 2px solid transparent; padding-bottom: 0.5em; }
.sub-content .tab li:hover,
.sub-content .tab li.active { border-color: var(--theme-color); color: var(--theme-color);}
.sub-content .round { font-size: 1.875em; margin-bottom: 1.25em; line-height: 1.8; padding: 0 1.5em; background-color: var(--theme-color); color: #fff; font-weight: 700; display: inline-block; border-radius: 5em; }

/* CEO 인사말 */
.greeting { color: #fff; background: url(../img/bg_greeting.png) no-repeat center/cover;}
.greeting .con { display: flex; align-items: center; justify-content: space-between; }
.greeting .con .img { width: 50%; }
.greeting .con .img img { width: 100%; }
.greeting .con .txt { width: 43%; }
.greeting .con p { font-size: 1.5em; margin-bottom: 1em; }
.greeting .con p:last-of-type { margin-bottom: 0; }
.greeting .con h5 { margin-top: 3.5em; text-align: right; }
.greeting .con h5 small { font-size: 1.125em; margin-bottom: 0.375em; display: block; }
.greeting .con h5 b { font-size: 1.5em; }

/* 비전 */
.vision { text-align: center; color: #fff; background: url(../img/bg_vision.png) no-repeat center/cover;}
.vision .logo { width: 20%; margin: auto; max-width: 144px; }
.vision p.txt { font-size: 1.25em; line-height: 1.6; margin-top: 1em; }
.vision .list { margin-top: 3em; display: flex; justify-content: space-between; align-items: flex-start; }
.vision .list li { width: 25%; }
.vision .list .img img { width: 100%; }
.vision .list .txt { margin-top: 1.5em; }
.vision .list .txt p { font-size: 1.5em; }
.vision .list .line { padding-top: 100%; }
.vision .list .line1 { background: url(../img/line_vision_dot_01.png) no-repeat center/100%; }
.vision .list .line2 { background: url(../img/line_vision_dot_02.png) no-repeat center/100%; }

/* 핵심역량 */
.competencies { text-align: center; color: #fff; background: url(../img/bg_competencies.png) no-repeat center/cover;}
.competencies .list { display: flex; flex-wrap: wrap; position: relative; }
.competencies .list dt { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); display: none; }
.competencies .list dd { width: 48%; min-height: 18.75em; padding: 1.5em; border-radius: 1em; text-align: center; color: #fff; display: flex; align-items: center; justify-content: center; margin: 1%; border: 1px solid ; }
.competencies .list dd:nth-of-type(1) { border-color: #008c52; }
.competencies .list dd:nth-of-type(2) { border-color: #762100; }
.competencies .list dd:nth-of-type(3) { border-color: #1573cf; }
.competencies .list dd:nth-of-type(4) { border-color: #c67901; }
.competencies .list h5 { font-size: 1.875em; font-weight: 700; }
.competencies .list h5::after { content:""; width: 1.25em; height: 0.05em; background-color: #fff; display: block; margin: 0.5em auto; }
.competencies .list strong { font-size: 1.5em; margin-bottom: 0.5em; display: block; }
.competencies .list p { font-size: 1.25em; font-weight: 300; margin-bottom: 0.5em; }
.competencies .list p:last-of-type { margin-bottom: 0; }
.competencies .list p b { display: block; font-weight: 600; }

/* 연혁 */
/*color: #fff; background: url(../img/bg_history.png) no-repeat center/cover;*/
.history { text-align: center;}
.history .list > * { display: flex; justify-content: space-between; position: relative; padding-bottom: 5em; }
.history .list > *::before { content:""; width: 1px; height: 100%; background-color: var(--theme-color); display: block; position: absolute; top: 0; left: 50%; }
.history .list > *:last-child::before { display: none; }
.history .list .year { text-align: center; position: relative; }
.history .list .year b { width: 5em; line-height: 5; font-size: 1.5em; background-color: var(--theme-color); color: #fff; display: inline-block; border-radius: 10em; }
.history .list .txt { width: 35%; padding-top: 3em; }
.history .list .txt p { line-height: 1.5; }
.history .list .company { text-align: right; color: #06b390;}
.history .list .company p::after { content:""; width: 0.2em; height: 0.2em; background-color: #06b390; display: inline-block; border-radius: 1em; vertical-align: middle; margin-left: 0.5em; }
.history .list .business { text-align: left; color: #c66201; }
.history .list .business p::before { content:""; width: 0.2em; height: 0.2em; background-color: #c66201; display: inline-block; border-radius: 1em; vertical-align: middle; margin-right: 0.5em; }
.history .list dt { align-items: center; }
.history .list dt h5 { font-size: 1.875em; font-weight: 700; }
.history .list dt .year b { border: 0.2em solid var(--theme-color); line-height: 4.6; color:  var(--theme-color); background-color: #fff; }
.history .list dt .txt { padding-top: 0; }
.history .list dt .company h5 { color: #06b390; }
.history .list dt .business h5 { color: #c66201; }

/* 주요인증 */
.certification { background-color: #f5f5f5; text-align: center; }
.certification .list { display: flex; justify-content: flex-start; flex-wrap: wrap; }
.certification .list li { width: 24%; margin: 0.5%; }
.certification .list .img img { width: 100%; }
.certification .list .txt p { font-size: 1.5em; margin-top: 0.5em; font-weight: 700; }

/* 사업분야 */
.business { text-align: center; }
.business .list { display: flex; justify-content: center; }
.business .list li { width: 48%; margin: 1%; display: flex; flex-direction: column; justify-content: center; align-items: center; border: 1px solid #ddd; padding-bottom: 2em; }
.business .list h5 { font-size: 1.875em; width: 100%; height: 6em; font-weight: 700; display: flex; align-items: center; background: no-repeat center/cover; color: #fff; justify-content: center; }
.business .list p { font-size: 1.2em; padding: 2em 1em; }
.business .list .img { width: 80%; margin-bottom: 2em; }
.business .list .img img { width: 100%; }
.business .list a { font-size: 1em; border: 1px solid #ccc; color: #666; display: inline-block; padding: 0 2em; line-height: 2.5; border-radius: 5em; margin-top: auto; }
.business .list li:nth-child(1) h5 { background-image: url(../img/img_business_bg_01.png); }
.business .list li:nth-child(2) h5 { background-image: url(../img/img_business_bg_02.png); }
.business .list li:nth-child(2) h5 { background-image: url(../img/img_business_bg_03.png); }

/* 케이블 1~3 */
.cable { text-align: center; }
.cable .img { margin: 0 auto 2em; }
.cable .img:last-child { margin-bottom: 0; }
.cable img { max-width: 100%; }
.cable .txt p { font-size: 1.25em; }
.cable1 .line { width: 100%; height: 1px; background-color: #ccc; border: 0; margin: 5em 0; }

/* 각종 시험 및 정비 장비 */
.maintenance {  }

/* 핵심부품 개발 및 국책과제 수행 */
.development .con { display: flex; align-items: center; justify-content: space-between; }
.development .con .img img { width: 100%; }
.development .con .img1 { width: 56%; }
.development .con .img2 { width: 5%; max-width: 30px; }
.development .con .img3 { width: 35%; }

/* 사업역량 (방위산업) 1~4 */
.defense { text-align: center; }
.defense p.txt { font-size: 1.25em; margin-bottom: 2em; }
.defense .tit p { font-weight: 700; }
.defense .img { margin: 0 auto 2em; }
.defense .img:last-child { margin-bottom: 0; }
.defense img { max-width: 100%; }
.defense .list { display: flex; justify-content: center; }
.defense .list li { margin: 0.5%; }
.defense .list li img { width: 100%; }
.defense .list1 li { width: 49%; max-width: 340px; }
.defense .list2 li { width: 24%; }
.defense .txt p { font-size: 1.5em; font-weight: 700; margin-top: 1em; }
.defense2 .box { display: flex; justify-content: space-between; }
.defense2 .desc { width: 35%; }
.defense2 .desc .img { margin-bottom: 2em; }
.defense2 .desc p { text-align: left; font-size: 1.25em;  }
.defense2 .spec { width: 60%; }
.defense2 .spec table { width: 100%; font-size: 1.125em; }
.defense2 .spec thead { font-weight: 700; }
.defense2 .spec tbody { text-align: left; }
.defense2 .spec td { border: 1px solid #ddd; padding: 0.625em; }

/* 찾아오시는 길 */
.location {  }
.location .map { width: 100%; position: relative; padding-top: 45%; border: 1px solid #ddd; }
.location .map iframe { width: 100%; height: 100%; position: absolute; top: 0; left: 0; }
.location .txt { font-size: 1.25em; display: flex; border: 1px solid #ddd; border-top: 0; padding: 1em 1.5em; background-color: #fff; }
.location .txt p:nth-child(2) { margin-left: auto; margin-right: 1.5em; }
.location .txt p img { margin-right: 0.3em; height: 1.25em; }
.location .txt p span:nth-child(3) { margin-top: 0.5em; display: block; font-size: 0.875em; color: #666; line-height: 1.5; }

/* main */
.main { overflow: hidden; }
.main .section { padding: 12em 0; }
.main .move { font-size: 1.125em; display: block; width: 100%; max-width: 220px; line-height: 3; border: 1px solid #000; margin: 6em auto 0; text-align: center; }
.main .visual { color: #fff; padding: 22em 0; background: url(../img/img_main_visual_bg.png) no-repeat center/cover; text-align: center; }
.main .visual h2 { font-size: 3.5em; font-weight: 700; }
.main .visual p { font-size: 1.5em; margin-top: 2em; }
.main .vision { color: #fff; background: url(../img/img_main_vision_bg.png) no-repeat center/cover; }
.main .vision .move { border-color: #fff; }
.main .competencies { color: #fff; background: url(../img/img_main_competencies_bg.png) no-repeat center/cover; text-align: center; }
.main .competencies li { width: 48%; margin: 1%; border-radius: 1em; overflow: hidden; }
.main .competencies .txt { padding: 1em; min-height: 13em; display: flex; flex-direction: column; background-color: rgba(255,255,255,0.6); justify-content: center; }
.main .competencies h5 { padding: 0.5em 0; color: #fff; background-color: rgba(var(--light),0.5); }
.main .competencies h5::after { display: none; }
.main .competencies strong { color: rgba(var(--color),1); }
.main .competencies .move { border-color: #fff; }
.main .competencies li:nth-child(1) { --color: 0,87,46; --light: 0,140,82; }
.main .competencies li:nth-child(2) { --color: 91,26,0; --light: 118,33,0; }
.main .competencies li:nth-child(3) { --color: 0,49,99; --light: 21,115,207; }
.main .competencies li:nth-child(4) { --color: 114,70,0; --light: 198,121,1; }
.main .business .list li { width: 50%; margin: 0; padding: 5em 1em 8em; color: #fff; border: 0; }
.main .business .list li:nth-child(1) { background-image: url(../img/img_main_business_01.png); }
.main .business .list li:nth-child(2) { background-image: url(../img/img_main_business_03.png); }
.main .business .list li h5 { background: url(); display: block; height: auto; }
.main .business .list li h5::after { content:""; width: 1em; height: 0.1em; background-color: #fff; display: block; margin: 1em auto; }
.main .business .list p { padding: 0; }
.main .location { background-color: #f5f5f5; }


br.mb { display: none; }

/* responsive */
@media screen and (max-width: 1280px){
    .inner { padding-left: 2%; padding-right: 2%; }

    .defense .list { flex-wrap:wrap; }
    .defense .list li { width: 31.333%; }
}
@media screen and (max-width: 1080px){
    .main,
    .sub { font-size: 0.9em; }
}
@media screen and (max-width: 768px) {
    .header .inner { height: 4em; }
    .header .mnb-btn { font-size: 3em; position: relative; z-index: 10; }
    .header .mnb-btn .xi-close { color: #000; display: none; }
    .header .mnb-box { position: absolute; right: 0; top: 0; width: 100%; height: 100vh; background-color: rgba(0, 0, 0, 0.5); color: #000; display: none; }
    .header .mnb { display: block; width: 80%; height: 100vh; background-color: #fff; padding-top: 5em; position: absolute; top: 0; right: -100%; -webkit-transition: 0.4s;-moz-transition: 0.4s;-ms-transition: 0.4s;-o-transition: 0.4s;transition: 0.4s; }
    .header .mnb > li { font-size: 1.675em; padding: 0 1em; margin-bottom: 1.5em; }
    .header .mnb > li > a { font-weight: 600; }
    .header .mnb .lnb { font-size: 0.875em; padding: 0 0.875em; }
    .header .mnb .lnb li { margin-top: 0.675em; }
    .header .mnb-btn.open .xi-bars { display: none; }
    .header .mnb-btn.open .xi-close { display: block; }
    .header .mnb-box.open .mnb { right: 0; }

    br { display: none; }
    br.mb { display: block; }

    .greeting .con { display: block; text-align: center; }
    .greeting .con .img { width: 80%; margin: auto; }
    .greeting .con .txt { width: 100%; margin-top: 3em; }
    .greeting .con h5 { text-align: center; }

    .vision .list li { width: 30%; }
    .vision .list li:nth-child(even) { width: 5%; }
    .vision .list .line { padding-top: 600%; }

    .competencies .list dt { display: none; }
    .competencies .list dd { width: 98%; margin: 1%; }

    .history .list > * { padding-left: 10em; position: relative; }
    .history .list > *::before { left: 7.5%; }
    .history .list > dt { padding-top: 1.25em; }
    .history .list .year { position: absolute; left: 0; top: 0; }
    .history .list .txt { padding-top: 1.5em; text-align: left !important; }
    .history .list .company p::after { display: none; }
    .history .list .company p::before { content:""; width: 0.2em; height: 0.2em; background-color: #fff; display: inline-block; border-radius: 1em; vertical-align: middle; margin-right: 0.5em; }
    .history .list .company { width: 30%; }
    .history .list .business { width: 65%; }

    .certification .list { flex-wrap: wrap; justify-content: center;  }
    .certification .list li { width: 48%; margin: 1%; }

    .business .list { flex-wrap: wrap; justify-content: center; }
    .business .list li { width: 48%; margin: 1%; }

    .defense .list li { width: 48%; margin: 1%; }

    .defense2 .box { display: block; }
    .defense2 .desc,
    .defense2 .spec { width: 100%; }
    .defense2 .desc { margin-bottom: 2em; }
    .defense2 .desc p { text-align: center; }

    .location .txt { display: block; }
    .location .txt p { margin: 0.5em 0 !important; }

    .main .competencies li { width: 98%; margin: 1%; }
}
@media screen and (max-width: 586px) {
    .header .logo img { max-width: 7em; }
    .header .mnb-btn { font-size: 2.5em; }
    .header .mnb-box { font-size: 0.625em; }

    .footer { font-size: 0.75em; }
    .footer .logo img { max-width: 7em; }
    
    .main, .sub { font-size: 0.625em; }

    .sub-content .tit h3 { font-size: 2.25em; }

    .business .list li { width: 98%; margin: 1%; }
    .business .list .img { width: 45%; }

    .history .list .year b { font-size: 1.25em; }
    .history .list > * { padding-left: 8em; display: block; }
    .history .list .txt { width: 100% !important; }
    .history .list .txt h5 br { display: none; }
    .history .list .txt h5 br { display: none; }
}
@media screen and (max-width: 320px) {
    .header { font-size: 0.625em; }
    .header .mnb-box { font-size: 0.875em; }
    .footer { font-size: 0.625em; }
    .main, .sub { font-size: 0.5em; }
}