@import url('/resources/gogung/css/fonts/NotoSansKR/fonts.css');

*{
	font-family:'NotoSansKR';
}

.mb0{
	margin-bottom:0;
}
/* aside */
.aside,
.aside *{
	box-sizing:border-box;
}

.aside {
	position: absolute;
	z-index: 9999;
	top: 0;
	right: -330px;
	display: flex;
	flex-direction: column;
	width: 330px;
	height: 100%;
	padding: 0 20px 20px;
	transition: all .4s;
	background: #fff;
	box-shadow: 0 0 20px rgba(0, 0, 0, .4);
}
.aside.show {
	right: 0;
}
.aside.has-scroll::after {
	position: absolute;
	z-index: 99;
	bottom: 16px;
	left: 50%;
	display: block;
	width: 26px;
	height: 26px;
	content: '';
	transition: all .4s;
	transform: translate(-50%);
	pointer-events: none;
	border-radius: 100%;
	background: url('vr_scroll_icon.png') no-repeat center center #999;
}
.aside.has-scroll.scroll-max::after {
	opacity: 0;
}
.aside .title-wrap {
	display: flex;
	padding: 15px 0;
	border-bottom: 1px solid #ddd;
	align-items: center;
	justify-content: space-between;
}
.aside .title-wrap .title {
	font-size: 20px;
	font-weight: 600;
	line-height: 1;
	color: #111;
}
.aside .title-wrap .count {
	font-size: 16px;
	font-weight: 600;
	color: #333;
}
.aside .title-wrap .count b {
	font-weight: inherit;
	color: #e15767;
}
.aside .docent {
	display: flex;
	padding: 10px 0;
	flex-wrap: wrap;
}
.aside .docent .title {
	font-size: 16px;
	font-weight: 500;
	display: flex;
	width: 100%;
	transition: all .4s;
	color: #333;
	align-items: baseline;
}
.aside .docent_btn {
	display: flex;
	gap: 24px;
	flex: 1;
}
.aside .docent_btn li {
	display: flex;
	transition: all .4s;
	flex: 1;
	justify-content: center;
}
.aside .docent_btn li:not(:last-child) {
	border-right: 1px solid transparent;
}
.aside .docent_btn button {
	font-size: 16px;
	font-weight: 500;
	line-height: 1;
	transition: all .4s;
	color: #999;
	background: transparent;
}
.aside .docent_btn button::before {
	display: block;
	width: 45px;
	height: 45px;
	margin: 0 0 10px;
	content: '';
	transition: all .4s;
	border: 1px solid transparent;
	border-radius: 100%;
	background-repeat: no-repeat;
	background-position: center center;
	filter: drop-shadow(3px 3px 10px rgba(0, 0, 0, .2));
}
.aside .docent_btn button.active {
	color: #e15767;
}
.aside .docent_btn button.active::before {
	border-color: #e15767;
}
.aside .docent_btn button.kor::before {
	background-image: url('vr_language_kor.png');
}
.aside .docent_btn button.jpn::before {
	background-image: url('vr_language_jpn.png');
}
.aside .docent_btn button.chn::before {
	background-image: url('vr_language_chn.png');
}
.aside .docent_btn button.eng::before {
	background-image: url('vr_language_eng.png');
}
.aside .docent-item {
	display: flex;
	width: 100%;
	flex-direction:column;
	align-items: center;
}
.aside .docent-item .item {
	width: 100%;
}
.aside .docent-item .item:not(:last-child) {
	margin-bottom: 20px;
	border-right: 1px solid transparent;
}

.aside .docent-title{
	display:flex;
	align-items:center;
	justify-content:space-between;
	width:100%;
	margin:0 0 10px;
}

