@charset "utf-8";
/* *******************************************************
 * filename : content.css
 * description : 서브페이지 컨텐츠 CSS
 * date : 2022-03-14
******************************************************** */
/* ******************  서브공통 ********************** */
/* -------- 공통 스크롤바  -------- */
.custom-scrollbar-cover,
.cm-scroll-drag-guide{display:none;}

/* -------- 공통 :: 탭 -------- */
/* Tab 공통 스타일 */
.sub-tab-wrapper-style{position:relative; height:7rem; margin-bottom:5rem; z-index: 3;}
.sub-tab-list-style {display:flex; justify-content:center;}
.sub-tab-list-style ul{display:inline-block; height:100%; table-layout:fixed; background: #f9f9f9; border-radius: 3.5rem; padding: 1rem;}
.sub-tab-list-style ul:after{display:none}
.sub-tab-list-style ul li{/* float:left; */ display:table-cell; vertical-align:middle; position:relative; width:20%; min-width: 18rem;}
/* .sub-tab-list-style ul li:first-child{border-left:1px solid #e5e5e5;} */
.sub-tab-list-style ul li a{display:table; height:50px; width:100%; }
.sub-tab-list-style ul li a em{display:table-cell; vertical-align:middle; color:#000; font-size:1.5rem; letter-spacing:-0.05em; text-align:center; font-weight: 600;}
.sub-tab-list-style ul li.selected{z-index:1; background-color:var(--main-color); border-radius: 25px;}
.sub-tab-list-style ul li.selected a em{color:#fff; }
/* Tab Fixed Move*/
.sub-tab-list-style.top-fixed{position:fixed; top:70px; left:0; width:100%; height:60px;}
/* Mobile Tab Drop Menu */
.sub-drop-open-btn-style{display:none}

@media all and (min-width:1025px){
	/* Tab Fixed Background */
	.sub-tab-list-style:before{position:absolute; top:0px; bottom:0px; left:50%; width:0; content:""; background-color:#fff; border-bottom:1px solid #e5e5e5; transition:all 0.5s}
	.sub-tab-list-style.top-fixed:before{width:100%; margin-left:-50%}
}

/* ****************** 이벤트 ********************** */
.gal-info-list {margin-top: 3rem;}
.gal-info-list dl {display:flex; margin-top: 1.5rem;}
.gal-info-list dl:first-of-type {margin-top: 0;}
.gal-info-list dt {width: 8.5rem; font-size:1.5rem; color: #000; letter-spacing:-0.02em; font-weight: 500; line-height:1.3;}
.gal-info-list dd {width: calc(100% - 8.5rem); font-size:1.5rem; color: #666; letter-spacing:-0.02em; font-weight: 400; line-height:1.3;}
/* .gallery-event-box img {max-width:100%;} */
.gallery-event-box.event-wrap {width: 100%;
    position: relative;
    height: 0;
    padding-top: 54.737%;}
.gallery-event-box.event-wrap img {height: 100%;}
@media all and (max-width:480px){
	.gal-info-list dl {flex-direction: column;}
	.gal-info-list dt, .gal-info-list dd {width: 100%;}
	.event-page .paging {margin: 0 0 3rem;}
}

/* 문의하기 공통 */

.inquiry-page {padding-top: 1.7rem;}
.inquiry-page .custom-radio-item-box {height: 100%; display:flex; align-items:center;}
.inquiry-style08 .inquiry-form .inquiry-data-tit .essential-icon {position: relative; top: -6px; left: 1px;}
/* .inquiry-style08 .inquiry-form.cm-fl li {border: 2px solid #fff; box-sizing: border-box;} */
.inquiry-style08 .inquiry-form.cm-fl ul li input[type="text"] {height: 100%;}
.inquiry-style08 .inquiry-form li.on {border-color:var(--main-color);}
.inquiry-style08 .inquiry-form.w100 .inquiry-data-tit {top: 1.7rem;}
.inquiry-style08 .inquiry-form ul li .etc-box {display:none;}
.inquiry-style08 .inquiry-form ul li .etc-box input {background: #f2f2f2; height: 2.5rem; border-radius:5px; max-width: 14rem; text-indent:2rem;}

@media all and (max-width:800px){
	.inquiry-style08 .inquiry-form.w100 .inquiry-data-tit {top: 0;}
	.inquiry-page .custom-radio-item-box {flex-wrap:wrap; margin: 0;}
	.inquiry-page .custom-radio-item-box .custom-radio-item {margin: 2px 5px;}
}

/* 자동입력방지 */
.inquiry-style08 .inquiry-form.w100:nth-of-type(4) ul li {display: flex; align-items: center; padding: 1rem 0 1rem 14rem;}
.inquiry-style08 .inquiry-form.w100:nth-of-type(4) .inquiry-data-tit {top: initial; width: 14rem;}
.inquiry-style08 .inquiry-form.w100:nth-of-type(4) img {margin: 0 2px;}
.inquiry-style08 .inquiry-form.w100:nth-of-type(4) ul li input[type="text"] {margin-left: 2rem;}

@media all and (max-width:800px){
	.inquiry-style08 .inquiry-form.w100:nth-of-type(4) .inquiry-data-tit {width: 11rem;}
	.inquiry-style08 .inquiry-form.w100:nth-of-type(4) ul li {padding: 1rem 0 1rem 11rem;}
	.inquiry-style08 .inquiry-form.w100:nth-of-type(4) img {width: 20px;}
	.inquiry-style08 .inquiry-form.w100:nth-of-type(4) ul li input[type="text"] {margin-left: 1rem;}
}

@media all and (max-width:800px){
	.inquiry-style08 .inquiry-form.w100:nth-of-type(4) ul li {flex-wrap:wrap;}
	.inquiry-style08 .inquiry-form.w100:nth-of-type(4) ul li input[type="text"] {margin-left: 0; height: auto;
        margin-top: 1.5rem;} 
}


/* 추가 지도 */
.installation-page {padding-bottom:13rem;}
.overseas-map-con {position: relative;}
.loca-img-box img {width: 100%;}
.loca-img-box img.m-ver {display:none;}
.installation-intro-con {background: #f9f9f9; text-align: center; /* padding: 7rem 0; */ margin-bottom: 14rem;}
.overseas-map-con .marker-box {position: absolute;
top: 0px;
left: 0px;
width: 100%;}

.loca-list-box {position: absolute;
top: 0px;
left: 0;
width: 100%; }
.loca-list-box li {position: relative; display:flex; /* height: 14rem; */ align-items:center; position: absolute;
top: 0;
left: 50%;
border:2px solid #ddd;
background: #fff;
border-radius:10px;    box-sizing: border-box;     /* padding: 1.995% 0; */
transition:var(--transition-custom);     width: 35rem;

}
.loca-list-box li > div {height: 100%; display: flex;
flex-direction: column;
justify-content: center;}
.loca-list-box li .line {position: absolute;
width: 83%;
height: 1px;
background: #ddd;
right: -83%;
top: 51%;
transform: translateY(calc((-50% + 0.5px)));}
.loca-list-box .title {background: #f7f7f7; text-align:center; width: 16rem; /* width: 14rem; */ border-radius: 7px 0 0 7px; padding: 10.86% 0; transition:var(--transition-custom);}
.loca-list-box .txt-box {background: #fff; padding: 6% 3.8rem; border-radius: 0 7px 7px 0; width: calc(100% - 16rem); /* width: calc(100% - 14rem); */ box-sizing: border-box;}
.loca-list-box .title i {font-size:2.4rem; color: #000; transition:var(--transition-custom);}
.loca-list-box .title p {font-size:2rem; letter-spacing:-0.02em; color: #000; font-weight: 700; line-height:1.2; margin-top: 1.2rem; transition:var(--transition-custom);}
.loca-list-box dl {display:flex; align-items:center;}
.loca-list-box dt {font-size:1.6rem; letter-spacing:-0.02em; color: #000; font-weight: 500; line-height:1.875; margin-right: 1.5rem;}
.loca-list-box dd {font-size:1.6rem; letter-spacing:-0.02em; color: #888; font-weight: 500; line-height:1.875;}
.loca-list-box li.active {border-color: var(--main-color);}
.loca-list-box li.active .title {background:var(--main-color);}
.loca-list-box li.active .title i, .loca-list-box li.active .title p {color: #fff;}

.overseas-map-con .marker {
	position: absolute;
	top: 0;
	left: 50%;
	display: block;
	/* width: 1.2rem; */
	 width: 0.625vw;
height: 0.625vw;
background: #000;
border-radius: 0.625vw;
border: 2px solid #fff;
box-sizing: border-box;
transition:var(--transition-custom);
}
.overseas-map-con .marker .title {
content: attr(data-title);
 position: absolute;
top: -6rem;
left: 50%;
transform: translateX(-50%);
/* width: 10rem; */
width: 12rem;
font-size: 1.6rem;
font-weight: 600;
color: #fff;
margin-top: 5px;
text-align: center;
height: 4rem;
line-height: 4rem;
background: #000;
border-radius:20px;
z-index: 1;
transition:var(--transition-custom);
}

.overseas-map-con .marker .title:after {
	display: block;
	content:"";
	width: 0px;
	height: 0px;
	border-top: 6px solid #000;
	border-left: 6px solid transparent;
	border-right: 6px solid transparent;
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	transition:var(--transition-custom);
}

.overseas-map-con .marker .wave 
{
	display: block;
	width: 2.4rem;
	height: 2.4rem;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	/* opacity: 0; */
	background-color: rgba(0,0,0,0.8);
	border-radius: 50%;
	-webkit-animation: network-wave 4s cubic-bezier(0.22, 0.61, 0.36, 0.5) infinite;
	animation: network-wave 3s cubic-bezier(1, 2, 0.66, 3) infinite;
	z-index: -1;
}

@keyframes network-wave {
	0%{-webkit-transform: translate(-50%, -50%) scale(1);
	transform: translate(-50%, -50%) scale(1);
	opacity: 0;}
	50%{opacity: 0.1;}
	100%{-webkit-transform: translate(-50%, -50%) scale(2.8);
	transform: translate(-50%, -50%) scale(2.8);
	opacity: 0;}
}

.overseas-map-con .marker .wave:last-of-type {animation-delay:0.5s;}


.overseas-map-con .marker .line {
	width: 30rem;
	height: 1px;
	background: #ddd;
	display: block;
	left: -30rem;
	position: absolute;
	top: 50%;
	transform: translateY(calc(-50% + 0.5px));
	transition:var(--transition-custom);
}

.overseas-map-con .marker .line:after{
	transition:var(--transition-custom);
}



.overseas-map-con .marker:nth-of-type(2) .line{
	width: 1px;
height: 5.8rem;    
transform: translateY(0) translateX(calc(-50% + 0.5px));
top: 0.8rem;
left: 49%;
}

.overseas-map-con .marker:nth-of-type(2) .line:after {display: block;
content: "";
width: 31rem;
height: 1px;
background: #ddd;  
position: absolute;
left: -31rem;
top: 5.7rem;}

.overseas-map-con .marker:nth-of-type(3) .line{
	width: 1px;
height: 4.8rem;    
transform: translateY(0) translateX(calc(-50% + 0.5px));
top: 0.8rem;
left: 49%;
}

.overseas-map-con .marker:nth-of-type(3) .line:after {
	display: block;
	content: "";
	width: 27.1rem;
	height: 1px;
	background: #ddd;  
	position: absolute;
	left: -27.1rem;
	top: 4.7rem;
}

.overseas-map-con .marker:nth-of-type(4) .line{
	width: 1px;
	height: 2.8rem;    
	transform: translateY(0) translateX(calc(-50% + 0.5px));
	top: -2.8rem;
	left: 49%;
}
.overseas-map-con .marker:nth-of-type(4) .line:after {
	display: block;
	content: "";
	width: 33rem;
	height: 1px;
	background: #ddd;  
	position: absolute;
	left: 0;
	top: 0;
}

.overseas-map-con .marker:nth-of-type(5) .line{
	width: 1px;
	height: 2.4rem;    
	transform: translateY(0) translateX(calc(-50% + 0.5px));
	top: -2.4rem;
	left: 49%;
}
.overseas-map-con .marker:nth-of-type(5) .line:after {
	display: block;
	content: "";
	width: 29.2rem;
	height: 1px;
	background: #ddd;  
	position: absolute;
	left: 0;
	top: 0;
}

.overseas-map-con .marker:nth-of-type(6) .line{
	width: 31.7rem;
	height: 1px;    
	transform: translateY(calc(-50% + 0.5px)) translateX(0);
	top: 50%;
	left: 100%;
}

.overseas-map-con .marker:nth-of-type(7) .line{
	width: 1px;
	height: 2.4rem;    
	transform: translateY(0) translateX(calc(-50% + 0.5px));
	top: -2.4rem;
	left: 49%;
}
.overseas-map-con .marker:nth-of-type(7) .line:after {
	display: block;
	content: "";
	width: 48rem;
	height: 1px;
	background: #ddd;  
	position: absolute;
	left: 0;
	top: 0;
}
.overseas-map-con .marker.active {background: var(--main-color);}
.overseas-map-con .marker.active .title {background: var(--main-color);}
.overseas-map-con .marker.active .title:after {border-top-color:var(--main-color);}
.overseas-map-con .marker.active .line, .overseas-map-con .marker.active .line:after {background: var(--main-color);}
.overseas-map-con .marker.active .wave {background: rgba(231,27,90,0.8);}

@media all and (max-width:1800px){
	.loca-list-box .title {padding: 7% 0;}
	/* .loca-list-box .txt-box {padding:7% 3.8rem;} */
	.loca-list-box .txt-box {padding:0 3rem;}

}

@media all and (max-width:1280px){
	.overseas-map-con .marker {width: 0.8vw; height: 0.8vw;}
	.overseas-map-con .marker .title {top: -4.3rem; font-size:1.2rem; /* width: 7rem; */ width: 9rem; height: 3rem; line-height:3rem;}
	

}

.installation-detail-con {background:#f9f9f9; border-radius:10px; padding: 3.5rem 4rem;}
.installation-detail-con dl {display:flex; align-items:center; margin: 0.4rem 0;}
.installation-detail-con dt {width: 10.7rem; font-size:1.8rem; letter-spacing:-0.025em; color: #000; line-height:1.667em;}
.installation-detail-con dt em, .installation-detail-con dt i {font-style:normal;}
.installation-detail-con dt em {font-weight: 700;}
.installation-detail-con dt i {margin-right: 1.5rem;}
.installation-detail-con dd {width: calc(100% - 10.7rem); font-size:1.8rem; letter-spacing:-0.025em; color: #888; font-weight: 500; line-height:1.667em; margin-left: 0;}

@media all and (max-width:1280px){
	.loca-list-box li {width: auto;}
	.loca-list-box li:nth-of-type(1),.loca-list-box li:nth-of-type(2),.loca-list-box li:nth-of-type(3){
		margin-left: -37.2341% !important;	
	}
	.loca-list-box li:nth-of-type(4),.loca-list-box li:nth-of-type(5),.loca-list-box li:nth-of-type(6),.loca-list-box li:nth-of-type(7){
		margin-left: 18.6171% !important;	
	}
	.loca-list-box .title {padding: 6% 0; width: 11rem;}
	.loca-list-box .title p {font-size:1.7rem;}
	.loca-list-box .title i {font-size:1.9rem;}
	.loca-list-box .txt-box {/* padding: 5% 2.5rem; */ width: calc(100% - 11rem);}
	.loca-list-box dt, .loca-list-box dd {font-size:1.4rem;}
	.overseas-map-con .marker:nth-of-type(2) .line {height:2.5rem;}
	.overseas-map-con .marker:nth-of-type(2) .line:after {top:2.4rem;}
	.overseas-map-con .marker:nth-of-type(3) .line {height: 2.5rem;}
	.overseas-map-con .marker:nth-of-type(3) .line:after {top: 2.4rem;}
	.overseas-map-con .marker:nth-of-type(4) .line {height: 2rem; top: -2rem;}
	.overseas-map-con .marker:nth-of-type(5) .line {height: 1.9rem; top: -1.9rem;}
}

@media all and (max-width:1024px){
	.overseas-map-con .marker {width: 9px; height: 9px; border-radius:100%;}
	.overseas-map-con .marker .title:after {    border-top: 4px solid #000; border-left: 4px solid transparent; border-right: 4px solid transparent; transform: translateX(calc(-50% - 0.5px));}
	.overseas-map-con .marker .title {top: -4.5rem;}
}

@media all and (max-width:800px){
	.loca-img-box img {display:none;}	
	.loca-img-box img.m-ver {display:block;}
	.loca-list-box {display:flex; flex-wrap:wrap; position:static; margin: 0 var(--area-padding) 5rem; width: calc(100% - var(--area-padding) * 2);}
	.loca-list-box li {width: calc((100% - 6px) / 2);  flex-direction:column; margin-right: 6px; position:static; margin-top: 0.6rem !important; margin-left: 0 !important;}
	.loca-list-box li:nth-of-type(1), .loca-list-box li:nth-of-type(2), .loca-list-box li:nth-of-type(3) {margin-left: 0 !important;}
	.loca-list-box li:nth-of-type(4),.loca-list-box li:nth-of-type(5),.loca-list-box li:nth-of-type(6),.loca-list-box li:nth-of-type(7){
		margin-left: 0 !important;
	}
	.loca-list-box li:nth-of-type(even) {margin-right: 0;}
	.loca-list-box .title {width: 100%; border-radius: 7px 7px 0 0; justify-content: flex-start; padding: 10% 2rem;
box-sizing: border-box;}
	.loca-list-box .title p {margin-top: 0; margin-left: 0.8rem;}
	.loca-list-box .txt-box {border-radius:0 0 7px 7px; flex-direction:column; width: 100%; box-sizing: border-box;
align-items: flex-start; padding: 7% 2.5rem;}
	.loca-list-box li > div {flex-direction:row; align-items: center; height: auto;}
	
	.overseas-map-con .marker .line {display:none;}
	.overseas-map-con .marker .line:after {display:none;}

	.overseas-map-con .marker:nth-of-type(1) {margin-top: 29.5% !important; margin-left: -14% !important;}
	.overseas-map-con .marker:nth-of-type(2) {margin-top: 47.5% !important; margin-left: -11% !important;}
	.overseas-map-con .marker:nth-of-type(3) {margin-top: 79% !important; margin-left: -19% !important;}
	.overseas-map-con .marker:nth-of-type(4) {margin-top: 22% !important; margin-left: 3% !important;}
	.overseas-map-con .marker:nth-of-type(5) {margin-top: 52% !important; margin-left: 11% !important;}
	.overseas-map-con .marker:nth-of-type(6) {margin-top: 75% !important; margin-left: 7% !important;}
	.overseas-map-con .marker:nth-of-type(7) {margin-top: 113.5% !important; margin-left: -25.667% !important;}
	.installation-intro-con {margin-bottom: 5rem;}
}