@charset "utf-8";


/*누리웹 모든*/

* {
    margin: 0;
    padding: 0;
}

/*풀페이지 민하이 제안*/
html, body {
  width: 100%;
  height: 100%;
}

body {
  font-family: "Pretendard", "맑은 고딕", "Malgun Gothic", 돋움, Dotum, Arial, "Apple Gothic", sans-serif;
}

a {
    text-decoration: none;
}

img {
    border: 0;
}

li {
    list-style: none;
}

/*회사소개 시작*/

.company_bg {
  margin-top: -65px;
  min-width: 320px;
  background: url(../../../img/company_img/new_nurilab_company.png) no-repeat center right;
  background-size: cover;

    /*높이제한 1단계*/
    min-height: 650px;
    height: 100%;
}

.company_wrap {
  margin: 0 auto;
  max-width: 1300px;
  width: auto;
  height: 100%;
  padding: 0 20px 0 20px;

  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}


.company {
  height: 100%;
}

.company_box1 {

    /*높이제한 2단계*/
    min-height: 650px;

  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;

  overflow: hidden;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}


.company_box1_flex {
  width: auto;
  display: flex;
  flex-direction: column;
}


.company_box1_flex > h1 {
   font-size: 55px;
   font-weight: 900;
   line-height: 80px;  
   color: #fff;
   word-break: keep-all;
}

.company_box1_flex > h2 {
  font-size: 60px;
  font-weight: 700;
  word-break: keep-all;
  color: #ffffff;
  text-align: left;
  margin-bottom: 5px;
  text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
  max-width: 780px;
  margin-bottom: 20px;
}

.company_box1_flex > h3 {
  font-size: 40px;
  font-weight: 600; 
  line-height: 60px;
  color: #fff;
  word-break: keep-all;
}

.now_center {
  display: flex;
}

.now_center > h3 {
  font-size: 16px;
  color: #000549;
  font-weight: 700;
  margin-bottom: 15px;
  background: #dae0f5;
  display: flex;
  border-radius: 50px;
  padding: 10px 15px 10px 15px;
  margin-right: auto;
}


.company_box1 > h4 {
  margin-top: 25px;
  font-size: 31px;
  word-break: keep-all;
  color: #fff;
  word-break: keep-all;
}


@media only screen and (min-width: 0px) and (max-width: 510px) {

  .now_center {
    display: flex;
    justify-content: center;
  }

  .now_center > h3 {
    font-size: 16px;
    color: #000549;
    font-weight: 700;
    margin-bottom: 15px;
    background: #dae0f5;
    display: flex;
    border-radius: 50px;
    padding: 10px 15px 10px 15px;
    margin-right: inherit;
  }

  .company_box1_flex > h1 {
    font-size: 41px;
    line-height: 60px;
    text-align: center;
 }
 
 .company_box1_flex > h2 {
  font-size: 20px;
  line-height: 35px;
   text-align: center;
 }
 
 .company_box1_flex > h3 {
  font-size: 15px;
  line-height: 30px;
  text-align: center;
}

 .company_box1_flex > h4 {
  font-size: 15px;
  line-height: 24px;
  text-align: center;
}


}

@media only screen and (min-width: 509px) and (max-width: 450px) {

  .now_center {
    display: flex;
    justify-content: center;
  }

  .now_center > h3 {
    margin-right: inherit;
  }
  
  .company_box1_flex > h1 {
    font-size: 50px;
    line-height: 80px;
    text-align: center;
 }
 
 .company_box1_flex > h2 {
  font-size: 30px;
  line-height: 45px;
   text-align: center;
 }
 
 .company_box1_flex > h3 {
  font-size: 25px;
  line-height: 50px;
  text-align: center;
}

 .company_box1_flex > h4 {
  font-size: 15px;
  line-height: 24px;
  text-align: center;
}

}

@media only screen and (min-width: 451px) and (max-width: 776px) {

  .now_center {
    display: flex;
    justify-content: center;
  }

  .now_center > h3 {
    margin-right: inherit;
  }

  .company_box1_flex > h1 {
    font-size: 55px;
    line-height: 80px;
    text-align: center;
 }
 
  .company_box1_flex > h2 {
    font-size: 35px;
    line-height: 55px;
    text-align: center;
  }
  
  .company_box1_flex > h3 {
    font-size: 30px;
    line-height: 45px;
    text-align: center;
  }

  .company_box1_flex > h4 {
    font-size: 20px;
    line-height: 24px;
    text-align: center;
  }
}

@media only screen and (min-width: 777px) and (max-width: 970px) {

  .now_center {
    display: flex;
    justify-content: center;
  }

  .company_box1 {
    overflow: hidden;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }
  
  
  .company_box1 > h1 {
     text-align: center;
  }
  
  .company_box1 > h2 {
    text-align: center;
  }
  
  .company_box1 > h3 {
    text-align: center;
  }

  .company_box1 > h4 {
    text-align: center;
  }
  
}





/***************************
*
*
* 메시지
*
*
******************************/


.message_bg {
  min-width: 320px;
  z-index: 1;
  width: 100%;
  position: relative;
  padding: 250px 0 250px 0;
  background: url(../../../img/company_img/company_building.svg) no-repeat #fbfcff center bottom;
  background-size: cover;
  overflow: hidden;
}

