@charset "utf-8";

#wrap{min-width: 320px; max-width: 2560px; margin: 0 auto; overflow: hidden; box-sizing: border-box; position: relative; }
#container{width: calc(100% - 210px); padding: 2.5em; box-sizing: border-box; margin-left: auto; background: #fff;}

/* 헤더 */
header{width: 210px; height: 100vh; text-align: center; position: fixed; background: #fff; border-right: 1px solid rgba(0, 0, 0, 0.1);
overflow-Y: auto; scrollbar-width: none; padding: 4em 1.5em; box-sizing: border-box; transition: 0.3s;}
header::-webkit-scrollbar{display: none;}
header .inner{width: 100%; height: 100%; display: flex; flex-direction: column; position: relative;}
header .inner .logo{width: 90%; margin: 0 auto;}
header .inner .logo a{display: block; width: 100%; height: 100%;}
header .inner .logo img{width: 100%;}
header .inner nav{margin: 2.5em 0 12.5em;} 
header .inner nav .gnb>li{width: 100%; padding: 0.25em 0;} 
header .inner nav .gnb>li+li{margin-top: 0px;}
header .inner nav .gnb li a{display: flex; justify-content: space-between; align-items: center; font-size: 17px; font-weight: 600; color: var(--basic);}
header .inner nav .gnb li a i{color: var(--basic); font-size: 20px; opacity: 0.3;}

