/*폰트연결*/
@import url('https://cdn.jsdelivr.net/gh/sun-typeface/SUIT@2/fonts/variable/woff2/SUIT-Variable.css');
/*아이콘연결*/
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/all.min.css");

/*리셋*/
*{position: relative; padding: 0; margin: 0;}
img{display: block;}
li{list-style: none;}

/*폰트설정*/
body{font-family: 'SUIT Variable', sans-serif;}
h1{font-size: 100px;}
h2{font-size: 35px; font-weight: 200; padding: 25px 0;}
h4{font-size: 14px;}
h6{font-size: 14px; opacity: 0.6;}
p{font-size: 14px; line-height: 22px; opacity: 0.6;}

/*공통스타일*/
section{padding-top: 100px; padding-bottom: 100px;}

.section-title h2{max-width: 700px;}
.section-title{
    width: 90%;
    max-width: 1200px; 
    margin: 0 auto 30px;}

.container{
    width: 90%; 
    max-width: 1200px;
    margin: 0 auto;}

/*해더부분 스타일*/
header{background-color: white;
color: #00486A;
 position: fixed;   /* 화면에 고정 */
  top: 0;            /* 화면의 맨 위에 위치 */
  left: 0;           /* 왼쪽 정렬 */
  width: 100%;       /* 전체 너비 */
  background-color: white;
  z-index: 1000;}

header .container{height: 80px;
display: flex;
justify-content: space-between;
align-items: center;}

header .menu{display: flex; gap: 20px; 
text-transform: uppercase;
font-size: 14px;}

header .hamburger {
  display: none;
  font-size: 28px;
  cursor: pointer;
}


@media (max-width: 800px) {
  /* 메뉴는 숨기기 */
  header .menu {
    display: none;
    flex-direction: column;
    position: absolute;
    top: 70px;
    right: 20px;
    background-color: white;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.15);
    padding: 15px;
  }

  /* 햄버거 클릭 시 메뉴 열기 */
  header .menu.active {
    display: flex;
  }

  /* 햄버거는 이제 표시 */
  header .hamburger {
    display: block;
  }
}

/*메인 이미지 스타일*/
.main{
background-image: url(img/1-1.PNG);
background-size: cover;
background-position: center center;
height: 100vh; /*화면높이만큼 100vh, 화면높이의 반만큼 50vh*/
display: flex; align-items: center; justify-content: center;
text-align: center; color: white;
position: relative; text-align: center;
}

.main .text p{font-size: 22px; padding-top:30px;padding-bottom: 60px; line-height: 40px;}
.main .text h1{font-size: 100px;font-weight: 1000; line-height: 100px;}

.main .section-title{  position: absolute;
  left: 50%;
  bottom: 200px;             /* 원하는 만큼 여백 */
  transform: translateX(-50%);
  background-color: #00486A;
  width: 200px;
  border-radius: 30px; 
  padding: 13px;
  height: 20px}

  @media (max-width: 800px) {
  header .menu {
    display: none;
    flex-direction: column;
    position: absolute;
    top: 70px;
    right: 20px;
    background-color: white;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.15);
    padding: 15px;
  }

  /* 햄버거 클릭 시 메뉴 열기 */
  header .menu.active {
    display: flex;
  }

  /* 햄버거는 이제 표시 */
  header .hamburger {
    display: block;
  }
}

