@charset "UTF-8";
/* company.css */
.intro-sect01 .inner { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; }
.intro-sect01 .text-area { padding: 0 50px 40px 0; width: 50%; }
.intro-sect01 .img-area { width: 50%; position: relative; }
.intro-sect01 .img-area .figure { position: relative; }
.intro-sect01 .img-area .figure:before {
  content: ''; width: 95%; height: 95%; display: block; border: 8px solid rgba(0, 56, 125, 0.2); position: absolute; top: 5%; left: 5%;
  -webkit-transition: 0.5sv; transition: 0.5sv; -webkit-animation-name: intro-line; animation-name: intro-line; -webkit-animation-delay: 1s;
  animation-delay: 1s; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; }
.intro-sect01 .img-area img { width: 100%; -webkit-animation-name: company_sec1; animation-name: company_sec1; -webkit-animation-delay: 1s;
  animation-delay: 1s; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; }
@-webkit-keyframes company_sec1 {
  from { -webkit-transform: translate(0, 0); transform: translate(0, 0); }
  to { -webkit-transform: translate(-20px, -20px); transform: translate(-20px, -20px); }
}
@keyframes company_sec1 {
  from { -webkit-transform: translate(0, 0); transform: translate(0, 0); }
  to { -webkit-transform: translate(-20px, -20px); transform: translate(-20px, -20px); }
}
@-webkit-keyframes intro-line {
  from { opacity: 0; top: 0; left: 0; }
  to { opacity: 1; top: 5%; left: 5%; }
}
@keyframes intro-line {
  from { opacity: 0; top: 0; left: 0; }
  to { opacity: 1; top: 5%; left: 5%; }
}
.intro-sect02 { position: relative; padding-bottom: 50px; }
.intro-sect02::before { display: block; content: ""; position: absolute; width: 100%; height: 50%; top: 0; background: #fff; }
.intro-sect02::after { display: block; content: ""; position: absolute; width: 100%; height: 50%; bottom: 0; background: #f5f5f5; }
.intro-sect02 .list-area { position: relative; z-index: 10; }
.intro-sect02 .list-area ul { margin-left: -8px; margin-right: -8px; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; }
.intro-sect02 .list-area li { padding: 8px; width: 25%; }
.intro-sect02 .list-area li .sect02-box { padding: 45px 20px; background: #fff; border: 1px solid #ddd; color: #888; height: 100%; }
.intro-sect02 .list-area li .sect02-box:hover .num { -webkit-transform: translate(0, -12px); transform: translate(0, -12px); }
.intro-sect02 .list-area li .sect02-box:hover .desc { color: #000; }
.intro-sect02 .list-area li .num {
  display: block; margin: 0 auto; width: 64px; height: 64px; background: #00387D; border-radius: 50%; text-align: center;
  line-height: 64px; color: #fff; font-size: 28px; font-weight: 700; -webkit-transition: 0.3s; transition: 0.3s; }
.intro-sect02 .list-area li .tit { margin: 20px auto 10px; font-size: 1.3rem; font-weight: 700; text-align: center; }
.intro-sect02 .list-area .desc { text-align: center; }
.intro-sect03 { background: #f5f5f5; }
.intro-sect03 .img-area img { width: 100%; }
.intro-sect03 .title-area * { text-align: center; }
.intro-sect03 .desc { margin: 32px; }
.intro-sect04 .intro-sect04-container { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; }
.intro-sect04 .intro-sect04-container::after { content: ''; display: block; clear: both; }
.intro-sect04 .intro-sect04-container .title-area { width: 30%; }
.intro-sect04 .title-area .sub_tit { margin: 35px auto 0; }
.intro-sect04 .timeline-area { margin-top: 16px; width: 70%; }
.intro-sect04 .timeline-list { display: -webkit-box; display: -ms-flexbox; display: flex; width: 100%; margin-bottom: 32px;
  -webkit-box-align: center; -ms-flex-align: center; align-items: center; }
.intro-sect04 .timeline-list .year-box { position: relative; -webkit-box-flex: 0; -ms-flex: 0 0 200px; flex: 0 0 200px; }
.intro-sect04 .timeline-list .year { background: #00387D; width: 90px; height: 90px; border-radius: 50%; text-align: center;
  line-height: 90px; color: #fff; font-weight: 600; font-size: 20px; }
.intro-sect04 .timeline-list:nth-child(2n) .year { background: #3a3838; }
.intro-sect04 .timeline-list .circle { position: absolute; float: right; display: block; width: 60px; height: 1px; background: #ccc;
  top: 50%; left: 90px; -webkit-transform: translateY(-50%); transform: translateY(-50%); }
.intro-sect04 .timeline-list .circle::after {
  display: block; content: ""; width: 7px; height: 7px; border-radius: 50%; background: #ccc; position: absolute; right: 0; top: -3px; }
.intro-sect04 .timeline-list .detail-box { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; }
.intro-sect04 .timeline-list .detail-box .detail_info { display: -webkit-box; display: -ms-flexbox; display: flex; margin-bottom: 6px; }
.intro-sect04 .timeline-list .detail-box .month { color: #333; font-weight: 600; width: 80px; }
.intro-sect04 .timeline-list .detail-box .detail { color: #787878; }
/* .map-sect .map-area { width: 100%; height: 490px; } */
.map-sect .map-box { height: 100%; height: 490px; }
.map-sect .map-box .root_daum_roughmap { width: 100%; height: 100%; }
.map-sect .map-box .root_daum_roughmap .wrap_map { height: 100%; /* 다음지도 스크립트 내의 class를 handling하는 것 같음 : wrap_map은 건드리지 말 것 */ }
.roughmap_maker_label, .root_daum_roughmap .wrap_btn_zoom { display: none !important; }
@media screen and (max-width: 1199px) {
  .intro-sect02 .list-area li .tit { margin: 15px auto 10px; }
  .intro-sect04 .title-area .sub_tit { margin: 32px auto 0; }
  .intro-sect04 .timeline-list .year-box { width: 160px; -webkit-box-flex: 0; -ms-flex: 0 0 160px; flex: 0 0 160px; }
  .intro-sect04 .timeline-list .year { width: 100px; height: 100px; line-height: 100px; font-size: 18px; }
  .intro-sect04 .timeline-list .circle { width: 50px; left: 100px; }
  .intro-sect04 .timeline-list .detail-box .detail { width: 70%; }
  .map-sect .map-box { height: 450px; }
}
@media screen and (max-width: 767px) {
  .intro-sect01 .text-area { display: block; padding: 0; width: 100%; }
  .intro-sect01 .img-area { display: block; margin-top: 40px; width: 100%; margin-left: 24px; background: none; }
  .intro-sect01 .img-area img { width: 100%; display: block; }
  .intro-sect02 .list-area li { width: 50%; }
  .intro-sect03 .img-area { height: 300px; }
  .intro-sect03 .img-area img { position: relative; height: 100%; }
  .intro-sect04 .timeline-area { margin-top: 40px; width: 100%; }
  .intro-sect04 .intro-sect04-container .title-area { width: 100%; }
  .intro-sect04 .timeline-list .year-box { width: 150px; -webkit-box-flex: 0; -ms-flex: 0 0 150px; flex: 0 0 150px; }
  .intro-sect04 .timeline-list .circle { width: 40px; }
  .intro-sect04 .timeline-list .detail-box { float: left; padding-left: 20px; width: 63%; }
  .intro-sect04 .timeline-list .detail-box .month { width: 65px; }
  .map-sect .map-box { height: 400px; }
}
@media screen and (max-width: 480px) {
  .intro-sect02 .list-area li { padding: 8px; width: 100%; }
  .intro-sect03 .img-area { height: 260px;}
  .intro-sect04 .title-area .sub_tit { margin: 30px auto 0; }
  .intro-sect04 .timeline-area { margin-top: 35px; }
  .intro-sect04 .timeline-list .year-box { width: 115px; -webkit-box-flex: 0; -ms-flex: 0 0 115px; flex: 0 0 115px; min-width: 115px; }
  .intro-sect04 .timeline-list .year { width: 70px; height: 70px; line-height: 70px; min-width: 70px; }
  .intro-sect04 .timeline-list .circle { width: 30px; left: 70px; }
  .intro-sect04 .timeline-list .detail-box { float: left; padding-left: 10px; width: 65%; }
  .intro-sect04 .timeline-list .detail-box li:first-child { margin-top: 28px; }
  .intro-sect04 .timeline-list .detail-box .month { width: 45px; }
  .intro-sect04 .timeline-list .detail-box .detail { width: 79%; }
  .map-sect .map-box { height: 300px; }
}
/* 비전 */
.vs-title01 { font-size: 2rem; font-weight: 500; margin-bottom: 30px; text-align: center; color: #222; }
.vs-content01 { padding: 50px 0; }
.vs-content01 ul { position: relative; margin: 0 -8px; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; }
.vs-content01 li { width: 33.3333%; text-align: center; padding: 0 8px; }
.vs-content01 li > div { height: 100%; background-color: #f9f9f9; }
.vs-content01 li > div .list-top-area { background-color: #00387D; padding: 15px 0; color: #fff; font-size: 1.24rem; }
.vs-content01 li > div .vs-list-box { padding: 40px 40px 20px; border:1px solid #DDD; }
.vs-content01 li > div .vs-list-box .b-list-info { font-size: 1.2rem; padding: 15px 0; border-top: 1px dashed #dcdcdc;
   border-bottom: 1px dashed #dcdcdc; -webkit-box-sizing: border-box; box-sizing: border-box; }
.vs-content01 li > div .vs-list-box .b-list-info span { display: block; }
.vs-content01 li > div .vs-list-box .b-list-desc { padding: 25px 0; color: #646464; }
.vs-content02 { padding: 50px 0; }
.vs-point { color: #00387D !important; }
.table-top-wrap { padding: 20px 0; }
.table-top-area { border-bottom: 1px solid #ccc; border-top: 4px solid #00387D; font-size: 1.1rem; font-weight: 500; padding: 20px;
   text-align: center; color: #222; }
.table-item {padding: 20px;}
.table-item .sub-title { color:#333; }
.table-subj { float: left; width: 40%; padding-right: 16px; font-weight: 500; }
.table-desc { float: left; width: 60%; }
.table-desc li { line-height: 1.7; text-indent: -10px; padding-left: 10px; }
.table-desc li:last-child { margin-bottom: 0; }
.table-item { padding: 20px; }
@media screen and (max-width: 1200px) {
  .vs-title01 { font-size: 1.8rem; }
}
@media screen and (max-width: 767px) {
  .vs-title01 { font-size: 1.5rem; }
  .vs-content01 { padding: 30px 0; }
  .vs-content01 li { width: 100%; margin-bottom: 24px; }
  .vs-content01 li:last-child { margin-bottom: 0; }
  .vs-content01 li > div { padding: 0; }
  .vs-content01 li > div .list-top-area { padding: 10px 0; font-size: 1.1rem; }
  .vs-content01 li > div .vs-list-box { padding: 20px 30px; }
  .vs-content01 li > div .vs-list-box .b-list-info { font-size: 1rem; }
  .vs-content01 li > div .vs-list-box .b-list-info span { display: inline-block; }
  .vs-content02 { margin-top: 24px; }
  .table-top-area { font-size: 1rem;  padding: 20px 0; }
}
@media screen and (max-width: 480px) {
  .vs-title01 { font-size: 1.4rem; }
  .vs-content01 li > div .vs-list-box { padding: 15px; }
  .table-subj { width: 100%; margin-bottom: 20px; }
  .table-item { padding: 0 10px 30px; }
  .table-desc { width: 100%; }
}