.aside .docent-select {
	display: flex;
	margin: 0 0 20px;
	gap: 10px;
}
.aside .docent-select button {
	font-size: 14px;
	font-weight: 500;
	display: flex;
	transition: all .4s;
	color: #999;
	background: transparent;
	align-items: center;
	gap: 3px;
	border:0;
	cursor:pointer;
	white-space:nowrap;
}
.aside .docent-select button::before {
	display: block;
	width: 18px;
	height: 18px;
	content: '';
	transition: all .4s;
	border: 1px solid transparent;
	border-radius: 100%;
	background-color: #fff;
	background-repeat: no-repeat;
	background-position: center center;
	background-size:12px auto;
	box-shadow: 3px 3px 10px rgba(0, 0, 0, .2);
}
.aside .docent-select button.active {
	color: #e15767;
}
.aside .docent-select button.active::before {
	border-color: #e15767;
}
.aside .docent-select button.audio::before {
	background-image: url('aside_voice_off.png');
}
.aside .docent-select button.audio.active::before {
	background-image: url('aside_voice_on.png');
}
.aside .docent-select button.cc::before {
	background-image: url('aside_cc_off.png');
}
.aside .docent-select button.cc.active::before {
	background-image: url('aside_cc_on.png');
}
.aside audio {
	display: none;
	width: 100%;
	height:40px;
}
.aside audio.active {
	display: block;
}
.aside .docent-text {
	display: none;
}
.aside .docent-text.active {
	display: block;
}
.aside .docent-text .subject {
	font-size: 16px;
	font-weight: 500;
	line-height: 1;
	margin: 0 0 10px;
	color: #333;
}
.aside .docent-text .content {
	font-size: 16px;
	font-weight: 200;
	letter-spacing: -.06em;
	color: #333;
	max-height: 390px;
	overflow-y: auto;
}
.aside .docent-text .content strong {
	font-weight: inherit;
	letter-spacing: inherit;
	color: #e15767;
}
.aside .docent-text .content button {
	font-size: inherit;
	font-weight: inherit;
	letter-spacing: inherit;
	color: inherit;
	background: transparent;
	border:0;
	cursor:pointer;
}
/*
.aside .docent audio{display:none; margin-top:20px;}
.aside .docent audio.show{display:block;}
*/
.aside-list {
	display: flex;
	overflow: auto;
	border-top: 1px solid #ddd;
	flex-wrap: wrap;
	list-style:none;
	padding:0;
	margin:0;
	position:relative;
	max-height: 615px;
}
.psgud-list{
	/* flex:1; */
	flex-grow:0;
	flex-shrink:1;
	flex-basis:auto;
}
.3d-list,
.video-list,
.link-list,
.panel-list{
	max-height:170px;
}

.aside-list li {
	width: 100%;
	transition: all .2s;
	border-bottom: 1px solid #ddd;
}
.aside-list button {
	display: grid;
	padding: 10px;
	transition: all .4s;
	grid-template: repeat(2, auto) / repeat(2, auto);
	align-items: center;
	justify-content: flex-start;
	gap: 0 10px;
	text-decoration:none;
	background:transparent;
	border:0;
	cursor:pointer;
	width:100%;
	text-align:left;
}
.aside-list button:focus,
.aside-list button:hover {
	background: #f0f0f0;
}
.aside-list button .img {
	display: block;
	overflow: hidden;
	width: 60px;
	height: 60px;
	border-radius: 100%;
	grid-area: 1 / 1 / span 2 / 1;
}
.aside-list button .img img {
	width:100%;
	position:relative;
	top:50%;
	left:50%;
	transform:translate(-50%, -50%);
}
.aside-list button .title {
	font-size: 16px;
	font-weight: 500;
	line-height: 1;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	color: #333;
	align-self: flex-end;
}
.aside-list button .text {
	font-size: 14px;
	font-weight: 300;
	line-height: 1;
	margin: 10px 0 0;
	color: #999;
	align-self: flex-start;
}
.aside .btn {
	position: absolute;
	top: 0;
	right: 100%;
	overflow: hidden;
	width: 25px;
	height: 60px;
	text-indent: -9999px;
	border-radius: 12px 0 0 12px;
	background: #fff;
	border:0;
	cursor:pointer;
}
.aside .btn::before {
	position: absolute;
	top: 50%;
	left: 50%;
	display: block;
	width: 6px;
	height: 12px;
	content: '';
	transition: all .4s;
	transform: translate(-50%, -50%) rotate(180deg);
	background: url('vr_list_button.png') no-repeat 0 0;
}
.aside .btnOpen {
	position: absolute;
	top: 50%;
	right: 100%;
	transform:translateY(-50%);
	overflow: hidden;
	width: 40px;
	height: 120px;
	font-size:14px;
	color:#454545;
	border-radius: 20px 0 0 20px;
	line-height:1.2;
	background: #fff;
	border:0;
	cursor:pointer;
	text-decoration:none;
	display:flex;
	align-items:center;
	justify-content:center;
}
.aside.open {
	width: 600px;
}
.aside.open .docent {
	align-items: center;
}
.aside.open .docent-item .item {
	border-color: #ccc;
}
.aside .docent-select {
	margin: 0;
	list-style:none;
}
/*
.aside.open .docent_btn{gap:0;}
.aside.open .docent_btn li{border-color:#ddd;}
*/
.aside.open .aside-list {
	gap: 0 15px;
}
.aside.open .aside-list li {
	width: calc((100% - 15px) / 2);
}
.aside.show .btn::before {
	transform: translate(-50%, -50%) rotate(0);
}

