@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}
	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: 521px; 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;}
	.search a{text-decoration: none; cursor: pointer;}
	.search-btn:hover{background: #333; box-shadow: 0 0; }
	.search-btn{background: #0a1c69;; 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;}



        /* 스와이퍼 전체 컨테이너 */
        .swiper-container-wrapper {
			clear: both;
            position: relative;
            width: 1170px; 
        }
        
        /* 슬라이드가 보여지는 윈도우 */
        .swiper-view {
            width: 100%;
            height: 1343px;
            overflow: hidden;
            position: relative;
			top:-50px;
        }

        /* 개별 슬라이드를 한 자리에 겹치기 */
        .swiper-slide {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 24px;
            font-weight: bold;
            color: #fff;
            background-color: #f5fcff;
            user-select: none;
            
            /* 핵심: 처음에는 안 보이게 설정 */
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.6s ease-in-out, visibility 0.6s ease-in-out; /* 부드러운 전환 속도 */
            z-index: 1;
        }

        /* 활성화된 슬라이드만 나타나게 설정 */
        .swiper-slide.active {
            opacity: 1;
            visibility: visible;
            z-index: 2;
        }

        /* 이미지 하단 컨트롤러 레이아웃 */
        .swiper-controls {
            display: flex;
            /*align-items: center;
            justify-content: center;*/
            gap: 12px;
            margin-top: 20px;
            color: #1a202c;
            user-select: none;
			z-index: 100;
			float: right;
			position: relative;
			top:160px;
			right: 190px;
        }

        /* 원형 버튼 스타일 */
        .control-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 32px;
            height: 32px;
            border: 1px solid #1a202c;
            border-radius: 50%;
            background: transparent;
            cursor: pointer;
            transition: background-color 0.2s;
        }
        .control-btn:hover {
            background-color: rgba(0, 0, 0, 0.05);
        }
        .control-btn svg {
            width: 20px;
            height: 20px;
            fill: #1a202c;
        }

        /* 텍스트 페이지네이션 (현재 / 전체) */
        .custom-fraction {
            font-size: 20px;
            font-weight: 500;
            min-width: 55px;
            text-align: center;
        }


@media all and (max-width: 769px) {	
	body{ background: #fff;}
	img{width: 100%;}	
	#content {width: 100%; height: auto;}	
	.search{border-radius: 0 !important; width: 100%;}
	.search-btn{ width:100%; font-size: .9rem; padding: 12px 0px;  }
	.search-padding{padding: 0px 0px 50px 0;}
	.sub{ width: 100%;}
	#fla{ width: 100%;}
	.video{width:80%; padding-bottom: 70px;}
	.sub-box{padding-top: 5%;}
	.hr{display: none;}
	.search-padding{padding: 0 0 30px 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%}

	.swiper-container-wrapper {width: 100%; background: #fff;}
	.swiper-view {height: auto; min-height:400px; top:-35px;}
	.swiper-controls {top:7%; right: 16%;}
	.control-btn { width: 16px;height: 16px; }
    .control-btn svg {width: 30px;height: 30px; }
    .custom-fraction {font-size: 11px; min-width: 35px;}
	
}