.message_wrap {
  margin: 0 auto;
  max-width: 1300px;
  padding: 0 20px 0 20px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.message_box {
  display: flex;
  flex-direction: row;
}

.message_item {
  display: flex;
  flex-direction: column;
  z-index: 2;

  background: rgba(251, 252, 255, 0.7);
  backdrop-filter: blur(50px);
  padding: 30px;
  border-radius: 20px;
}

.message_item_tit {
  display: flex;
  flex-direction: column;
  margin-bottom: 20px;
}

.message_item_tit_text {
  display: flex;
  flex-direction: column;
}

.message_item_tit_text > h4 {
  font-size: 16px;
  color: #000549;
  font-weight: 700;
  margin-bottom: 15px;
  background: #dae0f5;
  display: flex;
  border-radius: 50px;
  padding: 10px 15px 10px 15px;
  margin-right: auto;
}

.message_item_tit_text > h3 {
  font-size: 30px;
  font-weight: 900;
  color: #000549;
  line-height: 45px;
}

.message_item_tit_text > h3 > span {
  font-size: 40px;
}


.message_item_text {
  display: flex;
  flex-direction: column;
  margin-bottom: 20px;
}

.message_item_text > p {
  font-size: 18px;
  font-weight: 300;
  line-height: 28px;
}

.message_item_ceo {
  display: flex;
  flex-direction: column;
}

.message_item_ceo > h5 {
  font-size: 20px;
  font-weight: 700;
  line-height: 30px;
  color: #000549;
}

@media only screen and (min-width: 0px) and (max-width: 900px) {
  .message_bg {
    min-width: 320px;
    z-index: 1;
    width: 100%;
    position: relative;
    padding: 250px 0 250px 0;
    background: url(../../../img/company_img/company_building.svg) no-repeat #fbfcff right bottom;
    background-size: cover;
    overflow: hidden;
  }

  .message_box {
    display: flex;
    flex-direction: row;
    justify-content: center;
  }

  .message_item_tit_text > h4 {
    font-size: 14px;
    color: #000549;
  }

  .message_item_tit_text > h3 {
    font-size: 20px;
    font-weight: 900;
    color: #000549;
    line-height: 35px;
  }

  .message_item_tit_text > h3 > span {
    font-size: 30px;
  }

  .message_item_text > p {
    font-size: 16px;
    font-weight: 300;
    line-height: 25px;
  }

}


/**********************
*
*
* 미래선도
*
*
*************************/
.future_bg {
  min-width: 320px;
  background: #fbfcff;
  padding: 100px 0 100px 0;

  overflow: hidden !important;

  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.future_wrap {
  margin: 0 auto;
  max-width: 1300px;
  height: auto;

  padding: 0 20px 0 20px;

  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.future_item {

}


.future_item_tit {
  display: flex;
  flex-direction: column;
  margin-bottom: 20px;
}

.future_item_tit_text {
  display: flex;
  flex-direction: column;
}

.future_item_tit_text > h4 {
  font-size: 16px;
  color: #000549;
  font-weight: 700;
  margin-bottom: 15px;
  background: #dae0f5;
  display: flex;
  border-radius: 50px;
  padding: 10px 15px 10px 15px;
  margin-right: auto;
}

.future_item_tit_text > h3 {
  font-size: 30px;
  font-weight: 900;
  color: #000549;
  line-height: 45px;
}

.future_item_tit_text > h3 > span {
  font-size: 40px;
}


.future_core_bundle {
  display: flex;
  flex-direction: column;
}


.future_core {
  display: flex;
  flex-direction: column;
  margin-bottom: 60px;
}

.future_core_tit {
  display: flex;
  margin-bottom: 15px;
}

.future_core_tit > h3 {
  display: block;
  font-size: 25px;
  font-weight: 700;
  color: #000549;
  line-height: 35px;
}

.future_core_item_box {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}


/*1번 레이아웃*/

.future_core_item_box1 > .future_core_item:nth-child(1) {
  width: calc(1.5/4*100% - (1 - 1.5/4)*15px);
  margin-right: 15px;
}

.future_core_item_box1 > .future_core_item:nth-child(2) {
  width: calc(1/4*100% - (1 - 1/4)*15px);
  margin-right: 15px;
}

.future_core_column {
  display: flex;
  flex-direction: column;
  width: calc(1.5/4*100% - (1 - 1.5/4)*15px);
}

.future_core_column > .future_core_item:first-child {
  margin-bottom: 15px;
}



@media only screen and (min-width: 601px) and (max-width: 1230px) {
  .future_core_item_box {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
  }

  /*1번 레이아웃*/

  .future_core_item_box1 > .future_core_item:nth-child(1) {
    width: calc(1/2*100% - (1 - 1/2)*15px);
    margin-right: 15px;
    margin-bottom: 15px;
  }

  .future_core_item_box1 > .future_core_item:nth-child(2) {
    width: calc(1/2*100% - (1 - 1/2)*15px);
    margin-right: 0px;
    margin-bottom: 15px;
  }

  .future_core_column {
    display: flex;
    flex-direction: row;
    width: calc(100%);
  }

  .future_core_column > .future_core_item {
    width: calc(1/2*100% - (1 - 1/2)*15px);
    margin-right: 15px;
    margin-bottom: 15px;
  }

  .future_core_column > .future_core_item:last-child {
    width: calc(1/2*100% - (1 - 1/2)*15px);
    margin-right: 0px;
    margin-bottom: 15px;
  }

}




@media only screen and (min-width: 0px) and (max-width: 600px) {
  .future_core_item_box1 {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
  }

  /*1번 레이아웃*/

  .future_core_item_box1 > .future_core_item:nth-child(1) {
    width: calc(100%);
    margin-right: 0px;
    margin-bottom: 15px;
  }

  .future_core_item_box1 > .future_core_item:nth-child(2) {
    width: calc(100%);
    margin-right: 0px;
    margin-bottom: 15px;
  }

  .future_core_column {
    display: flex;
    flex-direction: column;
    width: calc(100%);
  }

  .future_core_column > .future_core_item {
    width: calc(100%);
    margin-right: 15px;
    margin-bottom: 15px;
  }

  .future_core_column > .future_core_item:last-child {
    width: calc(100%);
    margin-right: 0px;
    margin-bottom: 15px;
  }

}


/*2번 레이아웃*/


.future_core_item_box2 > .future_core_item:nth-child(1) {
  width: calc(1/4*100% - (1 - 1/4)*15px);
  margin-right: 15px;
}

.future_core_item_box2 > .future_core_item:nth-child(2) {
  width: calc(1/4*100% - (1 - 1/4)*15px);
}



.future_core_item_box2 > .future_core_item:nth-child(3) {
  width: calc(1/4*100% - (1 - 1/4)*15px);
  margin-right: 0px;
}


.future_core_column2 {
  display: flex;
  flex-direction: column;
  width: calc(2/4*100% - (1 - 2/4)*15px);
  margin-right: 15px;
}

.future_core_row2 {
  display: flex;
  flex-direction: row;
  margin-bottom: 15px;
  height: 100%;
}

.future_core_row2 > .future_core_item {
  width: calc(1/2*100% - (1 - 1/2)*15px);
}

.future_core_row2 > .future_core_item:first-child {
  margin-right: 15px;
}

.future_core_item_full {
  height: 100%;
}

.future_core_column3 {
  display: flex;
  flex-direction: column;
  width: calc(1/4*100% - (1 - 1/4)*15px);
}



.future_core_column3 > .future_core_item:first-child {
  margin-bottom: 15px;
}


@media only screen and (min-width: 0px) and (max-width: 600px) {
  .future_core_item_box2 {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
  }


  .future_core_item_box2 > .future_core_item:nth-child(1) {
    width: calc(100%);
    margin-right: 0px;
    margin-bottom: 15px;
  }

  .future_core_item_box2 > .future_core_item:nth-child(2) {
    width: calc(100%);
  }

  .future_core_item_box2 > .future_core_item:nth-child(3) {
    width: calc(100%);
  }
    
  .future_core_column2 {
    width: calc(100%);
    margin-right: 0px;
    margin-bottom: 15px;
  }

  .future_core_row2 {
    display: flex;
    flex-direction: column;
    margin-bottom: 15px;
    height: 100%;
  }

  .future_core_row2 > .future_core_item:first-child {
    margin-right: 0px;
    margin-bottom: 15px;
  }

  .future_core_row2 > .future_core_item {
    width: calc(100%);
  }


  .future_core_column3 {
    display: flex;
    flex-direction: column;
    width: calc(100%);
  }

  .future_core_column3 > .future_core_item {
    width: calc(100%);
    margin-right: 15px;
  }

  .future_core_column3 > .future_core_item:last-child {
    width: calc(100%);
    margin-right: 0px;
    margin-bottom: 15px;
  }

}



@media only screen and (min-width: 601px) and (max-width: 1230px) {
  .future_core_item_box2 {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
  }


  .future_core_item_box2 > .future_core_item:nth-child(1) {
    width: calc(100%);
    margin-right: 0px;
    margin-bottom: 15px;
  }

  .future_core_item_box2 > .future_core_item:nth-child(2) {
    width: calc(1/4*100% - (1 - 1/4)*15px);
  }

  .future_core_item_box2 > .future_core_item:nth-child(3) {
    width: calc(100%);
    margin-right: 0px;
  }
  
  .future_core_column2 {
    width: calc(100%);
    margin-right: 0px;
    margin-bottom: 15px;
  }

  .future_core_row2 > .future_core_item {
    width: calc(100%);
  }


  .future_core_column3 {
    display: flex;
    flex-direction: row;
    width: calc(100%);
  }

  .future_core_column3 > .future_core_item {
    width: calc(1/2*100% - (1 - 1/2)*15px);
    margin-right: 15px;
  }

  .future_core_column3 > .future_core_item:last-child {
    width: calc(1/2*100% - (1 - 1/2)*15px);
    margin-right: 0px;
    margin-bottom: 15px;
  }

}




.future_core_item {
  display: flex;
  flex-direction: column;
  background: #ffffff;
  box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.1);
  border-radius: 15px;
  overflow: hidden;
}

.future_core_item_img_box {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 20px;
}

.future_core_item_img {
  width: 150px;
  height: 150px;
}

.future_core_item_img1 {
  width: 150px;
  height: 150px;
  background: url(../../../img/company_img/core_icon1.png) no-repeat center center;
  background-size: 150px 150px;
}

.future_core_item_img2 {
  width: 150px;
  height: 150px;
  background: url(../../../img/company_img/core_icon2.png) no-repeat center center;
  background-size: 150px 150px;
}

.future_core_item_img3 {
  width: 150px;
  height: 150px;
  background: url(../../../img/company_img/core_icon3.png) no-repeat center center;
  background-size: 150px 150px;
}

.future_core_item_img4 {
  width: 150px;
  height: 150px;
  background: url(../../../img/company_img/core_icon4.png) no-repeat center center;
  background-size: 150px 150px;
}

.future_core_item_img5 {
  width: 150px;
  height: 150px;
  background: url(../../../img/company_img/core_icon5.png) no-repeat center center;
  background-size: 150px 150px;
}

.future_core_item_img6 {
  width: 150px;
  height: 150px;
  background: url(../../../img/company_img/core_icon6.png) no-repeat center center;
  background-size: 150px 150px;
}

.future_core_item_img7 {
  width: 150px;
  height: 150px;
  background: url(../../../img/company_img/core_icon7.png) no-repeat center center;
  background-size: 150px 150px;
}

.future_core_item_img8 {
  width: 150px;
  height: 150px;
  background: url(../../../img/company_img/core_icon8.png) no-repeat center center;
  background-size: 150px 150px;
}

.future_core_item_img9 {
  width: 150px;
  height: 150px;
  background: url(../../../img/company_img/core_icon9.png) no-repeat center center;
  background-size: 150px 150px;
}

.future_core_item_img10 {
  width: 150px;
  height: 150px;
  background: url(../../../img/company_img/core_icon10.png) no-repeat center center;
  background-size: 150px 150px;
}


/* 공통 톤: 딥 네이비 베이스 + 네온 라인 느낌 */

/* 1) Indigo → Bright Blue */
.future_core_item_bg1{
  background:#090979;
  background:-webkit-linear-gradient(140deg, rgba(9,9,121,1) 35%, rgba(0,132,255,1) 100%);
  background:-moz-linear-gradient(140deg, rgba(9,9,121,1) 35%, rgba(0,132,255,1) 100%);
  background:linear-gradient(140deg, rgba(9,9,121,1) 35%, rgba(0,132,255,1) 100%);
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#090979", endColorstr="#0084FF", GradientType=0);
}

/* 2) Deep Navy → Azure */
.future_core_item_bg2{
  background:#06114f;
  background:-webkit-linear-gradient(140deg, rgba(6,17,79,1) 35%, rgba(0,158,255,1) 100%);
  background:-moz-linear-gradient(140deg, rgba(6,17,79,1) 35%, rgba(0,158,255,1) 100%);
  background:linear-gradient(140deg, rgba(6,17,79,1) 35%, rgba(0,158,255,1) 100%);
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#06114F", endColorstr="#009EFF", GradientType=0);
}

/* 3) Midnight Blue → Electric Blue */
.future_core_item_bg3{
  background:#070a55;
  background:-webkit-linear-gradient(140deg, rgba(7,10,85,1) 35%, rgba(0,110,255,1) 100%);
  background:-moz-linear-gradient(140deg, rgba(7,10,85,1) 35%, rgba(0,110,255,1) 100%);
  background:linear-gradient(140deg, rgba(7,10,85,1) 35%, rgba(0,110,255,1) 100%);
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#070A55", endColorstr="#006EFF", GradientType=0);
}

/* 4) Royal Indigo → Sky Blue */
.future_core_item_bg4{
  background:#0b0f7a;
  background:-webkit-linear-gradient(140deg, rgba(11,15,122,1) 35%, rgba(0,190,255,1) 100%);
  background:-moz-linear-gradient(140deg, rgba(11,15,122,1) 35%, rgba(0,190,255,1) 100%);
  background:linear-gradient(140deg, rgba(11,15,122,1) 35%, rgba(0,190,255,1) 100%);
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#0B0F7A", endColorstr="#00BEFF", GradientType=0);
}

/* 5) Deep Indigo → Cobalt */
.future_core_item_bg5{
  background:#140a73;
  background:-webkit-linear-gradient(140deg, rgba(20,10,115,1) 35%, rgba(0,96,255,1) 100%);
  background:-moz-linear-gradient(140deg, rgba(20,10,115,1) 35%, rgba(0,96,255,1) 100%);
  background:linear-gradient(140deg, rgba(20,10,115,1) 35%, rgba(0,96,255,1) 100%);
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#140A73", endColorstr="#0060FF", GradientType=0);
}

/* 6) Blue-Purple Indigo → Bright Blue (보라 살짝) */
.future_core_item_bg6{
  background:#2a0a7a;
  background:-webkit-linear-gradient(140deg, rgba(42,10,122,1) 35%, rgba(0,132,255,1) 100%);
  background:-moz-linear-gradient(140deg, rgba(42,10,122,1) 35%, rgba(0,132,255,1) 100%);
  background:linear-gradient(140deg, rgba(42,10,122,1) 35%, rgba(0,132,255,1) 100%);
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#2A0A7A", endColorstr="#0084FF", GradientType=0);
}

/* 7) Sapphire → Neon Blue */
.future_core_item_bg7{
  background:#061a7a;
  background:-webkit-linear-gradient(140deg, rgba(6,26,122,1) 35%, rgba(0,210,255,1) 100%);
  background:-moz-linear-gradient(140deg, rgba(6,26,122,1) 35%, rgba(0,210,255,1) 100%);
  background:linear-gradient(140deg, rgba(6,26,122,1) 35%, rgba(0,210,255,1) 100%);
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#061A7A", endColorstr="#00D2FF", GradientType=0);
}

/* 8) Dark Navy → Cornflower Blue */
.future_core_item_bg8{
  background:#08104f;
  background:-webkit-linear-gradient(140deg, rgba(8,16,79,1) 35%, rgba(82,140,255,1) 100%);
  background:-moz-linear-gradient(140deg, rgba(8,16,79,1) 35%, rgba(82,140,255,1) 100%);
  background:linear-gradient(140deg, rgba(8,16,79,1) 35%, rgba(82,140,255,1) 100%);
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#08104F", endColorstr="#528CFF", GradientType=0);
}

/* 9) Deep Indigo → Blue-Cyan */
.future_core_item_bg9{
  background:#0a0a66;
  background:-webkit-linear-gradient(140deg, rgba(10,10,102,1) 35%, rgba(0,180,255,1) 100%);
  background:-moz-linear-gradient(140deg, rgba(10,10,102,1) 35%, rgba(0,180,255,1) 100%);
  background:linear-gradient(140deg, rgba(10,10,102,1) 35%, rgba(0,180,255,1) 100%);
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#0A0A66", endColorstr="#00B4FF", GradientType=0);
}

/* 10) Classic Indigo → Bright Blue (조금 더 딥) */
.future_core_item_bg10{
  background:#0a0870;
  background:-webkit-linear-gradient(140deg, rgba(10,8,112,1) 35%, rgba(0,120,255,1) 100%);
  background:-moz-linear-gradient(140deg, rgba(10,8,112,1) 35%, rgba(0,120,255,1) 100%);
  background:linear-gradient(140deg, rgba(10,8,112,1) 35%, rgba(0,120,255,1) 100%);
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#0A0870", endColorstr="#0078FF", GradientType=0);
}


/* 공통: 패턴 레이어를 위해 */
[class^="future_core_item"]{
  position: relative;
  z-index: 2;
}

/* 카드 내부 컨텐츠는 패턴 위로 */
[class^="future_core_item_text"] > *{
  position: relative;
  z-index: 2;
}

/* 카드 내부 컨텐츠는 패턴 위로 */
[class^="future_core_item_img_box"] > *{
  position: relative;
  z-index: 2;
}

/* -------------------------
   1) 실크 스트라이프 + 라이트
------------------------- */
.future_core_item_bg1::before{
  content:""; position:absolute; inset:-20%;
  background:
    radial-gradient(circle at 35% 30%, rgba(255,255,255,.18), transparent 60%),
    repeating-radial-gradient(circle at 20% 65%,
      rgba(255,255,255,.10) 0 1px,
      transparent 1px 12px
    ),
    radial-gradient(circle at 28% 58%, rgba(255,255,255,.16) 0 2px, transparent 3px),
    radial-gradient(circle at 62% 40%, rgba(255,255,255,.12) 0 2px, transparent 3px),
    radial-gradient(circle at 78% 72%, rgba(255,255,255,.10) 0 2px, transparent 3px);
  transform: rotate(-8deg);
  opacity:.85;
  pointer-events:none;
  z-index:1;
}
/* -------------------------
   2) 미세 그리드(테크) + 글로우
------------------------- */
.future_core_item_bg2::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(circle at 70% 25%, rgba(255,255,255,.18), transparent 55%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.06) 0 1px, transparent 1px 10px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 1px, transparent 1px 12px);
  opacity:.85;
  pointer-events:none;
  z-index:1;
}

