@charset "utf-8";
@import '../css/reset.css';

html {font-size: 10px; font-weight: normal; font-family: 'Paperlogy';}
body {min-width: 340px; color: #000; font-size: 1.6rem; letter-spacing: -0.5px;}
img {max-width: 100%;}
caption, legend, .blind {position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); margin: -1px;}
.elps {width: 100%; text-overflow: ellipsis; white-space: nowrap; overflow: hidden;}
.elps2 {display: -webkit-box !important; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis;}
.elps3 {display: -webkit-box !important; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis;}
.ta_l {text-align: left !important;}
.ta_r {text-align: right !important;}
.ta_c {text-align: center !important;}
.fL {float:left;}
.fR {float:right;}
.red {color: #d32532;}

/*input, select, textarea, label*/
input::placeholder, textarea::placeholder {font-size: 1.6rem; color: #888; font-weight:400;}
input[type="text"] {box-sizing: border-box;}
input[type="number"] {-moz-appearance: textfield;}
input::-webkit-inner-spin-button {-webkit-appearance: none;}
input::-webkit-outer-spin-button {-webkit-appearance: none; margin: 0;}
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {transition: background-color 5000s ease-in-out 0s; -webkit-transition: background-color 9999s ease-out; -webkit-box-shadow: 0 0 0px 1000px white inset !important;}
select::-ms-expand {display:none; /*for IE10,11*/}
select {background-color: var(--theme-bg); background-image:url("../img/common/select_arr.svg"); background-position:center right 1.5rem; background-size: 1.2rem; background-repeat: no-repeat;  -webkit-appearance: none; -moz-appearance: none; appearance: none; cursor: pointer;}
label {display: inline-block; vertical-align: middle;}


/*접근성 focus*/
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {outline: 2px dashed var(--focus-color); transition: none !important;}
.swiper-slide > a:focus-visible {border: 2px dashed var(--focus-color); outline: none;}

/* *************************************************************************************
*
* root 변수
* 
* **************************************************************************************/
:root {
    --primary-color:#2b0896;
    --secondary-color: #FD5E36;
	--red: #d32532;
    --focus-color: #000942;
}


/* *************************************************************************************
*
* 반응형
* 
* **************************************************************************************/
@media all and (max-width:1280px){
	html {font-size: 9px;}
    :root {
        --border-radius-base: 2rem;
    }
}

@media all and (max-width:1024px){
    * {-webkit-tap-highlight-color: transparent;}
    a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {outline: none;}
}

@media all and (max-width:480px){
    html {font-size: 8px;}
    select {background-position: center right 1rem;}
}