.font_s_18{font-size: 18px;}
.font_01 {font-family: Verdana, Geneva, Arial, sans-serif;}
.font_02 {font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;}
.font_g_01 {font-family:  'Do Hyeon', sans-serif;}
.font_g_02 {font-family: 'Nanum Myeongjo', serif;font-weight: bold;text-align : center;}
.font_g_03 {font-family: 'IBM Plex Sans KR', sans-serif;font-weight: bold;text-align : center; }
 


header {  
  position: fixed;
  top: 0px;
  /* width: 100% */
  left: 0px;
  right: 0px;
  font-weight: bold;
  display: flex;
  justify-content: space-between;
  align-items: center;
    z-index:100;
}
.modal-dialog{
    overflow-y: initial !important
}
.modal-body{
    height: 100%;
    overflow-y: auto;
}

ul li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

ul li a:hover {
  background-color: #111111;
}
.container {
    display: flex; /* 가로 정렬 */
    gap: 20px; /* 두 목록 사이의 간격 */
  }





  /* (모바일) */
@media  (max-width: 767px) {
.top-with{
  width: 100vw;
}
.font_s_22{font-size: 12px;
font-weight: bold}
/* 세로 모드일 때 (Portrait) */
.hero_box {
  
  background-image: url("img/start_bg.jpg");
   margin-right:  30px;
    margin-top:  30px;
   background-size:100%;
  background-repeat: no-repeat;
  background-position: top;
  /* background-size: cover; */
  width: 100vw;
  
  /* width: 250vw; */
  height: 45vw; 
  object-fit: cover;


    /* background-size: contain; font_g_03*/
}

.serv_fort{
font-size: 18px;
font-weight: bold;
margin-top: 10px;
}

.f_fot_new{font-size: 14px;text-align: left;}
.hero_box_font{
  position:absolute;
  left: -100px;
  top: 100px;
  width: 600px;
}


.font_g_04 {font-size: 1rem;
  font-style: italic;
  /* line-height: 0.5rem; */
  /* margin-bottom: 25px; */
  color: white;
  text-align : center;
  font-family: "Roboto Slab", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

.viz_box {
  /* 위에랑 띄우기 viz_box_s */
 /* margin-top: 25px; */
 margin-bottom: 10px;

 background-color:beige;
 /* width: 250%; */
}


.viz_box_s{
   width: 100%;
}

.viz_row{
 
  display: flex;
  flex-direction: row; /* 요소를 가로 방향으로 배치 (기본값) */
  justify-content: flex-end; /* 가로 정렬 방식 (center, space-between 등) */
  align-items: center; /* 세로 정렬 방식 */
  /* align-items: */
}

.viz_row_s{
  display: flex;
  flex-direction: row; /* 요소를 가로 방향으로 배치 (기본값) */
  justify-content:space-around; /* 가로 정렬 방식 (center, space-between 등) */
  align-items: center; /* 세로 정렬 방식 */
  margin-top: 10px;
  padding-bottom: 25px;
  /* background-color: beige; */
}


.viz_md2 {
  display: none;
/* background-color: blueviolet;
width: 100%;
font-size: 12px;
text-align : center;
font-weight: bold;
color: white;
padding-left: 5px;
padding-right: 5px; */

}

.viz_md3 {
width:460px;
font-size: 14px;
text-align: center;

}
.viz_md3-2 {
font-size: 14px;
}


.viz_md4 {
height: 60px;
width:60px;
padding-right: 5px;
}


.viz_md4_s{
height: 120px;
width:120px;
}

.md_4_pad_r{
  padding-right: 20px;
}

.sp_01{
  background-color: aquamarine;
  height: 10px;
  /* width: 250%; */
}
.sp_02{
  background-color:cadetblue;
  height: 5px;
  /* width: 250%; viz_box_s*/
}
.md_4_p1{
   background-color:aliceblue;
 width: 140px;
  margin: 0 auto;
  text-align: left;
  /* left:5px; */
  font-size: 14px;
   font-weight: bold;
}
.md_4_p2{
text-align: left;

margin-left:7px;
width: 140px;
font-size: 12px;
padding-top: 10px;
 
}
.md_4_w1{
  width: 100px;
}
.line_01{height: 370px;}
.line_02{height: 260px;}

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



.font_g_05{
  /* width: 250%; */
  font-size: 22px;
  text-align: center;
  font-weight:bolder;
  font-family: "Roboto Slab", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}
.font_g_06{
   /* width: 250%; */
  font-size: 18px;
  text-align: center;
  font-weight:bolder;
  font-family: "Roboto Slab", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

.foo{
  height: 50px; 
  /* top:10px; */
  /* background-color:blueviolet; */
  font-size:12px
  /* width: 250%;font_s_22 */
}
.foo-p{
/* text-align: left; */
 height: 50px;
}
.foot-fau{margin-left: auto;}
.black-none{display: block;}
.black-none2{display:none;}
}


 /* 모바일 가로 모드일 때 적용할 스타일 */
@media screen and (min-width: 768px) and (max-width: 1023px) 
{
  /* 가로 모드일 때 적용할 스타일 */
 .top-with{
  width: 100vw;
}
.font_s_22{font-size: 12px;
font-weight: bold}
/* 세로 모드일 때 (Portrait) */
.hero_box {
  
  background-image: url("img/start_bg.jpg");
   margin-right:  30px;
    margin-top:  30px;
   background-size:100%;
  background-repeat: no-repeat;
  background-position: top;
  /* background-size: cover; */
  width: 100vw;
  
  /* width: 250vw; */
  height: 45vw; 
  object-fit: cover;


    /* background-size: contain; font_g_03*/
}

.serv_fort{
font-size: 18px;
font-weight: bold;
margin-top: 10px;
}

.f_fot_new{font-size: 20px;}

.hero_box_font{
  position:absolute;
  left: 80px;
  top: 200px;
  width: 700px;
}

.font_g_04 {font-size: 2rem;
  font-style: italic;
  line-height:2rem;
  margin-bottom: 5px;
  color: white;
  text-align : center;
  font-family: "Roboto Slab", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}



.viz_box {
  /* 위에랑 띄우기 */
 /* margin-top: 10px; */
 margin-bottom: 10px;
 background-color:beige;
 width: 100%;
}
.viz_box_s{
margin-top: 10px;
margin-bottom: 25px;
width: 100%;

}

.viz_row{
  display: flex;
  flex-direction: row; /* 요소를 가로 방향으로 배치 (기본값) */
  justify-content: flex-start; /* 가로 정렬 방식 (center, space-between 등) */
  align-items: center; /* 세로 정렬 방식 */
}

.viz_row_s{
  display: flex;
  flex-direction: row; /* 요소를 가로 방향으로 배치 (기본값) */
  justify-content: flex-start; /* 가로 정렬 방식 (center, space-between 등) */
  align-items: center; /* 세로 정렬 방식 */
  margin-top: 10px;
  padding-bottom: 10px;
}


.viz_md2 {
background-color:blueviolet;

font-size: 20px;
text-align : center;
font-weight: bold;
}


.viz_md3 {
width:460px;
font-size: 18px;
text-align: center;

}
.viz_md3-2 {
font-size: 18px;
}


.viz_md4 {
height: 100px;
width:100px;
/* padding-right: 3px; */
}


.viz_md4_s{
height: 120px;
width:120px;
}

.md_4_pad_r{
  padding-right: 0px;
}

.sp_01{
  background-color: aquamarine;
  height: 10px;
  width: 100%;
}
.sp_02{
  background-color:cadetblue;
  height: 5px;
  width: 100%;
}


.md_4_p1{
   background-color:aliceblue;
   width: 140px;
  margin: 0 auto;
  text-align: left;
  /* left:5px; */
  font-size: 16px;
   font-weight: bold;
}
.md_4_p2{
text-align: left;

margin-left:30px;
width: 200px;
font-size: 15px;
padding-top: 10px;
 
}
.md_4_w1{
  width: 200px;
}


.line_01{height: 360px;}
.line_02{height: 220px;}

.md4_pi_1{height: 120%;width:80%;}

.font_g_05{
  width: 100%;
  font-size: 24px;
  text-align: center;
  font-weight:bolder;
  font-family: "Roboto Slab", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}
.font_g_06{
  width: 100%;
  font-size: 24px;
  text-align: center;
  font-weight:bolder;
  font-family: "Roboto Slab", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

.foo{
  height: 50px; 
  top:10px;
  width: 100%;
}
.foo-p{
  height: 50px;
}
.foot-fau{margin-right: auto;}
.black-none{display:none;}
.black-none2{display:block;}
}





@media screen and (min-width: 1024px) and (max-width: 1300px)  {

.top-with{
  width: 100vw;
}
.font_s_22{font-size: 22px;
font-weight: bold}

.hero_box {
  background-image: url("img/start_bg.jpg");
   margin-right:  30px;
  background-repeat: no-repeat;
  background-position: top;
  background-size: cover;
  width: 100%;
  height: 800px; 
}
.serv_fort{
font-size: 28px;
text-align : center;
font-weight: bold;
margin-top: 10px;
}
.f_fot_new{font-size: 24px;}
.hero_box_font{
  position:absolute;
  /* position: fixed; */
  left: 24vw;
  top: 470px;
  width: 700px;
}

.font_g_04 {font-size: 42px;
  font-style: italic;
  line-height:2.5rem;
  margin-bottom: 25px;
  color: white;
  text-align : center;
  font-family: "Roboto Slab", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

.viz_box {
  /* 위에랑 띄우기 */
 margin-top: 25px;
 margin-bottom: 25px;
 background-color:beige;

}
.viz_box_s{
   margin-top: 25px;
 margin-bottom: 25px;
}

.viz_row{
  display: flex;
  flex-direction: row; /* 요소를 가로 방향으로 배치 (기본값) */
  justify-content: flex-start; /* 가로 정렬 방식 (center, space-between 등) */
  align-items: center; /* 세로 정렬 방식 */
}

.viz_row_s{
  display: flex;
  flex-direction: row; /* 요소를 가로 방향으로 배치 (기본값) */
  justify-content: flex-start; /* 가로 정렬 방식 (center, space-between 등) */
  align-items: center; /* 세로 정렬 방식 */
  margin-top: 25px;padding-bottom: 25px;
}


.viz_md2 {
background-color:blueviolet;
width: 100%;
font-size: 24px;
text-align : center;
font-weight: bold;
}

.viz_md3 {
font-size: 26px;
width:800px;

}

.viz_md3-2 {
font-size: 26px;
}
.viz_md4 {
height: 220px;
width:220px;
padding-right: 20px;
}

.viz_md4_s{
height: 50px;
width:50px;
}
.md_4_pad_r{
  /* display: flex; */
  padding-right: 0px;
  
}

.sp_01{
  background-color: aquamarine;
  height: 25px;
}
.sp_02{
  background-color:cadetblue;
  height: 5px;
}
.md_4_p1{
   background-color:lightgray;
  width: 70%;
  margin: 0 auto;
  text-align: left;
  left:5px;
  font-size: 22px;
  font-weight: bold;
}
.md_4_p2{
text-align: left;
 /* justify-content: center; */
margin-left:5vw;
width: 70%;
font-size: 20px;
padding-top: 10px;
/* background-color: aliceblue; */
 
}
.md_4_w1{
  width: 302px;
}
.line_01{height: 650px;}
.line_02{height: 500px;}
.md4_pi_1{height: 280px;width:280px;}

.font_g_05{
  font-size: 34px;
  text-align: center;
  font-weight:bolder;
  font-family: "Roboto Slab", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}
.font_g_06{
  font-size: 30px;
  text-align: center;
  font-weight:bolder;
  font-family: "Roboto Slab", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}
.foo{
  height: 50px; 
  top:10px
}
.foo-p{
  height: 50px;
}
.foot-fau{margin-left: auto;}
.black-none{display:none;}
.black-none2{display:none;}
}


/* 화면 너비가 769px 이상일 때 (태블릿 및 PC) */
@media screen and (min-width: 1300px)  {
  .top-with{
  width: 100vw;
}
.font_s_22{font-size: 22px;
font-weight: bold}
.hero_box {
  background-image: url("img/start_bg.jpg");
   margin-right:  30px;
  background-repeat: no-repeat;
  background-position: top;
  background-size: cover;
  width: 100%;
  height: 800px; 
}
.serv_fort{
font-size: 28px;
text-align : center;
font-weight: bold;
margin-top: 10px;
}
.f_fot_new{font-size: 24px;}
.hero_box_font{
  position:absolute;
  /* position: fixed; */
  left: 30vw;
  top: 470px;
  width: 700px;
}

.font_g_04 {font-size: 42px;
  font-style: italic;
  line-height:2.5rem;
  margin-bottom: 25px;
  color: white;
  text-align : center;
  font-family: "Roboto Slab", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

.viz_box {
  /* 위에랑 띄우기 */
 margin-top: 25px;
 margin-bottom: 25px;
 background-color:beige;

}
.viz_box_s{
   margin-top: 25px;
 margin-bottom: 25px;
}

.viz_row{
  display: flex;
  flex-direction: row; /* 요소를 가로 방향으로 배치 (기본값) */
  justify-content: flex-start; /* 가로 정렬 방식 (center, space-between 등) */
  align-items: center; /* 세로 정렬 방식 */
}

.viz_row_s{
  display: flex;
  flex-direction: row; /* 요소를 가로 방향으로 배치 (기본값) */
  justify-content: flex-start; /* 가로 정렬 방식 (center, space-between 등) */
  align-items: center; /* 세로 정렬 방식 */
  margin-top: 25px;padding-bottom: 25px;
}


.viz_md2 {
background-color:blueviolet;
width: 100%;
font-size: 24px;
text-align : center;
font-weight: bold;
}

.viz_md3 {
font-size: 26px;
width:800px;

}

.viz_md3-2 {
font-size: 26px;
}
.viz_md4 {
height: 220px;
width:220px;
padding-right: 20px;
}

.viz_md4_s{
height: 50px;
width:50px;
}
.md_4_pad_r{
  /* display: flex; */
  padding-right: 0px;
  
}

.sp_01{
  background-color: aquamarine;
  height: 25px;
}
.sp_02{
  background-color:cadetblue;
  height: 5px;
}
.md_4_p1{
   background-color:lightgray;
  width: 70%;
  margin: 0 auto;
  text-align: left;
  left:5px;
  font-size: 22px;
  font-weight: bold;
}
.md_4_p2{
text-align: left;
 /* justify-content: center; */
margin-left:9vw;
width: 70%;
font-size: 20px;
padding-top: 10px;
/* background-color: aliceblue; */
 
}
.md_4_w1{
  width: 302px;
}
.line_01{height: 650px;}
.line_02{height: 500px;}
.md4_pi_1{height: 280px;width:280px;}

.font_g_05{
  font-size: 34px;
  text-align: center;
  font-weight:bolder;
  font-family: "Roboto Slab", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}
.font_g_06{
  font-size: 30px;
  text-align: center;
  font-weight:bolder;
  font-family: "Roboto Slab", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}
.foo{
  height: 50px; 
  top:10px
}
.foo-p{
  height: 50px;
  text-align: right;
}
.foot-fau{right:0px;}
.black-none{display:none;}
.black-none2{display:none;}
}