/* -------------------------
   3) 버블 도트(작은 점) + 하이라이트
------------------------- */
.future_core_item_bg3::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(circle at 25% 20%, rgba(255,255,255,.20), transparent 55%),
    radial-gradient(circle, rgba(255,255,255,.12) 1px, transparent 2px);
  background-size:auto, 16px 16px;
  opacity:.9;
  pointer-events:none;
  z-index:1;
}

/* -------------------------
   4) 메시(그물) 느낌 (교차 라인)
------------------------- */
.future_core_item_bg4::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(circle at 80% 20%, rgba(255,255,255,.18), transparent 50%),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(0deg, rgba(255,255,255,.05) 1px, transparent 1px),
    radial-gradient(circle, rgba(255,255,255,.1) 1px, transparent 1.5px);
  background-size: auto, 40px 40px, 40px 40px, 10px 10px;
  background-position: 0 0, 0 0, 0 0, 5px 5px;
  opacity: .85;
  pointer-events: none;
  z-index: 1;
}

/* -------------------------
   5) 소프트 웨이브(빛의 띠)
------------------------- */
.future_core_item_bg5::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(circle at 25% 20%, rgba(255,255,255,.18), transparent 60%),
    linear-gradient(135deg, rgba(255,255,255,.09) 25%, transparent 25%) ,
    linear-gradient(225deg, rgba(255,255,255,.07) 25%, transparent 25%),
    linear-gradient(315deg, rgba(255,255,255,.06) 25%, transparent 25%),
    linear-gradient(45deg,  rgba(255,255,255,.05) 25%, transparent 25%);
  background-size:
    auto,
    28px 28px,
    28px 28px,
    28px 28px,
    28px 28px;
  background-position:
    0 0,
    0 0,
    14px 14px,
    0 14px,
    14px 0;
  opacity:.8;
  pointer-events:none;
  z-index:1;
}
/* -------------------------
   6) 다이아 패턴(세련된 체크)
------------------------- */
.future_core_item_bg6::before {
  content: ""; position: absolute; inset: -15%;
  background:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,.18), transparent 60%),
    repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(255,255,255,.06) 10px, rgba(255,255,255,.06) 11px),
    repeating-linear-gradient(-45deg, transparent, transparent 10px, rgba(255,255,255,.04) 10px, rgba(255,255,255,.04) 11px);
  background-size: auto, 20px 20px, 20px 20px;
  transform: rotate(0deg); /* 정방향 정렬 */
  opacity: .8;
  pointer-events: none;
  z-index: 1;
}

