@charset "utf-8";

/* *************************************************************************************
*
* 전체 공통 checkbox, radio, select 등
* 
* **************************************************************************************/
html {font-size: 10px; font-family: 'Pretendard';}
body {min-width: 320px; color: #000; font-size: 1.6rem; line-height: 1.3; letter-spacing: -0.5px;}
img {max-width: 100%;}
input::placeholder, textarea::placeholder {font-size: inherit; color:var(--font-gray); font-weight:400;}
input[type="text"] {box-sizing: border-box;}
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;}
a {display: inline-block;}
select::-ms-expand{display:none;/*for IE10,11*/}
select {background-color: #fff; background-image:url("/images/site/NGLMS/common/select_arr.svg"); background-position:center right 1.5rem; background-size: 1.3rem; background-repeat: no-repeat;  -webkit-appearance: none; -moz-appearance: none; appearance: none; cursor: pointer;}
caption, legend {position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); margin: -1px;}
.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: 3px dashed red;transform: scale(0.98);} /* 20260710 */
.skip_nav {position: absolute; width: 100%; left: 0; z-index: 999; top: -50px;}
.skip_nav a:focus, .skip_nav a:active {position: absolute; left: 0;	top: 50px; height: 50px; line-height: 50px; width: 100%; z-index: 999; text-align: center; color: #fff; background:#333; overflow: visible; clip: unset;}
.elps {display: block; width: 100%; text-overflow: ellipsis; white-space: nowrap; overflow: hidden;}
.elps_2 {overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
.elps_3 {overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;}
.point {color: var(--primary-color) !important;}
.point2{color: var(--font-gray);}

/*checkbox, radio 커스텀*/
input[type="checkbox"] {-webkit-appearance: none; -moz-appearance: none; appearance: none; border:0; width: 2.6rem; height: 2.6rem; background:url("/images/site/NGLMS/common/checkbox_line.svg") no-repeat; background-size: 2.2rem; background-position: center; cursor: pointer;}
input[type="checkbox"]:checked {background-image: url("/images/site/NGLMS/common/checkbox_on.svg");}
input[type="radio"] {-webkit-appearance: none; -moz-appearance: none; appearance: none; border:0; display: inline-block; width: 2.2rem; height: 2.2rem; vertical-align: middle; background-image:url("/images/site/NGLMS/common/radio_icon.svg"); background-size: 2.2rem; background-repeat: no-repeat; cursor: pointer;}
input[type="radio"]:checked {background-image:url("/images/site/NGLMS/common/radio_on_icon.svg");}

/* input[type="number"] 우측 화살표 제거 */
input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {-webkit-appearance: none;margin: 0; }/* Chrome, Safari, Edge, Opera */
input[type="number"] {-moz-appearance: textfield;}/* Firefox  */
input[type="number"] { padding-left: var(--spacer2); padding-right: var(--spacer2); text-align: center; font-size: 1.6rem;}

.no_result {margin: 3rem 0; padding: 3rem 2rem; display:flex; align-items:center; justify-content: center; gap: 2rem 3rem; background-color: #f7f7f7; border-radius: var(--border-radius-20px);}
.no_result .img {width:6rem;}

/* margin */
.mt10{margin-top: 1rem !important;}
.mt20{margin-top: 2rem !important;}
.mb30{margin-bottom: 3rem !important;}

/* padding */
.pl20{padding-left: 2rem !important;}

/* *************************************************************************************
*
* 공통 color, border-radius
* 
* **************************************************************************************/
:root {
    --intro-primary-color: #26a3a1;
    --middle-primary-color: #4087d7;  
	--learn-primary-color: #2f5b8b;
    --primary-color: #4087d7;  
	--primary-point-color: #142D4B;
    --sub-primary-color: #203a59;

    --course-new: #4087d7;
    --course-ing: #29a5a3;
    --course-coming: #DA7735;
    --course-done:#444;
    --label-ing: #dc537d;
    --label-dead: #fb4c4c;
    --label-day: #444;
    --label-done: #dbdbdb;
    --progress-ing: #dc537d;
    --progress-done: #333;
	
    --font-gray: #888;
    --border-gray-color: #ddd;
    --bg-gray: #f1f1f1;
    --bg-danger: #fb4c4c;

    --border-radius-base: 1.5rem;
    --border-radius-20px: 2rem;
    --border-radius-25px: 2.5rem;
    --border-radius-30px: 3rem;
    --border-radius-50px: 5rem;
}

@media all and (max-width:1200px){
	html {font-size: 9px;}
    :root {
        --border-radius-base: 1rem;
        --border-radius-20px: 1.5rem;
    }
}

@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;}
    .js_mobile_check {display:block;}
}

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