#all_wraps{position:relative;}
#all_wraps li{display:block;}

#head_ms{position:fixed; top:0; left:0; width:100%; z-index: 9999;}

#main_ims{position:relative; height:835px; background:url('../images/main_images01.jpg')no-repeat top center; background-size:cover;}
#main_ims .tmsc{position:absolute; top:50%; left:50%; width:100%; text-align:center; transform:translate(-50%,-50%);  z-index:9;}
#main_ims .tmsc .big_tsd_kor{font-size:80px; color:#fff; font-family: "Poppins", sans-serif; font-weight:800; text-align:center;}
#main_ims .tmsc .big_tsd{font-size:120px; color:#fff; font-family: "Poppins", sans-serif; font-weight:800; text-align:center;}
#main_ims .tmsc .sm1_txts{font-size:40px; color:#fff; font-family: "Poppins", sans-serif; word-break: keep-all; font-weight:500; text-align:center;}
#main_ims .tmsc .sm2_tx{font-size:27px; color:#fff; font-family: "Poppins", sans-serif; line-height:1.3; font-weight:300; text-align:center;}

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

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

    .swiper-slide img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

#main_02{position:relative; background:#fff; padding:120px 0 120px;}
#main_02 .main_slider_ms{max-width:80%; width:100%; margin:0 auto;}
#main_02 .main_slider_ms h2.tsx{font-size:64px; color:#789ab0; font-family: 'Pretendard'; font-weight:700;}

#main_03{position:relative; height:684px; background:url('../images/main_section03_bg.jpg') no-repeat center top; background-size:cover;}
#main_03 .main_contents3{position:relative; width:80%; margin:0 auto;}
#main_03 .main_contents3 .story_mns{padding-top:20%; padding-left:54%;}
#main_03 .main_contents3 .story_mns h2.tids{font-size:64px; font-family: 'Pretendard'; color:#fff; font-weight:700;}
#main_03 .main_contents3 .story_mns p.cons_txts{font-size:23px; color:#fff; padding:10px 0 50px; font-family: 'Pretendard'; }
#main_03 .main_contents3 .story_mns a.btnsm{padding:4px 30px 4px; text-align:center; color:#ffff;  font-size:16px; background:#789ab0;}

#main_04{position:relative; background:#fff;}
#main_04 .main_contents4{position:relative; width:80%; margin:0 auto; padding:110px 0 110px;}
#main_04 .main_contents4 h2.tsx{font-size:64px; color:#789ab0; font-family: 'Pretendard'; font-weight:700; padding:0 0 10px;}
#main_04 .main_contents4 p{font-size: 24px; line-height: 1.2; font-family: 'Pretendard'; padding:0 0 10px;}
#main_04 .main_contents4 .btn_wrap{display:flex; justify-content: flex-end; padding:0 0 10px;}
#main_04 .main_contents4 .btn_wrap a.mores{padding:5px 20px 5px; border:1px solid #ddd; font-size:18px; text-align:center; color:#838383; margin-right:0;}
#main_04 .main_contents4 .btn_wrap a.mores:hover{background:#7e97a8; color:#fff;}
#main_04 .main_contents4 .news_list{position:relative;}
#main_04 .main_contents4 .news_list ul{display:flex; gap:9px;}
#main_04 .main_contents4 .news_list li{width:calc(98% / 4);}
#main_04 .main_contents4 .news_list li a{display:block;}
#main_04 .main_contents4 .news_list li a:hover .con_wrap .imgs{border:1px solid #6289a3;}
#main_04 .main_contents4 .news_list li .con_wrap{position:relative;}
#main_04 .main_contents4 .news_list li .con_wrap .imgs{width:100%; height:219px; border:1px solid #ddd;}
#main_04 .main_contents4 .news_list li .con_wrap .imgs img{width:100%; height:100%; object-fit:cover;}
#main_04 .main_contents4 .news_list li .con_wrap .texts{font-size:18px; color:#7e7e7e; font-family: 'Pretendard'; padding:10px 0 10px;}
#main_04 .main_contents4 .news_list li .con_wrap .dats{font-size:19px; color:#000; font-weight:700; font-family: 'Pretendard';}

