@charset "utf-8"; 
.header .nav ul li:first-child::after  {  width: 100%!important;}
.header { border-bottom: 1px solid #eee; }
.section { word-break:keep-all; line-height: 1.4;  }
.intr { padding: 100px 0 60px; box-sizing: border-box; }
.main-txt { font-size: 42px; font-weight: 600; }
.intr-detail { padding: 100px 0; box-sizing: border-box;line-height: 1.4;}
.sub-txt {  font-size: 28px; word-break: keep-all;  }
.img-wrap { position: relative;  height: 500px;  background-repeat: no-repeat; background-image: url(/AppData/company/images/sub/sub-img.png); background-size: cover; background-position: center;}
.box-wrap { margin-top: 60px; display: flex; }
.box-wrap .box { position: relative;  width: calc((100% - 40px)/3); padding: 40px 20px 30px; box-sizing: border-box; margin-left: 20px; border: 1px solid #ddd; border-radius: 5px; word-break: keep-all; }
.box-wrap .box:first-child { margin-left: 0; }
.box-wrap .box .num  {position: absolute; top:0; background-color:#6ab5d5 ;  color: #fff; width: 50px; height: 50px; text-align: center; line-height: 50px; border-radius: 999px; transform: translateY(-50%); font-size: 22px;  }
.box-wrap .box .tit { font-weight: 600; margin-bottom: 15px; font-size: 26px; }
.box-wrap .box .detail { color: #444; font-size: 22px; }

.history { padding: 100px 0; background-color:#a9e0f7 ; }
.history img {width: 90%; max-width: 800px;  margin: 0 auto; }
.hst-wrap { position: relative; background-color: #fff; padding:50px 50px; width: 90%; max-width: 800px; margin: 0 auto;  box-sizing: border-box; border-radius:0 0 5px 5px; }
.year-wrap { position: relative; }
.year-wrap::after { content: ""; position: absolute; width: 1px; top: 10px; left: 120px; height: 100%; background-color: #6ab5d5; transform: translateX(-50%);  }
.hst-wrap .year { display: flex; margin-top: 50px; position: relative; }
.hst-wrap .year:first-child { margin-top: 0;}
.hst-wrap .year .num {   font-size: 28px; font-weight: 500; color: #6ab5d5; }
.hst-wrap .year .detail { padding-left: 100px;  font-size: 22px;}
.hst-wrap .year .detail .month { width: 100%; box-sizing: border-box;  margin-top: 20px; }
.hst-wrap .year .detail .month:first-child { margin-top: 0; }
.hst-wrap .year .num::after { content: ""; width: 20px; height: 20px; background-color: #6ab5d5; border-radius: 999px; position: absolute;  left: 100px; transform: translate(50%, 50%);}


.hst-wrap .year .detail .month-num { position: relative; margin-right: 20px; }
.hst-wrap .year .detail .month-detail p { margin-bottom: 10px; color: #444; }
.hst-wrap .year .detail .month-detail p:last-child { margin-bottom: 0; }

.map { padding: 100px 0; }
.map .tit { text-align: center; font-weight: 600; font-size: 34px; margin-bottom: 60px; }
.map .contents { position: relative; }
.map .contents .info-wrap { position: absolute; top: 50% ;transform: translateY(-50%); width: calc(55% - 20px); margin-right: 20px; }
.map .contents dt { font-size: 22px; font-weight: 600; margin-bottom: 5px; font-size: 22px; color: #6ab5d5; }
.map .contents dd { margin-bottom: 15px; font-size: 22px; color: #444; }
.map .contents dd:last-child { margin-bottom: 0; }
.root_daum_roughmap .wrap_controllers { display: none; }
.map .contents .map-wrap { width: 45%; height: 350px; }
.map .contents .map-wrap .map {width: 100%; height: 100%;  }

.map .contents .root_daum_roughmap .wrap_map { width: 100%; height: 100%;}
.root_daum_roughmap { width: 100%; height: 100%; }

@media(max-width:1024px) {
  .intr-detail { padding: 80px 0; }
  .main-txt { font-size: 38px; }
  .map .contents .info-wrap { position: inherit; width: 100%; margin-right: 0; margin-bottom: 30px; top: 0; transform: translateY(0); }
  .map .contents .map-wrap { width: 100%; }
  
  .box-wrap { display: block; }
  .box-wrap .box { width: 100%; margin-left: 0; margin-top: 40px; }
  .box-wrap .box:first-child { margin-top: 0; }

}
@media(max-width:768px){
  .intr {  padding: 60px 0 40px; }
  .main-txt { font-size: 32px; }
  .sub-txt { font-size:28px ; }
  .sub-txt br { display: none; }
  .img-wrap { height: 280px; }
  
  .intr-detail { padding: 80px 0; }

  .box-wrap .box .tit { font-size: 22px; }
  .box-wrap .box .detail { color: #444; font-size: 20px; }

  .hst-wrap {padding: 30px; }
  .hst-wrap .year { display: block;padding-left: 60px; box-sizing: border-box; }
  .hst-wrap .year .detail { padding-left: 0; }
  .hst-wrap .year .num { margin-bottom: 10px; font-size: 24px; }
  .year-wrap::after { left: 9.5px; }
  .hst-wrap .year .num::after { left: -10px; top: -5px; }
  .hst-wrap .year { margin-top: 30px; }
  .hst-wrap .year .detail .month { margin-top: 15px; }

  .map { padding: 80px 0; }
  .map .tit {  font-size: 28px; margin-bottom: 40px;}
  .map .contents dt { font-size: 22px; }
  .map .contents dd { font-size: 20px; }
  .map .contents .map-wrap {height: 300px; }
}

@media(max-width:580px){
  .main-txt { font-size: 28px; }
  .img-wrap { height: 200px; }
  .intr { padding: 60px 0 40px; }
  .intr-detail { padding: 60px 0; }
  .sub-txt { font-size: 24px; }
  .sub-txt br { display: none; }
/*   .box-wrap { margin-top: 40px; } */
  .box-wrap .box { font-size: 18px; }
  .box-wrap .box .num { width: 45px; height: 45px; line-height: 45px;  font-size: 20px;}
 
  .hst-wrap .year { padding-left: 40px; }
  .hst-wrap .year .detail { font-size: 20px; }
  .hst-wrap .year .num {  font-size: 24px; }
  .year-wrap::after { left: 9.5px; }
  .hst-wrap .year .num::after {  }
  .hst-wrap .year { margin-top: 30px; }
  .hst-wrap .year .detail .month { margin-top: 10px; }
  .map { padding: 60px 0; }
}
@media(max-width:425px){
  .intr { padding: 40px 0; }

  .main-txt { font-size: 24px; }
  
  .sub-txt { font-size: 22px; }
  .hst-wrap { padding: 30px 20px; }
  .hst-wrap .year .detail .month-num { margin-right: 15px; }
  :lang(en) .hst-wrap .year .detail .month-num { margin-right: 0; margin-bottom: 5px;  }
  :lang(en) .hst-wrap .year .detail .month-num font { font-weight: 600; } 
  :lang(ja) .hst-wrap .year .detail .month-num { width: 100%; margin-right: 0; margin-bottom: 5px;  }
  :lang(ja) .hst-wrap .year .detail .month-num font { font-weight: 600; } 
 

}
@media(max-width:375px) { 
  .hst-wrap .year .detail .month-num { width: 100%; margin-right: 0; margin-bottom: 5px;  }
}