/* -------------------------
   7) 사선 브러시(굵고 부드러운 라인)
------------------------- */
.future_core_item_bg7::before{
  content:""; position:absolute; inset:-15%;
  background:
    radial-gradient(circle at 30% 25%, rgba(255,255,255,.10), transparent 62%),
    linear-gradient(135deg,
      rgba(255,255,255,.05) 25%,
      transparent 25% 50%,
      rgba(255,255,255,.05) 50% 75%,
      transparent 75%
    ),
    linear-gradient(225deg,
      rgba(255,255,255,.035) 25%,
      transparent 25% 50%,
      rgba(255,255,255,.035) 50% 75%,
      transparent 75%
    );
  background-size: auto, 38px 38px, 38px 38px;
  background-position: 0 0, 0 0, 19px 19px;
  transform: rotate(-4deg);
  opacity: .55;
  pointer-events: none;
  z-index: 1;
}
/* -------------------------
   8) 하프톤(점이 점점 옅어지는 느낌)
------------------------- */
.future_core_item_bg8::before {
  content: ""; position: absolute; inset: -10%;
  background:
    linear-gradient(30deg, rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(150deg, rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(270deg, rgba(255,255,255,.05) 1px, transparent 1px),
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.15), transparent 70%);
  background-size: 30px 52px, 30px 52px, 30px 52px, auto;
  opacity: .8;
  pointer-events: none;
  z-index: 1;
}
/* -------------------------
   9) 글로시 스트립(유리 반사)
------------------------- */
.future_core_item_bg9::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(circle at 70% 25%, rgba(255,255,255,.20), transparent 60%),
    radial-gradient(circle at 25% 70%, rgba(255,255,255,.12), transparent 65%),
    radial-gradient(circle, rgba(255,255,255,.14) 1px, transparent 2px),
    radial-gradient(circle, rgba(255,255,255,.08) 1px, transparent 2px);
  background-size:
    auto,
    auto,
    18px 18px,
    32px 32px;
  opacity: .9;
  pointer-events: none;
  z-index: 1;
}
/* -------------------------
   10) 테크 스캔라인(얇은 줄 + 빛)
------------------------- */
.future_core_item_bg10::before{
  content:""; position:absolute; inset:-10%;
  background:
    radial-gradient(circle at 70% 25%, rgba(255,255,255,.16), transparent 60%),
    linear-gradient(45deg, rgba(255,255,255,.10) 25%, transparent 25% 75%, rgba(255,255,255,.10) 75%),
    linear-gradient(-45deg, rgba(255,255,255,.07) 25%, transparent 25% 75%, rgba(255,255,255,.07) 75%);
  background-size: auto, 28px 28px, 28px 28px;
  background-position: 0 0, 0 0, 14px 14px;
  transform: rotate(2deg);
  opacity:.8;
  pointer-events:none;
  z-index:1;
}



.future_core_item_text {
  display: flex;
  flex-direction: column;
  padding: 20px;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
}


.future_core_item_text > h4 {
  display: block;
  font-size: 20px;
  font-weight: 700;
  color: #ffffff;
  line-height: 30px;
  padding: 0px 0px 15px 0px;
  word-break: keep-all;
}


.future_core_item_text > p {
  display: block;
  font-size: 16px;
  font-weight: normal;
  color: #ffffff;
  line-height: 25px;
  word-break: keep-all;
}


/**********************
*
*
* 히스토리
*
*
************************/

