@charset "utf-8";

/*
@작업자			:이상윤
@작업완료일		:2024.07.08
@최종수정일		:2024.07.08
*/


/* 전체 */
body.sub_conten { background: #f5f5f5; display: flex; flex-direction: column; height: 100%; margin: 0; justify-content: center;}
#wrap { display: flex;  position: relative; justify-content: center; overflow:hidden; height:90vh; align-items: center;}

/*aside header*/
#wrap aside header{display:flex; justify-content: space-between; align-items: center;}
#wrap aside header .logo{width:100%;}
#wrap aside header .logo img{width:130px;}
#wrap aside header .search-container {display: flex;justify-content: center;}
#wrap aside header input[type="text"] {width: 50%; height:25px;padding: 5px;border: 1px solid #ccc;border-radius: 4px; }
#wrap aside header input[type="text"]::placeholder {color: #aaa;}

/* 토글메뉴 */
#toggleButton {position: absolute;left: -100px;top: 3vh;z-index: 999;background-color: #fff; border: none; box-shadow: 0 0 1px rgba(0, 0, 0, 0.1);border-radius: 0 20px 20px 0;color: #111;padding: 15px 15px;cursor: pointer;writing-mode: vertical-rl;text-orientation: mixed;transition: background-color 0.3s ease, color 0.3s ease, left 0.3s ease,height 0.5s ease,transform 0.3s ease;font-weight: 600;height: 120px;overflow: hidden;}
#toggleButton::before {content: "";position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: linear-gradient(270deg, #1b3c89, #395eb4, #1b3c89);background-size: 600% 600%;z-index: -1;animation: gradientBackground 5s ease-in-out infinite;display: none; }
#toggleButton:hover {animation: gradientBackground 5s ease-in-out infinite; background: linear-gradient(270deg, #1b3c89, #395eb4, #1b3c89);background-size: 600% 600%; color: yellow; height:150px;}
#toggleButton.open {left: 0;background-color: transparent; color:#fff; }
#toggleButton.open::before {display: block; }
#toggleButton.open:hover {background-color: transparent;color: yellow; }
#toggleButton.visible {left: 500px;}

/* 왼쪽 side */
#wrap aside { background: #fff; border-radius: 0 20px 20px 0; width: 500px; height: 100%; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); padding: 20px; box-sizing: border-box;  z-index: 1000; flex-shrink: 0;  transition: transform 0.3s ease, width 0.3s ease; position:relative; transform: translateX(-100%); }
#wrap aside.hidden { transform: translateX(-100%); }
#wrap aside.visible {transform: translateX(0);}
#wrap aside.hidden + #toggleButton { left: 0; }

#wrap aside .leftnavi{height:100%; display:flex; flex-direction: column;}
#wrap aside .leftnavi .list_cont{overflow-y: auto; /* max-height: calc(100vh - 300px); */ height:calc(100vh - 20%); -webkit-overflow-scrolling: touch; display: flex;  flex-wrap: wrap; position:relative; z-index:0;}

/* tabs menu */
#wrap aside .leftnavi .tabs {display: block;}
#wrap aside .leftnavi .responsive-select {display: none;}

/* scrollbar style */
#wrap aside .leftnavi .list_cont::-webkit-scrollbar {width: 12px;}
#wrap aside .leftnavi .list_cont::-webkit-scrollbar-thumb {background-color: #888;border-radius: 6px;border: 3px solid transparent;background-clip: padding-box;}
#wrap aside .leftnavi .list_cont::-webkit-scrollbar-thumb:hover {background-color: #1b3c89;}
#wrap aside .leftnavi .list_cont::-webkit-scrollbar-track {background: #f1f1f1;border-radius: 6px;}

/* Scrollbar styles for Firefox */
#wrap aside .leftnavi .list_cont {scrollbar-width: thin;scrollbar-color: #888 #f1f1f1;}
#wrap aside .leftnavi .list_cont::-moz-scrollbar-thumb {background-color: #888;border-radius: 6px;}
#wrap aside .leftnavi .list_cont::-moz-scrollbar-thumb:hover {background-color: #555;}
#wrap aside .leftnavi .list_cont::-moz-scrollbar-track {background: #f1f1f1;border-radius: 6px;}

#wrap aside .leftnavi .list_cont ul { display: none; flex-wrap: wrap; width: 100%; gap:20px; list-style: none; margin: 0; height:auto; overflow-y:hidden;}
#wrap aside .leftnavi .list_cont ul.active { display: flex; justify-content: flex-start; align-content: flex-start;}
#wrap aside .leftnavi .list_cont ul li { width: calc(100% - 54%); box-sizing: border-box; border: 1px solid #efefef; opacity: 0; transform: translateY(20px); animation: fadeInUp 0.4s forwards; border-radius:15px; position:relative; }
#wrap aside .leftnavi .list_cont ul li a:hover::before {border: 3px solid #1b3c89; width:calc(100% - 5px); height:calc(100% - 5px); position:absolute; content:'';  border-radius:15px; } 
#wrap aside .leftnavi .list_cont ul li a{color:#111; display:block; }
#wrap aside .leftnavi .list_cont .tab-content { opacity: 0; transition: opacity 0.5s ease; }
#wrap aside .leftnavi .list_cont .tab-content h3{font-weight:500;margin:20px 0 10px 0; font-size:20px; padding:0 10px; white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
#wrap aside .leftnavi .list_cont .tab-content p{font-size: 13px;width: 90%;margin: 0 0 20px 10px;font-weight: 200; display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden; text-overflow: ellipsis;letter-spacing: 0.5px;line-height: 1.5em;max-height: 3em;}
#wrap aside .leftnavi .list_cont .tab-content p em{font-style: italic;}
#wrap aside .leftnavi .list_cont .tab-content .img {overflow: hidden;width: 100%;height: 150px;background: #fff;border-radius: 15px 15px 0 0;display: flex;justify-content: center;align-items: center; background:url(/nibr/assets/images/common/noimg.png)no-repeat center}
#wrap aside .leftnavi .list_cont .tab-content .img canvas {width: 100%;height: 100%;border-radius: 10px 10px 0 0; }
#wrap aside .leftnavi .list_cont .tab-content .img img {width: 100%;height: 100%;object-fit: cover; border-radius: 15px 15px 0 0;}
#wrap aside .leftnavi .list_cont .tab-content.active { opacity: 1; }
#wrap aside .leftnavi .tabs { margin: 20px 0; cursor: pointer; display: flex; justify-content: space-between; align-items: center; background: #efefef; border-radius: 15px; position: relative; z-index: 2; width:auto;}
#wrap aside .leftnavi .tabs li { flex: 1; text-align: center; font-size: 17px; padding: 10px 0; transition: background-color ease, color 0.5s ease; }
#wrap aside .leftnavi .tabs li.active { position: relative; z-index: 2; color: #fff; background-color: #1b3c89; border-radius: 100px;}
#wrap aside .leftnavi .tabs .active-indicator { position: absolute; z-index: 1;height: 100%; background: #1b3c89; border-radius: 100px;transition: left 0.5s ease, width 0.5s ease;}


/* copyright */
footer#footer {position: fixed; right: 2vw; bottom: 1vh; z-index: 2; text-align:right; font-size:14px;}
footer#footer #more-btn{background:#666; width:20px; height:20px; color:#fff; transition: background 0.3s ease, transform 0.3s ease; border-radius:100px;}
footer#footer #more-btn:hover{background:#1b3c89; transform: rotate(180deg);}
footer#footer .footer-info {display: none;}
footer#footer .footer-info.show {display: block;}


/* respon control */
	/* PC */
	@media (max-width:1600px){
		#wrap aside{width:350px; height:85vh;}
		#wrap aside header input[type="text"]{width:40%;}
		#wrap aside .leftnavi .list_cont ul{gap:8px;}
		#wrap aside .leftnavi .list_cont .tab-content h3{font-size:16px; margin:20px 0 10px 0;}
		#wrap aside .leftnavi .list_cont .tab-content .img{height:auto;}
		#wrap aside .leftnavi .list_cont .tab-content p{font-size:12px;}
		#wrap aside .leftnavi .tabs li{font-size:14px;}
		
		#toggleButton{font-size:12px; }
		#toggleButton.visible{left:350px;}
	}

	/* 타블렛 */
	@media (max-width:1280px){
		#wrap aside{height:85vh;}
	}

	/* 타블렛, 모바일 */
	@media (max-width:1024px){

		#wrap aside{width:200px;}
		#wrap aside header input{display:none;}
		
		#wrap aside .leftnavi .list_cont{flex:1;}
		#wrap aside .leftnavi .list_cont ul li{width:calc(100% - 10%);}
		#wrap aside .leftnavi .list_cont .tab-content h3{width:90%; margin:calc(100% - 95%); text-align:left; padding:0;}
		#wrap aside .leftnavi .list_cont .tab-content p{margin:calc(100% - 95%);}

		#toggleButton{padding:5px 5px;}
		#toggleButton.visible{left:200px;}
		a#toggleButton {left: 10px;}

		#wrap aside .leftnavi .tabs {display: none;}

		/* 기본 셀렉트 박스 스타일 */
		#wrap aside .leftnavi .responsive-select {display: block;width: 100%;height: 40px;margin: 20px 0;padding: 5px;border: 1px solid #ccc;border-radius: 5px;background-color: #fff;box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);appearance: none;-webkit-appearance: none;-moz-appearance: none;background-image: url('../image/arrow_down.svg');background-repeat: no-repeat;background-position: right 10px top 50%;background-size: 10px 10px; color:#111; font-weight:700; font-size:14px; :}

		/* 셀렉트 박스 */
		#wrap aside .leftnavi .select-wrapper {position: relative;}
		#wrap aside .leftnavi .select-wrapper::after {content: '';position: absolute;top: 50%;right: 10px;width: 0;height: 0;pointer-events: none;border-left: 5px solid transparent;border-right: 5px solid transparent;border-top: 5px solid #999;transform: translateY(-50%);}

		footer#footer{right:0; left:0; bottom:15px; text-align:center;}

	}


	/* 모바일 */
	@media (max-width:720px){
		
		#wrap{height:100vh;}

		#wrap aside{position:absolute; display:block; width:100%; height:100%; box-shadow:0; border-radius:0; left:0; top:0;}
		#wrap aside .leftnavi .list_cont ul{gap:20px;}
		#wrap aside .leftnavi .list_cont ul li{width:calc(100% - 54%);}
		#wrap aside .leftnavi header input{display:block;}
		#wrap aside.hidden{transform: translateX(0);}
		#toggleButton{display:none; opacity:0;}
		#toggleButton.visible{display:none;}
		footer#footer{display:none;}

		#wrap aside.visible{transition:none;}

	}