@charset "utf-8";

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


/* 오른쪽 side */
#container { flex: 1;  width:100%; position:relative;  box-sizing: border-box; height: 90vh; transition: margin-left 0.3s ease;  display:flex; align-items: center; overflow:hidden; background:#fff; border-radius: 20px 20px; margin:0 2%;}
#container.expanded { margin-left: -440px; }

/*모바일 뒤로가기 숨김*/
#container section.contents .mobile_close{display:none;}

/* contents */
#container section.contents {padding-left: 55px;width: 100%; height: 95%;pointer-events: auto;position: relative; /* overflow:hidden; */}
#container section.contents .contents_in.btn { position: absolute; bottom: 150px; z-index: 2; background:#fff; border:1px solid #efefef; padding:10px 20px; border-radius:100px; } 
#container section.contents .contents_in.btn > ul { display: flex; align-items: center; gap:10px;} 
#container section.contents .contents_in.btn > ul > li.contents_lineview { position: relative; } 
#container section.contents .contents_in.btn > ul > li.box_position {text-align: center; display:flex; justify-content: center; position: relative; } 
#container section.contents .contents_in.btn > ul > li.box_position ul { background: #fff; border:1px solid #efefef; padding: 15px 5px; margin-bottom: 10px; border-radius: 10px; position: absolute; bottom: 50px; } 
#container section.contents .contents_in.btn > ul > li.box_position ul.box_list { display: none;} 
#container section.contents .contents_in.btn > ul > li.box_position ul.box_list li { padding-bottom: 4px; } 
#container section.contents .contents_in.btn > ul > li.box_position ul.box_list li:nth-last-child(1) { padding-bottom: 0; } 

/* 옵션 1차 메뉴*/
#container section.contents .contents_in.btn > ul > li.option { display: flex; align-items: center; background: #1b3c89; color: #fff; border-radius: 100px; position: relative;} 
#container section.contents .contents_in.btn > ul > li.option button { color: #fff; padding: 10px 20px; background: none; border: none; cursor: pointer; } 
#container section.contents .contents_in.btn > ul > li.option button.option-expanded,#container section.contents .contents_in.btn > ul > li.option button:hover{ color: yellow; } 
#container section.contents .contents_in.btn > ul > li.option button.option-expanded:hover{color:#fff;}
#container section.contents .contents_in.btn > ul > li.option .option_view01 { position: relative;  max-width: 0;overflow: hidden;white-space: nowrap;transition: max-width 0.2s ease; } 
#container section.contents .contents_in.btn > ul > li.option .option_view01.show {max-width: 300px; }
#container section.contents .contents_in.btn > ul > li.option .option_view01 ul { display: flex; gap:0 30px; padding-right: 20px; } 
#container section.contents .contents_in.btn > ul > li.option .option_view01 ul a.rendering-link {color: #6386d7; display: block; width: 100%;}
#container section.contents .contents_in.btn > ul > li.option .option_view01 ul a.rendering-link:hover,#container section.contents .contents_in.btn > ul > li.option .option_view01 ul a.rendering-link.active {color: #fff;}
#container section.contents .contents_in.btn > ul > li.option .option_view01 ul li{position:relative;}
#container section.contents .contents_in.btn > ul > li.option .option_view01 ul li:after { background:#6386d7; width:1px; height:50%; top:30%; content: ''; position:absolute; right:-15px; }
#container section.contents .contents_in.btn > ul > li.option .option_view01 ul li:nth-last-child(1)::after{display:none;}

/* 옵션 팝업 2차메뉴*/
#container section.contents .contents_in.btn > ul > li.option .option_view02 {display: none; }
#container section.contents .contents_in.btn > ul > li.option .option_view02 ul.option_popup {position: absolute;left: 0;bottom:70px;background: #fff;border: 1px solid #efefef;padding: 20px; border-radius: 15px; display: flex;flex-wrap: wrap;justify-content: space-between;gap:20px 10px;box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);z-index: 1; width:auto; animation: fadeIn 0.1s ease-in-out forwards;}
#container section.contents .contents_in.btn > ul > li.option .option_view02 ul.option_popup:after {content: '';position: absolute;bottom: -10px;left: 50px;width: 0;height: 0;border-left: 10px solid transparent;border-right: 10px solid transparent;border-top: 10px solid #fff;}
#container section.contents .contents_in.btn > ul > li.option .option_view02 ul.option_popup li{display: flex; justify-content: space-between; align-items: center; gap:10px; box-sizing: border-box; width:100%;}
#container section.contents .contents_in.btn > ul > li.option .option_view02 ul.option_popup li p{color:#111; font-weight:500; width:auto;}
#container section.contents .contents_in.btn > ul > li.option .option_view02 ul.option_popup li a{display: flex;}
#container section.contents .contents_in.btn > ul > li.option .option_view02 ul.option_popup input{height:20px;}

