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

* {-webkit-tap-highlight-color: transparent;}
html {font-size: 10px; font-weight: normal; font-family: 'SCoreDream';}
body {min-width: 320px; color: #000; font-size: 1.7rem; letter-spacing: -0.5px; line-height: 1.4;}
img {max-width: 100%;}
.elps {display: block; 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;}
.pos-relative {position: relative;}
.ta_l {text-align: left !important;}
.ta_r {text-align: right !important;}
.ta_c {text-align: center !important;}

/* font 색상 */
.required {display: inline-block; margin: 0 0.5rem; color: #d93363 !important; font-size: 1.8rem;}
.point {color: var(--primary-color) !important;}
.import {color: #dd6da5 !important;}

/*input style*/
input::placeholder, textarea::placeholder {font-size: 1.6rem; color: #888; font-weight:400;}
input[type="text"], input[type="password"], input[type="number"] {height: 5rem; padding: 0 1.5rem; border-radius: 1rem; border: 1px solid #dbdbdb; 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;}

/* input[type="checkbox"] */
.checkbox_group {display: inline-flex; align-items: center; gap: 0.4rem; margin-right: 1.5em;}
input[type="checkbox"] {width: 2.6rem; height: 2.6rem; background-image: url("../images/common/input_check.svg"); background-size: 2.2rem; background-position: center; background-repeat: no-repeat; appearance: none;} 
input[type="checkbox"]:checked {background-image: url("../images/common/input_check_on.svg");}
input[type="checkbox"].agree_checkbox {width: 3rem; height: 3rem; background-size: 2.6rem; background-image: url("../images/common/agree_check.svg");}
input[type="checkbox"].agree_checkbox:checked {background-image: url("../images/common/agree_check_on.svg");}

/* input[type="radio"] */
.radio_group {display: inline-flex; align-items: center; gap: 0.4rem; margin-right: 1.5rem;}
input[type="radio"] {width: 2.6rem; height: 2.6rem; background-image: url("../images/common/input_radio.svg"); background-size: 2.2rem; background-position: center; background-repeat: no-repeat; appearance: none;}
input[type="radio"]:checked {background-image: url("../images/common/input_radio_on.svg");}

/* select style */
select {height: 5rem; padding: 0 3rem 0 1.5rem; color: #888; background-color: #fff; border-radius: 1rem; border: 1px solid #dbdbdb; box-sizing: border-box;}
select::-ms-expand {display:none; /*for IE10,11*/}
select {background-image:url("../images/icon/arr_down.svg"); background-position:center right 1rem; background-size: 1.2rem; background-repeat: no-repeat;  -webkit-appearance: none; -moz-appearance: none; appearance: none; cursor: pointer;}
select option {color: #000;}

/* 접근성 */
caption, legend, .blind {position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); margin: -1px;}
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;}

/* ico */
.ico_scrap {display: inline-block; padding-left: 2rem; background-image: url("../images/icon/ico_bookmark.png"); background-position: left center; background-size: 1.5rem; background-repeat: no-repeat;}
.ico_scrap.on {background-image: url("../images/icon/ico_bookmark_on.png");}
.ico_heart {display: inline-block; padding-left: 2rem; background-image: url("../images/icon/ico_heart.png"); background-position: left center; background-size: 1.7rem; background-repeat: no-repeat;}
.ico_heart.on {background-image: url("../images/icon/ico_heart_on.png");}

/* 카테고리 tag */
.category .tag {display: inline-flex; align-items: center; justify-content: center; height: 2.8rem; padding: 0.35rem 1rem; font-size: 1.5rem; font-weight: 500; border-radius: 0.5rem;}
.category .tag.gov {color: #1987db; background-color: #daf0ff;}
.category .tag.job {color: #004a25; background-color: #ceede4;}
.category .tag.cohort {color: #1d4c9c; background-color: #e4ebfb;}
.category .tag.edu {color: #733641; background-color: #ffcdd6;}
.category .tag.primary {color: #fff; background-color: var(--primary-color);}
.category .tag.approve {color: #db5e00; border: 2px solid #db5e00; background-color: #fff;}
.category .tag.pay {color: #555; background-color: #ebebeb;}
.category .tag.coupon {background-color: #c5e5df; color: #164c45;}
.category .tag.card {color: #1d284f; background-color: #c4daf4;}

/* 진행상황 tag */
.progress .state {display: inline-flex; align-items: center; justify-content: center; padding: 0.35rem 1rem; font-size: 1.5rem; font-weight: 500; color: #fff; text-align: center; border-radius: 0.5rem;}
.progress .state.coming {background-color: #5646b3;}
.progress .state.open {background-color: #ce336c;}
.progress .state.closed {background-color: #777;}

/* 슬라이드 컨트롤러*/
.slide_controls .slide_btn {display: inline-flex; align-items: center; justify-content: center; width: 4.5rem; height: 4.5rem; background-color: #fff; border-radius: 50%; z-index: 1;}
.slide_controls .slide_btn img {width: 1rem;}
.slide_controls {display: flex; gap: 0.8rem; flex-wrap: wrap;}
.slide_controls .swiper-pagination {position: initial; width: 10rem; height: 4.5rem; background-color: #fff; border-radius: 5rem; color: #555; font-size: 1.5rem; font-weight: 500; line-height: 4.5rem; text-align: center;}
.slide_controls .swiper-pagination-current {font-weight: 800;}
.slide_controls .swiper-pagination-lock {display: block;}
.slide_controls .slide_btn.swiper-button-lock {display: none;}
.slide_controls.shadow .swiper-pagination {box-shadow: 0 0 30px rgba(0, 0, 0, 0.15);}
.slide_controls.shadow .slide_btn {box-shadow: 0 0 30px rgba(0, 0, 0, 0.15);}

/* *************************************************************************************
*
* root 변수
* 
* **************************************************************************************/
:root {
    --primary-color:#725BCB; 
    --secondary-color: #FD5E36;
	--red: #d32532;
    --focus-color: #000942;
    --border-color: #dbdbdb;
    --border-radius-base: 2rem;
}

/* *************************************************************************************
*
* 반응형
* 
* **************************************************************************************/
@media all and (max-width:1600px){
	html {font-size: 9px;}
}

@media all and (max-width:1024px){
    html {font-size: 8px;}
    a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {outline: none;}

    .category .tag {padding: 0.8rem 1rem 0.4rem;}
    .progress .state {padding: 0.8rem 1rem 0.4rem;}
}

@media all and (max-width:480px){
    :root {
        --border-radius-base: 1.5rem;
    }
    input::placeholder, textarea::placeholder {font-size: 1.5rem;}
    .slide_controls .slide_btn {width: 3.5rem; height: 3.5rem;}
    .slide_controls .swiper-pagination {width: 8rem; height: 3.5rem; line-height: 3.5rem;}
}