@charset "UTF-8";

/* ======================= btn area ======================= */
/* common */
.btn{ 
    position: relative; 
    display: inline-block; *display: inline; *zoom: 1; 
    min-width: 80px; 
    height: 40px; line-height: 40px; 
    padding: 0 15px; border: none; border-radius: 100px; 
    transition: all 0.15s ease-in-out;
    background: transparent;
 }
.btn span{ font-family: 'Lato', san-serif; font-weight: 400; font-size: 16px; text-align: center; text-transform: uppercase; }

.btn * { vertical-align: middle; }
.btn:active { transform: scale(0.98); }

.btn_red{ 
    background: #bd0117;
    box-shadow: inset 0 3px 4px rgba(149, 31, 45, 1), 
                inset 0 -3px 4px rgba(125, 6, 20, 1); 
 }
.btn_red:hover{ 
    background: rgb(153, 5, 22);
 }
.btn_red:active{ 
    box-shadow: inset 0 3px 4px rgb(127, 6, 20), 
                inset 0 -2px 4px rgb(184, 38, 55);
 }
.btn_red span{ color: #eee; margin-bottom: 2px; }


.btn_transparent{ 
    background: transparent;
    backdrop-filter: blur(4px);
 }
.btn_transparent i { 
    transition: inherit;
    color: #eee;
    font-size: 22px !important;
 }
.btn_transparent i:hover,
.btn_transparent i:active{ 
    color: #aaa !important;

    /* box-shadow: inset 0 2px 2px #aaa, 
                inset 0 -2px 2px #aaa; */
 }


.btn.large{ 
    min-width: 250px;
    height: 45px;
    line-height: 45px;
 }
.btn.small{ 
    min-width: auto;
    height: auto;
    padding: 5px 10px;
    line-height: 1em;
    font-size: 11px;
 }

/* btn ico */
.btn.ico_l{ text-align: right; display: inline-flex; align-items: center; }
.btn.ico_l img, .btn.ico_l i{ margin-right: 7px; }

.btn.ico_r{ text-align: left; display: inline-flex; align-items: center; }
.btn.ico_r img, .btn.ico_r i{ margin-left: 7px; }

/* icon이 img일 때 */
.btn img{ position: relative; height: calc(100% - 20px); }
.btn.ico_o{ min-width: 10px; }
.btn.ico_o img{ position: absolute; top: 10px !important; left: 10px; }
.btn_red img, .btn_outline:hover img{ filter: invert(1); transition: filter 0.15s ease-in-out; }

/* icon이 i일 때 */
.btn i{ font-size: 16px; }
.btn.ico_o i{ position: absolute; top: 10px !important; left: 0; width: 40px; text-align: center; }
/* ====================== btn area done ======================= */