@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;  }
	.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: 1170px; }
	.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: 130px 0; width: 100%; margin: 0 auto; }
	.btn-box{position:relative; top: -185px;}
	.btn2{ margin: 0 auto; }
	.btn2 li{float: left; padding: 0 118px;}

    /* 아코디언 컨테이너 */
        .accordion-container {
            width: 100%;
            max-width: 1170px;
            overflow: hidden;
        }

        /* 숨겨진 체크박스 토글 */
        .accordion-toggle {
            display: none;
        }



        /* 화살표 아이콘 */
        .icon {
            width: 13px;
            height: 13px;
            border-right: 3px solid #555;
            border-bottom: 3px solid #555;
            transform: rotate(45deg);
            transition: transform 0.3s ease;
			float: right;
			position: relative;
			right: 170px;
			top:-85px;
			
        }

        /* 본문 내용 컨테이너 (부드러운 개폐의 핵심) */
        .accordion-content {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.3s ease-out, padding 0.3s ease;
        }

        /* 본문 텍스트 스타일 */
        .content-body {
            padding: 15px 0;
            color: #555;
            font-size: 14px;
            line-height: 1.6;
        }

        /* -----------------------------------------
           체크박스가 선택되었을 때 (열림 상태) 스타일 변경
        ------------------------------------------- */
        
        /* 1. 화살표 회전 (위로 접히는 모양) */
        .accordion-toggle:checked + .accordion-header .icon {
            transform: rotate(-135deg);
        }

        /* 2. 본문 펼치기 (내용물 양에 맞춰 max-height 조절) */
        .accordion-toggle:checked ~ .accordion-content {
            max-height: 1000px; /* 내용이 완전히 펼쳐질 수 있는 충분한 높이 */
        }


@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{ width: 100%;}
	#fla{ width: 100%;}
	video{width:100%;}
	.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%}
	.icon {width: 4px; height: 4px; border-right: 1px solid #555; border-bottom: 1px solid #555; right: 15%; top:-30px; }
}