.panel-list{
	border:0;
	overflow:auto;
	min-height:auto;
}
.panel-list.overflow{
	overflow:visible;
	min-height:80px;
}
/* popup */
body::before {
	position: absolute;
	z-index: 9998;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
	height: 100%;
	content: '';
	transition: all .4s;
	pointer-events: none;
	opacity: 0;
	background: rgba(0, 0, 0, .4);
}
body.popup-open::before {
	opacity: 1;
}
.popup {
	position: absolute;
	z-index: 999999;
	top: 50%;
	left: 50%;
	display: flex;
	overflow: hidden;
	flex-direction: column;
	width: 100%;
	max-width: 0;
	max-height: 0;
	padding: 0;
	transition: all .4s;
	transform: translate(-50%, -50%);
	pointer-events: none;
	opacity: 0;
	background: #fff;
}
.popup.show {
	overflow: visible;
	max-width: 900px;
	max-height: 850px;
	padding: 50px;
	pointer-events: auto;
	opacity: 1;
}
.popupBg{
	display:block;
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%, -50%);
	background:rgba(0,0,0,.5);
	width:100%;
	height:100%;
	z-index:99999;
	pointer-events:none;
	opacity:0;
	transition:all .4s;
}
/*
.popup.show ～ .popupBg,
.popup2.show ～ .popupBg,
*/
.popup-open .popupBg{
	pointer-events:auto;
	opacity:1;
}
.has-scroll::after {
	position: sticky;
	z-index: 99;
	bottom: 0px;
	left: 50%;
	display: block;
	width: 26px;
	height: 26px;
	content: '';
	transition: all .4s;
	transform: translate(-50%);
	pointer-events: none;
	border-radius: 100%;
	background: url('vr_scroll_icon.png') no-repeat center center #999;
}
.has-scroll.scroll-max::after {
	opacity: 0;
}
.popup .close {
	position: absolute;
	top: 0;
	right: -25px;
	display: block;
	overflow: hidden;
	width: 25px;
	height: 60px;
	text-indent: -9999px;
	border-radius: 0 12px 12px 0;
	background: #fff;
	background: url('vr_popup_close.png') no-repeat center center #fff;
	border:0;
	cursor:pointer;
}
.popup .title-wrap {
	margin: 0 0 30px;
	padding: 0 0 30px;
	border-bottom: 1px solid #333;
}
.popup .title-wrap .title {
	font-family: 'esamanru';
	font-size: 30px;
	font-weight: 600;
	line-height: 1;
	color: #111;
}
.popup .title-wrap .text {
	font-size: 20px;
	line-height: 1;
	margin-top: 15px;
	color: #666;
}
.popup-item .list {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.popup-item .list li {
	display: flex;
}
.popup-item .list .title {
	font-size: 16px;
	font-weight: 500;
	width: 80px;
	color: #999;
}
.popup-item .list .item {
	font-size: 16px;
	font-weight: 300;
	overflow: hidden;
	color: #333;
	flex: 1;
}
.popup-item {
	position: relative;
	overflow: auto;
	height: 100%;
	max-height: 700px;
}
.popup-item .image{
	position:relative;
	margin:0 0 30px;
}
.img-download{
	position:absolute;
	top:10px;
	right:10px;
	background:#000;
	color:#fff;
	border:0;
	display:flex;
	align-items:center;
	justify-content:center;
	width:150px;
	height:30px;
	border-radius:5px;
	text-decoration:none;
	z-index:9;
}
.popup-thumb{
	display:flex;
}
.popup-thumb{
     display: flex;
     margin: 20px 0 0;
     gap: 10px;
}
.popup-thumb button {
     position: relative;
     overflow: hidden;
     width: 90px;
     height: 65px;
     transition: all .4s;
     border: 3px solid transparent;
	 cursor:pointer;
}
.popup-thumb button::before {
     position: absolute;
     z-index: 3;
     top: 0;
     left: 0;
     display: block;
     width: 100%;
     height: 100%;
     content: '';
     transition: all .4s;
     background: rgba(0, 0, 0, .4);
}
.popup-thumb button.active {
     border-color: #e4585a;
}
.popup-thumb button.active::before {
     opacity: 0;
}
.popup-slider{
	position:relative;
}
.popup-slider .slick-arrow{
	position: absolute;
    top: 50%;
    overflow: hidden;
    width: 21px;
    height: 36px;
    transform: translateY(-50%);
    text-indent: -9999px;
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: 0 0;
    filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, .2));
	border:0;
	z-index:999;
}
.popup-slider .slick-arrow.slick-prev{
	left:20px;
	background-image:url('/resources/gogung/images/board/thumbnail_arrow_03.png');
}
.popup-slider .slick-arrow.slick-next{
	right:20px;
	background-image:url('/resources/gogung/images/board/thumbnail_arrow_05.png');
}
.popup-slider .slick-list{
	overflow:hidden;

}
.popup-slider .slick-track{
	display:flex;
}
.popup-slider .slick-slide{

}
.popup-item .subject {
	font-size: 20px;
	font-weight: 500;
	color: #333;
}
.popup-item .subject .sub-text{
	font-size:16px;
}
.popup-item .text {
	font-size: 16px;
	font-weight: 300;
	color: #333;
}
.popup-item .image img,
.popup-item .image iframe,
.popup-item .image video {
	width: 100%;
}

