@charset 'utf-8';
.responsive .at-body > .at-container{ padding: 0 !important; max-width: 100%;}
.page-content { font-weight: 400; color: #333;}
.page-content ul, .page-content dl { padding: 0;}
.page-content li { list-style: none; }
.page-content b.main-color { font-weight: 400; color: #ed7d31;  }
.page-content em.under-line { position: relative; z-index: 2; }
.page-content p { word-break: keep-all;}
.page-content.company article { padding: 100px 0;}
.page-content.company article:first-of-type { padding-top: 0;}
.page-content.company article:nth-of-type(even) { background: #f9f9f9;}
.page-content.company article:last-of-type { padding-bottom: 150px !important;}
.page-content article > [class^='con'] { padding-left: 10px; padding-right: 10px; margin: 0 auto; max-width: 1320px; }

.page-content em.under-line:after { content:''; position: absolute; left: 0; bottom: 13%; z-index: -1; width: 100%; height: 24%; background: #ffc39a;}

@media(max-width:991px){
    .page-content.company article { padding: 90px 0;}
}
@media(max-width:768px){
    .page-content.company article { padding: 80px 0;}
}

@media (max-width:576px){
    .page-content.company article { padding: 70px 0;}
    .page-content { font-size: 15px;}
}
@media (max-width:480px){
    .page-content.company article { padding: 60px 0;}
}



/* CEO인사말 */

.greeting .con1{ background: url('/page/imgs/greeting_bg.png') no-repeat right top;  padding-bottom: 45px;}
.greeting .p1 {  font-size: 35px; color: #111; }
.greeting .p2 { padding: 15px 0 35px;  font-size: 25px; }
.greeting .sing { padding: 35px 0 0;}
.greeting .sing img { width: 100%; max-width: 148px;}

@media (max-width:1199px){
    .greeting .con1 { background-size: 380px auto;}
}
@media (max-width:991px){
    .greeting .con1 { background-size: 350px auto;}
    .greeting p { max-width: calc(100% - 370px); }
    .greeting p br { display: none;}
    .greeting .p1 { font-size: 30px;}
    .greeting .p2 { padding: 20px 0 35px; font-size: 21px;}
}
@media (max-width:768px){
    .greeting .con1 { position: relative; padding-top:330px; background: none; padding-bottom:0px;}
    .greeting .con1:before { content:''; display: block; position: absolute; top: 0; width: 100%; height: 300px; background: url('/page/imgs/greeting_bg.png') no-repeat center / cover;}
    .greeting p { max-width: 100%; }
    .greeting .p1 { font-size: 28px;}
    .greeting .p2 { padding: 22px 0 35px;}
}
@media (max-width:576px){
    .greeting .p1 { font-size: 22px; }
    .greeting .p2 {  padding: 15px 0 25px; font-size: 17px;}}


/* 회사개요 */
.overview  img {width: 100%; }
.overview .con1 .intro { padding: 0 0 70px; margin: 0 auto;  width: 100%; max-width: 980px; font-size: 22px; color: #111; font-weight: 400; text-align: center;}
.overview .con1 ul { margin: 0 auto; max-width: 985px; width: 100%; border: 1px dashed #ccc;  border-radius: 16% / 50%;}
.overview .con1 ul li {  padding: 15px; width: 100%; max-width: 300px; border-radius:50%;  }
.overview .con1 ul li:nth-of-type(2) { border: 1px dashed #ccc; }
.overview .con1 ul li p { overflow: hidden; position: relative; width: 100%; border-radius: 50%; }
.overview .con1 ul li p span { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 100%; font-size: 28px; color: #fff; font-weight: 400; text-align: center;}
.overview .con1 ul li p:after { content:''; display: block; padding-bottom: 100%;}
.overview .con1 ul li:nth-of-type(1) p { background: url('/page/imgs/overview_bg1.jpg');}
.overview .con1 ul li:nth-of-type(2) p { background: url('/page/imgs/overview_bg2.jpg');}
.overview .con1 ul li:nth-of-type(3) p { background: url('/page/imgs/overview_bg3.jpg');}

.overview .con2 dl { flex-wrap:wrap; border-top: 2px solid #1b202c; }
.overview .con2 dl dt,
.overview .con2 dl dd {  font-weight: 300; border-bottom: 1px solid #e1e1e1;}
.overview .con2 dl dt { padding: 12.2px 10px; width: 150px; text-align: center; background: #131e34; color: #fff;}
.overview .con2 dl dd { padding: 12.2px 40px; width: calc(100% - 150px);}
.overview .con2 .img p { padding: 15px 0 0; color: #111; text-align: center;}



@media (min-width:1200px){
    .overview .con2:after { content:''; display: block; padding-bottom: 70%;}
    .overview .con2 { position: relative; }
    .overview .con2 > * { position: absolute; width: 48.84%;}
    .overview .con2 dl { top: 0; right: 10px;}
    .overview .con2 .img1 { top: 0; left: 10px;}
    .overview .con2 .img2 { top: 390px; left: 10px;}
    .overview .con2 .img3 { top: 390px; right: 10px;}
}

@media (max-width:1199px){
    .overview .con2 { display: flex; justify-content: space-between; flex-wrap: wrap}
    .overview .con2 dl { margin: 0 0 40px; width: 100%; }
    .overview .con2 .img { width: 32%;}
    .overview .con2 p.sr-only { position: static; width: auto; height:auto;}
}
@media (max-width:991px){
    .overview .con1 .intro { padding: 0 0 60px; font-size: 20px;}


}
@media (max-width:768px){
    .overview .con1 .intro {  padding: 0 0 50px;  font-size: 18px;}
    .overview .con1 ul li p span { font-size: 22px;}
    .overview .con2 dl { margin: 0 0 30px; }
    .overview .con2 .img { margin: 0 0 20px; width: 48%;}
    .overview .con2 .img p { padding: 10px 0 0;}

}
@media (max-width:576px){
    .overview .con1 .intro { padding: 0 0 50px;  font-size: 16px;}
    .overview .con1 ul li { padding: 10px;}
    .overview .con1 ul li p span { font-size: 18px;}
    .overview .con2 dl { margin: 0 0 20px; }
    .overview .con2 .img { width: 49%;}

}
@media (max-width:480px){
    .overview .con1 ul li { padding: 7px;}
    .overview .con1 ul li p span { font-size: 15px;}
    .overview .con2 dl dt { width: 100px;}
    .overview .con2 dl dd { padding: 12.2px 20px; width: calc(100% - 100px);}
    .overview .con2 .img {  width: 100%;}
}
@media (max-width:400px){
    .overview .con1 ul li { padding: 5px;}
    .overview .con1 ul li p span { font-size: 14px;}
}



/* 연혁 */
.history #tab-button { padding: 0 10px 70px; margin: 0 auto; width: 100%; max-width: 1320px; }
.history #tab-button li { flex:1; margin-right: -1px; border: 1px solid #e1e1e1;}
.history #tab-button li a { display: block; width: 100%; height: 50px; text-align: center; font-size: 18px; line-height: 50px; color: #111;}
.history #tab-button li a:hover,
.history #tab-button li a.active { background: #131e34; color: #fff; }
.history .con1 { background: url('/page/imgs/history_bg.png') no-repeat right bottom 10%; min-height: 620px;}
.history .con1 .box { position: relative; justify-content: flex-start; padding: 0 0 40px;}
.history .con1 .box p.year { position: relative; padding: 0 25px 0 0; font-size: 25px; font-weight: 500; line-height: 1; }
.history .con1 .box dl { position: relative;  justify-content: flex-start; padding: 0 0 0 100px; }
.history .con1 .box dt { font-size: 20px; font-weight: 500; }
.history .con1 .box dd { padding: 0 0 0 20px; font-weight: 300; line-height: 28.56px;}
.history .con1 .box:after,
.history .con1 .box p.year:before, .history .con1 .box dl.flex:before,
.history .con1 .box p.year:after, .history .con1 .box dl.flex:after { content:''; display: block; position: absolute;}
.history .con1 .box:after { left:77px; top: 10px; width: 1px; height: 100%; background: #e1e1e1; }
.history .con1 .box:last-of-type:after { display: none;}
.history .con1 .box p.year:before { right: 0; top: 6px; z-index: 2; width: 12px; height: 12px; background: #fff; border-radius: 50%; border: 2px solid #ed7d31;}
.history .con1 .box dl:before { top: 12px; left: 0; width: 40px; height: 1px; background: #e1e1e1; }
.history .con1 .box dl:after { top: 8px; left: 40px; width: 8px; height: 8px; background: #fff; border: 2px solid #e1e1e1; border-radius: 50%;}


@media(max-width:1199px){
    .history .con1 { background: none; min-height: auto;}
}

@media(max-width:768px){
    .history .con1 .box dl { padding: 0 0 0 70px; }
}
@media(max-width:576px){
    .history .con1 .box { flex-direction: column;}
    .history .con1 .box p.year { margin: 0 0 10px; width: 100%; font-size: 22px;}
    .history .con1 .box dl { padding: 0 0 0 20px; width: 100%;}
    .history .con1 .box dt { font-size: 18px;}
    .history .con1 .box dd { padding: 0 0 0 10px;}
    .history .con1 .box:after { display: none;}
    .history .con1 .box p.year:before { left: 60px; top: 50%; transform: translateY(-50%);}
    .history .con1 .box dl:before { left: 0%; top: 11px; width: 15px;}
    .history .con1 .box dl:after { left: 0; top: 7px;}
}


/* 부설연구소 */
.research .bg-box { position: relative; width: 100%; height: 488px; background: url('/page/imgs/research_bg.jpg') no-repeat center / cover;}
.research .bg-box:after { content:''; display: block; position: absolute; right: 20px; bottom: 20px; width: 256px; height: 52px; background: url('/page/imgs/research_logo.png') no-repeat center / contain;}
.research .txt { position: relative; padding: 57px 0 100px 30px; margin: -213px 0 0 ; width: 65.38%; background: #fff; color: #111; }
.research .txt .p1 { padding: 0 0 26px; font-size: 35px; font-weight: 500; }
.research .txt .p2 { font-size: 20px; }

@media (max-width:991px){
    .research .bg-box { height: 400px;}
    .research .bg-box:after { width: 180px; right: 15px;}
    .research .txt { padding: 30px 0 100px 15px; margin: -173px 0 0 ; width: 73.5%; }
    .research .txt .p1 { font-size: 33px;}
    .research .txt .p2 { font-size: 18px;}
}
@media (max-width:768px){
    .research .bg-box { height: 350px;}
    .research .bg-box:after { width: 200px; top: 20px;}
    .research .txt { padding: 40px 10px 40px ; margin: -133px auto 60px ; width: 96%; text-align: center; box-shadow: 0px 5px 10px rgba(0,0,0,.2);}
    .research .txt .p1 { font-size: 32px;}
}
@media (max-width:576px){
    .research .bg-box { height: 300px;}
    .research .bg-box:after { width: 200px; top: 20px;}
    .research .txt { padding: 30px 10px 30px ; margin: -133px auto 50px ; width: 96%; text-align: center; box-shadow: 0px 5px 10px rgba(0,0,0,.2);}
    .research .txt .p1 { padding: 0 0 15px;  font-size: 24px;}
    .research .txt .p1 br { display: none;}
    .research .txt .p2 { font-size: 16px;}
}


/* 오시는길 */
.location .flex > div { flex:1;}
.location .flex .img { background: url(/page/imgs/location_img1.jpg) no-repeat center / cover;  }
.location  p { text-align: center;}
.location .add { padding: 45px 0 20px ; font-size: 30px; font-weight: 500; color: #111;}
.location .tel { color: #666; }
.location .tel span { display: inline-block; margin: 0 10px ;}

@media (max-width:991px){
    .location .flex .img { display: none;}
}

@media (max-width:768px){
    .location .add { padding: 35px 0 15px ; font-size: 26px;}
}

@media (max-width:576px){
    .location .add { padding: 30px 0 10px ; font-size: 20px;}
    .location .tel span { margin: 0 5px;}
}


.page-content.prod article { padding: 70px 0 ;}
.page-content.prod article.page-title { padding: 100px 0 50px; }
.page-content.prod article:last-of-type {padding-bottom: 100px;}
.page-content.prod article.bg { padding-left: 10px; padding-right: 10px; background: #f9f9f9; }
.page-content.prod article.bg > div { padding: 50px 2.66%; background: #fff; border-radius: 15px;}
.page-content.prod h3 { padding: 0 0 15px; font-size: 35px; font-weight: 500; color: #111; line-height: 1; }
.page-content.prod h3+p {font-size: 20px; color: #999; font-weight: 300;}
.page-content.prod .con1 { font-weight: 300; color: #555;}
.page-content.prod h4 { font-size: 25px; font-weight: 500; color: #333;}
.page-content.prod .h4-1 { padding: 0 0 50px; }
.page-content.prod .h4-2 { position: relative; padding: 0 0 0 20px; margin: 0 0 50px; }
.page-content.prod .h4-2:before { content:''; display: block; position: absolute; left: 0; top: 50%; transform: translateY(-50%); height: 100%; width: 3px; background: #ed7d31;}

.page-content.prod #tab-button { justify-content: flex-start; flex-wrap:wrap; margin: 0 0 -40px;}
.page-content.prod #tab-button li { min-width:140px;}
.page-content.prod #tab-button li a { display: block; padding: 15px 30px; width: 100%; text-align: center; word-break: keep-all;}
.page-content.prod #tab-button li a.active,
.page-content.prod #tab-button li a:hover { border-bottom: 2px solid #111; color: #111;}

.page-content .table-wrap { overflow-x: auto; padding: 0 0 5px; width: 100%; }
.page-content .table-wrap table { width: 100%; min-width:600px; border-top: 2px solid #111;}

.page-content .table-wrap table th,
.page-content .table-wrap table td { padding:10px 5px; border: 1px solid #e1e1e1; text-align: center; font-size: 15px; color: #333; font-weight: 300; }
.page-content .table-wrap table th { background: #f9fbfc; font-weight: 500;}
.page-content .table-wrap::-webkit-scrollbar { width: 100%; height: 10px;}
.page-content .table-wrap::-webkit-scrollbar-track { box-shadow: inset 0 0 5px grey;  border-radius: 5px; }
.page-content .table-wrap::-webkit-scrollbar-thumb { background: #ed7d31; border-radius: 5px; }



@media (max-width:991px){
    .page-content.prod #tab-button { margin: 0;}
    .page-content.prod article { padding: 65px 0 ;}
    .page-content.prod article.page-title { padding: 70px 0 50px; }
    .page-content.prod article.bg > div { padding: 40px 20px;}
    .page-content.prod h3 { font-size: 33px;}
    .page-content.prod h3+p { font-size: 18px;}
    .page-content.prod .h4-1 { padding: 0 0 30px;}
}
@media (max-width:768px){
    .page-content.prod #tab-button { margin: 10px 0 0;}
    .page-content.prod article { padding: 60px 0 ;}
    .page-content.prod article.page-title { padding: 60px 0 50px; text-align: center;}
    .page-content.prod article.bg > div { padding: 30px 15px;}
    .page-content.prod h3 { padding: 0 0 10px; font-size: 31px;}
    .page-content.prod h3+p { font-size: 16px;}
    .page-content.prod h4 { font-size: 23px;}



}
@media (max-width:576px){
    .page-content.prod #tab-button { margin: 20px 0 0;}
    .page-content.prod #tab-button li { margin: -1px 0 0 -1px; width: 50%; min-width: auto; border: 1px solid #e1e1e1;}
    .page-content.prod #tab-button li a { padding: 10px 0;}
    .page-content.prod #tab-button li a:hover,
    .page-content.prod #tab-button li a.active { background: #f9f9f9; border-bottom:none;}
    .page-content.prod article { padding: 55px 0 ;}
    .page-content.prod article.page-title { padding: 50px 0 50px; }
    .page-content.prod article.bg > div { padding: 25px 10px;}
    .page-content.prod h4 { font-size: 20px;}
    .page-content.prod .h4-1 { padding: 0 0 20px;}
    .page-content.prod .h4-2 { padding: 0 0 0 15px; margin: 0 0 40px;}
    .page-content .table-wrap table th, .page-content .table-wrap table td { padding: 10px 3px; font-size: 12px;}
}


.tapping_screw .con1 .chg-img { flex-wrap:wrap;  }
.tapping_screw .con1 .chg-img li { width: 32.83%;  margin: 0 0 10px; border: 1px solid #e1e1e1; cursor: pointer; }
.tapping_screw .con1 .chg-img li img { width: 100%;}
.tapping_screw .con2 .flex { justify-content:space-around ; padding: 50px 0; border: 1px solid #e1e1e1;}
.tapping_screw .con2 .flex .img { margin: 0 10px;}

@media (min-width:769px){
  .chg-img2{display: none;}
}
@media (max-width:768px){
  .chg-img1{display: none;}
  .chg-img2{flex-wrap: wrap; display: flex;}
  .tapping_screw .con1 .chg-img2 li { width: 49%;  margin: 0 0 5px; border: 1px solid #e1e1e1; cursor: pointer; }
  .tapping_screw .con1 .chg-img2 li img { width: 100%;}

    .tapping_screw .con1 .chg-img li { width: 49%;}
    .tapping_screw .con2 .flex { flex-direction: column; align-items: center; padding: 40px 0;}
    .tapping_screw .con2 .flex .img:not(:last-of-type)  { padding: 0 0 25px;}
}
@media (max-width:480px){
    .tapping_screw .con1 .chg-img {}
    .tapping_screw .con1 .chg-img li {  width:49.5%; max-width: 370px; margin: 0 0 5px;}
    .tapping_screw .con2 .flex { padding: 30px 0;}
    .flex-col-480 { flex-direction: column;}
    .flex-col-480 > div:not(:last-of-type) { margin: 0 0 10px; }
}



.small_screw .img-box {  }