/* on off 스위치 */
#container section.contents .contents_in.btn > ul > li.option .option_view02 ul.option_popup .toggle-switch {position: relative;width: 30px;height: 10px;}
#container section.contents .contents_in.btn > ul > li.option .option_view02 ul.option_popup .toggle-switch input {opacity: 0;width: 0;height: 0;}
#container section.contents .contents_in.btn > ul > li.option .option_view02 ul.option_popup .toggle-switch input:checked + .bar_slider {background-color: #9fb4e5;}
#container section.contents .contents_in.btn > ul > li.option .option_view02 ul.option_popup .toggle-switch input:checked + .bar_slider:before {transform: translateX(16px);}
#container section.contents .contents_in.btn > ul > li.option .option_view02 ul.option_popup .toggle-switch .bar_slider {position: absolute;cursor: pointer;top: 0;left: 0;right: 0;bottom: 0;background-color: #ccc;transition: .4s;border-radius: 34px; display:flex; align-items: center;}
#container section.contents .contents_in.btn > ul > li.option .option_view02 ul.option_popup .toggle-switch .bar_slider:before {position: absolute;content: "";height: 16px;width: 16px;background-color: #1b3c89;transition: .4s;border-radius: 50%; }

/* 좌우 버튼 슬라이드 */
#container section.contents .contents_in.btn > ul > li.option .option_view02 ul.option_popup .range-slider {min-width:100px; display: flex; align-items: center; color:#111;}
#container section.contents .contents_in.btn > ul > li.option .option_view02 ul.option_popup .range-slider .value{min-width:39px;}
#container section.contents .contents_in.btn > ul > li.option .option_view02 ul.option_popup .range-slider input[type=range] {-webkit-appearance: none;width: 100px;height: 5px;background: #ddd;border-radius: 5px;outline: none;opacity: 0.9;transition: opacity .2s;}
#container section.contents .contents_in.btn > ul > li.option .option_view02 ul.option_popup .range-slider input[type=range]:hover {opacity: 1;}
#container section.contents .contents_in.btn > ul > li.option .option_view02 ul.option_popup .range-slider input[type=range]::-webkit-slider-thumb {-webkit-appearance: none;appearance: none;width: 16px;height: 16px;background: #1b3c89;cursor: pointer;border-radius: 50%;}
#container section.contents .contents_in.btn > ul > li.option .option_view02 ul.option_popup .range-slider input[type=range]::-moz-range-thumb {width: 16px;height: 16px;background: #1b3c89;cursor: pointer;border-radius: 50%;}

/* 표면처리 각지게 부드럽게 */
#container section.contents .contents_in.btn > ul > li.option .option_view02 ul.option_popup .palette_btn{ gap:6px;}
#container section.contents .contents_in.btn > ul > li.option .option_view02 ul.option_popup .palette_btn a{padding:5px 15px; background:#efefef; border-radius:15px; color:#111;}
#container section.contents .contents_in.btn > ul > li.option .option_view02 ul.option_popup .palette_btn a:hover,#container section.contents .contents_in.btn > ul > li.option .option_view02 ul.option_popup .palette_btn a.active{padding:5px 15px; background:#1b3c89; border-radius:15px; color:#fff;}

/* 격자수 */
#container section.contents .contents_in.btn > ul > li.option .option_view02 ul.option_popup .number-container {display: flex;align-items: center;}
#container section.contents .contents_in.btn > ul > li.option .option_view02 ul.option_popup input.number{width:30px;height: auto;text-align: right;margin-right: 5px;font-size:18px;}
#container section.contents .contents_in.btn > ul > li.option .option_view02 ul.option_popup input.number[type="text"]{box-sizing: border-box; border: 1px solid #ccc;border-radius: 5px;}
#container section.contents .contents_in.btn > ul > li.option .option_view02 ul.option_popup .button {width: auto;height: 10px;display: flex;align-items: center;justify-content: center;cursor: pointer;user-select: none;color:#999;gap:5px;font-size:7px; padding:0;}
#container section.contents .contents_in.btn > ul > li.option .option_view02 ul.option_popup .button:hover{color:#111;}
#container section.contents .contents_in.btn > ul > li.option .option_view02 ul.option_popup .button.up {margin-bottom: 2px;}

/* 단면절개 X-Y-Z축 제어컨트롤 */
#container section.contents .contents_in.btn > ul > li.option .option_view02 ul.option_popup .slider-range {min-width: 100px;}
#container section.contents .contents_in.btn > ul > li.option .option_view02 ul.option_popup .ui-slider-range{background:#1b3c89; }
#container section.contents .contents_in.btn > ul > li.option .option_view02 ul.option_popup .ui-slider-handle{height:16px; width:16px; border-radius:100px; top:-6px;}
#container section.contents .contents_in.btn > ul > li.option .option_view02 ul.option_popup .ui-slider{height:5px;border:none;}
#container section.contents .contents_in.btn > ul > li.option .option_view02 ul.option_popup .ui-state-hover{border:1px solid #1b3c89; background:#1b3c89; }
#container section.contents .contents_in.btn > ul > li.option .option_view02 ul.option_popup .ui-state-focus{border:1px solid #1b3c89; background:#fff;}
.ui-slider-horizontal .ui-slider-handle{top:-140%;}

