*{margin: 0; padding: 0; box-sizing: border-box; word-break: keep-all; font-family: 'Pretendard';}

@font-face {
  font-family: 'Pretendard';
  font-style: normal;
  font-weight: 200;
  src: url('../font/Pretendard/Pretendard-ExtraLight.ttf') format('truetype');
 }

@font-face {
  font-family: 'Pretendard';
  font-style: normal;
  font-weight: 200;
  src: url('../font/Pretendard/Pretendard-Light.ttf') format('truetype');
 }

@font-face {
  font-family: 'Pretendard';
  font-style: normal;
  font-weight: 300;
  src: url('../font/Pretendard/Pretendard-Regular.ttf') format('truetype');
 }

 @font-face {
  font-family: 'Pretendard';
  font-style: normal;
  font-weight: 400;
  src: url('../font/Pretendard/Pretendard-Medium.ttf') format('truetype');
 }

 @font-face {
  font-family: 'Pretendard';
  font-style: normal;
  font-weight: 500;
  src: url('../font/Pretendard/Pretendard-SemiBold.ttf') format('truetype');
 }

 @font-face {
   font-family: 'Pretendard';
   font-style: normal;
   font-weight: 600;
   src: url('../font/Pretendard/Pretendard-Bold.ttf') format('truetype');
  }
  
  @font-face {
    font-family: 'Pretendard';
    font-style: normal;
    font-weight: 700;
    src: url('../font/Pretendard/Pretendard-ExtraBold.ttf') format('truetype');
  } 
  
  .kakaotalk{position: fixed; width: 46px; z-index: 9999; right: 3.8%; bottom:6%; }
  .kakaotalk img{width: 100%; border: 1px solid #ccc; background-color: #fff;}
  
  .sidemenu {
    width: 100%;
    height: 100vh;
    position: fixed;
    left: 105%;
    top: 80px;
    background: rgba( 255, 255, 255, 0.15 );
    backdrop-filter: blur(4.5px);
    box-shadow: 0 8px 32px 0 rgba(36, 36, 36, 0.37);
    border-left: 1px solid rgba( 255, 255, 255, 0.18 );
  }
  .sidemenu>ul{width: 100%; list-style: none; }
  .sidemenu>ul>li{width: 100%; border-bottom: 1px solid #838383c0; }
  .sidemenu>ul>li>a{width: 100%; display: inline-block; color: #ffff; padding: 10px 0px; text-decoration: none; padding: 20px 10px; position: relative; left: 0; top: 0; background-color: #ffffff2f; }

  .sidemenu>ul>li>a::after{
    display: inline-block;
    content: '';
    width: 10px;
    height: 10px;
    position: absolute;
    top:25px;
    left: 100px;
    background: url(/img/blet_arrow.png) no-repeat center center;
    z-index: 9999;
    color: white
    
  ;}
#wrap{width: 1920px; margin: auto; }
header{height: 80px; width: 100%;  position: fixed; margin: 0; left: 0; top:0; z-index: 1000; backdrop-filter: blur(6px);
  box-shadow: 1px 1px 10px rgba(36, 36, 36, 0.137); border-bottom: 1px solid #eeeeee27; background-color: #ffffff09
  ;} 
nav{max-width: 1300px; height:80px; margin: auto; display: flex; justify-content: space-between; padding: 0px 10px;}
.nav_bg{margin-top: 80px; width: 100%; height: 200px; background-color: #eee; opacity: 0.6; position: fixed; top: 0px; display: none;}
.logo{width: 120px;  height: 100%; display:flex; align-items: center;}
.footer_logo{width: 120px;  height: 100%; display:flex; align-items: center;}
.footer_logo img{width: 100%}
.logo img{width: 100%; } 
nav>ul{display: flex; list-style: none; width: 600px; height: 100%; position: relative; justify-content:right;}
nav>ul>li{display: flex;   position: relative; width: 30%;}
nav>ul>li>a{color: #eee; text-decoration: none; align-items: center; display: flex; justify-content: center; width: 100%; height: 100%; font-size:16px; font-weight: 300;}
nav>ul>li>a:hover{color: #007185; font-weight: 500;}

nav>ul::before{content: ''; background-color: #007185a8; position: fixed; top:80px; width: 100vw; height: 250px; left: 0; display: none; transition: all 0.5s ease; box-shadow: 1px 1px 5px #00000046;}
nav>ul>li::before{content: ''; position: absolute; bottom: 10px; left: 50% ; transform: translate(-50%,-50%);height: 5px; background-color: #106860;display: none; width: 5px; border-radius: 50%; transition: transform 0.2s; z-index: 9999;} 
nav>ul:hover .submenu{display: block; transition: transform 0.8s;}
nav>ul:hover::before{display: block; transition: transform 0.8s;}
nav>ul>li:hover::before{transition: transform 0.2s; display: block;}
 
.submenu{display: none; list-style: none; width: 100%; height: 200px; border-radius: 10px; position: absolute; top:80px; } 
.submenu li{padding: 10px; width: 100%; height: 45px; }
.submenu li a{display: flex; width: 100%; height: 45px; text-decoration: none; color: #eee; justify-content: center; align-items: center; font-weight: 300;}
.submenu a:hover{color: #ffffff; font-weight: 500;}

.sidesubmenu{display: none; list-style: none; width: 100%;  border-radius: 10px; } 
.sidesubmenu li{padding: 10px; width: 100%; height: 45px; border-bottom: 0.5px solid #83838365;}
.sidesubmenu li a{width: 100%; height: 100%; text-decoration: none; color: #eee; font-weight: 300; display: flex; align-items: center; }
.sidesubmenu li:hover{color: #ffffff; font-weight: 500; background-color: #ffffff36;}

 
/* .menubar img{ position: absolute; right: 0; width: 40px;}*/
.menubar{width: 30px; height: 18px;  cursor: pointer; z-index: 9999; display: none; margin-left: 30px; position: relative; transition: all 0.5s ease; right:0px; top:50%; transform: translate(-50%,-50%);}
.top{background-color: #ffffff; width: 100%; height: 2px; border-radius: 3px;  top:0px; position: absolute; transition: all .2s ease-in-out;}
.mid{background-color: #ffffff; width: 100%; height: 2px; border-radius: 3px;  top:50%; position: absolute; transform: translate(0%,-50%); transition: all .2s ease-in-out;}
.bottom{background-color: #ffffff; width: 100%; height: 2px; border-radius: 3px;  position: absolute; bottom: 0px; transition: all .2s ease-in-out;}


.color{color: black;}
.color2{background-color: #007185;}

.on1{transform: translateY(10px) rotate(-45deg);background-color: #007185;}
.on2{opacity: 0; background-color: #007185;}
.on3{transform: translateY(-6px) rotate(45deg); background-color: #007185;}

.on{background-color: rgb(255, 255, 255); ;}






.section1{width: 100%; height: 92vh; position: relative;}
.section1 p{font-size: 14px;}

#main{width: 100%; height: 100vh; object-fit: cover; filter: brightness(0.6); display: block; position:fixed; z-index: -1;}

.section1 img{width: 100%; filter: brightness(0.9); height: 92vh; object-fit: cover; z-index: -100;}
.section1_container{width: 1300px; height: 100%;  left: 50%; top: 50%; transform: translate(-50%,-50%); position: absolute; }
.section1_txt{width: 100%;  position: absolute; top:35%; animation-name: ani; animation-duration: 1.5s; animation-fill-mode: forwards;}
.section1 strong{color: #02a9c7;}

.section1_txt h1{color: #ffff; font-size: 72px; line-height: 1.3; width: 100%; text-align: left; margin: auto;}
.section1_txt p{color: #ffffff; font-size: 28px; text-align: left; width: 100%; margin: auto; line-height: 1.5; font-weight: 300;}  

.section1 span{color: #fff; display: block; font-weight: 700;} 

.mouse{width: 200px; position: absolute; left: 50%; bottom: 50px; display: flex; flex-direction: column; transform:translate(-50%);align-items: center;}
.mouse img{animation-name: ani2; animation-duration: 1s; animation-iteration-count: infinite; width: 36px; height: 100%; margin-top: 20px; filter: brightness(1)} 

@keyframes ani 
{
   0% {transform:translateY(100%); opacity: 0;}
   100%{transform: translateY(0); opacity: 1;} 

}

@keyframes ani2
{
   0% {transform:translate(0%,0%);}
   50%{transform:translate(0%,30%);}

}
.section1_txt a{color: #eee; font-size: 16px; text-align: center; display: inline-block; text-decoration: none;  
  padding: 10px 30px; border: 0.25px solid  #ffffff25;  margin-top: 20px; border-radius: 20px;
  box-shadow: 1px 1px 2px #00000054; background-color: #ffffff21; backdrop-filter: blur(30px);}  
.section1_txt a:hover{transform: translateY(-8px); transition: 0.4s all ease; background-color: #fff; color: #333;}   

.section2{width: 100%; background-color: #fff; padding: 100px 20px }
.section2_container{max-width: 1300px; margin: auto; display: flex; align-items: center;}
h2 {  color: #333; font-size: 36px; line-height: 1;}
h3 { color: #111; font-size: 24px; line-height: 1.6; font-weight: 400;}
p{line-height: 1.6; font-weight: 300; color: #333; font-size: 16px; padding: 20px 0px; word-break: break-all;}

.section2_boxleft{width: 45%;}
.section2_boxright{width:55%; display: flex;  justify-content: center; align-items: center; }
.section2_imgbox{width:100%; display: flex;  justify-content: center; align-items: center; }
.section2_imgbox img{width:80%; display: flex; }
.section2 a{text-decoration: none; color: #777; display: inline-block; padding: 10px 20px; border: 1px solid #ddd; font-size: 14px;}
.section2 a:hover {background-color: #007185; color: #fff; border: 1px solid #ffffff; transition: all ease 0.4s;}

.service {
  width: 100%;
  background-color: #fff;
  padding: 100px 20px;
  border-bottom: 1px solid #3333331c;
}

.service_container {
  max-width: 1300px;
  margin: auto;
  display: flex;
  align-items: center;
  height: 400px;
  justify-content: space-between;
}

.service_boxleft {
  width: 45%;
}

.service_boxright {
  width: 45%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.service_imgbox {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.service_imgbox img {
  width: auto; /* 너비를 자동으로 조정 */
  max-width: 100%; /* 부모 요소의 너비를 넘지 않도록 설정 */
  max-height: 400px; /* 최대 높이를 400px로 설정 */
  object-fit: cover; /* 가로세로 비율을 유지하면서 크기 조정 */
  border: 4px solid #f1f1f1;
}
.service a{text-decoration: none; color: #777; display: inline-block; padding: 10px 20px; font-size: 14px;}

#first{background-color: #006797; color: #fff;}
.service h2{padding: 20px 0px;}

.tab{float:left;  width: 100%;}
.tabnav li{display: inline-block; text-align:center; border: 1px solid #aaa;}
.tabnav li a.active:before{background:#007185; }
.tabnav li a{ position:relative; display:block;  color: #000; padding:10 20px; text-decoration:none; background-color: #f1f1f1;}
.tabnav li a.active{background:#006797; color:#fff; }

.tabcontent > div {
  display: none;
}

.tabcontent > div.active {
  display: block;
}



.section3 {
  width: 100%; 
  background-color: #ffffff;
  padding: 100px 20px;
  border-top: 1px solid #3333331c;
  border-bottom: 1px solid #3333331c;
}

.section3_container {
  max-width: 1300px; 
  margin: auto; 
}

.section3_itembox {
  width: 100%; 
  display: flex; 
  flex-wrap: wrap; /* 추가: 요소가 한 줄에 모두 표시되지 않고 여러 줄에 걸쳐 나타나도록 함 */
  margin-top: 2%; 
  justify-content: space-between;
}

.section3_item{

  width: 24%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;


}

.section3_item a {
  width: 100%;
  height: 100%;
  display: block;
  z-index: 1; /* 상대적으로 높은 값을 사용합니다 */
  left: 0;
  top: 0;
}


.section3_item a:hover #s3p{
display: block;
transition: all ease-in 0.1s;
}


.section3_item span{
display: none;
}

#s3p{display: none; font-size: 28px; color: rgb(255, 255, 255);}

.section3_item a:hover span {
  display: block; color: #ffffff;
  font-size: 14px;
  border: 1px solid #ffffff;
  padding: 10px 20px;
  transition: all ease-in 0.1s;
}


.section3_itembox img {
  padding-bottom: 40px;
  width: 100%; /* 이미지가 부모 요소에 맞게 조정되도록 합니다 */
  height: auto; /* 가로세로 비율을 유지하면서 이미지 크기 조정 */
  object-fit: cover;
  z-index: -1; /* 기본적으로 a 태그보다 낮은 레이어에 위치하도록 합니다 */
}
.section3_textbox{position: absolute; background-color: #f1f1f1;  height: 40px; width: 100%; bottom: 0%; left: 50%; transform: translate(-50%);  display: flex; align-items: center; justify-content: center; z-index: 1;}
.section3_textbox P{color: #111; font-size: 16px; }

.section3_item span:nth-of-type(2){margin-top: 15px;}
.section3_item a{color: #333; display: flex; justify-content: center; align-items: center; flex-direction: column; width: 100%; height: 100%; text-decoration: none;}  
.section3_item a:hover{transform: translateY(-10px); transition: 0.4s all ease;}  
.section3_item a:hover .section3_textbox{background-color: #007185; transition: 0.4s all ease;}  
.section3_item a:hover .section3_textbox p{color: #fff; transition: 0.4s all ease;} 

.section4 {
  width: 100%; 
  background-color: #fff;
  padding: 100px 20px;
  text-align: center;
}

.swiper-pagination{
  bottom:-5% !important
}

.section4_container {
  max-width: 1300px; 
  margin: auto; 
}

.swiper {

  border: 0px solid red;
  
}

.swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  
 
}

.swiper-slide p{
  display: block;
  width: 100%;
  font-size: 24px;
  line-height: 1;
  padding: 0px;
  
}

.swiper-slide img {
  display: block;
  margin: auto;
  object-fit: cover;
  
  max-height: 500px;
}

.second img {
  display: block;
  margin: auto;
  object-fit: cover;
  
  max-height: 300px;
}

.section5 {
  width: 100%; 
  background-color: #ffffff;
  padding: 100px 20px; 
  border-top: 1px solid #3333331c;
  border-bottom: 1px solid #3333331c;
}



.section5_container {
  max-width: 1300px; 
  margin: auto; 
  display: flex;
  align-items: center;
}

.swiper-button-next, .swiper-button-prev {
  color: #333 !important;
}

.swiper-pagination-bullet-active {
  background-color: #007185 !important;
}
.section5_boxleft{width: 45%;}
.section5_boxright{width:55%; display: flex;  justify-content: center; align-items: center;}
.section5_imgbox{width:100%; display: flex;  justify-content: center; align-items: center; }
.section5_imgbox img{width:80%; display: flex; }
.section5 a{text-decoration: none; color: #333; display: inline-block; padding: 10px 20px; border: 1px solid #ddd; font-size: 14px;}
.section5 a:hover{background-color: #007185; color: #fff; transition: all ease 0.4s}

.section6 {
  width: 100%; 
  background-color: #fff;
  padding: 100px 20px;
  text-align: center;
}

.section6_container {
  max-width: 1300px; 
  margin: auto; 
}



.section6_textbox{position: absolute; background-color: #006797; width: 100%; top: 0%; left: 0%;}
.section6_textbox P{color: #fff;padding: 10px; font-size: 14px;}

.section6_itembox img { 
  width: 100%; /* 이미지가 부모 요소에 맞게 조정되도록 함 */
  height: auto; /* 가로세로 비율을 유지하면서 이미지 크기 조정 */
  object-fit: cover; 
  cursor: pointer;
}

.section7{
  width: 100%; 
  background-color: #ffffff;
  padding: 140px 20px;
  border-top: 1px solid #3333331c;
  border-bottom: 1px solid #3333331c;
}

.section7 p{ padding: 10px 0px;}
.section7 h2{ font-size: 36px; padding: 10px 0px;}
.section7 h3{ font-size: 24px; font-weight: 500;}


.section7_container {
  max-width: 1300px; 
  margin: auto; 
  display: flex;
  justify-content: space-between;
}

.section7_boxleft{width: 40%;}
.section7_boxright{width:50%; display: flex;  justify-content: center; align-items: center; border: 4px solid #f1f1f1 ;}
.section7_imgbox{width:100%; display: flex;  justify-content: center; align-items: center;}
.section7_imgbox img{width:80%; display: flex; }
.section7 a{text-decoration: none; color: #333; display: inline-block; padding: 10px 20px; border: 1px solid #111; font-size: 14px;}





strong{display: block;}

footer{width: 100%; background-color: #333333;
  ; padding: 25px 0px; font-size: 14px; box-shadow: 1px 1px 4px rgba(49, 49, 49, 0.692);}
.footer_container{max-width: 1300px; margin: auto; display: flex; justify-content: space-between; padding: 20px; align-items: center;}

.footer_txt span{ color: #ddd; font-size: 15px; line-height: 1.8; font-weight: 200; margin-right: 20px;}
small{color: #777; font-weight: 300; font-size: 12px; padding: 10px 0px; display: inline-block;}
footer strong{color: #fff; font-weight: 500;display: inline-block;}

footer p{padding: 0px;}

table {
  width: 100%;
  border-collapse: collapse;
}

th, td {
  border: 1px solid #dddddd;
  text-align: center;
  padding: 12px;
}

th {
  background-color: #f2f2f2;
}

:root {
  --swiper-navigation-size: 44px;
}

@media screen and (max-width:1920px) {
    #wrap{width: 100%;}
   header{width: 100%;}
}

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

 .section1_txt{width: 100%; padding-left: 20px;}
 .section1_container{width: 100%;}
 .second img{width: 100%;}
 .swiper-slide {padding: 5%;}
}

@media screen and (max-width:1000px) {
    nav>ul{display: none;}
    .menubar{display: flex;}
   
    .section7_container{flex-wrap: wrap;}
    .section7_boxleft{width: 100%;}
    .section7_boxright{width: 100%; height: 400px;}
    br{display:none}
    #s3p{font-size: 20px;}
    .service_container{flex-wrap: wrap; height: auto;}
    .service_boxleft{width: 100%;}
    .service_boxright{width: 100%; max-height: 400px; padding-top: 80px;}
   
   }

  

   @media screen and (max-width:760px) {
    .service_imgbox img{width: 100%; object-fit: cover; }
    .service h2{text-align: center;}
    .tabnav li{width: 32%;}
    #s3p{font-size: 16px;}
    .section3_item a:hover span{padding: 8px 14px; font-size: 14px;}
    h2{font-size: 24px !important;}
    p{font-size: 14px;}
    .section2{padding: 60px 12px}
    .section3{padding: 60px 12px}
    .section4{padding: 60px 12px}
    .section5{padding: 60px 12px}
    .section6{padding: 60px 12px}
    .section7{padding: 60px 12px}
    .service{padding: 60px 12px}
    .swiper-slide p{font-size: 18px;}

    .section7 h3{font-size: 20px;}
    .section7_boxright{width: 100%; height: 250px;}

    .sidemenu li a{font-size: 14px;}
    .kakaotalk{position: fixed; width: 40px; z-index: 9999; right: 3.8%; bottom:6%;}
    .section1{height: 70vh;}
    .section1 img{height: 100%;}
    .section1_txt h1{font-size: 48px;}
    .section1_txt p{font-size: 24px;}
    .section1_txt a{font-size: 12px; padding: 8px 20px; margin-top: 10px;}

    .section2_container {flex-wrap: wrap;} 
    .section2_container P{padding:10px 0px;} 
    .section2_boxleft{ width: 100%;}
    .section2_boxright{ width: 100%; padding-top: 50px;}
    .section2 h2{font-size: 24px; }

 

    .section3_itembox {flex-wrap: wrap;}
    .section3_item {width: 48%; margin-top: 4%;}
    .section3_container P{padding: 10px 0px;}
    .section3 h2{font-size: 24px; margin-top: 0px;}
    .section3 h3{font-size: 16px; }
    .section3_item a:hover span{padding: 8px 14px;}
    .section3_txt{display: flex; justify-content: center; flex-direction: column; align-items: center; width: 70%; padding: 0;}
    .section3_txt p{font-size: 14px;}

    .swiper-slide img{width: 80%;}

    .section5_container{flex-wrap: wrap; display: flex; justify-content: center;}
    .section5_boxleft{width: 100%;}
    .section5_boxright{width: 100%; padding-top: 100px; }


    .footer_txt span{width: 100%; display: block; font-size: 13px;}
    .footer_small {width: 100%; display: block; font-size: 13px;}
    .footer_txt{width: 100%;}
    .footer_logo {display: none;}
    .mouse{display: none};
   

    .section3_itembox img { 
      width: 100%; /* 이미지가 부모 요소에 맞게 조정되도록 함 */
      height: auto; /* 가로세로 비율을 유지하면서 이미지 크기 조정 */
      object-fit: cover; 
      cursor: pointer;
      padding: 6px;
    }
  }
    
   
   @media screen and (max-width:420px){
    .logo{width: 100px;}
    nav{height: 60px;}
    header{height: 60px;}
    .sidemenu{top:60px}
    .service_boxright{padding-top: 20px;}
    .service_imgbox img{width: 100%; object-fit: cover;}
    .tabnav li{width: 100%; margin: 5px 0px;}
    .section1_txt h1{font-size: 32px;}
    .section1_txt p{font-size: 18px;}
    .section7_boxright{width: 100%; height: 180px;}
    .section2 img{width: 100%;}
    .section2{padding: 60px 12px;}
    .section3{padding: 60px 12px;}
    .section4{padding: 60px 12px;}
    .section5{padding: 60px 12px;}
    .section6{padding: 60px 12px;}
    .section7{padding: 60px 12px;}
    .service{padding: 60px 12px;}
  :root {
    --swiper-navigation-size: 26px !important;
  }
  .section3_textbox P{ font-size: 14px;}
  .section3_textbox {height: 32px; width: 100%;}

    footer {padding: 10px 0px;}
    .mouse img {width: 35px};
    .section2_item{width: 100%; height: 80px;}
    .section4_item2 p{width: 80%; font-size: 12px;}
    .footer_txt p{font-size: 12px;}
    .section7 h3{ font-size: 16px; line-height: 1;}
  
   
   }