@charset "utf-8";

/* 
 * content CSS Document
 * KOWEB
 */

 #container.bg01{min-height: 800px; background:url(/images/content/img_bg01.jpg) no-repeat 50% 100%;}
 #content{padding:80px 0; letter-spacing:0;}
 #content h2{padding:40px 0; letter-spacing:.2rem; font-size:32px; font-weight:500; color:#333; text-align:center; font-family: 'Playfair Display', 'Nanum Myeongjo', serif;}
 #content h3{margin-bottom:40px; font-size:32px; font-weight:500; color:#333; text-align:center; font-family: 'Playfair Display', 'Nanum Myeongjo', serif;}
 #content h4{font-size:28px; font-weight:300; color:#1c1c1c; font-family: 'Playfair Display', 'Nanum Myeongjo', serif;}
 #content h5{position:relative; padding-left:26px; font-weight:700; font-size:24px; color:#222; font-family: 'Playfair Display', 'Nanum Myeongjo', serif;}
 #content h5:after{content:""; position:absolute; top:4px; left:0; width:20px; height:20px; background:url(/images/content/img_tit01.svg) no-repeat 50% 50%; background-size: 100%; font-family: 'Playfair Display', 'Nanum Myeongjo', serif;}
 #content .sub_txt01{display: block; margin:100px 0 5px 0; font-size:28px; font-weight:200; color:#1c1c1c;}
 #content .sub_txt02{display: block; margin-bottom:100px; font-size:45px; font-weight:100; color:#1c1d1d;}
 #content .sub_txt03{display:block; font-size:34px; font-family: 'Playfair Display', 'Nanum Myeongjo', serif;}
 #content .sub_txt03 i{font-weight: bold; color:#c6a582;}
 #content div + h4,
 #content p + h4,
 #content h4 + div,
 #content h4 + ul,
 #content h4 + p{margin-top:16px;}
 #content h5{font-size:25px; color:#222; text-align:center;}
 #content h5.v2{font-size: 23px;}
 #content h5 + p{margin-top:7px; font-size:15px; color:#666; text-align:center;}
 #content h5 + p + span{display:block; margin:14px 0 30px; padding:20px; background:#f5f5f5; font-weight:300; font-size:16px; color:#666;}
 .mgt01{margin-top:40px !important;}
 .mgt02{margin-top:35px !important;}
 .border01{padding:35px; margin-top:10px; border:1px solid #fffaf4;}
 #content .area_shop_terms h2,
 #content .area_shop_terms h3,
 #content .area_shop_terms h4{text-align:left; font-family: Roboto, Noto Sans KR;}
 
 /* location */
 .area_location{ display: none; margin-bottom:6px; color:#fff; text-align: center;}
 .area_location ul > li{display:inline-block; position:relative; margin-left:10px; padding-left:22px;; color:rgba(255,255,255,.7)}
 .area_location ul > li:before{content:""; display:block; position:absolute; top:50%; left:0; margin-top:-4px; width:10px; height:10px; background:url(/images/common/img_arrow.svg) no-repeat 50% 50%;}
 .area_location ul > li:first-child{margin-left:0; padding-left:0;}
 .area_location ul > li:first-child:before{content:none;}
 .area_location ul > li.current{opacity:1; color:#fff;}
 .area_location ul > li > a{color:inherit; display:inline-block;}
 .area_location ul > li.home > a{width:18px; height:18px; text-indent:100%; font-size:0px; vertical-align:text-bottom; background:url(/images/content/img_location.svg) no-repeat 50% 50%;}
 .area_location ul{position:relative; opacity:0; top:50px; transition:all 0.6s ease-out; transition-delay:100ms;}
 .area_location ul.active{opacity:1; top:0;}
 
 /* lnb */
 .area_lnb_wrap{display:none; position: relative; width: 100%; height: 63px;}
 .area_lnb_wrap.none{height:0px; display: none;}
 .area_lnb{position: relative; top: 0; left: 0; z-index:60; width:100%; background-color: #fff; box-shadow: 0px 2px 15px rgba(0,0,0,.08); transition:all .7s;}
 .area_lnb.fix{position: fixed; background-color: rgba(255,255,255,0.98);}
 .area_lnb > .inner{overflow: hidden; overflow-x: auto; max-width:1200px;}
 .lnb{text-align: center;}
 .lnb li{display: inline-block; position: relative; font-weight: 400; color:#888; vertical-align: middle;}
 .lnb li.v1{width:25%;}
 .lnb li.v2{width:calc(100% / 2 - 0.1px);}
 .lnb li.v3{width:calc(100% / 3 - 0.1px);}
 .lnb li.v4{width:calc(100% / 4 - 0.1px);}
 .lnb li.v5{width:calc(100% / 5 - 0.1px);}
 .lnb li.v6{width:calc(100% / 6 - 0.1px);}
 .lnb li a:after{content:""; display: block; position: absolute; bottom: 0; left: 0; width: 0; height: 6px; background-color: #d1deeb;}
 .lnb li a{display: block; width: 100%; height: 100%; padding:19px 30px; color:inherit;}
 .lnb li:hover{color:#333;}
 .lnb li a.on{color:#72879c;}
 .lnb li a.on:after{width: 100%;}
 
 /* sub visual */
 .area_subVisual{overflow:hidden; position:relative; height:400px; padding-top:30px; margin: 0 auto;}
 .area_subVisual .inner{position:relative;}
 /*
    조명 = 001 
    소품 = 002

    조명 메뉴 ----------
    01_Best = 001040
    02_경관 = 001041
    03_팬던트 = 001042
    04_거실 방  = 001043
    05_욕실 벽등 =  001044
    06_현관 센서 직부 = 001045
    07_매입 레일 = 001047
    08_스탠드 = 001046
    09_전구 자재 = 001048
    10_전시장조명 = 001050
    11_루미나리에 = 001051
    custom.js와 연결
    --------------------
*/
 .area_subVisual .subg{position:absolute; top:0; left:0; z-index:-1; width:100%; height:100%; background-repeat:no-repeat; background-position: 50% 50%; background-size:cover; animation:bgScale 7s; -webkit-animation:bgScale 7s;}
 .area_subVisual .subg.v1{background-image:url(/images/content/img_sub_visual01.jpg); background-position: 10% 50%;}
 .area_subVisual .subg.v2{background-image:url(/images/content/img_sub_visual02.jpg);}
 .area_subVisual .subg.v3{background-image:url(/images/content/img_sub_visual03.jpg);}
 .area_subVisual .subg.v4{background-image:url(/images/content/img_sub_visual04.jpg); background-position: 55% 50%;}
 
 .area_subVisual .subg.v2_002{background-image:url(/images/content/img_sub_v2_002.jpg);}
 .area_subVisual .subg.v2_001040{background-image:url(/images/content/img_sub_v2_001040.jpg);}
 .area_subVisual .subg.v2_001041{background-image:url(/images/content/img_sub_v2_001041.jpg);}
 .area_subVisual .subg.v2_001042{background-image:url(/images/content/img_sub_v2_001042.jpg);}
 .area_subVisual .subg.v2_001043{background-image:url(/images/content/img_sub_v2_001043.jpg);}
 .area_subVisual .subg.v2_001044{background-image:url(/images/content/img_sub_v2_001044.jpg);}
 .area_subVisual .subg.v2_001045{background-image:url(/images/content/img_sub_v2_001045.jpg);}
 .area_subVisual .subg.v2_001046{background-image:url(/images/content/img_sub_v2_001046.jpg);}
 .area_subVisual .subg.v2_001047{background-image:url(/images/content/img_sub_v2_001047.jpg);}
 .area_subVisual .subg.v2_001048{background-image:url(/images/content/img_sub_v2_001048.jpg);}
 .area_subVisual .subg.v2_001050{background-image:url(/images/content/img_sub_v2_001050.jpg);}
 .area_subVisual .subg.v2_001051{background-image:url(/images/content/img_sub_v2_001051.jpg);}



 .area_subVisual .subg:after{content:""; display:block; position:absolute; top:0; left:0; width:100%; height:100%;}
 .area_subVisual .visual_title{position:absolute; top:45%; left:50%; z-index:1; width:100%; transform:translate(-49.99%, -49.99%);}
 .area_subVisual .visual_title .box_title{color:#fffdf8; word-break:keep-all; word-wrap:break-word; line-height:1.7; text-align:center;}
 .area_subVisual .visual_title h2{margin:10px 0; font-size:42px; font-weight: 400; letter-spacing:.03em; font-family:'Playfair Display', 'Nanum Myeongjo', serif;}
 .area_subVisual .visual_title p{color:rgba(255,255,255,0.7); letter-spacing:0.05em;}
 .area_subVisual .visual_title h2,
 .area_subVisual .visual_title p{position:relative; opacity:0; top:50px; transition:all 0.6s ease-out;}
 .area_subVisual .visual_title h2{transition-delay:200ms;}
 .area_subVisual .visual_title p{transition-delay:300ms;}
 .area_subVisual .visual_title h2.active,
 .area_subVisual .visual_title p.active{opacity:1; top:0;}
 
 /* company */
 .area_company{position: relative; color:#1c1c1c;}
 .area_company .sub_txt03{text-align:center;}
 .area_company:after{content:''; display:block; clear:both;}
 .area_company .img{display:block; position:relative; width:100%; height:483px; background:url(/images/content/img_company01.jpg) no-repeat 50% 50%; background-size:cover;}
 .area_company .img > span{display:block; position:absolute; top:0; right:0; z-index:999; width:100%; height:100%; background:#fff; transition:all 2s cubic-bezier(0.165, 0.84, 0.44, 1) 0s;}
 .area_company .img.active > span{width:0;}
 .area_company p{font-size: 18px; margin-top:40px; font-weight:400; color:#222;}
 .area_company p i{box-shadow:0 -15px 0 rgba(241, 234, 222, 0.5) inset; color:#444; font-weight: 600;}
 .area_company p .deco{display:block; padding-bottom:3rem; font-size:1.6rem; font-weight:600; }
 .area_shopList,
 .area_shopView,
 .shop_view #container{max-width:1500px; margin:0 auto;}
 .shop_view .shop_view_nav{left:initial; right:0;}
 *[data-shop-icon="icon"] > i{border:0; background-color:#e09525; color:#fff; font-size:11px; font-style:italic;}
 *[data-shop-icon="icon"] [data-shop-icon="new"]{background-color:#c6a582;}
 .button.red{background:#b3b3b3; border-color:#b3b3b3;}    
 *[data-shop-view="price"] .sold{color:#222;}    
 .area_shop_terms p strong{color:#e09525;}    

.sub #container ul.bbsList{max-width:1500px; margin:0 auto;}
 .search_bbs{margin-top:40px}
 ul.bbsList li .more em,
 ul.bbsList li .more.active, 
 ul.bbsList li .more:hover, 
 ul.bbsList li .more:focus,
 ul.bbsList li .subject:hover, 
 ul.bbsList li .subject:focus{color:#e09525;}
 ul.bbsList li .more:hover, 
 ul.bbsList li .more:focus{ border-color:#e09525;}

@media(min-width:1381px){
    .inr03{margin-top:60px; margin-bottom: 100px; }
}

 /* sub_map */
.sub_map_item{padding-bottom:100px;}
#content .sub_map_item h2{padding:80px 0 60px;}
.view_item{display:flex; width:100%; position: relative; margin-bottom:80px;}
.view_item .img{display:block; position:relative; width:70%; height:700px; overflow:hidden; background:#fff url(/images/content/img_location01.jpg) no-repeat 50% 50%; background-size:cover; /*-webkit-animation: zoom 10s linear infinite alternate; -o-animation: zoom 10s linear infinite alternate; animation: zoom 10s linear infinite alternate;*/}
.view_item.second .img{background-image:url(/images/content/img_location02.jpg)}
.view_item.third .img{background-image:url(/images/content/img_location03.jpg)}
.view_item .img .mask{display:block; position:absolute; top:0; right:0; z-index:999; width:100%; height:100%; background:#fff; transition:all 2s cubic-bezier(0.165, 0.84, 0.44, 1) 0s;}
.view_item .img.active .mask{width:0;}
.view_item .text{position:absolute;top:50%; right:6%; width:500px; padding:55px 60px; text-align:left; box-sizing:border-box; background-color:#f0f0f0;}
#content .view_item .text h4{font-size:30px; font-weight:600; font-family:'Nanum Myeongjo', serif; letter-spacing:0; color:#111111;}
#content .view_item .text h4 span{display:block; font-size:17px; font-weight:700; font-family:'NanumSquare', '맑은 고딕', '돋움', Dotum, '굴림', Gulim, Sans-serif; letter-spacing:0;}
#content .view_item .text p{margin-top:25px; color:#545454; font-size:16px; font-weight:400; line-height:1.85;}
.view_item.right{flex-direction: row-reverse;}
.view_item.right .text{right:initial;left:6%;}
.sub_map_item .map_iframe{width:1500px; margin:0 auto;}
.sub_map_item .map_info{width:1500px; margin:0 auto; padding:35px 40px;box-sizing:border-box;position: relative;}
.sub_map_item .map_info .addr{font-size: 27px;font-weight:700;color:#222;line-height:2.5em; letter-spacing: -0.05rem;}
.sub_map_item .map_info .addr.en{display:block;margin: 5px 0 14px;font-size: 18px;color:#222;font-weight: 400;line-height:1.5em;}
.sub_map_item .map_info .addr span{display:inline-block; min-width:100px; font-weight:400; color:#c89e62; font-family:'Playfair Display', 'Nanum Myeongjo', serif;}
.sub_map_item .map_info .addr.en span{letter-spacing:0;}
.sub_map_item .map_info .tel a.did::after{content:"/"; display: inline-block; font-weight:200; padding:0 10px;}
.sub_map_item .map_iframe .slide_mask{display:block; position:absolute; top:0; right:0; z-index:999; width:100%; height:100%; background:#fff; transition:all 2s cubic-bezier(0.165, 0.84, 0.44, 1) 0s;}
.sub_map_item .map_iframe.active > .slide_mask{width:0;}
.sub_map_item .map_info .slide_mask{display:block; position:absolute; top:0; right:0; z-index:999; width:100%; height:100%; background:#fff; transition:all 2s cubic-bezier(0.165, 0.84, 0.44, 1) 0s;}
.sub_map_item .map_info.active > .slide_mask{width:0;}
.btn_map{position:absolute;top:50%;right: 40px;padding:18px 25px;min-width:220px;box-sizing:border-box;transform:translateY(-50%); background:#fff; border:3px solid #c89e62;border-radius:5px;box-shadow: 0px 6px 16px 4px rgba(197, 134, 18, 0.08);transition:all 0.3s ease;}
.btn_map span{position:relative; display:block; width:100%; font-size:17px; font-weight:600; line-height:1.3em; color:#c89e62;}
.btn_map span:before{content:''; position:absolute; top:50%; right:0; width:13px; height:8px; background:url(../images/content/icon_btn_arrow.svg)no-repeat center; background-size:contain; transform:translateY(-50%);}
.btn_map:hover{background:#c89e62;}
.btn_map:hover span{color:#fff;}
.btn_map:hover span:before{background:url(../images/content/icon_btn_arrow_on.svg)no-repeat center; background-size:contain; }
/*
@-webkit-keyframes zoom {
	0% { background-size: 100% auto; }
	100% { background-size: 110% auto; }
}
@-moz-keyframes zoom {
	0% { background-size: 100% auto; }
	100% { background-size: 110% auto; }
}
@-o-keyframes zoom {
	0% { background-size: 100% auto; }
	100% { background-size: 110% auto; }
}
@keyframes zoom {
	0% { background-size: 100% auto; }
	100% { background-size: 110% auto; }
}
*/

/* .customer_tab_item{display:flex; flex-direction:row; justify-content:center; align-items:center; padding-bottom:4rem;}
.customer_tab_item > li{display:block; min-width:6rem; margin-right:8px; padding:16px 24px; line-height:1; text-align:center; font-size:1.1rem; letter-spacing:-.06rem; border:1px solid #5a5a5a;}
.customer_tab_item > li:last-child{margin-right:0;}
.customer_tab_item > li > a{display:block; width:100%; height:100%; color:#5a5a5a; font-weight:400;}
.customer_tab_item > li.on{border-color:#f39200;}
.customer_tab_item > li.on > a{color:#f39200; font-weight:500;} */

.customer_tab_wrap{ margin-bottom: 30px; }
.customer_tab_item{display:flex; justify-content: center; gap: 30px clamp(5px, 1.4vw, 20px); text-align: center; }
.customer_tab_item > li{ flex: 1; }
.customer_tab_item > li > a{ display: block; padding:10px; background:#fff; border:1px solid #cfcece; line-height: 1.4em; letter-spacing:-0.5px; word-break:keep-all; }
.customer_tab_item > li.on{border-color:#f39200;}
.customer_tab_item > li.on > a{color:#f39200; font-weight:500;}
@media(min-width:768px){
    .customer_tab_item > li{ max-width: 20%; }
}

 @media (max-width:1800px){
    .area_subVisual{margin: 0 20px;}
    #content .sub_txt01{margin:60px 0 5px 0;}
    #content .sub_txt03{margin-top:60px;}
}

@media (max-width:1580px){
    #content .sub_txt03,
    #content .sub_txt01{font-size: 28px;}
    .area_company .sign{font-size: 20px;}
    .area_company p{font-size: 18px;}

    .area_subVisual{margin: 0;}
    .sub_map_item .map_iframe,
    .sub_map_item .map_info{width:90%}
}

@media (max-width:1480px){
    .view_item .text{right:5%;}
    .view_item.right .text{left:5%;}
}

@media (max-width:1380px){
    /* .inr03{margin:0 20px;} */
    #content .sub_txt01{font-size: 25px;}
    .area_company p{font-size: 17px;}
    .area_company .img{height: 400px;}

	.area_subVisual .visual_title h2{font-size: 38px;}
    #content{padding:50px 0;}

    .lnb li a{padding:20px 25px;}

    .area_company .img{height:400px;}
}
@media (max-width:1280px){
    .view_item .img{height:560px;}
    .view_item .text{width: auto;top: 50%; right:0; padding: 60px 60px;}
    .view_item.right .text{left:0;}
    #content .view_item .text h4{font-size:34px;}
    #content .view_item .text h4 span{font-size:17px;}
    #content .view_item .text p{font-size:16px;}
}
@media (max-width:1023px){
    .area_company .img{height:350px;}
    .area_company p{font-size: 16px;}

    #content .sub_txt02{font-size: 35px;}
    #content h3,
    #content .sub_txt03,
    #content .sub_txt01{font-size: 22px;}
    #content h4{font-size: 20px;}

    #container.bg01{min-height: inherit;}
    #content .sub_txt02{margin-bottom:50px;}
    .mgt01{margin-top:25px !important;}

	.area_subVisual{margin:70px 0 0 0; padding-top:35px; height: 350px;}
    .area_subVisual .visual_title h2{font-size: 30px;}
    
    .area_lnb_wrap{height: 59px;}
    .lnb.v4,
    .lnb.v5,
    .lnb.v6{min-width: 400px; width:inherit; padding:0 10px;}
	.lnb li{width: auto;}
    .lnb li a{padding:18.5px 16px;}


    .popConts > h4{font-size: 18px !important;}
    /* .sub #container{margin:60px 20px;} */
    .btn_map{top:0;}
}

@media (max-width:860px){
    /* .inr03{margin:0;} */
    .area_shopView{padding-top:60px;}
    #content h2{padding-top:0; font-size:27px;}
    #content .sub_map_item h2{padding-top:0;}
    .sub_map_item{margin:0; padding-bottom:0;}
    .sub_map_item .map_info{width:100%; padding:60px 0 0;}
    .sub_map_item .map_info .addr{font-size:22px;}
    .sub_map_item .map_info .addr span{min-width:80px;}
    .view_item .img{height:360px;}
    .view_item .text{padding:40px;}
    #content .view_item .text h4{font-size:24px;}
    #content .view_item .text h4 span{font-size:15px;}
    #content .view_item .text p{font-size:14px;}
    .sub_map_item .map_iframe{width:100%;}
    
}
@media (max-width:767px){
    #content .sub_txt02{font-size: 30px;}
    #content h3,
    #content .sub_txt03,
    #content .sub_txt01{font-size: 20px; font-weight: 200;}
    .area_company p{font-size: 15px;}
    .area_list li,
    .area_company p{font-size: 14px;}

    #content{padding:40px 0;}
    #content .sub_txt02{margin-bottom:30px;}

    .area_subVisual{margin:62px 0 0 0; padding-top:30px;}
	.area_subVisual .subg:after{background:rgba(0,0,0,.03);}
    
    .area_lnb_wrap{height: 51px;}
    .area_lnb{height:100%;}
    .area_lnb.fix{position: relative;}
    .lnb li a{padding: 15px 12px;}

    .area_company .img{height:300px; background-position: 90% 0;}
    .area_company p{margin-top:20px;}
    
    .popConts > h4{font-size: 16px !important;}
}

@media (max-width:640px){
    #content .sub_txt02{font-size: 25px;}
    .area_subVisual .visual_title h2{font-size: 26px;}
    .area_company p{font-size: 14px;}
    #content .sub_map_item h2{padding-bottom:0; font-size:22px;}
    .view_wrap{margin-bottom:40px;}
    .view_item{display:block; margin-bottom:0;}
    .view_item .img{width:100%; height:300px; background-size:contain; background-position: bottom;}
    .view_item .text{position:relative;}
    .sub_map_item .map_iframe iframe{height:400px;}
    .sub_map_item .map_info .addr{font-size:18px;}
    .sub_map_item .map_info .addr span{display:block;}
    .sub_map_item .map_info .addr.en{margin:0;}
    .sub_map_item .map_info .tel{padding-top:20px;}

}
@media (max-width:430px){
    #content .view_item .text p br{display: none;}
}

@media all and (max-width:480px){
    .area_subVisual{height: 300px; padding-top:20px;}
    .area_subVisual .visual_title p > br{display: block;}
    .view_item .img{height:260px;}
    .view_item .text{padding:40px 35px;}
    #content .view_item .text h4 span{font-size:13px;}
    #content .view_item .text h4{font-size:17px;}
}

@media (max-width:385px){
    .lnb.v4,
    .lnb.v5,
    .lnb.v6{min-width: 420px;}
    .sub_map_item .map_info .addr{font-size:16px;}
}

/* animation */
@-webkit-keyframes bgScale {
	from{transform:scale(1.1) rotate(.001deg);}
	to{transform:scale(1.0) rotate(.001deg);}
}
@keyframes bgScale {
   from{transform:scale(1.1) rotate(.001deg);}
	to{transform:scale(1.0) rotate(.001deg);}
}
@-webkit-keyframes rotation {
    from {-webkit-transform: rotate(0deg); transform: rotate(0deg); }
    to {-webkit-transform: rotate(360deg); transform: rotate(360deg);}
}
  @keyframes rotation {
    from {-webkit-transform: rotate(0deg); transform: rotate(0deg);}
    to {-webkit-transform: rotate(360deg); transform: rotate(360deg);}
}