/* help contents */
#container section.contents .contents_in.btn ul li.help button {background: #ccc;border-radius: 200px;width: 35px;height: 35px;color: #fff;font-weight: 700;cursor: pointer;transition: background-color 0.3s ease, padding 0.5s ease, transform 0.5s ease;transform-origin: center;}
#container section.contents .contents_in.btn ul li.help button:hover {background: #1b3c89;}
#container section.contents .contents_in.btn ul li.help button.on {transform: rotateY(180deg);background: #1b3c89; }
#container section.contents .contents_in.btn ul li.help button.on:hover {background: #1b3c89; }
#container section.contents .contents_in.btn ul li.help {position:relative;}
#container section.contents .contents_in.btn ul li.help .help_list {display: none;position: absolute;left: -45px;bottom:70px;background: #fff;border: 1px solid #efefef;padding: 20px; border-radius: 15px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);z-index: 1; width:100px; animation: fadeIn 0.1s ease-in-out forwards;}
#container section.contents .contents_in.btn ul li.help .help_list:after {content: '';position: absolute;bottom: -10px;left: 50px;width: 0;height: 0;border-left: 10px solid transparent;border-right: 10px solid transparent;border-top: 10px solid #fff;}
#container section.contents .contents_in.btn ul li.help .help_list ul{display:flex;flex-direction: column; gap:10px 0;}
#container section.contents .contents_in.btn ul li.help .help_list ul li {padding-bottom: 4px; display:flex; align-items: center; gap:15px;}
#container section.contents .contents_in.btn ul li.help .help_list ul li img {width: 20px;}
#container section.contents .contents_in.btn ul li.help .help_list ul li:nth-last-child(1) {padding-bottom: 0;}

/* 옵션 제어 position */
#container section.contents .contents_in.btn > ul > li.option .popup01 ul.option_popup{left:80px;}
#container section.contents .contents_in.btn > ul > li.option .popup02 ul.option_popup{left:160px;}
#container section.contents .contents_in.btn > ul > li.option .popup03 ul.option_popup{left:220px;}
#container section.contents .contents_in.btn > ul > li.option .popup04 ul.option_popup{left:290px; width:180px;}

/* 타이틀,형태 */
#container section.contents .contents_in {position: relative;z-index: 2;}
#container section.contents .contents_in.title { position: relative; width: calc(100% - 45px);}
#container section.contents .contents_in.title p {font-weight: 300;font-style: italic;letter-spacing: 0.2px;font-size: 14px;}
#container section.contents .contents_in.title .title_flex {display: flex;align-items: baseline;  gap:5px; margin-top:15px;}
#container section.contents .contents_in.title .title_flex strong {font-weight: 700; line-height:40px; font-family: 'sbaggro'; font-weight:200; max-width:550px;}
#container section.contents .contents_in.title .title_flex button#openPopup {background: #333;color: #fff;padding: 5px 10px;border-radius: 100px;align-items: center; cursor: pointer;position: relative; display:flex; justify-content: space-between; font-size: 14px; font-style: normal; font-weight: 400;}
#container section.contents .contents_in.title .title_flex button#openPopup i{margin-right:5px;}
#container section.contents .contents_in.title .title_flex button#openPopup:hover{background:#1b3c89;}
#container section.contents .contents_in.title .title_flex button#openPopup span{font-size:16px; font-weight:600; position:relative; display: inline-block; transition: transform 0.3s ease, margin-top 0.3s ease; margin-left:5px;}

#container section.contents .contents_in.title .layout_pop01 {display: none;position: absolute;top: 70px;left: 0;background: #fff;box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);padding: 15px;border-radius: 20px;z-index: 3;border: 1px solid #dfdfdf;width: fit-content;max-width: 90vw; /* white-space: nowrap; */}
#container section.contents .contents_in.title .layout_pop01 li{padding:2px 0; width:auto;}
#container section.contents .contents_in.title .layout_pop01 strong{font-family: 'sbaggro'; font-weight:200; text-align:center; }
#container section.contents .contents_in.title .layout_pop01 strong:after{content:'I'; font-weight:100; padding:0 10px;}
#container section.contents .contents_in.title .layout_pop01 em{font-style: italic; }
/* #container section.contents .contents_in.title .layout_pop01 {display: none; position: relative; top: 0; left: 0; background: #fff;box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);padding: 15px;border-radius: 20px; z-index: 3; width:100%; border:1px solid #dfdfdf;} */
/* #container section.contents .contents_in.title .layout_pop01 strong {font-weight: 600;font-size: 16px; line-height:25px;}
#container section.contents .contents_in.title .layout_pop01 p {margin-top: 5px;} */
#container section.contents .contents_in.title .layout_pop01 button.close {position: absolute;z-index: 5;right: 10px;top: 10px;background: #111;color: #fff;border-radius: 100px;width: 30px;height: 30px;display: flex;justify-content: center;align-items: center;font-weight: 700;cursor: pointer;transition: background-color 0.3s ease, transform 0.3s ease;}
#container section.contents .contents_in.title .layout_pop01 button.close:hover {background-color: #1b3c89;transform: rotate(180deg);}


