/*인테리어 겔러리*/
@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Allura&family=Nanum+Gothic:wght@400;700;800&display=swap');


*{-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
html, body{margin: 0; padding: 0;}
header, section, article, nav, aside, main, footer{display: block;}
header:after, section:after, article:after, nav:after, aside:after, main:after, footer:after{content: ""; display: block; clear: both;}
h1, h2,h3, h4, h5, h6, p{margin: 0;}
ul, ol{margin: 0;padding: 0;list-style: none;}
a{text-decoration: none;}
.frame1200{width: 1200px; margin: 0 auto;}
.frame1300{width: 1200px; margin: 0 auto;}


.sub_banner_bg {background: url(/resources/brandsite/img/garllery_banner.png);}
@media all and (max-width:300px){
	.sub_banner_bg .banner_txt ul li{font-size: 4vw}
}
/*선택*/
#drop_selbox{width: 100%;height: auto}
#drop_selbox .drop-box{
	text-align:center;
	padding: 40px 0 10px;
	font-size:0;
	}
/* #drop_selbox .drop-down-1{margin-left:0 !important} */
#drop_selbox .drop-down-1, .drop-down-2{text-align: left;}
#drop_selbox .drop-down {width:135px; margin:0 10px;text-align: center;display: inline-block;  position: relative; }

#drop_selbox .drop-down .selected{text-align:center;}
#drop_selbox .drop-down .selected a {width: 100%;display: block;/*padding: 0 25px;*/font-size: 16px;color: #fff; font-weight: bold;    text-decoration: none; line-height: 45px;border-radius: 10px; background: #88b8ff no-repeat scroll right center;  box-sizing: border-box;}
#drop_selbox .drop-down .selected a span {cursor: pointer;}
#drop_selbox .drop-down .selected span.value, .drop-down .options span.value {display: none;}
#drop_selbox .drop-down .selected img{height: 15px;vertical-align: middle;}

#drop_selbox .drop-down .options ul {overflow: hidden; z-index: 1;background: #fff none repeat scroll 0 0;  border-radius: 10px;display: none; list-style: none; padding: 0px 0px;position: absolute; top: 100%;left: 0;width: 100%;box-sizing: border-box; border: 1px solid #f6f6f6; border-top: none;}
#drop_selbox .drop-down .options ul li{    border-radius: 10px;}
#drop_selbox .drop-down .options ul li a {font-size: 14px;display: block;text-decoration: none;color: #363636;box-sizing: border-box; padding: 10px 20px;}
#drop_selbox .drop-down .options ul li a:hover {background: rgb(229 241 255);transition: 0.2s ease;}



/*인테리어 갤러리*/
.gallery{width: 100%;  height:  auto; text-align: center;}
.gallery .gallery_box{width: calc(33.33% - 60px);height: auto;    padding-bottom: 70px; display: inline-block; vertical-align: top;cursor: pointer; }
.gallery .gallery_box:nth-child(3n-1){margin: 0 30px;}
.gallery .gallery_box .gallery_img{border-radius: 10px;overflow:hidden;    height: auto;}
.gallery .gallery_box .gallery_img:hover img { transform: scale(1.1);transition: 0.5s;}
.gallery .gallery_box .gallery_txt{padding-top: 15px; text-align: left;}

