@charset "utf-8";

/*
 *
 * file : 기본 설정 및 초기화
 * date : 240122
 * writer : eun
 *
 */

@font-face {
	font-family: 'Pretendard';
	font-weight: 900;
	font-display: swap;
	src:local('Pretendard Black'),
		url('./fonts/Pretendard-Black.woff2') format('woff2')
}

@font-face {
	font-family: 'Pretendard';
	font-weight: 800;
	font-display: swap;
	src:local('Pretendard ExtraBold'),
		url('./fonts/Pretendard-ExtraBold.woff2') format('woff2')
}

@font-face {
	font-family: 'Pretendard';
	font-weight: 700;
	font-display: swap;
	src: local('Pretendard Bold'),
	    url('./fonts/Pretendard-Bold.woff2') format('woff2')
}

@font-face {
	font-family: 'Pretendard';
	font-weight: 600;
	font-display: swap;
	src:local('Pretendard SemiBold'),
        url('./fonts/Pretendard-SemiBold.woff2') format('woff2')
}

@font-face {
	font-family: 'Pretendard';
	font-weight: 500;
	font-display: swap;
	src:local('Pretendard Medium'),
		url('./fonts/Pretendard-Medium.woff2') format('woff2')
}

@font-face {
	font-family: 'Pretendard';
	font-weight: 400;
	font-display: swap;
	src:local('Pretendard Regular'),
		url('./fonts/Pretendard-Regular.woff2') format('woff2')
}

@font-face {
	font-family: 'Pretendard';
	font-weight: 300;
	font-display: swap;
	src:local('Pretendard Light'),
		url('./fonts/Pretendard-Light.woff2') format('woff2')
}

@font-face {
	font-family: 'Pretendard';
	font-weight: 200;
	font-display: swap;
	src:local('Pretendard ExtraLight'),
		url('./fonts/Pretendard-ExtraLight.woff2') format('woff2')
}

@font-face{
	font-family:'WavvePADO-Regular';font-style:normal;font-weight:900;
	src:url('./fonts/WavvePADO-Regular.woff2') format('woff2'),
}

:root{
	--color-m:#002366;
	--color-dark:#001641;
	--color-light:#F3F6FA;
	--color-s:#eeeeee;
	--color-b: #bdbdbd;
	--color-point:#ea5616;
	--color-none:#f5f5f5;
	--color-tb: #d5d5d5;
}