/* 레이어팝업 */
#container section.contents .contents_in.layout_pop {position: absolute;right: 2vw;bottom: 1vh;}
#container section.contents .contents_in.layout_pop .layout_box {background: #fff;border-radius: 20px;box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);padding: 20px;width: 400px;transition: width 0.3s ease, padding 0.5s ease, border-radius 0.5s ease;}
#container section.contents .contents_in.layout_pop .layout_box.minimized {width: 100px;font-size: 14px;border-radius: 100px;padding: 10px 20px;}
#container section.contents .contents_in.layout_pop .layout_box.minimized .r_title button {width: 20px;height: 20px;}
#container section.contents .contents_in.layout_pop .r_title {display: flex;justify-content: space-between;align-items: center; }
#container section.contents .contents_in.layout_pop .r_title button {background: #888;color: #fff;width: 25px;height: 25px; border-radius: 5px;cursor: pointer;}
#container section.contents .contents_in.layout_pop .r_title strong{color:#1b3c89; font-weight:600;}
#container section.contents .contents_in.layout_pop .text p {height: 200px;overflow-y: scroll;font-size: 15px;background: #efefef;padding: 1rem;margin-top: 20px;}
#container section.contents .contents_in.layout_pop .layout_box .text .layout_btn{width:100%; background:#333; text-align:center; margin-top:5px; border-radius:5px; display:flex; align-items: center;justify-content: center;}
#container section.contents .contents_in.layout_pop .layout_box .text .layout_btn a{color:#fff; display:block; width:100%; padding:10px 0;}
#container section.contents .contents_in.layout_pop .layout_box .text .layout_btn a:hover{background:#1b3c89;}

/*3d viewers*/
#container #views3d{width: 100%;height: 100%;position: absolute;z-index: 1;display: flex;justify-content: center;align-items: center; pointer-events: none;transition: transform 0.5s ease;}
#container #views3d.expanded {transform: translateX(0);}
#container #views3d canvas { pointer-events: auto; width:calc(100% - 500px);}

/*keyframes*/
@keyframes fadeInUp { to { opacity: 1; transform: translateY(0); } }
@keyframes fadeIn { from {opacity: 0;transform: translateY(10px);} to {opacity: 1;transform: translateY(0);} }
@keyframes gradientBackground {0% {	background-position: 0% 50%;} 50% {background-position: 100% 50%;} 100%{background-position: 0% 50%;}}
@keyframes slide-back-and-forth {0% {transform: translateX(0);} 50% {transform: translateX(-5px);} 100% {transform: translateX(0);}}

/* show,hidden control */
.grid_view_popup { display: none; position: absolute; top: -40px; left: 0; background: #fff; border: 1px solid #ccc; padding: 5px 10px; border-radius: 5px; box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); white-space: nowrap; animation: fadeIn 0.1s ease-in-out forwards;} 
.line_view_container { position: relative; } 
.tooltip_popup { display: none; position: fixed; background: #fff; border: 1px solid #ccc; padding: 5px 10px; border-radius: 5px; box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); white-space: nowrap; z-index: 10; animation: fadeIn 0.1s ease-in-out forwards;} 
.tooltip_popup.show { transform: translateY(10px); opacity: 1; animation: fadeIn 0.1s ease-in-out forwards;} 
.tooltip_popup.hide { transform: translateY(0); opacity: 0; animation: fadeIn 0.1s ease-in-out forwards;} 



/* respon control */

	/* PC */
	@media (max-width:1600px){
		#container.expanded { margin-left:-330px;}
		#container section.contents{height:85vh; }
		#container section.contents .contents_in.layout_pop .layout_box{width:300px;}
	}

	/* 타블렛 */
	@media (max-width:1280px){
		#container section.contents .contents_in.layout_pop .layout_box{width:200px; border-radius:10px;}
		#container section.contents .contents_in.layout_pop .text p{font-size:14px; height:150px;}
		#container section.contents .contents_in.layout_pop .layout_box .text .layout_btn a{font-size:13px;}
		#container section.contents .contents_in.btn{transform: scale(0.8); transform-origin: left center; flex:1;}
	}

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

		#container section.contents .contents_in.title .title_flex strong{line-height:38px;}
		#container section.contents{padding-left:50px;}
		#container.expanded { margin-left:-180px;}
		#container section.contents .contents_in.btn{left:45px;}

	}

	/* 모바일 */
	@media (max-width:720px){
		
		.hidden {display: none !important;}
		
		#container{display:none; height:95vh;}
		#container section.contents .mobile_close {display: block;position: absolute;right: 0;top: 20px;z-index: 1000;font-size: 20px;color: #fff;background: #111;border-radius: 100px;width: 60px;height: 60px;display: flex;align-items: center;justify-content: center;transition: background 0.3s ease;animation: slide-back-and-forth 2s infinite;}
		#container section.contents .mobile_close:hover {background: #1b3c89;}
		#container section.contents{padding-left:0; height:100%; width:90vw; margin:0 auto;}
		
		#container section#views3d{position:absolute; }

		#container section.contents .contents_in.title{padding-top:40px;}
		#container section.contents .contents_in.title .title_flex strong{line-height:40px;}
		#container section.contents .contents_in.layout_pop{width:auto; left:auto; bottom:10px; right:0; top:auto; position:absolute; }
		#container section.contents .contents_in.layout_pop .layout_box{width:auto; box-shadow:none; padding:10px 15px;}
		#container section.contents .contents_in.layout_pop .layout_box .text .layout_btn{margin-top:8px;}
		#container section.contents .contents_in.layout_pop .layout_box .text .layout_btn a{padding:5px 0; font-size:13px;}
		#container section.contents .contents_in.layout_pop .layout_box.minimized{}
		#container section.contents .contents_in.layout_pop .text p{height:80px; margin-top:10px;}
		#container section.contents .contents_in.layout_pop .r_title button{width:20px; height:20px;}

		#container section.contents .contents_in.title .layout_pop01 {left:0; width:100%;}
		#container section.contents .contents_in.title .layout_pop01 strong{font-size:14px;}
		#container section.contents .contents_in.title .layout_pop01 p{font-size:13px;}
				
		#container section.contents .contents_in.title{width:100%;}
		#container section.contents .contents_in.title .layout_pop01{top:100px; z-index:99999; padding: 20px 0;}
		#container section.contents .contents_in.title .layout_pop01 ul{padding:0 20px;}
		#container section.contents .contents_in.btn{bottom:160px; left:0;}
	}

	/* iOS 호환 스타일 */
	@supports (-webkit-touch-callout: none) {
		#container section.contents .layout_pop {
			right: 0;
			bottom:10px;
		}
	}




















