@charset "utf-8";

:root{
	--primary: #f39200;
}

/* inner */
.inr{ margin: 0 auto; max-width: 1500px; width: 92%; }

/* header */
#header {height:100px;}
#header > .inr{position:relative; max-width: unset; width:100%; margin:0; padding:40px 0px 20px; box-sizing:border-box;}
#header nav{text-align:center;}
#header .logo{position:absolute; left:6%; top:60%; transform:translateY(-50%);}
#header .logo > a{display:inline-block; width:300px; aspect-ratio: 30/5; background:url(../images/common/logo.png) no-repeat 50% 0 / 100% 100%; font-size:0px; vertical-align:middle;}

#header nav .gnb > li{display:inline-block;}
#header nav .gnb > li > a{position:relative; display:inline-block; padding:0 33px; font-size:18px; letter-spacing:-1px; color:#111; font-weight:600; cursor:pointer;}
#header nav .gnb > li.active > a,
#header nav .gnb > li > a.on{color:#c89e62;}
#header nav .gnb > li > a::after{content:""; position:absolute; top:24%; right:0; display:inline-block; width:1px; height:16px; background-color:#e2e2e2;}
#header nav .gnb > li:last-child > a::after{display:none;}
#header nav .gnb > li:first-child > a{padding-left:0px;}
#header nav .gnb > li > div{display:none; opacity:0; visibility:hidden; position:absolute; top:64px; left:50%; transform:translate(-50%, 0); margin:0 auto; z-index:90; width:1240px; height:335px; box-sizing:border-box; padding:94px 25px 20px 25px; text-align:left; transition:0.3s ease; }
#header nav .gnb > li > div > ul{opacity:0; visibility:hidden; height:290px; display: flex; flex-direction: column; flex-wrap: wrap; /*justify-content: space-around;*/ align-content:baseline;}
#header nav .gnb > li > div > ul > li{min-width:140px; padding:8px 0px;}
#header nav .gnb > li > div > ul > li > a{display:block; font-size:17px; font-weight:700; color:#2c2c2c; text-transform:uppercase; transition:0.3s ease;}
#header nav .gnb > li > div > ul > li > a:hover{color:#c89e62;}
#header nav .gnb > li:nth-child(4) > div{height:155px; }
#header nav .gnb > li:nth-child(4) > div > ul {height:60px; flex-direction:row; justify-content:center; text-align: center;}
#header nav .gnb > li > div > ul > li > ul{display:block;}
#header nav .gnb > li:nth-child(1) .sub1,
#header nav .gnb > li:nth-child(3) .sub1,
#header.web nav .gnb > li:nth-child(4) .sub1,
#header nav .gnb > li:nth-child(5) .sub1,
#header nav .gnb > li:nth-child(1) .sub_menu,
#header nav .gnb > li:nth-child(3) .sub_menu,
#header.web nav .gnb > li:nth-child(4) .sub_menu,
#header nav .gnb > li:nth-child(5) .sub_menu {display:none;}
#header nav .gnb > li.active > div{display:block; opacity:1; visibility:visible;}
#header nav .gnb > li.active > div > ul{opacity:1; visibility:visible;}

#header nav .menu_bg{opacity:0; visibility:hidden; display:block; width:100%; height:0; position:absolute; top:100px; left:0; z-index:80; background-color: #fff; box-shadow:rgba(0, 0, 0, 0.3) 0px 10px 10px -10px, rgba(0, 0, 0, 0.5) 0px 0px 10px -21px; transition:0.2s ease;}
#header nav .menu_bg.active{opacity:1; visibility: visible; height:335px;}
#header nav .menu_bg.four.active{height:165px;}
#header nav .gnb > li > div > ul.submenu.none{display:none;}