header .inner nav ul li.drop-down{overflow: hidden;}
header .inner nav ul li.drop-down>a{padding: 0.75em; border-radius: 8px; font-weight: 800; border-radius:8px; transition:0.3s}
header .inner nav ul li.drop-down>a:hover{background:#eef3f6;} 
header .inner nav ul li.drop-down ul{margin-top: 5px; opacity: 0; height: 0; background: #eef3f6; border-radius: 16px; box-sizing: border-box;}
header .inner nav ul li.drop-down ul li{border: none; padding: 10px 5px;}
header .inner nav ul li.drop-down ul li a{font-size: 15px; opacity: 0.5; font-weight: 600;} 
header .inner nav ul li.drop-down ul li:hover a{opacity: 1;} 
header .inner nav ul li.drop-down.on ul{height: auto; opacity: 1; padding: 0.5em 1em;}     
header .inner nav ul li.drop-down.on i{transform: rotate(180deg);}    
             
header .inner nav .sns{display: flex; justify-content: center; gap: 10px; width: 90%; margin: 1em auto 0;}
header .inner nav .sns img{width: 100%;}
 
.member{display: flex; position: absolute; top: 12px; right: 2.5em; opacity: 0; visibility: hidden; transition: opacity 0.2s ease;}
.member.ready{opacity: 1; visibility: visible;}
.member li{padding: 0 0.5em;}
.member li:last-child{border-left: 1px solid rgba(0, 0, 0, 0.2);}
.member li a{font-size: 14px; font-weight: 500; color: var(--basic); opacity: 0.5;}
.member li a:hover{opacity: 1;}



header .inner .gnb_btn{cursor: pointer; width: 30px; right: 0; position: relative; z-index: 10; display: none;}
header .inner .gnb_btn span{display: block; width: 100%; margin-left: auto; height: 2px; background: rgba(0, 0, 0, 0.3); border-radius: 50px; transition: 0.3s; transform-origin: 0, 0;}
header .inner .gnb_btn span.on1{transform: rotate(45deg) translate(3px, 7px);}
header .inner .gnb_btn span.on2{transform: rotate(-45deg) translate(2.5px, -7px);}
header .inner .gnb_btn span.on3{opacity: 0;}
header .inner .gnb_btn span:nth-child(2){margin: 5px 0; margin-left: auto;}

/* header .bg{position: absolute; bottom: 0; left: 0; width: 100%; height: 70%; background: var(--basic);}
header .bg.on{bottom: auto;}
header .bg video{width: 100%; height: 100%; object-fit: cover; -webkit-mask-image: linear-gradient(to top, rgba(24,24,24,1), rgba(24,24,24,0));
mask-image: linear-gradient(to top, rgba(24,24,24,1), rgba(24,24,24,0)); vertical-align: bottom;} */

/* 메인 */
main{width: 100%; height: 500px; margin-left: auto; overflow: hidden; display: flex; justify-content: center;
align-items: center; position: relative; background: var(--basic); border-radius: 24px; background: #fff;}
main .text_wrap{text-align: center; position: relative; z-index: 1;}
main .text_wrap h1{color: #fff; line-height: 1.3; font-size: clamp(30px, 2.083333vw, 40px); font-weight: bold;}
main .bg{position: absolute; bottom: 0; left: 0; width: 100%; height: 100%;}
main .bg video{width: 100%; height: 100%; object-fit: cover;}

.main_db_wrap{display: flex; justify-content: center; border-bottom: 1px solid rgba(0, 0, 0, 0.1);}
.main_db_wrap .inner{display: flex; justify-content: space-between; align-items: center; padding: 1.5em 1em; box-sizing: border-box; max-width: 1024px; 
width: 100%; gap: 1em;} 
.main_db_wrap .inner .logo{width: 50px;}           
.main_db_wrap .inner .logo img{width: 100%;} 
.main_db_wrap .inner ul{display: flex; align-items: flex-end; width: 100%; gap: 0.75em;}
.main_db_wrap .inner ul li{width: calc(50% - 200px);}
.main_db_wrap .inner ul li h2{font-size: 18px; font-weight: 600; margin-bottom: 5px; text-align: left;}
.main_db_wrap .inner ul li input{width: 100%; height: 45px; border: none; box-sizing: border-box; background: #eef3f6; font-family: "Wanted Sans"; border-radius: 5px;}
.main_db_wrap .inner ul li input[type="text"]{font-size: 14px; font-weight: 600;  padding-left: 10px;}
.main_db_wrap .inner ul li input::placeholder{font-size: 14px; font-weight: 600;}
.main_db_wrap .inner ul li input:focus{outline: none;}
.main_db_wrap .inner ul li.select{width: 200px;}
.main_db_wrap .inner ul li select{width: 100%; height: 45px; border: none; box-sizing: border-box; background: #eef3f6; font-family: "Wanted Sans";
border-radius: 5px; padding: 5px; font-weight: 600;}
.main_db_wrap .inner ul li.db_submit{width: 200px;}
.main_db_wrap .inner ul li.db_submit input{width: 100%; height: 45px; color: #fff; font-size: 18px; font-weight: 500; cursor: pointer; 
border-radius: 5px; background: linear-gradient(270deg, #57aef1, #90d0fc, #e295fd, #90d0fc); background-size: 300% 100%;}

 





  
                  
/* 섹션 */
#brand{width: 100%; display: flex; flex-direction: column; row-gap: 2.5em;}
#brand .group{position: relative; clip-path: inset(0 0 -9999px 0);}
#brand .group .inner{box-sizing: border-box;}  
#brand .group .inner>h1{text-align: center; font-size: clamp(28px, 1.66666666vw, 32px); font-weight: 800; color: var(--basic); margin: 2.5em 0 0.75em;}

#brand .group .brand-swiper .swiper-wrapper{transition-timing-function: linear;}
#brand .group .brand-swiper .swiper-wrapper .swiper-slide{display: flex; flex-direction: column; border-radius: 16px; overflow: hidden;
background: #fff; padding: 1em; box-sizing: border-box; height: auto; border: 1px solid rgba(0, 0, 0, 0.1);}
#brand .group .brand-swiper .swiper-wrapper .swiper-slide .img_wrap{border-radius: 12px; overflow: hidden; position: relative; margin: 0 auto;}
#brand .group .brand-swiper .swiper-wrapper .swiper-slide .img_wrap .img{width: 100%; height: 100%; object-fit: cover;}
#brand .group .brand-swiper .swiper-wrapper .swiper-slide .img_wrap .img img{width: 100%; height: 100%; object-fit: cover; transition:0.3s}
#brand .group .brand-swiper .swiper-wrapper .swiper-slide:hover .img_wrap .img img{transform:scale(1.1)}
#brand .group .brand-swiper .swiper-wrapper .swiper-slide .img_wrap .top-box{width:120px; top:0; left:50%; transform:translateX(-50%); text-align: center; border-radius:0 0 15px 15px;
background: #fff; color: var(--basic); position:absolute; font-size: 14px; font-weight: bold; height: 30px; line-height: 30px; display: none;}

#brand .group .brand-swiper .swiper-wrapper .swiper-slide .img_wrap .exper{position: absolute; width: 140px; height: 35px; border-radius: 50px;
bottom: 20px; right: 20px; background: #fff; display: flex; justify-content: center; align-items: center; font-size: 14px; font-weight: 600; display: none;}
#brand .group .brand-swiper .swiper-wrapper .swiper-slide .img_wrap .exper .icon{margin-right: 5px;}

#brand .group .brand-swiper .swiper-wrapper .swiper-slide .title_wrap{display: flex; align-items: center; margin: 1em 0 0.25em 4px;}
#brand .group .brand-swiper .swiper-wrapper .swiper-slide .title_wrap .logo{margin-right: 5px; max-width: 80px; display: none;}
#brand .group .brand-swiper .swiper-wrapper .swiper-slide .title_wrap .logo img{width: 100%; height: 100%; object-fit: cover;}
#brand .group .brand-swiper .swiper-wrapper .swiper-slide .title_wrap h1{font-size: 20px; font-weight:600;  line-height:1.3;}

#brand .group .brand-swiper .swiper-wrapper .swiper-slide .text_wrap{margin-left: 4px;}
#brand .group .brand-swiper .swiper-wrapper .swiper-slide .text_wrap h2{font-size: 15px; line-height: 1.35; font-weight:500; padding: 0.25em 0; white-space: pre-line; color: #666;}
#brand .group .brand-swiper .swiper-wrapper .swiper-slide .text_wrap p{font-size: 13px; opacity: 0.5; line-height: 1.4; font-weight: 500; margin-top: 0.25em;}

#brand .group .brand-swiper .swiper-wrapper .swiper-slide .category_wrap{margin: 1em 0 0 4px;display: flex; gap:5px; row-gap: 10px; flex-wrap: wrap;}
#brand .group .brand-swiper .swiper-wrapper .swiper-slide .category_wrap span{font-size: 12px; color: #5b5b5b; padding: 8px 15px; border-radius: 50px;
background: rgba(0, 0, 0, 0.05); font-weight: 500;}

/* 푸터 */
footer{padding: 2.5em 0;}
footer .inner{display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 25px; padding: 0 5%; box-sizing: border-box;}
footer .inner .logo{width: clamp(100px, 6.5104166666vw, 125px);}
footer .inner .logo img{width: 100%;}
footer .inner ul{display: flex; flex-wrap: wrap; gap: 25px; justify-content: center;}
footer .inner ul li strong{font-size: 14px; opacity: 0.5;}
footer .inner ul li span{font-size: 15px; font-weight: 600;}
footer .inner cite{font-size: 13px; font-weight: 600; font-style: italic; opacity: 0.5;}

/* 전화문의 */
/* .tel{width: 60px; height: 60px; position: fixed; right: 0; bottom: 15%; color: #fff;
background: var(--point); display: none;}
 */ 




#bo_gall .category_wrap{display: none !important;}
#bo_gall .img{filter: brightness(0.97);}

#bo_gall .group .brand-swiper .swiper-wrapper .swiper-slide .title_wrap h1{font-size:17px; !important; font-weight: 600; width: 80%;}


/* 반응형 */
@media all and (min-width: 1921px){

}

@media all and (max-width: 1280px){

}

@media all and (max-width: 1024px){
#container{width: 100%; margin-top: 80px;}

header{width: 100%; height: 70px; top: 0; left: 0; z-index: 99999; border-radius: 0; padding: 0 2em; overflow: visible;  border-bottom: 1px solid rgba(0, 0, 0, 0.1);}
header .inner{display: flex; justify-content: space-between; align-items: center; flex-direction: row; height: 100%;}
header .inner .logo{width: 10%; min-width: 80px; margin: 0; position: relative; z-index: 1;}
header .inner .gnb_btn{display: block;}
header .inner nav{position: fixed; width: 100%; height: 100vh; top: -1500px; left: 50%; transform: translateX(-50%); background: #fff;
backdrop-filter: blur(10px); overflow-Y: scroll; scrollbar-width: none; margin: 0; z-index: 1;}
header .inner nav::-webkit-scrollbar{display: none;}
header .inner nav.on{top: 0;}
header .inner nav .gnb{width: 90%; margin: 5em auto 0;}
header .inner nav .gnb>li{border-bottom: 1px solid rgba(255, 255, 255, 0.3);}
header .inner nav .gnb>li:last-child{border: none;}
header .inner nav .gnb>li{padding: 0.5em 1em; box-sizing: border-box;}
header .inner nav .gnb>li+li{margin-top: 0;}
header .inner nav ul li.drop-down ul{opacity: 1; display: none;}
header .inner nav ul li.drop-down.on ul{height: auto; display: block;}

header .inner nav .sns{width: 100%; margin: 1em auto 2em;}
header .inner nav .sns img{max-width: 50px;} 

.member{justify-content: center; position: static;}    
}

@media all and (max-width: 768px){
br{display: none;}
.pcbr{display: block;}
#container footer .inner{flex-direction: column; gap:0; row-gap: 25px; text-align: center;}

#brand .group .brand-swiper{width: 80%; margin: 0 auto;}

.main_db_wrap .inner{padding: 1.5em 0; gap: 1em;}
.main_db_wrap .inner .logo{display: none;}
.main_db_wrap .inner ul{gap: 0.5em; flex-wrap: wrap;} 
.main_db_wrap .inner ul li{width: calc(100%/3 - 0.3333em);}
.main_db_wrap .inner ul li h2{font-size: 16px;}
.main_db_wrap .inner ul li input{height: 40px;}
.main_db_wrap .inner ul li input[type="text"]{font-size: 13px;}
.main_db_wrap .inner ul li input::placeholder{font-size: 13px;}
.main_db_wrap .inner ul li.select{width: calc(100%/3 - 0.3333em);}
.main_db_wrap .inner ul li select{width: 100%; height: 40px;} 
.main_db_wrap .inner ul li.db_submit{width: 100%;}
.main_db_wrap .inner ul li.db_submit input{height: 40px; font-size: 16px;}
}

@media all and (max-width: 500px){
#container{margin-top: 65px; padding: 1em;}

header{height: 50px; padding: 0 1.5em;}
header .inner .logo{min-width: 70px;}

main{height: 400px;}

#brand{row-gap: 0em;}
#brand .group .inner>h1{margin: 2.5em 0 0.5em;}
#brand .group .brand-swiper{width: 85%;}
#brand .group .brand-swiper .swiper-wrapper .swiper-slide .img_wrap .top-box{width: auto; font-size: 12px; padding: 0 30px;}
#brand .group .brand-swiper .swiper-wrapper .swiper-slide .title_wrap .logo{width: 70px;}
#brand .group .brand-swiper .swiper-wrapper .swiper-slide .title_wrap{margin: 0.75em 0;}
#brand .group .brand-swiper .swiper-wrapper .swiper-slide .title_wrap h1{font-size: 17px;}
#brand .group .brand-swiper .swiper-wrapper .swiper-slide .text_wrap h2{padding: 0.75em 0; font-size: 15px;}
#brand .group .brand-swiper .swiper-wrapper .swiper-slide .text_wrap p{margin-top: 0.75em; font-size: 14px;}
#brand .group .brand-swiper .swiper-wrapper .swiper-slide .category_wrap{margin: 1em 0 0;}
#brand .group .more{position: static; margin: 2em auto 0; width: 90%; height: 50px; line-height: 50px;}

footer .inner{padding: 10% 5%;}
footer .inner ul{gap: 15px;}

#container footer{padding-bottom: 10%;}
}