#main_05{position:relative; height:546px; background:url('../images/main_05_bgs.jpg') no-repeat center top; background-size:cover;}
#main_05 .main_contents5{position:relative; width:80%; margin:0 auto; padding:115px 0 115px;}
#main_05 .main_contents5 h2.tsx{font-size:64px; color:#537185; font-family: 'Pretendard'; font-weight:700; padding:0 0 10px;}
#main_05 .main_contents5 .btn_wrap{display:flex; justify-content: flex-end; padding:0 0 10px;}
#main_05 .main_contents5 .btn_wrap a.mores{padding:5px 20px 5px; border:1px solid #ddd; font-size:18px; background:#fff; text-align:center; color:#838383; margin-right:0;}
#main_05 .main_contents5 .btn_wrap a.mores:hover{background:#7e97a8; color:#fff;}
#main_05 .main_contents5 .qna_list{position:relative;}
#main_05 .main_contents5 .qna_list ul{display:flex; gap:8px;}
#main_05 .main_contents5 .qna_list li{width:calc(98% / 4); padding:20px; background:#fff;}
#main_05 .main_contents5 .qna_list li:hover{background:#b1cbdb;}
#main_05 .main_contents5 .qna_list li .subject_txts{font-size:18px; font-weight:600; color:#4a4a4a; line-height:1.4;}
#main_05 .main_contents5 .qna_list li .lins{border-bottom:1px dotted #ddd; margin:10px 0 10px;}
#main_05 .main_contents5 .qna_list li .date_txt{font-size:20px; font-weight:700; color:#4a4a4a;}

:root{
    --wrap-max: 1400px;
    --title: #7e97a8;   /* 큰 타이틀 색 (스크린샷 느낌) */
    --desc: #6e6e6e;
    --btn: #6f86a0;     /* 화살표 테두리 */
    --cardBar: #7f9eb0; /* 카드 하단 바 */
    --gap: 15px;
    --radius: 10px;
  }

.section{
    padding: 48px 0px 60px;
  }

  .wrap{
    max-width: var(--wrap-max);
    margin: 0 auto;
  }

  /* Header */
  .headerRow{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap: 20px;
    margin-bottom: 22px;
  }

  .titleBox h2{
    margin:0 0 30px;
    font-size: clamp(34px, 4vw, 64px);
    line-height: 1.05;
    color: var(--title);
    font-weight: 800;
    letter-spacing: -0.02em;
  }
  .titleBox p{
    margin:0;
    color: var(--desc);
    font-size: 24px;
    line-height: 1.2;
	font-family: 'Pretendard';
  }

  /* Controls */
  .controls{
    display:flex;
    gap: 10px;
    margin-top: 10px;
    flex-shrink:0;
  }
  .navBtn{
    width: 56px;
    height: 56px;
    border: 1px solid var(--btn);
    background:#fff;
    border-radius: 0;
    cursor:pointer;
    display:grid;
    place-items:center;
    transition: transform .12s ease, opacity .12s ease;
  }
  .navBtn:active{ transform: scale(0.98); }
  .navBtn:disabled{
    opacity:.35;
    cursor:not-allowed;
  }
  .navBtn svg{ width:18px; height:18px; }

  /* Slider */
  .slider{
    position: relative;
  }

  .viewport{
    overflow:hidden;
  }

  .track{
    display:flex;
    gap: var(--gap);
    will-change: transform;
    transition: transform .35s ease;
  }

  /* 카드 폭(반응형)
     - PC: 4장 정도 보이게
     - 태블릿: 2~3장
     - 모바일: 1~1.3장 */
  .card{
    flex: 0 0 calc((100% - (var(--gap) * 3)) / 4); /* 기본 4개 */
    border-radius: var(--radius);
    overflow:hidden;
    background:#7c9db2;
    position: relative;
  }

 

  .card a{
    display:block;
    text-decoration:none;
	position: relative;
	z-index: 2;
    color:inherit;
    height: 100%;
  }

  .thumb{
    width:100%;
    aspect-ratio: 4 / 4;   /* 스샷 느낌 비율 */
    object-fit: cover;
    display:block;
    filter: saturate(0.98);
    transform: scale(1);
    transition: transform .35s ease;
  }
  .card:hover .thumb{ transform: scale(1.04); }

  .bar{
    background: var(--cardBar);
    padding: 18px 18px 16px;
    position: relative;
    min-height: 120px;
  }
  .bar h3{
    margin:0 0 12px;
    color:#fff;
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -0.01em;
  }

  .learn{
    display:flex;
    justify-content:center;
  }
  .learn span{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    height: 34px;
    padding: 0 18px;
    border: 1px solid rgba(255,255,255,.45);
    color:#fff;
    font-weight: 600;
    font-size: 14px;
    min-width: 160px;
  }

  /* 작은 화살표(카드 오른쪽 위) */
  .cornerArrow{
    position:absolute;
    right: 14px;
    top: 18px;
    width: 22px;
    height: 22px;
    opacity: .95;
  }
  .cornerArrow:before, .cornerArrow:after{
    content:"";
    position:absolute;
    background:#fff;
    border-radius: 1px;
  }
  .cornerArrow:before{ /* 대각선 */
    width: 14px; height: 2px;
    transform: rotate(-45deg);
    right: 2px; top: 8px;
  }
  .cornerArrow:after{  /* ㄴ 모양 */
    width: 12px; height: 12px;
    border-right: 2px solid #fff;
    border-top: 2px solid #fff;
    background: transparent;
    right: 2px; top: 3px;
    border-radius: 0;
  }

  /* 키보드 포커스 */
  .navBtn:focus-visible,
  .card a:focus-visible{
    outline: 3px solid rgba(111,134,160,.35);
    outline-offset: 3px;
  }


  #footer_ms{background:#6e6d6d; position:relative; padding:90px 0 90px;}
  #footer_ms .copy_ms{display:flex; align-items: center; max-width:80%; margin:0 auto; width:100%; padding:0 0 40px; border-bottom:1px solid #ddd;}
  #footer_ms .copy_ms h1.f_logos{width:131px;}
  #footer_ms .copy_ms .f_navis{padding-left:60px;}
  #footer_ms .copy_ms .f_navis ul{display:flex;}
  #footer_ms .copy_ms .f_navis li{padding-right:35px; font-size:18px; line-height:40px; color:#dbdbdb; font-weight:500;}
  #footer_ms .copy_ms .f_navis li a{display:block; color:#dbdbdb;}
  #footer_ms .textsd{max-width:80%; margin:0 auto; width:100%; padding:40px 0 0;}
  #footer_ms .textsd .tex1{font-size:16px; color:#dbdbdb;}
  #footer_ms .textsd .tex2{padding-left:30px; font-size:16px; color:#dbdbdb;}