.history_bg {
  min-width: 320px;
  background: #edf0f6;
  padding: 100px 0 100px 0;

  overflow: hidden !important;

  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.history_wrap {
  margin: 0 auto;
  max-width: 1300px;
  height: auto;

  padding: 0 20px 0 20px;

  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.history_box {

}

.history_item_tit_box {
  display: flex;
  flex-direction: row;
  align-items: center;
}


.history_item_tit {
  display: flex;
  flex-direction: column;
}

.history_item_tit_text {
  display: flex;
  flex-direction: column;
}

.history_item_tit_text > h4 {
  font-size: 16px;
  color: #000549;
  font-weight: 700;
  margin-bottom: 15px;
  background: #dae0f5;
  display: flex;
  border-radius: 50px;
  padding: 10px 15px 10px 15px;
  margin-right: auto;
}

.history_item_tit_text > h3 {
  font-size: 30px;
  font-weight: 900;
  color: #000549;
  line-height: 45px;
}


.history_scroll_box {
  position: relative;
}


.history {
  overflow: hidden;
  margin-top: 50px;
  margin-bottom: 25px;

  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}


.history_text > h1{
  font-size: 31px;
  word-break: keep-all;
  font-weight: 900;
  line-height: 50px;
  color: #000549;
}


.history_text > h1::before{
  content: ' ';
  width: 10px;
  height: 10px;
  background: #000549;
  border-radius: 50%;
  display: block;
  margin-top: -14px;
}


.history_item {
  background: url(../../../img/company_img/history_line.png) repeat-x;

}


.history_text {
  padding-top: 30px;

  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.history_text > ul {
  margin-right: 50px;
}

.history_text > ul > li{
  font-size: 14px;
  line-height: 26px;
  color: #000549;
  list-style: disc !important;

  list-style-position: outside;
  word-break: keep-all;

  padding-left: 5px;
  margin-left: 20px;
}


.swiper-container {
  margin: 0 auto;
  max-width: 1300px;
  overflow: visible !important;
}


.swiper_button_box {
  margin-left: auto;

  display: flex;
  flex-direction: row;
  align-items: center;

  gap: 15px;
}

@media only screen and (min-width: 0px) and (max-width: 530px) {


  .history_item_tit_box {
    display: flex;
    flex-direction: column;
    align-items: inherit;
  }


  .swiper_button_box {
    margin-top: 15px;
    margin-left: inherit;
  }

}


.swiper-button-next, .swiper-container-rtl{
  width: 45px;
  height: 45px;
  border: 1px solid #000549;
  border-radius: 50%;
  background: url(../../../img/main_img/next_black.svg) no-repeat center center;
  background-size: 40px 40px;
  cursor: pointer;
}

.swiper-button-prev, .swiper-container-rtl {
  width: 45px;
  height: 45px;
  border: 1px solid #000549;
  border-radius: 50%;
  background: url(../../../img/main_img/prev_black.svg) no-repeat center center;
  background-size: 40px 40px;
  cursor: pointer;
}

.swiper-button-next.swiper-button-disabled {
  background: url(../../../img/main_img/next_gray.svg) no-repeat center center;
  background-size: 40px 40px;
  border: 1px solid #d8d8d8;
  opacity: 0.5;
}

.swiper-button-prev.swiper-button-disabled {
  background: url(../../../img/main_img/prev_gray.svg) no-repeat center center;
  background-size: 40px 40px;
  border: 1px solid #d8d8d8;
  opacity: 0.5;
}

@media only screen and (min-width: 0px) and (max-width: 320px) {
  .company_box6 {
    width: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }
  
  .company_box6 > h1 {
    font-size: 31px;
  word-break: keep-all;
    line-height: 60px;
  }
  
  .company_box6 > h2 {
    font-size: 20px;
    line-height: 35px;
    word-break: keep-all;
  }
  

}



@media only screen and (min-width: 321px) and (max-width: 970px) {


  .company_box6 {
    width: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }

  
  .company_box6 > h1 {
    font-size: 31px;
  word-break: keep-all;
    line-height: 50px;
 
  }
  
  .company_box6 > h2 {
    font-size: 20px;
    line-height: 35px;

    word-break: keep-all;
  }
  

  
}




/**************************
*
*
* 특허 인증 수상
*
*
****************************/

.certificate_bg {
   min-width: 320px;
   background: #fbfcff;
   padding: 100px 0 100px 0;

   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
}

.certificate_wrap {
  margin: 0 auto;
  max-width: 1300px;

  padding: 0 20px 0 20px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  
  display: flex;
  flex-direction: column;
}



.certificate_item_tit_box {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.certificate_item_tit {
  display: flex;
  flex-direction: column;
  margin-bottom: 20px;
}

.certificate_item_tit_text {
  display: flex;
  flex-direction: column;
}

.certificate_item_tit_text > h3 {
  font-size: 30px;
  font-weight: 900;
  color: #000549;
  line-height: 45px;
}


/*특허 수상 메뉴*/

.certificate_item_tab {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-top: 50px;
}

.certificate_tab {
  font-size: 25px;
  font-weight: 900;
  color: #8886a2;
  cursor: pointer;
  margin-right: 15px;
  margin-bottom: 15px;
}

.certificate_tab.active {
  color: #000549;
  background: #ffc430;
  background: -webkit-linear-gradient(0deg, rgba(255, 196, 48, 1) 0%, rgba(255, 196, 48, 1) 25%, rgba(255, 196, 48, 0) 25%);
  background: -moz-linear-gradient(0deg, rgba(255, 196, 48, 1) 0%, rgba(255, 196, 48, 1) 25%, rgba(255, 196, 48, 0) 25%);
  background: linear-gradient(0deg, rgba(255, 196, 48, 1) 0%, rgba(255, 196, 48, 1) 25%, rgba(255, 196, 48, 0) 25%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#FFC430", endColorstr="#FFC430", GradientType=0);
}


/*특허 수상 리스트 박스*/

.certificate_list_box {
  margin-top: 30px;
  width: 100%;
}

.company_cert_now {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}


/*특허 수상 텍스트*/

.cert_category_text {
  display: flex;
  flex-direction: column;
  margin-bottom: 15px;
}

.cert_category {
  font-size: 18px;
  font-weight: 500;
  line-height: 30px;
  color: #000549;
}


.cert_tit_text {
  display: flex;
  flex-direction: column;
  margin-bottom: 30px;
  flex-grow: 1;
}

.cert_tit {
  font-size: 22px;
  font-weight: 900;
  line-height: 30px;
  word-break: keep-all;
  color: #000549;
}


.cert_last_text {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.cert_date {
  font-size: 16px;
  font-weight: 500;
  line-height: 25px;
  color: #000549;
}

.cert_number {
  font-size: 16px;
  font-weight: 500;
  line-height: 25px;
  color: #000549;
}


/*특허 수상 상자*/

.cert_item {
  width: calc(1/3*100% - (1 - 1/3)*15px);
  height: auto;
  margin-right: 15px;
  margin-bottom: 15px;

  background: #ffffff;
  box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.1);

  border-radius: 10px;
  padding: 25px;
  display: flex;
  flex-direction: column;
  transition: ease-in 0.1s background;
  cursor: pointer;
}


.cert_item:hover {
  background: #000549;
}

.cert_item:nth-child(3n) {
  margin-right: 0px;
}

@media only screen and (min-width: 0px) and (max-width: 590px) {
  .cert_item {
    width: calc(100%);
    margin-right: 0px;
    margin-bottom: 15px;
  }
}

@media only screen and (min-width: 591px) and (max-width: 1000px) {
  .cert_item {
    width: calc(1/2*100% - (1 - 1/2)*15px);
    margin-right: 15px;
    margin-bottom: 15px;
  }

  .cert_item:nth-child(3n) {
    margin-right: 15px;
  }

  .cert_item:nth-child(2n) {
    margin-right: 0px;
  }
}


/*특허 수상 아이콘*/

.cert_icon {
  margin-left: auto;
  width: 40px;
  height: 40px;
  border: 1px solid #000549;
  border-radius: 50%;
  background: url(../../../img/main_img/next_black.svg) no-repeat center center;
  transition: ease-in 0.1s all;

  flex-shrink: 0;
}


.cert_item:hover > .cert_category_text > .cert_category {
  color: #ffffff;
}

.cert_item:hover > .cert_tit_text > .cert_tit {
  color: #ffffff;
}

.cert_item:hover > .cert_last_text > .cert_last_text_all > .cert_date {
  color: #ffffff;
}

.cert_item:hover > .cert_last_text > .cert_last_text_all > .cert_number {
  color: #ffffff;
}


.cert_item:hover > .cert_last_text > .cert_icon {
  transform: rotate(-45deg);
  border: 1px solid #ffffff;
  border-radius: 50%;
  background: url(../../../img/main_img/next_white.svg) no-repeat center center;
}


/*모달이 뜬 상태 의 박스*/

.cert_item.active {
  background: #000549;
}

.cert_item.active > .cert_category_text > .cert_category {
  color: #ffffff;
}

.cert_item.active > .cert_tit_text > .cert_tit {
  color: #ffffff;
}

.cert_item.active > .cert_last_text > .cert_last_text_all > .cert_date {
  color: #ffffff;
}

.cert_item.active > .cert_last_text > .cert_last_text_all > .cert_number {
  color: #ffffff;
}


.cert_item.active > .cert_last_text > .cert_icon {
  transform: rotate(-45deg);
  border: 1px solid #ffffff;
  border-radius: 50%;
  background: url(../../../img/main_img/next_white.svg) no-repeat center center;
}



/*모달*/

.cert_modal {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 20px;
}

.cert_modal_overlay {
  position: absolute;
  z-index: 1;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
}

.cert_modal_box {

  margin: 50px auto;
  position: relative;
  max-height: 100%;
  overflow: auto;
  z-index: 2;


  display: flex;
  flex-direction: column;
}

.cert_modal.open {
  display: flex;
}

.cert_modal_content {
  position: relative;
  background: rgba(251, 252, 255, 0.7);
  backdrop-filter: blur(10px);
  border-radius: 15px;
  padding: 20px;
  max-width: 580px;
  width: 100%;
  box-shadow: 0 10px 40px rgba(0,0,0,0.25);
  z-index: 2;

}

.cert_modal_close {
  margin-left: auto;
  border: none;
  background: none;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  width: 40px;
  height: 40px;
  background: url(../../../img/main_img/close.svg) no-repeat #f0f0f0 center center;
  background-size: 45px 45px;

  display: flex;
  flex-shrink: 0;
  border-radius: 10px;
  margin-bottom: 10px;
  margin-left: auto;
}

.cert_modal_detail {
  display: flex;
  flex-direction: row;
}


.cert_modal_text_detail {
  display: flex;
  flex-direction: column;
  margin-right: 10px;
}

.cert_modal_image {
  margin-top: 16px;
  text-align: center;
}

.cert_modal_image > img {
  width: 100%;
  height: auto;
  border-radius: 10px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.15);
  display: block;
}

.cert_modal_title {
  font-size: 18px;
  font-weight: 900;
  line-height: 30px;
  word-break: keep-all;
  color: #000549;
  display: block;
}

.cert_modal_number {
  font-size: 14px;
  font-weight: 500;
  line-height: 25px;
  color: #000549;
  display: block;
}

.cert_modal_date {
  font-size: 14px;
  font-weight: 500;
  line-height: 25px;
  color: #000549;
  display: block;
}




/*색션 채용*/


.recruit_bg {
  min-width: 320px;
  padding: 100px 0 50px 0;

  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;

  background: #203C96;
  background: -webkit-linear-gradient(180deg, rgba(32, 60, 150, 1) 0%, rgba(71, 102, 204, 1) 100%);
  background: -moz-linear-gradient(180deg, rgba(32, 60, 150, 1) 0%, rgba(71, 102, 204, 1) 100%);
  background: linear-gradient(180deg, rgba(32, 60, 150, 1) 0%, rgba(71, 102, 204, 1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#203C96", endColorstr="#4766CC", GradientType=0);

  position: relative;
  overflow: hidden;


}

.recruit_wrap {
 margin: 0 auto;
 max-width: 1300px;

 padding: 0 20px 0 20px;
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-sizing: border-box;
 z-index: 2;
 position: relative;
}


.recruit_box {
  display: flex;
  flex-direction: row;
  padding: 100px 0px 50px 0px;
}

.recruit_item {
  position: relative;
  width: calc(1/2*100% - (1 - 1/2)*30px);
  margin-right: 30px;
}

.recruit_item:last-child {
  margin-right: 0px;
}


.recruit_item_text {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;

}

.recruit_item_text > h3 {
  display: block;
  font-size: 35px;
  font-weight: 900;
  line-height: 50px;
  margin-bottom: 8px;
  color: #ffffff;

  word-break: keep-all;
  text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
}

.recruit_item_text > h4 {
  display: block;
  font-size: 30px;
  font-weight: 700;
  line-height: 45px;
  margin-bottom: 8px;
  color: #ffffff;
  word-break: keep-all;
  text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}

.recruit_item_text > h5 {
  display: block;
  font-size: 20px;
  font-weight: normal;
  line-height: 30px;
  color: #ffffff;
  word-break: keep-all;
  text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}

.round_font {
  display: flex;


  margin-bottom: 15px;

}

.round_font > p {
  font-size: 15px;
  font-weight: 500;
  color: #ffffff;
  margin: 0 auto;

  background: rgba(249,249,249,0.3);
  padding: 8px 20px 8px 20px;
  border-radius: 30px;


  display: flex;


  justify-self: center;
  align-items: center;
}

.small_font {
  display: block;
  font-size: 15px;
  line-height: 26px;
  font-weight: normal;
  color: #ffffff;
  margin: auto;
  margin-bottom: 15px;
  margin-top: 15px;
  word-break: keep-all;
  max-width: 400px;
  text-align: center;

}

.recruit_item_text > .small_font > a {
  color: #ffffff;
  text-decoration: underline;
}


#bokehCanvas {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  z-index: 1;

  height: 100%;
}


.recruit_link_box {
  display: flex;
  flex-direction: row;
  justify-content: center;

}

.recruit_item_link {
  padding: 13px;
  background: #ffffff;
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-right: 15px;

  font-size: 15px;
  font-weight: 700;
  color: #434343;
  transition: all 0.1s ease-in;
}

.recruit_item_link:hover {
  transform: scale(1.05);
}

.recruit_item_link:last-child {
  margin-right: 0px;
}

.recuruit_link_icon {
  width: 100px;
  height: 30px;
  margin-bottom: 8px;
}

.recuruit_link_icon_saramin {
  background: url(../../../img/company_img/recruit_saramin.svg) no-repeat center center;
  background-size: 100px 30px;
}

.recuruit_link_icon_jobkorea {
  background: url(../../../img/company_img/recruit_jobkorea.svg) no-repeat center center;
  background-size: 100px 30px;
}


@media only screen and (min-width: 0px) and (max-width: 559px) {
  .recruit_box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 50px 0px 50px 0px;
  }


  .recruit_item {
    max-width: 500px;
    width: calc(100%);
    margin-right: 0px;
  }
  
  .recruit_item_text > h3 {
    text-align: center;
    font-size: 22px;
    font-weight: 900;
    line-height: 35px;
  }
  
  .recruit_item_text > h4 {
    text-align: center;
    font-size: 18px;
    font-weight: 700;
    line-height: 25px;
  }
  
  .recruit_item_text > h5 {
    text-align: center;
    font-size: 13px;
    font-weight: normal;
    line-height: 20px;
    margin-bottom: 30px;
  }

  .recruit_link_box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    max-width: 300px;
    margin: auto;
  }

  .recruit_item_link {
    margin-right: 0px;
    margin-bottom: 10px;
  }

  .recruit_item_link:last-child {
    margin-bottom: 0px;
  }
}

@media only screen and (min-width: 560px) and (max-width: 1045px) {

  .recruit_box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 50px 0px 50px 0px;
  }


  .recruit_item {
    max-width: 500px;
    width: calc(100%);
    margin-right: 0px;
    justify-content: center;
  }
  

  .recruit_item_text > h3 {
    text-align: center;
  }
  
  .recruit_item_text > h4 {
    text-align: center;
  }
  
  .recruit_item_text > h5 {
    text-align: center;
    margin-bottom: 50px;
  }

  .recruit_link_box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    max-width: 300px;
    margin: auto;
  }

  .recruit_item_link {
    margin-right: 0px;
    margin-bottom: 10px;
  }
}




.recruit_wrap2 {
  margin: 0 auto;
  max-width: 1300px;
 
  padding: 0 20px 0 20px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  z-index: 2;
  position: relative;

 }
 

.recruit_box2 {
  padding: 25px;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px) contrast(100%);
  -webkit-backdrop-filter: blur(10px) contrast(100%);
  box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.1);
  border-radius: 15px;
}