.popup-item .model-wrap{width:100%; height:auto;}
.popup-item .model-wrap iframe{width:100%; min-height: 480px;}

/* ##### temp ##### */
.popup2,
.popup3,
.popup4{
	position: absolute;
	z-index: 999999;
	top: 50%;
	left: 50%;
	display: flex;
	overflow: hidden;
	flex-direction: column;
	width: 100%;
	max-width: 0;
	max-height: 0;
	padding: 0;
	transition: all .4s;
	transform: translate(-50%, -50%);
	pointer-events: none;
	opacity: 0;
	background: #fff;
}
.popup2.show,
.popup3.show,
.popup4.show{
	overflow: visible;
	max-width: 900px;
	max-height: 850px;
	padding: 50px;
	pointer-events: auto;
	opacity: 1;
}
.popup2.has-scroll::after,
.popup3.has-scroll::after,
.popup4.has-scroll::after{
	position: absolute;
	z-index: 99;
	bottom: 60px;
	left: 50%;
	display: block;
	width: 26px;
	height: 26px;
	content: '';
	transition: all .4s;
	transform: translate(-50%);
	pointer-events: none;
	border-radius: 100%;
	background: url('vr_scroll_icon.png') no-repeat center center #999;
}
.popup2.has-scroll.scroll-max::after,
.popup3.has-scroll.scroll-max::after,
.popup4.has-scroll.scroll-max::after{
	opacity: 0;
}
.popup2 .close,
.popup3 .close,
.popup4 .close{
	position: absolute;
	top: 0;
	right: -25px;
	display: block;
	overflow: hidden;
	width: 25px;
	height: 60px;
	text-indent: -9999px;
	border-radius: 0 12px 12px 0;
	background: #fff;
	background: url('vr_popup_close.png') no-repeat center center #fff;
	border:0;
	cursor:pointer;
}
.popup2 .title-wrap,
.popup3 .title-wrap,
.popup4 .title-wrap{
	margin: 0 0 30px;
	padding: 0 0 30px;
	border-bottom: 1px solid #333;
}
.popup2 .title-wrap .title,
.popup3 .title-wrap .title,
.popup4 .title-wrap .title{
	font-family: 'esamanru';
	font-size: 30px;
	font-weight: 600;
	line-height: 1;
	color: #111;
}
.popup2 .title-wrap .text,
.popup3 .title-wrap .text,
.popup4 .title-wrap .text{
	font-size: 20px;
	line-height: 1;
	margin-top: 15px;
	color: #666;
}