@media (max-width: 1730px){
	#main_ims {
		height: 750px;
	}
	
	#main_ims .tmsc .big_tsd {
		font-size: 118px;
	}

	#main_ims .tmsc .sm1_txts {
		font-size: 32px;
	}

	#main_ims .tmsc .sm2_tx {
		font-size: 20px;
	}

}

@media (max-width: 1600px){
	#main_03 {
		height: 625px;
	}

	#main_03 .main_contents3 {
		width: 93%;
	}

	#main_03 .main_contents3 .story_mns {
		padding-top: 17%;
		padding-left: 50%;
	}
}

@media (max-width: 1430px){
	  #main_ims {
		height: 680px;
	  }
	 
	 #main_ims .tmsc .big_tsd {
        font-size: 98px;
     }
}

@media (max-width: 1190px){
	#main_ims {
		height: 577px;
	  }
	 
	 #main_ims .tmsc .big_tsd {
        font-size: 80px;
    }

	#main_ims .tmsc .sm1_txts {
        font-size: 26px;
    }

	#main_ims .tmsc .sm2_tx {
        font-size: 16px;
    }

	#main_ims {
        height: 430px;
    }

	#main_02 {
		padding: 80px 0 80px;
	}

	.titleBox h2 {
		font-size: 40px;
	}

	.titleBox p {
	    font-size: 20px;
	}

	.bar h3 {
		font-size: 23px;
	}
	
	#main_02 .main_slider_ms {
		max-width: 94%;
	}

	#main_03 .main_contents3 .story_mns h2.tids {
		font-size: 40px;
	}

	#main_03 .main_contents3 .story_mns p.cons_txts {
		font-size: 20px;
	}

	#main_04 .main_contents4 h2.tsx {
		font-size: 40px;
	}

	#main_04 .main_contents4 p {
		font-size: 20px;
	}

	#main_04 .main_contents4 .btn_wrap a.mores {
		font-size: 18px;
	}

	#main_05 .main_contents5 h2.tsx {
		font-size: 40px;
	}

	#main_04 .main_contents4 {
		width:95%;
	}

	#main_04 .main_contents4 .news_list li .con_wrap .texts {
		font-size: 16px;
	}

	#main_04 .main_contents4 .news_list li .con_wrap .dats {
		font-size: 17px;
	}

	#main_03 {
        height: 520px;
    }

	#main_03 .main_contents3 .story_mns {
        padding-top: 17%;
        padding-left: 43%;
    }

	#main_05 .main_contents5 {
		width: 95%;
	}

	#main_05 .main_contents5 .qna_list li .subject_txts {
		font-size: 16px;
	}

	#main_05 .main_contents5 .qna_list li .date_txt {
		font-size: 16px;
	}

	#footer_ms .copy_ms .f_navis li {
		font-size: 16px;
		padding-right: 20px;
	}

	#footer_ms .copy_ms {
		width: 95%;
		flex-direction: column;
	}

	#footer_ms .copy_ms .f_navis li {
		line-height: 1.2;
		padding-top:20px;
	}

	.depth1 {
		font-size: 25px;
	}
}


 @media (max-width: 1024px){
    .card{ flex-basis: calc((100% - (var(--gap) * 2)) / 3); }

	#main_ims .tmsc .big_tsd {
        font-size: 64px;
    }

	#main_ims .tmsc .sm1_txts {
        font-size: 21px;
    }

	#main_ims .tmsc .sm2_tx {
        font-size: 14px;
    }

	#main_ims {
        height: 490px;
    }

	#main_02 {
		padding: 30px 0 30px;
	}

  }