.gallery .gallery_box .gallery_txt p.gallery_txt001{
	display: flex;
    justify-content: space-between;
}
.gallery .gallery_box .gallery_txt p.gallery_txt001 a{
	display: block;
	font-size: 18px; 
	font-weight: 700;
	color: #595757;
	text-overflow: ellipsis; 
	overflow: hidden;
	white-space: nowrap;
	margin-bottom: 5px !important;
}
.gallery .gallery_box .gallery_txt p.gallery_txt001 span{
	margin: auto 0;
}
.gallery .gallery_box .gallery_txt p.gallery_txt001 span a{
	background-color: #88b8ff;
    color: #fff;
    font-weight: 600;
    padding: 6px 10px;
    text-align: center;
    border-radius: 6px;
    font-size: 14px;
    letter-spacing: 0.5px;
}
.gallery .gallery_box .gallery_txt p.gallery_txt002{
	font-size: 15px; 
	font-weight: 600;
	color: #727171;
	text-overflow: ellipsis; 
	overflow: hidden;
	white-space: nowrap;
}
.gallery .frame1300{background: #fff;}
.gal_img_tit{
	line-height: 2vw;
}
/****************GALLERY POPUP*********************/
.dark{position:fixed; width: 100%;height: 100%; top: 0;left: 0;background:rgba(0,0,0,0.5) ;z-index: -1;opacity: 0;}
.video{position:fixed; width: 100%;height: 100%; top: 0;left: 0;background:rgba(0,0,0,0.5) ;z-index: -1;opacity: 0; transition:opacity 0.5s;}
.dark.active{z-index:200; opacity: 1;}
.video.active{z-index:200; opacity: 1;}

.popup{position: fixed; width: 500px;height:auto; background:#000; top: 50%;left: 50%; transform:translate(-50%,-50%); border-radius:8px;padding:20px; box-shadow:0 0 4px #000;z-index: -1; opacity: 0;/* transition:opacity 0.5s; */}
.popup.active{z-index: 2; opacity:1;}


.arr_btn{line-height: 523px;position: relative;}
.arr_btn img{width: 35px;}
.arr_btn .left_arr{position: absolute;left: 20px;}
.arr_btn .right_arr{position: absolute;right: 20px;}

.close{position: absolute; top:0px; right:20px; font-size: 25px; color: #787878; line-height: 50px;cursor: pointer; z-index: 8;}


.popup_box{width:795px;height:900px;padding:0 10px 10px 10px; background:#fff;position: absolute;top:55%;left: 50%;transform:translate(-50%, -50%);    overflow-y: scroll; }


.popup_box .pop_title{background:#fff; height: 50px;line-height: 50px;text-align:center;font-size: 17px; font-weight: bold; color: #515151;}
.popup_box .pop-main{height: 523px;background:#ececec;margin-bottom: 10px;background-size: contain;background-repeat:no-repeat;background-position: center; position: relative;}


.popup_box .counse_btn{width: 97px;height: 97px;background: #88c4ff;border-radius:10px;position: absolute; top:470px; right:17px;text-align: center;	z-index:1;    padding: 18px 0;}

.popup_box .counse_btn:hover{background: #133f8e;}
.popup_box .counse_btn a{color: #fff;}
.popup_box .counse_btn h2{font-size: 16px;padding-bottom: 10px;}
.popup_box .counse_btn p{font-size: 12px;}

.popup_box .pop-smallbox{height: auto;margin-bottom: 10px; width:100%;}

/* @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@팝업창에서 작은 이미지들이 슬라이드 되면, 그 위에 메인처럼 하나씩 보이는 부분 크기 조정*/
.popup_box .pop-main .main_box{height:523px;}
.slick-slide img {height: 100%; margin:0 auto;}
/* @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@슬라이드 되는 작은 이미지들 height크기 수정  */
.popup_box .pop-smallbox .s_box{width:calc(14.28% - 5px); height:75px; display: inline-block;vertical-align: top; margin-right:2px; margin-bottom:5px;}
.s_box img {width: 100%; height: 75px; object-fit: cover;}
.parent_img {width: transparent;}

/* 팝업박스 슬라이드 부분에 버튼 수정 */
.pop-smallbox { position:relative;}
.pop-smallbox button {position:absolute; z-index:10; top:50%; transform:translateY(-50%); width:35px; height:35px;background:rgba(0,0,0,.2); border:none; outline:0;}
.pop-smallbox button.slick-prev { left:0; font-size:0; color:transparent;}
.pop-smallbox button.slick-next { right:0; font-size:0; color:transparent;}
.pop-smallbox button.slick-prev:before {content:"\e93d"; font-family:'xeicon'; font-size:20px; color:#fff; }
.pop-smallbox button.slick-next:before {content:"\e940"; font-family:'xeicon'; font-size:20px; color:#fff; }


.popup_box .pop-textbox{background: #f5f5f5;}
.popup_box .pop-textbox .text_f{padding: 20px;}
.popup_box .pop-textbox .text_f .text-title{}
.popup_box .pop-textbox .text_f .text-title p{font-size: 22px; font-weight: bold; color: #4c4948;}

.popup_box .pop-textbox .text_f .text-line{margin:13px 0 10px 0;border-bottom:1px solid #c4c4c4;}

.popup_box .pop-textbox .text_f .text-sub{}
.popup_box .pop-textbox .text_f .text-sub .s_rightbox{height: 30px;text-align: right;font-size: 0;}

.popup_box .pop-textbox .text_f .text-sub .sub_box{display: inline-block;vertical-align: top;padding-right: 10px;}
.popup_box .pop-textbox .text_f .text-sub .sub_box .round{width: 65px; height: 30px; background:#cbe4fd; border-radius:20px;line-height: 30px; text-align: center;font-size: 14px;font-weight: bold;color: #4c4948;display: inline-block;}
.round-3{padding: 0 15px;}
.popup_box .pop-textbox .text_f .text-sub .sub_box .round_p{display: inline-block;font-size: 14px; font-weight: bold;line-height: 29px;padding: 0 10px 0 10px;}
.popup_box .pop-textbox .text_f .text-sub .sub_box .round-3{width: auto;}
.popup_box .pop-textbox .text_f .text-sub .sub_box .p-3{padding-right: 0;}

.popup_box .pop-textbox .text_f .text-sub .text-content01{font-size: 25px;color: #898989;padding-bottom: 10px;font-family: 'Allura', cursive;}
.popup_box .pop-textbox .text_f .text-sub .text-content02{word-break: keep-all;}
.popup_box .pop-textbox .text_f .text-sub .text-content02 p{font-size: 16px; font-weight: bold;color: #4c4948;letter-spacing: -1px;padding-bottom: 8px;line-height: 1.5;white-space: break-spaces;word-break: break-all;}


/* 유튜브 재생 */
.pop-main iframe {position: relative; width:100%; height:100%;}
.pop-main iframe iframe{position: absolute; width:auto; height:100%; padding-bottom:56.25%;} 

/* 반응형 */
/* @media all and (max-width: 900px){
	.gallery .gallery_box .gallery_txt p.gallery_txt001 span a {
	    font-size: 13px;
	}
}
@media all and (max-width: 700px){
	.gallery .gallery_box .gallery_txt p.gallery_txt001 span a {
	    font-size: 12px;
	}
}
@media all and (max-width: 414px){
	.gallery .gallery_box .gallery_txt p.gallery_txt001 a {
	    font-size: 14px;
	}
} */
/* 반응형 */
@media all and (max-width: 920px){
	#drop_selbox .drop-box {
	padding-top: 40px;
	}
}
@media all and (max-width: 900px){
	.gallery .gallery_box .gallery_txt p.gallery_txt001 span a {
	    font-size: 13px;
	}
	.gal_img_tit {
    line-height: 24px;
	}
}
@media all and (max-width: 700px){	
	.gallery .gallery_box .gallery_txt p.gallery_txt001 a {
	font-size: 16px;
	}
}
@media all and (max-width: 414px){
	.gallery .gallery_box .gallery_txt p.gallery_txt001 a {
	    font-size: 16px;
	}
	.gallery .gallery_box .gallery_txt p.gallery_txt001 span a {
    font-size: 12px;
    padding: 4px 6px;
    letter-spacing: 0.5px;
	}
}
@media all and (max-width: 360px){	
	.gallery .gallery_box .gallery_txt p.gallery_txt001 span a {
    font-weight: 500;
	}
}
@media all and (max-width: 320px){	
	.gal_img_tit {
    line-height: 20px;
	}
	.gallery .gallery_box .gallery_txt p:last-child, .gallery .gallery_box .gallery_txt p.gallery_txt002 {
    font-size: 12px;
	}
}