@charset "utf-8";

/*
* File       : site-custom.css
* Author     : B-WORKER
*/

/* color set */
[data-color="01"]{color:var(--c-01);}

/* button common */
*.basic-btn{overflow: hidden; display:inline-flex; justify-content:space-between; align-items:center; position:relative; padding-left: 30rem; font-weight: 600; color: var(--b-01); transition: var(--trans-01);}
*.basic-btn::before {opacity: 0; visibility: hidden; position: absolute; content:''; right:0; top:0; display: block; width: 75rem; height: 100%; background: var(--c-01); border-radius: 100rem; transition: var(--trans-01);}
*.basic-btn span {z-index: 1; position: relative;}
*.basic-btn i {z-index: 1; position: relative; width: 75rem; height: 75rem; margin-left: 25rem; border-radius: 100%; border: 1px solid var(--b-01); background-image: url(../img/layout/ic-more.svg); background-repeat: no-repeat; background-position: center; background-size: 25rem; transition: var(--trans-01);}
*.basic-btn.white {color: var(--f-01);}
*.basic-btn.white i {border-color: var(--f-01); background-image: url(../img/layout/ic-more_w.svg);}
*.basic-btn--full.white::before {background: var(--f-01);}
*.basic-btn--full.white i {background-color: var(--f-01); background-image: url(../img/layout/ic-more.svg);}

*.basic-btn:hover {color: var(--f-01);}
*.basic-btn:hover::before {opacity: 1; visibility: visible; width: 100%;}
*.basic-btn:hover i { background-image: url(../img/layout/ic-more_w.svg); border-color: transparent;}
*.basic-btn--full.white:hover {color: var(--b-01);}
*.basic-btn--full.white:hover i {background-image: url(../img/layout/ic-more.svg);}


@media (max-width: 540px){
	*.basic-btn {padding-left: 20rem; font-size: 13rem;}
	*.basic-btn i {width: 50rem; height: 50rem; margin-left: 15rem; background-size: 15rem;}
}