.recruit_item2 > h3 {
  font-size: 20px;
  font-weight: 900;
  line-height: 30px;
  color: #ffffff;
  text-align: center;
  margin-bottom: 25px;
}


.recruit_item2 > ul {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.recruit_item2 > ul > li {
  width: calc(1/4*100% - (1 - 1/4)*15px);
  margin-right: 15px;
  margin-bottom: 15px;
  border-radius: 10px;
  padding: 15px;
  font-size: 16px;
  line-height: 27px;
  font-weight: 700;
  background: #ffffff;
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2);
  text-align: center;
  word-break: keep-all;

  display: flex;
  flex-direction: column;
  align-items: center;

  overflow: hidden;
}

.recruit_item2 > ul > li:nth-child(4n) {
  margin-right: 0px;
}

.recruit_item2 > ul > li:nth-child(n + 5) {
  margin-bottom: 0px;
}


.recruit_item2_img {
  width: 200px;
  height: 200px;
  background: #eaeaea;
  margin-bottom: 15px;
}

.recruit_item2_img1 {
  background: url(../../../img/company_img/recruit_item2_icon1.png) no-repeat center center;
  background-size: cover;
}

.recruit_item2_img2 {
  background: url(../../../img/company_img/recruit_item2_icon2.png) no-repeat center center;
  background-size: cover;
}

.recruit_item2_img3 {
  background: url(../../../img/company_img/recruit_item2_icon3.png) no-repeat center center;
  background-size: cover;
}

.recruit_item2_img4 {
  background: url(../../../img/company_img/recruit_item2_icon4.png) no-repeat center center;
  background-size: cover;
}

.recruit_item2_img5 {
  background: url(../../../img/company_img/recruit_item2_icon5.png) no-repeat center center;
  background-size: cover;
}

.recruit_item2_img6 {
  background: url(../../../img/company_img/recruit_item2_icon6.png) no-repeat center center;
  background-size: cover;
}

.recruit_item2_img7 {
  background: url(../../../img/company_img/recruit_item2_icon7.png) no-repeat center center;
  background-size: cover;
}

.recruit_item2_img8 {
  background: url(../../../img/company_img/recruit_item2_icon8.png) no-repeat center center;
  background-size: cover;
}


@media only screen and (min-width: 0px) and (max-width: 580px) {
  .recruit_item2 > ul > li {
    width: calc(100%);
    margin-right: 0px;
    margin-bottom: 15px;
    border-radius: 10px;
  }

  .recruit_item2 > ul > li:nth-child(n + 5) {
    margin-bottom: 15px;
  }

  .recruit_item2 > ul > li:last-child {
    margin-bottom: 0px;
  }
  
}


@media only screen and (min-width: 581px) and (max-width: 850px) {
  .recruit_item2 > ul > li {
    width: calc(1/2*100% - (1 - 1/2)*15px);
    margin-right: 15px;
    margin-bottom: 15px;
    border-radius: 10px;
  }

  .recruit_item2 > ul > li:nth-child(2n) {
    margin-right: 0px;
  }

  .recruit_item2 > ul > li:nth-child(4n) {
    margin-right: 0px;
  }

  .recruit_item2 > ul > li:nth-child(n + 5) {
    margin-bottom: 15px;
  }
  
  
}


@media only screen and (min-width: 851px) and (max-width: 1015px) {
  .recruit_item2 > ul > li {
    width: calc(1/3*100% - (1 - 1/3)*15px);
    margin-right: 15px;
    margin-bottom: 15px;
    border-radius: 10px;
  }

  .recruit_item2 > ul > li:nth-child(3n) {
    margin-right: 0px;
  }

  .recruit_item2 > ul > li:nth-child(4n) {
    margin-right: 15px;
  }

  .recruit_item2 > ul > li:nth-child(n + 5) {
    margin-bottom: 15px;
  }
  
  .recruit_item2 > ul > li:nth-child(n + 7) {
    margin-bottom: 0px;
  }
  
}



/*채용색션3*/

