@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);}


/* button common */
*.basic-btn{display:inline-flex; justify-content:space-between; align-items:center; position:relative; box-sizing:border-box; padding:23rem 25rem; background:var(--c-01); border:1px solid var(--c-01); font-weight:600; font-size:15rem; color:var(--f-01); min-width:190rem; 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;}

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



/*  */
.button-style{width: 202rem;height: 66rem; border:0; border-radius: 90rem; backdrop-filter: blur(2rem); box-sizing: border-box;  position: relative;  background: rgba(255, 255, 255, 0.30); color: #fff; overflow: hidden; display: flex; align-items: center; }
.button-style i{position: absolute;/*  right: 4rem; */ top: 50%; transform: translateY(-50%); width: 100%; height: 100%; clip-path: circle(26rem at 171rem 33rem ); background-color: var(--c-01); transition: all .3s;}
.button-style span{color: #fff; font-size: 16rem; padding-left: 30rem; }
.button-style *:not(i){z-index: 2;}
.button-style svg{position: absolute; top: 51%; transform: translateY(-50%); right: 19rem;}

.link-button{width: 66rem; height: 66rem; border-radius: 100%; border:3rem solid #e9e9e9; box-sizing: border-box; display: flex; align-items: center; justify-content: center; transition: all .3s;}
.link-button::before{content: ""; width: 22rem; height: 15rem; background: url(../img/layout/ic-link_gr.svg) no-repeat; background-size: 100%; display: block;}
.link-button.on,.link-button:hover{background-color: var(--c-02); border-color: var(--c-02);}
.link-button.on::before,.link-button:hover::before{background:url(../img/layout/ic-link.svg) no-repeat; background-size: 100%; ;}
 
@media (hover: hover){
    .button-style:hover i{clip-path: circle(186rem at 171rem 33rem )}
}

@keyframes blink {
    50% {
        opacity: 0;
      }
}

@media (max-width:1480px){

}
@media all and (max-width:1023px){
	.button-style span{font-size: 14rem;}

    .link-button{width: 54rem; height: 54rem;}
    .link-button::before{width: 20rem; height: 14rem;}
}
@media (max-width:860px){

}
@media (max-width: 540px){
    .button-style{width: 160rem; height: 52rem; }
    .button-style span{padding-left: 24rem;}
    .button-style i{clip-path: circle(22rem at 133rem 26rem );}
    .button-style svg{width: 15rem;}
    
}