/* ##### temp ##### */

.board-information {
     display: flex;
     margin: 20px 0 0;
     padding: 0 50px 0 0;
     border-width: 1px 0;
     border-style: solid;
     border-color: #dedede;
     align-items: center;
}
 .board-information .title {
     font-size: 16px;
     font-weight: 500;
     display: flex;
     width: 156px;
     height: 60px;
     text-align: center;
     color: #333;
     background: #f8f8f8;
     align-items: center;
     justify-content: center;
}
 .board-information .text {
     font-size: 16px;
     display: flex;
     padding: 0 20px;
     color: #777;
     flex: 1;
     align-items: center;
}
 .board-information a {
     font-size: 15px;
     position: relative;
     color: #1f1f1f;
}
 .board-information a::after {
     position: absolute;
     bottom: -3px;
     left: 0;
     display: block;
     width: 100%;
     height: 1px;
     content: '';
     background: #1f1f1f;
}

/* movie pop */
.movie-pop{
	position:fixed;
	top:50%;
	left:50%;
	width:1200px;
	transform:translate(-50%, -50%);
	background:rgba(0, 0, 0, .5);
	border-radius:15px;
	padding:20px;
	display:flex;
	flex-direction:column;
	gap:10px;
	z-index:9999;
}
.movie-close{
	margin-left:auto;
	background:url('../graphics/floorplan/close-116.png') 0% 0% / contain no-repeat;
	width:32px;
	height:32px;
	text-indent:-9999px;
	overflow:hidden;
	cursor:pointer;
	border:0;
}
.movie-pop iframe{
	width:100%;
	height:600px;
	border:0;
}

/* 언어 버튼 */
.lang_btn{display: block; width: 81px; height: 81px; background: url('../aside/kor_btn.png') no-repeat center / contain; position: absolute; left: -40%; top: 15px;}

@media screen and (max-width:1600px){
	.aside-list button .title{
		line-height:1.2;
	}
}
@media screen and (max-width:1200px){
	.popup{
		width:85%;
		transform:translate(calc(-50% - 12px), -50%);
	}
	.popup.show,
	.popup2.show,
	.popup3.show{
		max-width: 85%;
	}
	.aside.open{
		width:650px;
	}
	.movie-pop{
		width:90%;
	}
}
@media screen and (max-width:1024px){
	.popup{
	}
	.popup.show,
	.popup2.show,
	.popup3.show{
		padding:30px;
	}
}
@media screen and (max-width:769px){
	.aside.open.show{
		width:90%;
	}
}
@media screen and (max-width:481px){
	.popup{
		width:78%;
	}
	.popup.show,
	.popup2.show,
	.popup3.show{
		max-width:78%;
	}
	.aside-list button{
		width:92%;
	}

}
@media screen and (max-width:376px){

}