@font-face {font-family:'Pretendard';
    src:local('font/static/woff2/Pretendard-Regular.woff2'),
    url('Pretendard-Regular.woff2') format('woff2'); }
    @font-face {font-family:'PretendardSemiBold';
    src:local('font/static/woff2/Pretendard-SemiBold.woff2'),
    url('Pretendard-SemiBold.woff2') format('woff2'); }
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.8/dist/web/static/pretendard.css");
/* Reset.css */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

/* 폰트 설정 */
* {font-family: Pretendard,'Noto Sans KR', sans-serif;}

/* CSS 설정 */
body {
    margin: 0; /* body의 마진 제거 */
    padding: 0; /* body의 패딩 제거 */
}


/* 레이아웃의 부모 컨테이너 */
#container{
    width: 100%; height: 1050px;
    min-width: 1440px;
}

/* 헤더 */
.header{
    width: 100%; height: 90px;
    background: white;
    /* float: top; */
}
/* 로고 */
.logoimg{
    width: 60px;
    height: 60px;
    float: left;
    margin-top: 22px;
    margin-right: 1px;
    margin-left: 200px;
}
/* 로고 옆 이름 */
.name{
    width: 180px; height:30px;
    float: left;
    margin-top: 30px;
    font-weight: 600;
    font-size: 1.35em;

}
.name a:visited, .name a:link{
    text-decoration: none;
    color: black;
}
/* 내비게이션바 */
.navbardiv{
    float: left;
}
/* 내비게이션 ul */
.navbar_ul{
    list-style: none;
    display: flex;
    padding: 0;
    height: 90px;
    width: 800px;
    justify-content: left;
    align-items: center;
    margin-left: 110px;
    font-size: 1.05em;
    font-weight: 600;
    color: #333333;
}
/* 내비게이션 li */
/* 하이퍼링크 기본, 방문했을 때 표시 */
.navbar_ul li a:link,.navbar_ul li a:visited{
    margin: 31px;
    text-decoration: none;
    color: #333333;
}

/* 메인 */
.main{
    width: 100%; height: 540px;
    position: relative;
    /* background: url('src/ppt/media/image3.png'); */
    /* background-size:cover; */
}
/* 메인 슬라이드 컨테이너 */
.slider-container_m{
    width: 100%; height: 540px;
    position: absolute;
    overflow: hidden;
}
/*  */


/* 메인 이미지 마스크 */
.img_mask{
    width: 100%; height: 540px;
    position: absolute;
    background: rgba(0,0,0, 0.45);
}

/* 메인 문구 레이아웃*/
.caption{
    width: 1050px;
    height: 540px;
    position: relative;
    float: right;
    color: white;
    text-shadow:1px 1px 2px #7c7c7c;
}
/* 애니메이션 정의 */
@keyframes fade-in-slide1 {
    0% {
      opacity: 0;
      width: 900px; height: 50px;
      position: absolute;
      top: 12%; 
      left: 7%; 
      font-size: 2.6em;
      font-weight: 600;
      transform: translateY(-30%);
    }
    80%{
        opacity: 1;
        width: 900px; height: 50px;
        position: absolute;
        top: 12%; 
        left: 7%; 
        font-size: 2.6em;
        font-weight: 600;
    }
    100% {
      opacity: 1;
      transform: translateY(0);
      width: 900px; height: 50px;
      position: absolute;
      top: 12%; 
      left: 7%; 
      font-size: 2.6em;
      font-weight: 600;
    }
  }
  @keyframes fade-in-slide2 {
    0% {
      opacity: 0;
      width: 800px; height: 50px;
      position: absolute;
      top: 24%; 
      left: 7%; 
      font-size: 1.9em;
      font-weight: 600;
      color: transparent;
      transform: translateY(-30%);
    }
    80%{
        width: 800px; height: 50px;
        position: absolute;
        top: 24%; 
        left: 7%; 
        font-size: 1.9em;
        font-weight: 600;
        opacity: 1;
    }
    100% {
      opacity: 1;
      transform: translateY(0);
      width: 800px; height: 50px;
      position: absolute;
      top: 24%; 
      left: 7%; 
      font-size: 1.9em;
      font-weight: 600;
      opacity: 1;
    }
  }
.main_capiton1{
    /* width: 900px; height: 50px;
    position: absolute;
    top: 12%; 
    left: 7%; 
    font-size: 2.6em;
    font-weight: 600; */
    opacity: 0;
    animation: fade-in-slide1 1s ease-out 0.4s forwards;
}
.main_capiton2{
    /* width: 800px; height: 50px;
    position: absolute;
    top: 24%; 
    left: 7%; 
    font-size: 1.9em;
    font-weight: 600; */
    opacity: 0;
    animation: fade-in-slide2 1s ease-out 1s forwards;
}



/* 네모 바로가기 */
.nav{
    width: 336px; height: 540px;
    position: absolute;
}

