@charset "utf-8";
@import url(https://fonts.googleapis.com/earlyaccess/notosanslao.css);
	html, body {width: 100%; height: 100%; padding:0; margin:0 }
	img{ display:block;  padding:0; margin:0; width:1170px}
	ul, li, div{padding:0; margin:0}
	li{ list-style:none; }
	#content {position: relative;padding:0;margin:0; width: 1170px; }
	#content img {position: absolute;left: 0;}
	#content .active {z-index: 1;opacity: 1;}
	.img_tab{ width:1170px; float:left; margin:0;}
	.img_tab li{ list-style:none; float:left;}
	.img_tab1{ float:left;}
	.img_tab2{ float:right;}
	.sub{width:1170px;}
	.btn{position: relative; width: 497px;margin:0 auto; p }
	.btn img{ margin:0 auto; }
	.sub_bg{background: #ebebeb; width:1170px; margin:0 auto; text-align:center; padding-bottom: 150px; float: left;}
	#fla{ text-align:center; background: #232323; width: 1170px;}
	.video{ margin:0 auto; text-align:center; width: 850px; }
	.padding{ padding-bottom:15px;}
	.search{width: 1170px; margin: 0 auto; float: left;}
	.search a{text-decoration: none; cursor: pointer;}
	.search-btn:hover{background: #333; box-shadow: 0 0; }
	.search-btn{background: #4a2c88;; color: #fff; text-align: center; font-size: 21px; font-weight: 600; text-decoration: none;  padding: 25px 0; border-radius: 8px; letter-spacing: -1px; box-shadow: 0 5px #dbdbdb;}
	.search-padding{padding: 100px 0; width: 100%; margin: 0 auto; }
	.btn-box{position:relative; top: -185px;}
	.btn2{ margin: 0 auto; }
	.btn2 li{float: left; padding: 0 118px;}



    /* 전체 프레임 컨테이너 */
    .slider-wrap {
      position: relative;
      width: 100%;
      max-width: 1170px;
      /*margin: 0 auto;*/
      padding: 0 60px;
	  margin: 0 ;
      box-sizing: border-box;
		padding-bottom: 110px;
    }

    /* 이미지가 보이는 실제 창 (넘치는 부분 숨김) */
    .slider-window {
      overflow: hidden;
      width: 100%;
    }

    /* 슬라이드 아이템들을 가로로 정렬하는 트랙 */
    .slider-track {
      display: flex;
      transition: transform 0.5s ease-in-out;
    }

    /* 각각의 카드 아이템 */
    .slide-item {
      /* 기본적으로 PC화면 기준 4개 노출 (25%에서 간격 제외) */
      flex: 0 0 calc(25% - 15px);
      margin-right: 20px;
      display: flex;
      justify-content: center;
    }

    /* 미주 도시 3개는 고정 노출하고 이동하지 않음 */
    .slider-wrap.static-three .slider-track {
      transition: none;
    }

    .slider-wrap.static-three .slide-item {
      flex: 0 0 calc(33.333% - 14px);
    }

    .slider-wrap.static-three .nav-btn {
      display: none;
    }

    /* 마지막 아이템은 오른쪽 여백 제거 */
    .slide-item:last-child {
      margin-right: 0;
    }

    /* 이미지 스타일 */
    .slide-item img {
      width: 100%;
      max-width: 286px;
      height: auto;
      display: block;
     /*  border-radius: 20px; 창문 모양 끝부분 고려 */
    }

    /* 좌우 이동 버튼 */
    .nav-btn {
      position: absolute;
      top: 35%;
      transform: translateY(-50%);
      width: 35px;
      height: 35px;
      background-color: #ffffff;
      border: 1px solid #ddd;
      border-radius: 50%;
      cursor: pointer;
      font-size: 18px;
      font-weight: bold;
      color: #333;
      display: flex;
      justify-content: center;
      align-items: center;
      box-shadow: 0 2px 3px rgba(0,0,0,0.1);
      z-index: 10;
    }

    .nav-btn:hover {
      background-color: #f1f1f1; 
    }

    .prev-btn { left: 15px; }
    .next-btn { right: 15px; }

    /* 화면이 작아질 때를 위한 반응형 설정 */
    @media (max-width: 1024px) {
      .slide-item { flex: 0 0 calc(33.33% - 14px); } /* 3개 노출 */
    }
    @media (max-width: 768px) {
      .slide-item { flex: 0 0 calc(50% - 10px); } /* 2개 노출 */
    }



@media all and (max-width: 769px) {	
	body{ background: #fff;}
	img{width: 100%;}	
	#content {width: 100%; }	
	.search{border-radius: 0 !important; width: 100%;}
	.search-btn{ width:100%; font-size: .9rem; padding: 12px 0px; margin: 50px 0; }
	.search-padding{padding: 0px 0px 50px 0;}
	.sub_bg{ width: 100%;}
	#fla{ width: 100%;}
	.video{width:80%; padding-bottom: 70px;}
	.sub-box{padding-top: 115%;}
	.hr{display: none;}
	.search-padding{padding: 0; width: 75%;}
	.btn{width: 50%;}
	.btn-box{top:-1.2%}
	.btn2 li{width: 25%; padding: 0;}
	.btn2-left{position: relative; left:8%}
	.btn2-right{position: relative; left:31%}
	.nav-btn {width: 15px; height: 15px;  font-size: 10px; top: 25%;}
}