html{min-width:320px}
body{margin:0;padding:0;font-family:'Pretendard', sans-serif;color:#333333}
html, h1, h2, h3, h4, h5, h6, form, fieldset, img {margin:0;padding:0;border:0}
h1, h2, h3, h4, h5, h6 {font-size:1em;font-family:'Pretendard', sans-serif}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display:block}
address{font-style:normal}
sub{font-size:1em}
ul, ol, dl, dt, dd{margin:0;padding:0;list-style:none}
legend {position:absolute;margin:0;padding:0;font-size:0;line-height:0;text-indent:-9999em;overflow:hidden}
label, input, button, select, img {vertical-align:middle;font-size:1em}
input, button {margin:0;padding:0;font-family: 'Pretendard', sans-serif;font-size:1em}
input[type="submit"]{cursor:pointer}
table{border-collapse:collapse;width:100%}
button{cursor:pointer;background-color:transparent;border:0}
button:focus{outline:0}
label, button{cursor:pointer}
img{max-width:100%}
textarea, select{font-family:'Pretendard', sans-serif;font-size:1em}
select{margin:0}
table{border-collapse:collapse}
table caption{display:inline-block !important;position:absolute;top:0;left:0;margin:0 !important;padding:0 !important;font-size:0 !important;line-height:0;border:0 !important;overflow:hidden !important}
table,td,th{border-spacing:0}
em, address{font-style:normal}
/*select::-ms-expand{display:none} select design 시에만 풀기 */
p {margin:0;padding:0;word-break:keep-all;line-height:1.4;}
hr {display:none}
pre {overflow-x:scroll;font-size:1.1em}
a {color:#333333;text-decoration:none;transition:.3s}
a:hover{text-decoration:none}
*, :after, :before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
input::placeholder,
textarea::placeholder{color:#a4a4a4}
input:disabled,
select:disabled{background-color:var(--color-none)}
input:read-only{background-color:var(--color-none);cursor:pointer}
input[type="text"]:read-only:focus{box-shadow:none;border-color:#e1e1e1}
input[type="text"],input[type="password"], textarea{transition:.3s ease-in-out;outline:none}
input[type="text"]:focus,
input[type="password"]:focus,textarea:focus,select:focus{box-shadow: 0 0 5px var(--color-light);border: 1px solid var(--color-m)}

.sound-only{display:inline-block !important;position:absolute;top:0;left:0;margin:0 !important;padding:0 !important;font-size:0 !important;line-height:0;border:0 !important;overflow:hidden !important}

.board-subject{text-overflow:ellipsis;overflow:hidden;-webkit-line-clamp:2;-webkit-box-orient:vertical;display:-webkit-box;font-size: 1.125rem; font-weight: 600;line-height: 1.4;}
.board-con{text-overflow:ellipsis;overflow:hidden;-webkit-line-clamp:3;-webkit-box-orient:vertical;display:-webkit-box;font-weight: 300;line-height: 1.4;color: #555;}
.board-img{position:relative;overflow:hidden}
.board-img img{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);transition:.3s;object-fit:cover;width:100%;min-width:100%;min-height:100%}

/* color */
.c-main{color:var(--color-m)}
.c-sub{color:var(--color-s)}
.c-point{color:var(--color-point)}
.c-light{color:var(--color-light)}
.c-black{color:#000}
.c-red{color:#ff0000}
.c-blue{color: #0006ff;}
.c-orange{color: #fa6f00;}

/* sort */
.txt-c{text-align:center}
.txt-l{text-align:left}
.txt-r{text-align:right}

/* response */
.mode-mobile{display:none}
.mode-pc{display:block}

.btn-basic{color:#fff;background:var(--color-m);min-width:135px;height:45px;padding:10px 20px;display:flex;align-items:center;justify-content:center;border-radius:5px;transition:.3s}
.btn-basic:hover{background-color:var(--color-dark)}
.btn-ico{display:flex;gap:5px}
.btn-basic.btn-cancel{background-color:#888}
.btn-basic.btn-danger{background-color:#bf0d00}

.radio-wrap{display:flex;align-items:center;flex-wrap:wrap;gap:10px}
.radio-box{position:relative;padding-left:25px}
.radio-box input[type="radio"]{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
.radio-box input[type="radio"] + label{cursor:pointer}
.radio-box input[type="radio"] + label:before{position:absolute;background-color:#fff;top:2px;left:0;display:inline-block;cursor:pointer;width:18px;height:18px;border-radius:10px;border:1px solid var(--color-m);content:""}
.radio-box input[type="radio"]:checked + label:before{content:"\e929";font-family:'xeicon';font-size:1em;color:#fff;background-color:var(--color-m)}

.item-number{counter-reset: section}
.item-number > li{position:relative;padding-left:35px;margin:5px 0}
.item-number > li::before{position:absolute;top:2px;left:0;background-color:#5a5959;border-radius:50%;color:#fff;counter-increment:section;content: counter(section);width:24px;height:24px;font-size:.875rem;display:flex;align-items:center;justify-content:center;text-align:center}

.item-dot > li{position:relative;padding-left:15px;margin:5px 0;text-align:left}
.item-dot > li::before{position:absolute;top:8px;left:0;background-color:#fff;border-radius:50%;border:2px solid #5a5959;width:8px;height:8px;content:""}

.img-cover{width: 100%; height: 100%; object-fit: cover;}
.img-center{display: block; margin: auto;}

/*말줄임표*/
.ellipsis{overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical;}

.mt-8{margin-top: 8px;}
.mtb-8{margin: 8px 0;}

@media all and (max-width:1400px){ /* PC */
}

@media all and (max-width:1200px){ /* PC - 노트북 */
}

@media all and (max-width:1024px){ /* 테블릿 */
}

@media all and (max-width:720px){
	.btn-basic{height:35px;min-width:80px}

	.radio-box{padding-left:20px}
	.radio-box input[type="radio"] + label:before{top:5px;width:15px;height:15px}

	.item-number > li{padding-left:30px}
	.item-number > li::before{top:0}

	.item-dot > li{padding-left:12px}
	.item-dot > li::before{width:6px;height:6px;top:7px}
}