@charset "utf-8";

/*
* File       : site-custom.css
* Author     : B-WORKER
*      
 * SUMMARY:
 * 1) SITE CUSTOM 
    2) 사이트 전반적으로 함께 쓰이는 클레스 들 ex)버튼스타일
*/

/* color set */
[data-color="01"]{color: var(--c-01) !important;}
[data-bg="gray"]{background-color: #f6f6f6;}
[data-bg="white"]{background-color: #fff;}
[data-bg="black"]{background-color: #292929;}


/* button common */
*.basic-btn{display:inline-flex; justify-content:space-between; align-items:center; position:relative; box-sizing:border-box; padding:25rem 28rem; background:var(--c-01); border:1px solid var(--c-01); font-weight:600; font-size:16rem; color:var(--f-01); transition: var(--trans-01);}
*.basic-btn:hover{background:var(--c-01); color:#fff !important; border-color:var(--c-01);}
*.basic-btn::after{content:""; display:block; height:11rem; margin-left:20rem; background-position:50% 50%; transform:rotate(-90deg); min-width:11rem; background-image:url(../img/common/arrow-basic_w.svg); background-repeat:no-repeat;}


.base-btn{display:inline-flex; gap: 18rem; justify-content:space-between; border-radius: 100rem; align-items:center; position:relative; box-sizing:border-box; padding:25rem 28rem;  font-weight:600; font-size:16rem; transition: var(--trans-01);}
.base-btn.red{background-color: var(--c-01);}
.base-btn.gray{background-color: #f6f6f6;}
.base-btn span{ font-size: 16rem; font-weight: 700;}
.base-btn.red span{color: #fff;}
.base-btn.gray span{}

.link-button{width: 100rem; height: 100rem; border-radius: 100%; transition: all .3s; border:1px solid #ddd; box-sizing: border-box; display: flex; align-items: center; justify-content: center;}
.link-button *{transition: all .3s;}
.link-button:hover{background-color: var(--c-01); border-color: var(--c-01);}
.link-button:hover *{stroke: #fff !important;}

.common-pop{position:fixed;opacity:0;top:0px;left:0px;z-index: -1;width:100%;height:100%;background:rgba(0,0,0,0.5);}
.common-pop > div{position:absolute; top:50%; left:50%; margin:0 auto; box-shadow:26px 18px 49px rgba(0,0,0,0.2); transform:translate(-50%, -50%); max-width:540rem;}
.common-pop.active{opacity:1;z-index:99;transition: opacity 0.3s ease-out 0s;}
.common-pop .close i{display:block;margin-left: 8rem; width: 33rem;height: 33rem; background: url(../img/sub/pop-close.svg) no-repeat 50% 50%;background-size: 28rem;font-size: 0;background-color: transparent;}
.common-pop .close{display: flex; align-items: center; font-size: 11rem; font-weight: 800; justify-content: right; margin-bottom: 10rem;}
.common-box{background-color: #fff; border-radius: 20rem; box-sizing: border-box; padding: 30rem 28rem;}


@media (max-width: 540px){
	*.basic-btn{padding:19rem 20rem;font-size:14rem;min-width:160rem;display: flex;}
}

/*  */

@media (max-width:1480px){

}
@media all and (max-width:1023px){
	.base-btn {
		gap: 18rem;
		padding: 16rem 22rem;
		font-size: 16rem;
	}
.base-btn span {
    font-size: 14rem;
}

}

@media (max-width: 540px){
.base-btn span {
    font-size: 13rem;
}
.base-btn {
    gap: 18rem;
    padding: 13rem 13rem 13rem 20rem;
    font-size: 16rem;
}



}