.top_menu {display: flex;flex-direction: column;background: #ececec;border: 1px solid #dfdfdf;border-radius: 10px;}
#wrap aside .leftnavi .top_menu .tabs {margin: 20px 0;cursor: pointer;display: flex;align-items: center;position: relative;z-index: 2;width: 100%;height: 100%;justify-content: center;gap: 10px; background:#fff;}
#wrap aside .leftnavi .top_menu .tabs .tab {flex: 1; text-align: center;}
#wrap aside .leftnavi .tabs li a.active {color: #2870F3;background-color: #fff;border-radius: 100px;}

.left_in_box{background: #ececec;border: 1px solid #dfdfdf;border-radius: 10px; margin:5px 0; position:relative;}

.leftnavi .tabs_new {}
.leftnavi .tabs_new ul {display: flex;justify-content: space-between; text-align: center;  align-items: center;width: 100%;padding: 0;margin: 0;list-style: none;}
.leftnavi .tabs_new ul li {flex: 1; margin: 1%;}
.leftnavi .tabs_new ul li a{display:block; color:#111;}
.leftnavi .tabs_new .tabs01 li a{ font-family: 'sbaggro'; padding: 10px 0; font-weight:200; border:1px solid transparent;}
.leftnavi .tabs_new .tabs02 li{margin:10px 5px;}
.leftnavi .tabs_new .tabs02 li a{font-family: 'sbaggro'; padding: 5px 0; font-weight:200; font-size:14px; height:50px; display: flex; align-items: center;justify-content: center; flex-direction: column; border:1px solid transparent; color:#111;}
.leftnavi .tabs_new .tabs02 li a.active,.leftnavi .tabs_new .tabs02 li a:hover,.leftnavi .tabs_new .tabs01 li a.active,.leftnavi .tabs_new .tabs01 li a:hover {background: #fff;border-radius: 10px !important; border:1px solid #2870F3;}
.leftnavi .tabs_new .tabs02 .tab-all a.active,.leftnavi .tabs_new .tabs02 .tab-all a:hover {border-radius: 10px !important;}
.leftnavi .tabs_new .tabs03 {background: #fff;border-radius: 0 0 10px 10px; padding:10px 0; font-size:14px; border-top:1px solid #dfdfdf;}
.leftnavi .tabs_new .tabs03 li a{padding: 5px 0; font-weight:500;}
.leftnavi .tabs_new .tabs03 li a.active,.leftnavi .tabs_new .tabs03 li a:hover{ border-radius:0px !important; }
/* .leftnavi .tabs_new .tabs03{margin:10px 0; padding:20px 0;} */

.list_contents{padding:0 20px; overflow:hidden; height:100%; min-height:70%;}
.list_contents .icon{font-size:24px; color:#111; }
.list_contents .icon:hover{color:#2870F3;}
.list_search_bar{display:flex; justify-content: space-between; border-bottom:2px solid #111; margin:20px 0;}
.list_search_bar input{flex:1; border:none; background:none; font-family: 'sbaggro'; font-weight:100; font-size:14px; padding:10px 0; width:100%;}

.view_list{width: calc(100% - 100px); padding-left:55px; height:100%;position: absolute;z-index: 1;display: flex;justify-content: center;align-items: center; pointer-events: auto;transition: transform 0.5s ease; }
.view_list .view_inner {width:calc(100% - 0px); position:relative; height:calc(100% - 290px);}
.view_list .movie {position: relative;height: 100%;z-index:3;}
.view_list .img {
    position: relative;
    display: flex; /* Flexbox 활성화 */
    align-items: center; /* 수직 중앙 정렬 */
    justify-content: center; /* 수평 중앙 정렬 */
    height: 100%; /* 필요에 따라 높이 설정 */
    width: 100%; /* 필요에 따라 너비 설정 */
}

.view_list .img img {
    max-width: 100%; /* 이미지를 부모 크기에 맞게 조정 */
    max-height: 100%; /* 필요에 따라 이미지 높이 제한 */
    object-fit: cover; /* 이미지 비율 유지 */
}

.view_list > div{top: -35px;margin:0 auto; text-align:center;}
.view_list img {width: auto;max-width: 100%;max-height: 100%;object-fit: contain;text-align:center;}
/* .view_list{width: 100%;height: 100%;position: absolute;z-index: 1;display: flex;justify-content: center;align-items: center; pointer-events: none;transition: transform 0.5s ease;} */
.view_list .slide_list > div {opacity: 0 !important;}
.view_list .slide_list .swiper-slide-active {opacity: 1 !important;}
.slide_list > li.swiper-slide-thumb-active div{position:relative; padding:10px;}
.slide_list > li.swiper-slide-thumb-active div:before{content: '';position: absolute;top: 0;right: 0;bottom: 0;left: 0;border: 2px solid #2870F3;z-index: 1;border-radius: 10px; }
.slide_list > li.swiper-slide-thumb-active p{color:#2870F3;}

.slide_list .movie > div {height: 100%; display: flex;align-items: center;justify-content: center;}
.slide_list .movie iframe {width: 100%;height: 100%;}

#container section#views3d{display:none;}
/* #container section#views3d{width: 100%;height: 100%;position: absolute;z-index: 1;display: flex;justify-content: center;align-items: center; pointer-events: none;transition: transform 0.5s ease;}
#container section#views3d.expanded {transform: translateX(0);}
#container section#views3d canvas { pointer-events: auto; width:calc(100% - 500px);} */

.photo_line {position: absolute;bottom: 0;width: calc(100% - 100px);overflow: hidden;height: 130px; z-index:2;}
.thumbs .slide_list img {min-width:100px;max-width:100px;height: 80px; object-fit: cover;border-radius: 5px;margin-bottom: 5px;}
.thumbs .slide_list p {margin: 0;font-size: 12px;}
.thumbs .slide_list {}
.thumbs .slide_list > li {display: flex;flex-direction: column;align-items: center;overflow: hidden;position: relative;text-align: center;justify-content: center;border-radius: 10px; margin-left:0 !important;}
.thumbs .slide_list .selected,.thumbs .slide_list > li > div:hover{border: 1px solid #2870f3;border-radius:5px;}
.thumbs .slide_list > li > div{cursor:pointer}
.thumbs .slider-flex-start{justify-content: flex-start !important;}
.top_flex{display:flex; justify-content: space-between; align-items: baseline}
.boxline{background: #ececec;border: 1px solid #dfdfdf;border-radius: 10px;}


.btn_align_right{right:50px; display:flex; align-items: center; gap:5px; margin-top:4vh; position:absolute; z-index:1; background:#fff; border-radius:100px; padding:5px 10px; }
.btn_align_right label{font-family: 'sbaggro'; font-weight:200; line-height:auto;}
.btn_align_right span{color:#2870F3; font-weight:500; padding-bottom:4px;}
.top_right_btn {height: 100%; display: flex;align-items: stretch;}
.top_right_btn ul.top_right_btn01 {height: 50px;display: flex;justify-content: space-between;align-items: center;gap: 30px;margin:0 10px;padding:0 20px;}
.top_right_btn ul.top_right_btn01 li {position: relative;cursor: pointer;padding:10px;display:flex;align-items: center;gap:5px;}.top_right_btn ul.top_right_btn01 li i{font-size:18px;}
.top_right_btn ul.top_right_btn01 li:hover,
.top_right_btn ul.top_right_btn01 li.active{background:#fff; border-radius:10px;}
.top_right_btn ul.top_right_btn01 li::after {content: ' ';width: 1px;height: 20px;background: #ccc;position: absolute;right: -15px;top: 50%;transform: translateY(-50%);}
.top_right_btn ul.top_right_btn01 li:last-child::after {display: none;}
button.top_right_btn02 {background: #333;color: #fff;border-radius: 10px;padding:0 20px;}
button.top_right_btn02:hover{background:#1b3c89;}
.button-container {text-align: center; margin-top:20px;}
button.download_btn{padding:10px 20px; text-align:center; margin:0 auto;}

/* 기본 말풍선 스타일 */
.tooltip {display: none;position: absolute;top: 120%; left: 50%;transform: translateX(-50%);background-color: rgba(0, 0, 0, 0.8);color: #fff;padding: 5px 10px;border-radius: 4px;font-size: 12px;white-space: nowrap;z-index: 1000;box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);}
.tooltip::after {content: '';position: absolute;bottom: 100%; left: 50%;transform: translateX(-50%);border-width: 5px;border-style: solid;border-color: transparent transparent rgba(0, 0, 0, 0.8) transparent;}


/* modal popup */
.italic{font-size:15px;font-style:italic;color:#222;letter-spacing:0}
/******************** modal ********************/
/* modal common */
.modal{display:none;position:absolute;top:50%;left:50%;width:100%;height:100%;z-index:100;transform:translate(-50%,-50%)}
.modal_wrap{position:relative;top:50%;left:50%;width:90%;max-height:90%;padding:50px 45px;border-radius:30px;background:#fff;box-shadow:0 0 30px rgba(38, 52, 100, 0.5);transform:translate(-50%,-50%);box-sizing:border-box; height:670px;}
.modal_wrap em{font-style:italic;}
.modal_top{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-bottom:15px;padding-bottom:14px;border-bottom:1px solid #1957B4}
.modal_top .modal_tit{font-size:15px;color:#222;letter-spacing:0}
.modal_top .modal_tit strong{margin-right:8px;font-family:'sbaggro';font-size:30px;font-weight:200;color:#000}
.modal_top .modal_tit em{margin-right:4px}
.modal_top .more{display:flex;align-items:center;padding:10px 14px 6px;border-radius:5px;background:#DFEAFF;font-family:'sbaggro';text-align:center;font-weight:100;color:#2870F3;transition:all .3s}
.modal_top .more:hover{background:#2870F3;color:#fff}
.modal_top .more i{margin-left:4px;padding-bottom:4px;font-size:16px}
.close_modal{position:absolute;top:25px;right:25px;transition:all .2s}
.close_modal:hover{transform:rotate(180deg)}
.close_modal span{overflow:hidden;position:absolute;width:1px;height:1px;margin:-1px;clip-path:polygon(0px 0px, 0px 0px, 0px 0px)}
.close_modal i:before{font-size:28px;color:#2D3B70;font-weight:600}

/* //modal common */

/* modal content */
.modal_content{overflow-y:auto;max-height:calc(100% - 80px); }

.modal_list > li:not(:last-child){margin-bottom:16px}
.modal_list .list_tit{display:flex;justify-content:space-between;align-items:center;width:100%;padding:18px 25px 14px;border-radius:15px;background:#333;font-family:'sbaggro';font-size:18px;font-weight:200;color:#fff;transition:all .2s;box-sizing:border-box;cursor:pointer}
.modal_list .list_tit i{font-size:24px;transition:all .2s}
.modal_list .list_box{display:none;padding:25px;border-bottom:1px solid #1957B4}
.modal_content .list_box .classif li{display:inline;color:#333}
.modal_content .list_box .classif li:not(:last-child):after{content:'>';margin:0 4px}
.modal_content .list_box > dl > div:not(:last-child){margin-bottom:24px}
.modal_content .list_box > dl dt:before{content:'';display:inline-block;width:6px;height:24px;margin:0 10px -6px 0;background:#2870F3}
.modal_content .list_box > dl dt{margin-bottom:12px;font-family:'sbaggro';font-size:18px;font-weight:200}
.modal_content .list_box > dl dd{text-indent:16px;color:#333}
.modal_content .list_box > dl dd:not(:last-child){margin-bottom:6px}
.modal_content .list_box > p{margin-bottom:16px}
.modal_content .list_box > ul > li:not(:last-child){margin-bottom:6px}
.modal_list .list_tit:hover,.modal_list > li.on .list_tit{background:#2870F3}
.modal_list > li.on .list_tit i{transform:rotate(180deg)}

.modal_down .modal_wrap{max-width:1100px}
.modal_content .modal_down_box > figure{margin:40px auto;padding:44px 80px 40px;border:1px solid #bbb;text-align:center;box-sizing:border-box}
.modal_content .modal_down_box > figure img{max-width:100%;margin-bottom:24px}
.modal_content .modal_down_box > figure p{padding-top:24px;border-top:1px dashed #ccc;font-size:16px;line-height:26px;word-break:keep-all}
.modal_content .modal_down_box > strong:before{content:'';display:inline-block;width:8px;height:8px;margin:0 6px 2px 4px;border-radius:50%;background:#1957B4}
.modal_content .modal_down_box > strong{display:block;margin-bottom:8px;font-family:'sbaggro';font-size:18px;font-weight:100}
.modal_content .modal_down_box > ul{padding:20px;border-radius:12px;background:#f0f0f0}
.modal_content .modal_down_box > ul > li:not(:last-child){margin-bottom:8px}

.thumbs .swiper-button-prev,.thumbs .swiper-button-next {z-index: 10;width: 40px;height: 40px;color: #fff;border-radius: 50%;display: flex;align-items: center;justify-content: center;cursor: pointer;}
.thumbs .swiper-button-prev::after,.thumbs .swiper-button-next::after {font-size: 20px;font-weight: bold;}
.thumbs .swiper-button-prev::after {color:#333;}
.thumbs .swiper-button-next::after {color:#333;}

.image-viewer {position: relative;width: 100%;height: 100%;}
/* .image-controls {display: flex;align-items:center;gap:10px;padding:10px;background-color:#f8f9fa;border-bottom:1px solid #dee2e6;justify-content:center;} */
.image-controls {position: absolute;top: 50px;right: 10px;z-index: 10;display: flex;align-items: center;gap: 10px;padding: 10px;background-color: rgba(248, 249, 250, 0.95);border: 1px solid #dee2e6;border-radius: 4px;box-shadow: 0 2px 4px rgba(0,0,0,0.1);}
.zoom-btn {width: 36px;height: 36px;border: 1px solid #ddd;background-color: white;border-radius: 4px;cursor: pointer;display: flex;align-items:center;justify-content:center;transition:all 0.2s;}
.zoom-btn:hover {background-color: #007bff;  color: white;  border-color: #007bff;}
.zoom-btn:active {transform: scale(0.95);}
.zoom-level {min-width: 50px;text-align: center;font-weight: 600;color: #333;}
.image-container {  width: 100%;  height: 100%;  overflow: auto;  background-color: #f5f5f5;  padding: 20px;  box-sizing: border-box;}
.image-wrapper {  min-width: 100%;  min-height: 100%;  display: flex;  align-items: flex-start;  justify-content: center;}
.zoomable-image {  display: block;  transition: transform 0.2s ease;  user-select: none;  transform-origin: center center;}

#container section.contents .contents_in.title .title_flex strong{font-size:40px;}
#container section.contents .contents_in.title .title_flex button#openPopup p.text_button{font-weight:400; font-size:14px; font-style:normal;}

@media (max-height:2100px){
	#container section.contents .contents_in.title .title_flex strong{font-size:30px;}
	.top_right_btn ul.top_right_btn01{height:auto; padding:5px 10px;}
	.top_right_btn ul.top_right_btn01 li{padding:5px;}
	
}

@media (max-width:2100px){
	#container section.contents .contents_in.title .title_flex strong{font-size:30px;}
	.top_right_btn ul.top_right_btn01{height:auto; padding:5px 10px;}
	.top_right_btn ul.top_right_btn01 li{padding:5px;}
	
}

@media (max-width:1800px){
	.top_right_btn ul.top_right_btn01 li span{display:none;}

	.top_right_btn01 li:focus .tooltip,
    .top_right_btn01 li:hover .tooltip,
    .top_right_btn02:focus .tooltip,
    .top_right_btn02:hover .tooltip {
        display: block; /* 포커스나 호버 시 표시 */
    }
	
}

@media (max-width:1400px){
	.top_right_btn ul.top_right_btn01{margin:0 5px;}
	button.top_right_btn02{padding:0 8px;}
	#container section.contents .contents_in.title .title_flex button#openPopup p.text_button{display:none;}
}

@media (max-width:1280px){
	/* modal common */
	.modal_wrap{padding:50px 32px 40px}
	.modal_top .modal_tit strong{font-size:26px}
	.close_modal{top:20px;right:30px}
	.close_modal i:before{font-size:26px}
	/* //modal common */
	
	/* modal content */
	/* .modal_content{max-height:480px} */

	.modal_list .list_tit{font-size:17px}
	.modal_list > li:not(:last-child){margin-bottom:12px}

	.modal_content .modal_down_box > figure{margin:12px auto 32px;padding:40px 30px 36px}
	/* //modal content */
	
	#container section.contents .contents_in.title .title_flex strong{font-size:26px;}
	.list_3d{left:30px;}
}
@media (max-width:1024px){
	/* modal content */
	/* .modal_content{max-height:320px} */

	.modal_list .list_tit{font-size:16px}
	.modal_content .list_box > dl dt{font-size:16px}
	/* //modal content */

	.top_flex{flex-direction: column; width:100%; gap:5px;}
	.top_right_btn{align-content: space-around; width:100%;}
	.top_right_btn ul.top_right_btn01{width:100%; flex:1; margin:0 5px 0 0;}
	.top_right_btn ul.top_right_btn01 li{flex:1; justify-content: center;}
	.view_list > div{top:-13px;}
	.view_list .view_inner{height:calc(100% - 310px)}
	.photo_line{width:calc(100% - 95px);}
	.btn_align_right{margin-top:1vh;}
	

	
}
@media (max-width:720px){
	/* modal common */
	.modal_wrap{padding:50px 24px 35px; max-height:70%;}
	.modal_top .modal_tit strong{font-size:22px}
	.close_modal{top:18px;right:20px}
	/* //modal common */
	
	/* modal content */
	.modal_list > li:not(:last-child){margin-bottom:8px}
	.modal_list .list_tit{padding:16px 18px 12px;border-radius:8px;font-size:15px}
	.modal_list .list_box{margin-bottom:20px;padding:20px 8px}
	.modal_content .list_box > dl dt{font-size:15px}

	.modal_content .modal_down_box > figure{padding:8px;border:0}
	/* //modal content */

	.btn_align_right{right:0;}
	.view_list{width:100%; padding-left:0;}
	.view_list .view_inner{width:95%;}
	.view_list .img{width:100%;}

	.photo_line{width:100%; bottom:2vh;}
	.view_list > div{top:-5px;}
	/* .view_list .movie{position:absolute;} */
	.list_contents{min-width:90%; min-height:auto;}
}

/*loding*/
.loading-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
}

.loading-icon i {
    font-size: 3rem; /* 아이콘 크기 */
    color: white; /* 아이콘 색상 */
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}