@media (max-width: 838px){
	#main_ims .tmsc .big_tsd {
        font-size: 50px;
    }
}

@media (max-width: 768px){
    .headerRow{
      flex-direction: column;
      align-items: flex-start;
    }
    .controls{
      margin-top: 14px;
    }
    .card{ flex-basis: calc((100% - var(--gap)) / 2); }

	.titleBox p {
        font-size: 17px;
    }

	#main_04 .main_contents4 .news_list ul {
		flex-direction: row;
		flex-wrap: wrap;
		gap: 5px;
	}

	#main_04 .main_contents4 .news_list li {
		width: calc(98% / 2);
	}

	#main_05 .main_contents5 .qna_list li {
		width: calc(98% / 2);
    }

	#main_05 .main_contents5 .qna_list ul {
		flex-direction: row;
		flex-wrap: wrap;
	}

	#footer_ms .copy_ms {
		width:98%;
	}

	#footer_ms .copy_ms .f_navis{
		padding-left: 0px;
	}

	#footer_ms .copy_ms .f_navis li {
		font-size: 14px;
	}

}

@media (max-width: 640px){
	#main_ims {
        height: 430px;
    }

	#main_ims .tmsc .big_tsd {
        font-size: 43px;
    }

	#main_ims .tmsc .sm1_txts {
        font-size: 17px;
    }

	#main_ims .tmsc .sm2_tx {
        font-size: 12px;
    }

	#main_02 {
		padding: 0px 0 0px;
	}

	#footer_ms .copy_ms .f_navis ul {
		flex-direction: row;
		flex-wrap: wrap;
	}

	#footer_ms .copy_ms .f_navis li {
		width:33%;
	}

}

@media (max-width: 580px){
	.titleBox h2 {
        font-size: 34px;
    }

	.titleBox p {
        font-size: 17px;
    }

	#main_03 {
        height: 400px;
    }

	#main_03 .main_contents3 .story_mns h2.tids {
        font-size: 34px;
    }

	#main_03 .main_contents3 .story_mns p.cons_txts {
        font-size: 17px;
    }

	#main_03 .main_contents3 .story_mns {
        padding-top: 19%;
		padding-left: 31%;
    }

	#main_04 .main_contents4 h2.tsx {
        font-size: 34px;
    }

	#main_04 .main_contents4 p {
        font-size: 17px;
    }

	#main_04 .main_contents4 .btn_wrap a.mores {
        font-size: 16px;
    }

	#main_05 .main_contents5 h2.tsx {
        font-size: 34px;
    }

	#main_05 .main_contents5 .btn_wrap a.mores {
		font-size: 16px;
    }
}


@media (max-width: 530px){
	#main_ims .tmsc .big_tsd {
        font-size: 35px;
    }

}

@media (max-width: 480px){
    .card{ flex-basis: 100%; } /* 모바일에서 1장 + 살짝 다음장 보이게 */
	#main_ims .tmsc .big_tsd {
        font-size: 27px;
    }

	#main_ims {
        height: 427px;
    }
	
	#main_ims .tmsc .sm1_txts {
        font-size: 14px;
    }

	.titleBox h2 {
        font-size: 29px;
    }

	#main_03 .main_contents3 .story_mns h2.tids {
        font-size: 29px;
    }

	#main_03 .main_contents3 .story_mns {
		padding-left: 7%;
    }

	#main_04 .main_contents4 .news_list li {
		width: calc(100% / 1);
	}

	#main_05 .main_contents5 .qna_list li {
        width: calc(100% / 1);
    }
}

@media (max-width: 410px){
	#footer_ms .copy_ms .f_navis li {
        width: 50%;
		text-align:center;
    }
}