@charset "utf-8";

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


/* 오른쪽 side */
#container { flex: 1;  width:100%; position:relative;  box-sizing: border-box; height: 100%; transition: margin-left 0.3s ease;  display:flex; align-items: center; overflow:hidden;}
#container.expanded { margin-left: -500px; }

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

/* contents */
#container section.contents {padding-left: 100px;width: 100%; height: 90vh;pointer-events: auto;position: relative; overflow:hidden;}
#container section.contents .contents_in.btn { position: absolute; bottom: 0; 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; }
#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:50px;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: 10px;height: 10px;display: flex;align-items: center;justify-content: center;cursor: pointer;user-select: none;color:#999;gap:5px;font-size:7px;}
#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% - 100px);}
#container section.contents .contents_in.title p {font-weight: 300;letter-spacing: 0.2px;font-size: 14px;}
#container section.contents .contents_in.title em {font-style: italic;}
#container section.contents .contents_in.title .title_flex {display: flex;align-items: flex-start; flex-direction: column; gap:5px 0;}
#container section.contents .contents_in.title .title_flex strong {font-weight: 700; line-height:50px;}
#container section.contents .contents_in.title .title_flex button#openPopup {background: #111;color: #fff;padding: 5px 20px;border-radius: 100px;align-items: center; cursor: pointer;position: relative; margin-top:15px; display:flex; justify-content: space-between; width:90px; line-height:20px;}
#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;}
#container section.contents .contents_in.title .layout_pop01 {display: none; position: relative; top: -40px; left: 100px; background: #fff;box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);padding: 15px;border-radius: 20px; z-index: 3;}
#container section.contents .contents_in.title .layout_pop01 div{padding:5px 0;}
#container section.contents .contents_in.title .layout_pop01 strong {font-weight: 600;font-size: 16px;}
#container section.contents .contents_in.title .layout_pop01 p {margin-top: 5px;}
#container section.contents .contents_in.title .layout_pop01 a.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 a.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 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);}

/*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:-350px;}
		#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{left:20px;transform: scale(0.8);}
	}

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

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

	/* 모바일 */
	@media (max-width:720px){
		
		.hidden {display: none !important;}

		#container{display:none; position: absolute;}
		#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;}

		
	}

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