.recruit_wrap3 {
  margin: 0 auto;
  max-width: 1300px;
 
  padding: 0 20px 0 20px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  z-index: 2;
  position: relative;
  margin-top: 40px;
 }
 

.recruit_box3 {
  padding: 25px;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px) contrast(100%);
  -webkit-backdrop-filter: blur(10px) contrast(100%);
  box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.1);
  border-radius: 15px;
}


.recruit_item_video > iframe {
  width: 100%;
  height: 600px;
}



/*색션 레퍼런스*/

.reference_bg {
  min-width: 320px;
  padding: 100px 0 100px 0;
  background: #fbfcff;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}



.reference_wrap {
  margin: 0 auto;
  max-width: 1300px;
  height: auto;

  padding: 0 20px 0 20px;

  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}




.reference_all_box > h1 {
  font-size: 30px;
  font-weight: 900;
  color: #000549;
  line-height: 45px;
  word-break: keep-all;

  display: block;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.reference_all_box > h2 {
  font-size: 31px;
  font-weight: 400; 
  line-height: 50px;
  color: #434343;
  word-break: keep-all;

  display: block;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.reference_all_box > h3 {
  color: #434343;

  display: block;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.reference_box::after {
  content: '';
  display: table;
  clear: both;
}


.reference_box > h2 {
  font-size: 20px;
  font-weight: 400; 
  line-height: 35px;
  color: #000549;
  word-break: keep-all;

  display: block;
  margin-top: 10px;
  margin-bottom: 15px;
  font-weight: bold;

  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}


.reference_box {
  margin-top: 15px;
  margin-bottom: 15px;
}


.reference_box > ul {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  padding-bottom: 15px;

  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}


.reference_box > ul li {
  display: inline-block;
}

.reference_box > ul > li {
  width: calc(1/5*100% - (1 - 1/5)*10px);
  height: 60px;
  margin-right: 10px;
  margin-bottom: 10px;
  border: 1px solid #eaeaea;
  border-radius: 10px;

  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;

  transition: ease-in-out 0.2s;
}

.reference_box > ul > li:hover {
  transform: translateY(-5px);

  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;

  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.07);

}


.reference_box > ul > li:nth-child(5n) {
  margin-right: 0;
}

.reference_logo_opswat {
  background: url(../../../img/company_img/r1.png) no-repeat #fff center center;
  background-size: contain;
}

.reference_logo_uabro {
  background: url(../../../img/company_img/r43.png) no-repeat #fff center center;
  background-size: contain;
}

.reference_logo_yegiadde {
  background: url(../../../img/company_img/r44.png) no-repeat #fff center center;
  background-size: contain;
}

.reference_logo_yanolja {
  background: url(../../../img/company_img/r45.png) no-repeat #fff center center;
  background-size: contain;
}


.reference_logo_lignex1 {
  background: url(../../../img/company_img/r68.png) no-repeat #fff center center;
  background-size: contain;
}

.reference_logo_nhnglobal {
  background: url(../../../img/company_img/r61.png) no-repeat #fff center center;
  background-size: contain;
}

.reference_logo_somansa {
  background: url(../../../img/company_img/r62.png) no-repeat #fff center center;
  background-size: contain;
}

.reference_logo_polsarisoffice {
  background: url(../../../img/company_img/r64.png) no-repeat #fff center center;
  background-size: contain;
}


.reference_logo_sknet {
  background: url(../../../img/company_img/r6.png) no-repeat #fff center center;
  background-size: contain;
}

.reference_logo_ns {
  background: url(../../../img/company_img/r10.png) no-repeat #fff center center;
  background-size: contain;
}

.reference_logo_hanu {
  background: url(../../../img/company_img/r4.png) no-repeat #fff center center;
  background-size: contain;
}

.reference_logo_samhwa {
  background: url(../../../img/company_img/r50.png) no-repeat #fff center center;
  background-size: contain;
}

.reference_logo_iseeya {
  background: url(../../../img/company_img/r66.png) no-repeat #fff center center;
  background-size: contain;
}




.reference_logo_edenbiztech {
  background: url(../../../img/company_img/r51.png) no-repeat #fff center center;
  background-size: contain;
}


.reference_logo_mcm {
  background: url(../../../img/company_img/r73.png) no-repeat #fff center center;
  background-size: contain;
}


.reference_logo_dangun {
  background: url(../../../img/company_img/r74.png) no-repeat #fff center center;
  background-size: contain;
}


.reference_logo_peal {
  background: url(../../../img/company_img/r75.png) no-repeat #fff center center;
  background-size: contain;
}


.reference_logo_lgu {
  background: url(../../../img/company_img/r76.png) no-repeat #fff center center;
  background-size: contain;
}


.reference_logo_dnsever {
  background: url(../../../img/company_img/r77.png) no-repeat #fff center center;
  background-size: contain;
}


.reference_logo_airpremia {
  background: url(../../../img/company_img/r78.png) no-repeat #fff center center;
  background-size: contain;
}


.reference_logo_tossinsurance {
  background: url(../../../img/company_img/r79.png) no-repeat #fff center center;
  background-size: contain;
}


.reference_logo_hwawoo {
  background: url(../../../img/company_img/r80.png) no-repeat #fff center center;
  background-size: contain;
}


.reference_logo_sanha {
  background: url(../../../img/company_img/r81.png) no-repeat #fff center center;
  background-size: contain;
}


.reference_logo_koreaap {
  background: url(../../../img/company_img/r82.png) no-repeat #fff center center;
  background-size: contain;
}

.reference_logo_snt {
  background: url(../../../img/company_img/r83.png) no-repeat #fff center center;
  background-size: contain;
}

.reference_logo_orbro {
  background: url(../../../img/company_img/r84.png) no-repeat #fff center center;
  background-size: contain;
}

.reference_logo_nexus {
  background: url(../../../img/company_img/r85.png) no-repeat #fff center center;
  background-size: contain;
}

.reference_logo_niceinfo {
  background: url(../../../img/company_img/r91.png) no-repeat #fff center center;
  background-size: contain;
}

.reference_logo_nexen {
  background: url(../../../img/company_img/r95.png) no-repeat #fff center center;
  background-size: contain;
}

.reference_logo_hyosung {
  background: url(../../../img/company_img/r96.png) no-repeat #fff center center;
  background-size: contain;
}

.reference_logo_jobkorea {
  background: url(../../../img/company_img/r97.png) no-repeat #fff center center;
  background-size: contain;
}

.reference_logo_bithumb {
  background: url(../../../img/company_img/r98.png) no-repeat #fff center center;
  background-size: contain;
}

.reference_logo_hectoinnovation {
  background: url(../../../img/company_img/r99.png) no-repeat #fff center center;
  background-size: contain;
}











/********제2 러퍼런스*********/

.reference_logo_archives {
  background: url(../../../img/company_img/r25.png) no-repeat #fff center center;
  background-size: contain;
}


.reference_logo_kisa {
  background: url(../../../img/company_img/r26.png) no-repeat #fff center center;
  background-size: contain;
}


.reference_logo_education {
  background: url(../../../img/company_img/r27.png) no-repeat #fff center center;
  background-size: contain;
}


.reference_logo_procurement {
  background: url(../../../img/company_img/r28.png) no-repeat #fff center center;
  background-size: contain;
}

.reference_logo_etri {
  background: url(../../../img/company_img/r30.png) no-repeat #fff center center;
  background-size: contain;
}


.reference_logo_defense {
  background: url(../../../img/company_img/r32.png) no-repeat #fff center center;
  background-size: contain;
}

.reference_logo_lh {
  background: url(../../../img/company_img/r52.png) no-repeat #fff center center;
  background-size: contain;
}

.reference_logo_spo {
  background: url(../../../img/company_img/r94.png) no-repeat #fff center center;
  background-size: contain;
}



/********제3 러퍼런스*********/

.reference_logo_ibk {
  background: url(../../../img/company_img/r40.png) no-repeat #fff center center;
  background-size: contain;
}

.reference_logo_ibkinsurance {
  background: url(../../../img/company_img/r92.png) no-repeat #fff center center;
  background-size: contain;
}

.reference_logo_kbcapital {
  background: url(../../../img/company_img/r93.png) no-repeat #fff center center;
  background-size: contain;
}

.reference_logo_jt {
  background: url(../../../img/company_img/r41.png) no-repeat #fff center center;
  background-size: contain;
}

.reference_logo_hygood {
  background: url(../../../img/company_img/r55.png) no-repeat #fff center center;
  background-size: contain;
}


.reference_logo_toss {
  background: url(../../../img/company_img/r56.png) no-repeat #fff center center;
  background-size: contain;
}

.reference_logo_tosspayment {
  background: url(../../../img/company_img/r57.png) no-repeat #fff center center;
  background-size: contain;
}

.reference_logo_tossplace {
  background: url(../../../img/company_img/r58.png) no-repeat #fff center center;
  background-size: contain;
}

.reference_logo_tossmobile {
  background: url(../../../img/company_img/r86.png) no-repeat #fff center center;
  background-size: contain;
}

/********제4 러퍼런스*********/

.reference_logo_defense_business {
  background: url(../../../img/company_img/r59.png) no-repeat #fff center center;
  background-size: contain;
}

.reference_logo_ewp {
  background: url(../../../img/company_img/r60.png) no-repeat #fff center center;
  background-size: contain;
}

.reference_logo_iitp {
  background: url(../../../img/company_img/r87.png) no-repeat #fff center center;
  background-size: contain;
}

.reference_logo_kalis {
  background: url(../../../img/company_img/r88.png) no-repeat #fff center center;
  background-size: contain;
}

.reference_logo_busanedu {
  background: url(../../../img/company_img/r89.png) no-repeat #fff center center;
  background-size: contain;
}

.reference_logo_hoseoedu {
  background: url(../../../img/company_img/r90.png) no-repeat #fff center center;
  background-size: contain;
}

@media only screen and (min-width: 0px) and (max-width: 1170px) {


  .reference_box > ul {
    margin-top: 10px;
    text-align: center;
  }


  .reference_box > ul > li {
  width: calc(1/3*100% - (1 - 1/4)*10px);
    margin-right: 10px;
    margin-bottom: 10px;
  }
  

 

  .reference_box > ul > li:nth-child(5n) {
    margin-right: 10px;
  }
  .reference_box > ul > li:nth-child(3n) {
    margin-right: 0;
    float: right;
  }
}


@media only screen and (min-width: 0px) and (max-width: 320px) {
  .reference_all_box > h1 {
    font-size: 31px;
    line-height: 50px;  
    word-break: keep-all;
  }

  
  .reference_box > h2 {
    font-size: 20px;
    line-height: 35px;

    word-break: keep-all;
  }
  


  .reference_box > h2 {
    font-size: 20px;
    line-height: 35px;

    word-break: keep-all;
  }
  




  .reference_box > h2 {
    font-size: 20px;
    line-height: 35px;
    word-break: keep-all;
  }
  
  
  .reference_box > ul > li {
    list-style-position: inside;
    margin-left: 0;
  }

  
}



@media only screen and (min-width: 321px) and (max-width: 970px) {
  .reference_all_box > h1 {
    font-size: 31px;
    line-height: 50px;  
    word-break: keep-all;
  }

  
  .reference_box > h2 {
    font-size: 20px;
    line-height: 35px;

    word-break: keep-all;
  }


  .works_text > ul > li {
    padding-left: 5px;
  }



  
  .works_text_white > ul > li {
    padding-left: 5px;
  }



  
  .works_text_white_center > ul > li {
    padding-left: 5px;
  }
  

  
}







/*********************
*
*
* 색션 파트너사
*
*
*************************/

.partner_bg {
  min-width: 320px;
  padding: 100px 0 100px 0;
  background: #edf0f6;

  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}



.partner_wrap {
  margin: 0 auto;
  max-width: 1300px;
  height: auto;

  padding: 0 20px 0 20px;

  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}


.partner_all_box > h1 {
  font-size: 30px;
  font-weight: 900;
  color: #000549;
  line-height: 45px;
  word-break: keep-all;

  display: block;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}



.partner_box::after {
  content: '';
  display: table;
  clear: both;
}


.partner_box > h2 {
  font-size: 20px;
  font-weight: 400; 
  line-height: 35px;
  color: #434343;
  word-break: keep-all;

  display: block;
  margin-top: 10px;
  margin-bottom: 15px;
  font-weight: bold;

  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}


.partner_box {
  margin-top: 15px;
  margin-bottom: 15px;
}


.partner_box > ul {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  padding-bottom: 15px;

  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;

  border-bottom: 1px solid #eaeaea;
}

.partner_box > ul:last-child {
  border-bottom: none;
  padding-bottom: 0px;
}


.partner_box > ul li {
  display: inline-block;
}

.partner_box > ul > li {
  width: calc(1/5*100% - (1 - 1/5)*10px);
  height: 60px;
  margin-right: 10px;
  margin-bottom: 10px;
  border: 1px solid #eaeaea;
  border-radius: 10px;


  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;

  transition: ease-in-out 0.2s;
}

.partner_box > ul > li:hover {
  transform: translateY(-5px);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.07);
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}


.partner_box > ul > li:nth-child(5n) {
  margin-right: 0;
}

.partner_box > ul > li > a {
  display: block;
  width: 100%;
  height: 100%;
}


/*제1파트너사*/

.partner_logo_kddi {
  background: url(../../../img/company_img/p1.png) no-repeat #fff center center;
  background-size: contain;
}

.partner_logo_netandsecu {
  background: url(../../../img/company_img/p2.png) no-repeat #fff center center;
  background-size: contain;
}

.partner_logo_sknetworksservice {
  background: url(../../../img/company_img/p3.png) no-repeat #fff center center;
  background-size: contain;
}

.partner_logo_zeronsoft {
  background: url(../../../img/company_img/p4.png) no-repeat #fff center center;
  background-size: contain;
}

.partner_logo_intersecutech{
  background: url(../../../img/company_img/p5.png) no-repeat #fff center center;
  background-size: contain;
}






@media only screen and (min-width: 0px) and (max-width: 1170px) {


  .partner_box > ul {
    margin-top: 10px;
    text-align: center;
  }


  .partner_box > ul > li {
  width: calc(1/3*100% - (1 - 1/4)*10px);
    margin-right: 10px;
    margin-bottom: 10px;
  }
  

 

  .partner_box > ul > li:nth-child(5n) {
    margin-right: 10px;
  }
  .partner_box > ul > li:nth-child(3n) {
    margin-right: 0;
    float: right;
  }
}


@media only screen and (min-width: 0px) and (max-width: 320px) {
  .partner_all_box > h1 {
    font-size: 31px;
    line-height: 50px;  
    word-break: keep-all;
  }

  
  .partner_box > h2 {
    font-size: 20px;
    line-height: 35px;

    word-break: keep-all;
  }
  


  .partner_box > h2 {
    font-size: 20px;
    line-height: 35px;

    word-break: keep-all;
  }
  




  .partner_box > h2 {
    font-size: 20px;
    line-height: 35px;
    word-break: keep-all;
  }
  
  
  .partner_box > ul > li {
    list-style-position: inside;
    margin-left: 0;
  }

  
}



@media only screen and (min-width: 321px) and (max-width: 970px) {
  .partner_all_box > h1 {
    font-size: 31px;
    line-height: 50px;  
    word-break: keep-all;
  }

  
  .partner_box > h2 {
    font-size: 20px;
    line-height: 35px;

    word-break: keep-all;
  }

  
}

















/*색션 8*/

.map_bg {
  min-width: 320px;
  background: #fbfcff;

  padding: 100px 0 100px 0;

  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.map_wrap {
  margin: 0 auto;
  max-width: 1300px;
  height: auto;
  overflow: hidden;

  padding: 0 20px 0 20px;

  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}


.map_box1 {
  width: 100%;
  margin-right: 15px;
}

.map_box1 > h1 {
  font-size: 30px;
  font-weight: 900;
  color: #000549;
  line-height: 45px;
  word-break: keep-all;
}

.map_box1 > h2 {
  font-size: 20px;
  word-break: keep-all;
  font-weight: 400; 
  line-height: 40px;
  color: #000549;
}

.map_box1 > h3 {
  color: #434343;
}


.map_name {
  font-size: 20;
}


.map_box2 {
  margin-top: 20px;
  width: 100%;
}

.map {
  width: 100%;
  height: 400px;
}


.iframe_box{
  width:100%;
  height:100%;
}




@media only screen and (min-width: 0px) and (max-width: 320px) {
  .map_box1 > h1 {
    font-size: 31px;
  word-break: keep-all;
    line-height: 50px;  
  }
  
  .map_box1 > h2 {
    font-size: 20px;
    line-height: 35px;
  }
  
}



@media only screen and (min-width: 321px) and (max-width: 970px) {
  .map_box1 > h1 {
    font-size: 31px;
  word-break: keep-all;
    line-height: 50px;  
  }
  
  .map_box1 > h2 {
    font-size: 20px;
    line-height: 35px;
  }
  
}