#header .banner{display:block;position:absolute;top:60px;left:400px;width:860px;height:250px;text-align:left;z-index:90;opacity: 0;visibility: hidden;/* transition: all 0.3s ease; */}
#header .banner .title{display:block; padding-bottom:16px; font-size:18px; font-weight:700; color:#c89e62;}
#header .banner .desc{padding-top:10px; letter-spacing:-1px; font-size:16px; font-weight:700; color:#333333; }
#header .banner ul{display:flex; gap:30px;}
#header .banner.on{display:block; opacity:1; visibility:visible;}
#header.web .banner ul{display:flex !important;}
#header.web nav .gnb > li > div > ul{display: grid; grid-template-columns: repeat(2, 1fr); width: 280px; }
#header.web nav .gnb > li:nth-child(1) > div > ul,
#header.web nav .gnb > li:nth-child(3) > div > ul,
#header.web nav .gnb > li:nth-child(5) > div > ul{display:none !important;}

.area_util{position:absolute; right:5.5%; top:38%; background-color:#f2f2f2; border-top-left-radius:25px; border-top-right-radius:25px; border-bottom-left-radius:25px; border-bottom-right-radius:25px;}
.area_util ul{padding:10px 28px;}
.area_util ul > li{display:inline-block;}
.area_util ul > li > a{display:inline-block; position:relative;}
.area_util ul > li > a span{display:inline-block; padding:0 12px; font-size:13px; letter-spacing:-1px; color:#888787; font-family:'NanumSquare', '맑은 고딕', '돋움', Dotum, '굴림', Gulim, Sans-serif;}
.area_util ul > li > a::after{content:""; display:block; position:absolute; top:35%; right:0; width:1px; height:12px; background-color:#ccc;}
.area_util ul > li:last-child > a::after{display:none;}
.area_util [data-util="basket"] i{display:inline-block; font-size:13px; color:#888787;}
.area_util [data-util="basket"] span{padding-right:4px;}

#header .btn_menu{display:none; position:absolute; top:54%; right:0px; z-index:91; width:58px; height:58px; font-size:0px; text-align:center; transform:translateY(-50%); transition:0.5s ease-in-out;}
#header .btn_menu span{overflow:hidden; display:block; position:relative; top:50%; width:19px; height:12px; margin:0 auto; transform:translateY(-50%); -webkit-transform:translateY(calc(-50% + 0.5px));}
#header .btn_menu span i,
#header .btn_menu span:before,
#header .btn_menu span:after{display:block; position:absolute; height:2px; background:#222; transform:translateX(0px);}
#header .btn_menu span:before{content:''; width:19px;}
#header .btn_menu span:after{content:''; width:19px;}
#header .btn_menu span:before{right:0px; top:0px; transition:transform 0.5s ease 1.2s;}
#header .btn_menu span:after{left:0px; bottom:0px; transition:transform 0.5s ease 1s;}
#header .btn_menu span i{opacity:1; left:0px; top:5px; width:19px; transition:opacity 0.3s ease 0s, transform 0.5s ease 1.1s;}
#header .btn_menu em{display:block; overflow:hidden; position:absolute; top:50%; left:50%; width:19px; height:16px; margin:-8px 0 0 -9.5px; transform:translateX(19px); transition:transform 0.5s ease 0.5s;}
#header .btn_menu em i{display:block; position:absolute; width:0px; height:2px; background:#222; transform:rotate(0);}
#header .btn_menu em i:nth-of-type(1){top:1px; left:0px; transition:width 0.5s ease 0.5s, transform 0.5s ease 0s, top 0.5s ease 0s;}
#header .btn_menu em i:nth-of-type(2){bottom:1px; left:0px; transition:width 0.5s ease 0.5s, transform 0.5s ease 0s, bottom 0.5s ease 0s;}
#header .btn_menu:hover span i{opacity:0;}
#header .btn_menu.active span i,
#header .btn_menu.active span:before,
#header .btn_menu.active span:after{transform:translateX(-19px);}
#header .btn_menu.active span:before{transition-property:transform; transition-delay:0s;}
#header .btn_menu.active span i{transition-property:transform; transition-delay:0.1s;}
#header .btn_menu.active span:after{transition-property:transform; transition-delay:0.2s;}
#header .btn_menu.active em{transform:translateX(0); transition-duration:0s; transition-delay:0s;}
#header .btn_menu.active em i:nth-of-type(1){top:6px; width:100%; transform:rotate(45deg) perspective(500px); transition-delay:0.5s, 1s, 1s;}
#header .btn_menu.active em i:nth-of-type(2){bottom:8px; width:100%; transform:rotate(-45deg) perspective(500px); transition-delay:0.5s, 1s, 1s;}
#header.web nav .gnb > li.active > div{display:block; opacity:1; visibility:visible;}
#content{position: relative;}
#content:after{content:''; display:block; clear:both;}

.inr02{position:relative; max-width:1280px; width: calc( 100% - 80px); margin:0 auto;}
.inr03{position:relative; max-width:1500px; width: calc( 100% - 80px); margin:0 auto;}
.inr04{position:relative; max-width:1000px; margin:0 auto; width: 92%; }
.inner{width:100%; height:100%; margin:0 auto; transition:all 500ms;}

@media(max-width:1800px){
    /* .inr02{margin:0 40px; width:auto;}
	.inr03{margin:0 40px; width:auto;} */
}
@media(max-width: 1023px){
    .inr02,
    .inr03{ width: 100%; }
}

.area_shopView{padding-top:60px;}
/* shop */
 *[data-shop-list="default"] > li > a .percent{padding:10px 15px !important; margin-top:0px !important;}
 *[data-shop-list="default"] > li > a > em{font-size:18px;}

 .area_join_select,
 .area_shopCart{max-width:1500px; margin: 0 auto; }

 /* footer */
#footer{background-color:#1d1916; font-family:'NanumSquare', '맑은 고딕', '돋움', Dotum, '굴림', Gulim, Sans-serif;}
#footer a{font-size:15px;}
#footer > .inr{max-width:1240px; padding:80px 0 90px; color:#aaa;}
.company_wrap{display:flex; padding-bottom:70px; border-bottom:1px solid #000;}
.company_info_item{width:80%;}
.company_info_item .link{display:flex; padding-bottom:40px; color:#aaa;}
.company_info_item .link a{color:inherit;}
.company_info_item .link a::after{content:"·"; display:inline-block; padding: 0 14px;}
.company_info_item .link li:last-child a::after{display:none;}
.company_info_item .company .point{color:#c6a582;}
.company_info_item .company p{display:inline-block; padding-right:28px; line-height:2;}
.company_info_item .company p a{color:#aaa;}
.bank_info .tit{font-family:'Playfair Display'; font-weight:800;}
.bank_info .content{padding-top:42px;}
.bank_info .account{padding-bottom:8px; font-size:18px; font-weight:800; color:#fff;} 
#footer .copy{position:relative; display:block; padding-top:34px; border-top:1px solid #34302e;}
#footer .copy .sns{position:absolute; bottom:0; right:0; display:flex; text-align:right;}
#footer .copy .sns li{margin-right:20px;}
#footer .copy .sns li:last-child{margin-right:0;}
#footer .copy .sns a{cursor:pointer;}

@media all and (max-width:1800px){
    #content h3{font-size: 28px;}
    #content h4{font-size: 25px;}
}

@media screen and (max-width:1280px){
    
    
    #footer > .inr{padding:15% 5% 13%; width:100%; box-sizing: border-box;}
    .company_info_item{width:70%;}
    .company_info_item br{display:none;}

    
        
}

@media screen and (max-width:1250px){
	#header .inr{padding-left:15px; padding-right:15px;}	
	#header .logo{left:15px;}
	.area_util{right:15px;}
}

@media screen and (max-width:1240px){
    #header{position:fixed; top:0; width:100%; height:70px; z-index:100; background-color:#fff;}
	#header .logo{display:inline-block; position:static; margin-left:15px; transform:translateY(0);}
	#header .logo > a{ width: 160px; background-image:url(../images/common/logo@0.6x.png);}
	#header .btn_menu{display:block;}
	#header .inr{padding:10px 0px;}
    #header nav .gnb > li > a::after{display:none;}
    #header.mob .btn_menu em i{background:#fff;}
    #header .area_menu_all{display:block; opacity:0; visibility:hidden; position:fixed; right:0; top:0px; z-index:90; width:100%; height:100%; padding:0px; background:transparent; border-width:0px; transition:0.3s ease 0.7s; box-sizing:border-box;}
    #header .area_menu_all .btn_close{display:block; opacity:0; visibility:hidden; position:fixed; top:0px; left:0px; z-index:1; display:block; width:100%; height:100%; background:rgba(0,0,0,0.7); font-size:0px; transition:0.3s ease;}
	#header .area_menu_all .gnb{overflow-y:auto; position:absolute; top:0px; right:-80%; z-index:200; width:65%; height:100%; background:#fff; transition:0.7s ease; box-sizing: border-box;}
	#header .area_menu_all .gnb::before{content:"엠에스전기조명"; display:block; width:100%; margin-bottom:20px; padding:80px 0 30px 28px; text-align:left; font-weight:700; font-size:18px;; background:#b8936c; color:#fff; box-sizing:border-box;}
    #header .area_menu_all > ul > li:not(.gnb_cate){display:block;}
	#header .area_menu_all > ul > li{position:relative; display:block; padding:0px;}
    
	#header .area_menu_all > ul > li > a{position:relative; display:block; width:auto; height: auto; letter-spacing: -0.025em; line-height: 1.6; color: #222;padding: 14px 28px 14px; margin-left:0px; font-size:17px; font-weight:600;; text-align:left;}
    #header .area_menu_all > ul > li > a::after{position:absolute; top:50%; right:7%; display:inline-block; content:""; width:14px; height:14px; transform: translate(-50%, -50%); background: url(../images/common/icon_menu_arrow.svg) no-repeat center center; background-size: cover;}
    #header .area_menu_all > ul > li:nth-child(1) > a::after,
    #header .area_menu_all > ul > li:nth-child(3) > a::after,
    #header .area_menu_all > ul > li:nth-child(5) > a::after{display:none;}
    #header .area_menu_all > ul > li.active:nth-child(2) > a::after,
    #header .area_menu_all > ul > li.active:nth-child(4) > a::after{margin-top:-8px; transform: translateX(-6px) rotate(180deg);}
    #header .area_menu_all > ul > li:first-child > a{padding-left:28px;}
    #header .area_menu_all > ul > li:hover > a{color:#222;}
	#header .area_menu_all > ul > li > ul{opacity:1; visibility:visible; position:static; width:auto; margin:0; padding: 11px 30px; border-width:0px; transition:none; background:#f6f6f6;}
    #header .area_menu_all > ul > li:nth-child(4) > a + div > ul{display: block; text-align: left; height: auto;}
	#header .area_menu_all > ul > li > ul > li{display:block; margin:0px; min-width:initial;}
	#header .area_menu_all > ul > li > ul > li:hover > a,
	#header .area_menu_all > ul > li > ul > li:focus > a{color:#444;}
	#header .area_menu_all > ul > li > ul > li.only{width:100%;}
	#header .area_menu_all > ul > li > ul > li.active > a,
	#header .area_menu_all > ul > li > ul > li.active:hover > a,
	#header .area_menu_all > ul > li > ul > li.active:focus > a{color:#c89e62;}
	#header .area_menu_all > ul > li > ul > li > a{opacity:0; visibility: hidden; height:0; display:block; width:auto; padding:0; font-size:14px; text-align:left;}
	#header .area_menu_all > ul > li > ul > li > *{display:block; vertical-align:middle;}	
	#header .area_menu_all > ul > li > ul > li:last-child > a{border-bottom-width:0px;}
	#header .area_menu_all > ul > li > ul > li:last-child > ul{border-top:1px solid #d8d8d8; border-bottom-width:0px;}
	#header .area_menu_all > ul > li > ul > li > ul{padding:10px 15px;}
	#header .area_menu_all > ul > li > ul > li > ul > li{display:block;}
	#header .area_menu_all > ul > li > ul > li > ul > li > a{padding:2px 0px; color:#333;}
    #header .area_menu_all > ul > li > a + div > ul{display:block; height:auto; padding:11px 30px; background:#f6f6f6;}
    #header .area_menu_all > ul > li > div{display:none; opacity:0; visibility: hidden; height:0; width:100%;  position: relative; left: initial; top: initial; transform: initial; padding:0; }
    #header .area_menu_all > ul > li:nth-child(4) > div{height:auto;}
    #header .area_menu_all > ul > li > div > ul > li{padding:0; min-width:auto; border-top: 1px solid #ddd;}
    #header .area_menu_all > ul > li > div > ul > li > a{padding: 10px 0 10px; font-size: 14px; font-weight: 600;}
    #header .area_menu_all > ul > li > div > ul > li:first-child{border-top:0;}
    #header .area_menu_all > ul > li > .on + ul > li > a{opacity:1; visibility:visible; height:auto; padding:12px 20px 12px 20px;}
    #header .area_menu_all > ul > li > .on + div,
    #header .area_menu_all > ul > li .active + div{display:block; opacity:1; visibility:visible; height:auto;}
    #header nav .gnb > li > a.active + div > .sub_menu{display:block !important;}

	#header .area_menu_all .open{display:none; position:absolute; right:5px; top:5px; width:35px; height:35px; background:transparent; font-size:0px;}
	#header .area_menu_all .open:before,
	#header .area_menu_all .open:after{content:''; display:block; position:absolute; top:50%; left:50%; width:12px; height:2px; margin-top:-6px; background:#cfcece;}
	#header .area_menu_all .open:before{margin-left:-8px; transform:rotate(45deg); transform-origin:0 0;}
	#header .area_menu_all .open:after{margin-left:-5px;transform:rotate(-45deg); transform-origin:100% 0;}
	#header .area_menu_all .open.active{transform:rotate(180deg);}
	#header .area_menu_all .open:focus{outline:none;}
	#header .area_menu_all.active,
	#header .area_menu_all.active .btn_close{opacity:1; visibility:visible; transition-delay:0s;}
	#header .area_menu_all.active .gnb{right:0px; overflow-y:scroll;}
    #header .area_menu_all .banner,
    #header .area_menu_all .banner .title{display:none;}
    .submenu.none{display:none;}
    .area_menu_all,
    #header nav:hover .menu_bg{display:none;}
    
	.area_util{top:30%; right:60px;}
    .area_util ul{padding:6px 14px;}
    .area_util ul > li > a span{font-size:11px; padding:0 6px;}
    .area_util ul > li > a::after{height:8px; right:-8%;}
	.lnb{margin:0 auto 30px;}
    .header_menu_btn{right: 15px;}
}

@media screen and (max-width:1024px){
    
    .area_visual{margin-top:70px;}
    
}

@media screen and (max-width:750px){
	*[data-shop-list="default"] > li > a .percent{height:59px !important;}
	

	.lnb > ul > li > a{min-width:inherit; padding-left:25px; padding-right:25px;}

    #footer,
    #footer a{font-size:.8rem;}
    .company_wrap{display:block; padding-bottom:5%;}
    .company_info_item{width:100%;}
    .bank_info{padding-top:6%;}
    .bank_info .content{padding-top:2%;}
    #footer .copy .sns{position:relative; padding-top:4%;}
}

@media screen and (max-width:480px){
    #header{height:56px;}
	#header .logo > a{width:52px; aspect-ratio: 52/35; background-image: url('/images/common/symbol.png'); }
    .area_util{top:20%;}

	*[data-shop-list="default"] > li > a .percent{height:55px !important; padding:10px 13px !important;}
	
	.lnb > ul > li{margin:0 3px;}
	.lnb > ul > li > a{height:40px; padding-left:15px; padding-right:15px;}
}


@media screen and (max-width:372px){
    .company_info_item .link a::after{padding:0 6px;}
}