/* 네모들 색상 지정 */
.nav .n1{color: white; background:rgba(47,85,151,0.9);}
.nav .n2{color: #333333; background: rgba(255,192,0,0.6);}
.nav .n3{color: #333333; background: rgba(0,176,240,0.7);}
.nav .n4{color: #333333; background: rgba(255,255,255,0.7);}
.nav .n5{color: RGB(255,192,0);background:rgba(124, 124, 124, 0.7);}
.nav .n6{color: white; background:rgba(47,85,151,1);}

/* 각 네모들 크기 지정 */
.nav .n1, .n2,.n3,.n4,.n5,.n6{
    width: 168px; height: 180px;
    float: left;
    cursor: pointer;
}
.nav .n2,.n4,.n6{
    float: right;
    cursor: pointer;
}

/* 네모 안 텍스트 스타일 */
.t1,.t2,.t3,.t4,.t5,.t6{
    padding-inline: 20px;            
    padding-top: 30px;
    font-size: 17px;
    font-weight: 600;
}

/* 방문했을때 */
.n1 a:link,.n1 a:visited, .n6 a:link,.n6 a:visited{
    text-decoration: none;
    color: white;
}
.n2 a:link,.n2 a:visited, .n3 a:link,.n3 a:visited, .n4 a:link,.n4 a:visited{
    text-decoration: none;
    color: #333333;
}
.n5 a:link,.n5 a:visited{
    text-decoration: none;
    color: RGB(255,192,0);
}

/* 슬라이드와 문의하기 컨테이너 */
.middle_container{
    width: 1440px; min-width: 1440px;
    height: 290px;
    position: relative;
}

/* 좌측하단 이미지 바로가기 */
.gallery{
    width: 840px; height: 250px;
    background: #ffffff;
    float: left;
    position: absolute;
}
/* 슬라이드 설명 */
.slide p{
    font-size: 16px;
}
/* middle 슬라이드 이미지 스타일*/

  .slider-container {
    position: absolute;
    max-width: 780px;
    margin: 0 auto;
    overflow: hidden;
  }
  
  .slider {
    display: flex;
    transition: transform 0.5s ease-in-out;
    will-change: transform;
    transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }
  
  .slide {
    flex: 0 0 250px;
    margin-right: 15px;
    text-align: center;
    padding-bottom: 20px;
    margin-top: 50px;
  }
  
  .slide img {
    width: 220px;
    height: auto;
  }
  
  .description {
    font-size: 12px;
    margin-top: 5px;
  }
  
/* 버튼 스타일 */
.prev-btn,
.next-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  padding: 10px;
  border: none;
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  cursor: pointer;
  font-size: 18px;
  transition: background-color 0.3s;
  height: 50px;
  margin-left: 15px;
  margin-right: 15px;
}

/* 이전 버튼 호버 시 배경색 변경 */
.prev-btn:hover,
.next-btn:hover {
  background-color: rgba(0, 0, 0, 0.7);
}

/* 다음 버튼 위치 */
.next-btn {
  right: 0;
}


/* 문의하기 스타일 */
.contact {
    width: 630px;
    height: 250px;
    background: white;
    float: left;
    padding-top: 40px;
    color: black;
    position: absolute;
    left: 57%;
}
/* 이름, 연락처 스타일 */
#name, #tel {
    width: 230px;
    height: 30px;
    border: none;
    background-color: #eeeeee;
    border-top: 1px solid #e1e1e1;
    border-radius: 2px;
}
.name{
    margin-bottom: 15px;
}
.title{
    position: absolute;
    font-size: 18px;
    color: #333333;
    margin-top: 7px;
}

/* 수직으로 정렬할 컨테이너 */
.name-tel {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    position: relative;
    margin-top: 11px;
}

/* 문의내용 스타일 */
#detail {
    width: 250px;
    height: 70px;
    border: none;
    background-color: #eeeeee;
    border-top: 1px solid #e1e1e1;
    border-radius: 2px;
}
.detail, .submit{
    margin-top: 41px;
}

/* placeholder 색상 변경 */
input::placeholder, textarea::placeholder {
    color: #333333; /* 원하는 색상으로 변경 */
    font-size: 13px;
}

/* 제출 버튼 스타일 */
.submit button {
    width: 100px; /* 버튼의 너비 조절 */
    height: 82px;
    background-color: #ffd802;
    border: none;
    border-radius: 3px;
}

/* 체크박스 스타일 */
.check{
    font-size:13px;
    margin-top: 3px;

}


#agree{
    accent-color: #767676;
}

/* input박스 마진 */
textarea{padding-left: 10px; padding-top: 10px;}
input{padding-left: 10px;padding-top: 3px;padding-bottom: 3px;}

/* contact-row 스타일 */
.contact-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}



/* 푸터 */
.footer{
    width: 100%; height: 130px;
    min-width: 1440px;
    background: white;
    clear: both;
    border-top: 1px solid lightgrey;
}
/* 푸터 로고 스타일 */
.footer_logo_contain{
    width: 28%;
    height: 130px;
    float: left;
}
.footer_logo{
    width: 60px;
    height: 60px;
    float: left;
    margin-top: 42px;
    /* margin-right: 1px; */
    margin-left: 140px;
}
/* 푸터 로고 옆 이름 */
.footer_logo_name{
    width:fit-content; height:30px;
    float: left;
    margin-top: 50px;
    font-weight: 600;
    font-size: 1.1em;
    margin-right: 30px;
}
.footer_logo_name a:visited, .footer_logo_name a:link{
    text-decoration: none;
    color: black;
}
/* 푸터 내비게이션 스타일 */
.footer_nav{
    font-size: 0.75em;
    margin-top: 30px;
    margin-bottom: 20px;
}
.footer_nav a{
    list-style: none;
    padding: 0;
    align-items: center;
    margin: 10px;
}
/* 하이퍼링크 기본, 방문했을 때 표시 */
.footer_a:link,.footer_a:visited{
    text-decoration: none;
    color: #7c7c7c;
}
/* 푸터 p 스타일 */
.footer_p span{
    font-weight: 500;
    font-size: 0.75em;
    margin: 2px;
    color: #7c7c7c;
}