/*1번섹션*/
.section1{}
.section1 .container h2{color: #00486A; opacity: 0.5;}
.section1 .section-title h6 {color: #00486A; font-weight: 800; font-size: 20px;}
.section1 .section-title h2{color: #00486A;; font-weight: 400; font-size: 35px;}
.section1 .container .sns{text-transform: uppercase; display: flex; gap: 20px; }
.section1 .container p{color: #00486A; font-weight: 500;font-size: 20px; }

@media(max-width: 800px)
{.section2 .container {grid-template-columns: repeat(2,1fr);}
.section1 .container .sns{font-size: 12px;}
.section2 .section-title h6 {font-size: 18px;}
.section2 .section-title h2 {font-size: 12px;}
}



/*2번섹션*/
.section2 .section-title{display: flex; justify-content: center;}
.section2 .section-title .btn{font-size: 12px; font-weight: 700; text-transform: capitalize; color: #666666; padding: 8px 20px; border-radius: 20px; }
.section2 .section-title .active{background-image: linear-gradient(#0C2B4E,#CBCBCB ); color: white;}
.section2 .container{display: grid; grid-template-columns: repeat(3,1fr); gap:30px;}
.section2 .item{background: #758a93; color: white;}
.section2 .item img{width:100%;}

.section2 .item .color{background-color: rgba(63, 63, 63, 0.5);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transform: 1s;}

.section2 .item:hover .color{opacity: 1;}


@media(max-width: 800px)
{.section2 .container {grid-template-columns: repeat(2,1fr);}
.section2 .section-title { white-space: normal; flex-wrap: wrap;}
.section2 .btn { grid-template-columns: 1fr 1fr 1fr;}}

/*3번섹션*/
.section3{  background-image:
    radial-gradient(circle at 0 0, pink, transparent 100px),
    radial-gradient(circle at 70% 0, #00486a, transparent 300px),
    radial-gradient(circle at 70% 300px, pink, transparent 100px),
    radial-gradient(circle at 0 500px, #00486a, transparent 200px),
    radial-gradient(circle at 0 900px, pink, transparent 600px),
    radial-gradient(circle at 100% 800px, pink, transparent 500px);}
.section3 .container{display: grid; grid-template-columns: repeat(3,1fr); gap: 30px;}
.section3 .item{background-color: white; padding: 30px;}
.section3 .item i{font-size: 50px;} 
.section3 .item h4{padding: 30px 0;}

@media(max-width: 800px)
{.section3 .container {grid-template-columns: repeat(2,1fr);}
}

/*4번섹션*/
.section4{background-color: black; color: white;}

.section4 .cont1 {margin-bottom: 40px;}
.section4 .cont1 .item {
border-bottom: 1px solid white; 
height: 50px;
display: flex; 
align-items:center;}
.section4 .cont1 .item p{ width: 33.3%;}

.section4 .cont2 {display: flex;}
.section4 .cont2 .item{width: 33.3%;}
.section4 .cont2 .item h4{margin-bottom: 10px;}


@media(max-width: 800px)
{.section4 .cont1 .item {display: block; height: auto; padding: 20px 0;}
.section4 .cont1 .item p {width: auto;}

.section4 .cont2{display: block; }
.section4 .cont2 .item {width:auto; margin-bottom: 30px;}
}

/*5번섹션*/
.section5 {background-color: black; padding: 0;}
.section5 .container{display: grid; grid-template-columns:repeat(4,1fr); gap: 10px;}
.section5 .item {height: 300px;display: flex; align-items: center; justify-content: center;}
.section5 .item .img {width:100%;}

@media(max-width: 800px)
{.section5 .container {grid-template-columns: repeat(2,1fr);}
}

/*6번섹션*/
.section6{background-color: #00486A; color: white;}
.section6 .container{display: flex; gap: 100px;}
.section6 .item{width:50%;}
.section6 .left{display: grid;grid-template-columns:1fr 1fr; gap:10px;}
.section6 .left .box{background-color: rgba(0,0,0,0.5); padding: 10px;}
.section6 .left .box3{grid-column: 2 span; height: 200px;}
.section6 .left .box4{grid-column: 2 span; font-weight: 900; background-color: white; color: #0C2B4E; text-align: center;}

.section6 .right .box{display: flex; align-items: center; gap: 20px; margin-bottom: 30px;}
.section6 .right .icon{width: 60px;height: 60px; background-color: white; color: #0C2B4E; border-radius: 50%; display:flex; align-items: center;justify-content: center;}
.section6 .right .sns{line-height: 30px;}

@media (max-width:800px)
{.section6 .container{flex-direction: column; gap: 50px;}
.section6 .item{width: auto;}
.section6 .left{grid-template-columns: 1fr; }
.section6 .left .box{grid-column: auto;}}