body { font-family:'Pretendard', sans-serif; background:#f2f4f8; margin:0; text-align:center; touch-action:manipulation; }

input { width:90%; max-width:500px; padding:18px; font-size:1.5em; border:2px solid #bbb; border-radius:10px; outline:none; }

.keyboard { position:fixed; bottom:-100%; left:0; width:100%; background:#eef2f7; box-shadow:0 -3px 15px rgba(0,0,0,0.25); transition:bottom 0.4s ease; z-index:1000; user-select:none; padding:14px 0 18px; }
.keyboard.show { bottom:0; }
.keyboard-row { display:flex; justify-content:center; margin:10px 0; }

.key { background:#fff; border:1px solid #bbb; border-radius:10px; margin:5px; width:80px; height:80px; color:#000; font-size:1.8em; font-weight:700; cursor:pointer; box-shadow:0 2px 5px rgba(0,0,0,0.01); transition:background 0.25s, transform 0.1s; display:flex; flex-direction:column; justify-content:center; align-items:center; }
.key small { font-size:0.75em; margin-top:3px; }
.key:active { background:#dfe9ff; transform:scale(1.07); }

.key.shift { background:#e5ecfa; color:#000; font-weight:700; }
.key.mode { background:#e6f4ea; color:#000; font-weight:700; }
.key.enter { background:#faf3e3; color:#000; font-weight:700; }
.key.back { background:#fae7e7; color:#000; font-weight:700; }
.key.close { background:#dddddd; color:#000; font-weight:700; text-shadow:none !important; border:1px solid #bbb !important; opacity:1 !important; }

.key.shift.active { background:#f2f2f2; }

.keyboard.korean { background:#f1f6ff; }
.keyboard.korean .key span { color:#007bff; font-weight:800; }
.keyboard.korean .key small { color:#666666; font-weight:600; }

.keyboard.english { background:#f8faff; }
.keyboard.english .key span { color:#666666; font-weight:800; }
.keyboard.english .key small { color:#007bff; font-weight:600; }

.keyboard-footer { display:flex; justify-content:center; margin-top:14px; gap:10px; }
.keyboard-footer .key { width:130px; height:75px; font-size:1.4em; }

@media screen and (max-width:1080px) {
	.key { width:70px; height:70px; font-size:1.3em; }
	.keyboard-footer .key { width:110px; height:70px; }
}

/*******************************************************************************************************************************************/
/*******************************************************************************************************************************************/
/*******************************************************************************************************************************************/
/*******************************************************************************************************************************************/
/*******************************************************************************************************************************************/
/*******************************************************************************************************************************************/

/*
background-image:url("../images/bg_23.jpg"), url("../images/bg_24.jpg"); background-position:0 0, 0 0; background-repeat:repeat-x, no-repeat;

outline:none;
text-overflow:ellipsis; overflow:hidden; white-space:nowrap;
text-overflow:ellipsis; overflow:hidden; word-break:break-word; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; // 2줄

display:table; margin-left:auto; margin-right:auto;

#con_footmenu a:after { padding:0 0 0 12px; content:"|"; color:#999999; font-size:12px; text-align:center; }
#con_footmenu a:last-child:after { padding:0 0 0 0; content:none; }

img-responsive

.con_tab .con_tab_c { display:table; width:100%; height:69px; table-layout:fixed; border-collapse:collapse; }
.con_tab .con_tab_c a { display:table-cell; height:69px; color:#3e3e3e; font-size:18px; text-align:center; letter-spacing:-0.01em; background:url("../images/tab_bg.jpg") no-repeat 0 0; padding:17px 0 0 0; }

<img src="/htmlp/images/sbanner_01.jpg" alt="내용이 들어갑니다." >

data-toggle="modal" data-target=".modal-examlist"
onclick="javascript:$('#modal-notice-1').fadeOut(); $('#modal-notice-2').fadeIn();"

position:relative;
position:absolute; left:0px; top:0px;

text-indent:-10000px;
text-indent:-10000px; font-size:0; line-height:1;

<label for="id" class="hidden" > 선택</label > <input type="checkbox" name="name" id="id" value="" class="mr5" >

word-break:keep-all;
word-break:break-all;

a.link1 { background:#fff200; } 노랑
a.link1 { background:#4b96e7; } 스카이
a.link2 { background:#007cd0; } 파랑
a.link3 { background:#f67400; } 주황
a.link4 { background:#02a9ca; } 민트
a.link5 { background:#38907c; } 그린
a.link6 { background:#7c8598; } 그레이
a.link7 { background:#927d67; } 브라운
a.link8 { background:#495bb4; } 보라
a.link9 { background:#e64746; } 레드
a.link10 { background:#eef0f5; } 연한그레이
a.link11 { background:#ffffff; } 라인

background:#fdfbf7 골드
background:#f2faff 블루
background:#f4fcfd 청록
background:#f8fbf6 그린
background:#fbf9f7 브라운
background:#fdf8f7 주황
background:#fcf4f9 자주
background:#f9f7fd 보라
background:#f3faf8 청그린
background:#fcf4f9 자주

background:url("../images/control_01.png") no-repeat 0 0;

.con_imglist_c .con1 a.imgs { display:block; width:100%; height:180px; background-repeat:no-repeat; background-position:center center; background-size:cover; border:1px solid #dddddd; border-top-left-radius:4px; border-top-right-radius:4px; text-indent:-10000px; transform:scale(1); transition:all 0.3s ease; }
.con_imglist_c .con1 a.imgs:hover { filter:brightness(95%); transform:scale(1.05); }

position:relative;
position:absolute; right:0px; top:35px;

display:inline-block; width:205px; height:47px; background:url("../images/v1_logo_01.png") no-repeat 0 0; margin-top:25px; text-indent:-10000px;
display:inline-block; padding:7px 20px 7px 20px; background:#777777; color:#e6ebf1; font-size:14px; text-align:center; letter-spacing:-0.01em;
display:inline-block; width:100%; padding:50px 0 0 0; background:url("../images/v1_ic_06.png") no-repeat center 0; color:#ffffff; font-size:17px; text-align:center; letter-spacing:-0.01em;

animation:con_profile_ani1 infinite 3s ease alternate;
@keyframes con_record_ani1 { 0% { opacity:0.3; transform:translateY(-20%); } 50% { opacity:0.3; transform:translateY(0); } 100% { opacity:0.3; transform:translateY(-20%); } }

display:flex; flex-flow:row nowrap; justify-content:flex-start;
display:flex; align-items:center; justify-content:center;

.con_exam_list4 { margin:15px 0 0 0; border-top:1px solid #111111; }
.con_exam_list4 ul { display:flex; flex-flow:row nowrap; justify-content:flex-start; border:1px solid #000000; }
.con_exam_list4 li { }
.con_exam_list4 li.tit { flex-shrink:0; width:100px; border:1px solid #ff0000; }
.con_exam_list4 li.desc { flex-grow:1; border:1px solid #0000ff; }

border:1px solid #000000;

<img src="../assets/images/file_02.png" alt="첨부파일 제목이 들어갑니다." >

.sorting { display:flex; align-items:center; cursor:pointer; }
.sorting:before { content:''; display:inline-block; margin-right:5px; border-left:6px solid #707070; border-top:5px solid transparent; border-bottom:5px solid transparent; }
.sorting.ascending:before { border-bottom:6px solid #133D8E; border-left:5px solid transparent; border-right:5px solid transparent; border-top:none; }
.sorting.descending:before { border-top:6px solid #133D8E; border-left:5px solid transparent; border-right:5px solid transparent; border-bottom:none; }
.sorting:hover span { font-weight:bold; }

color:#ffffff; font-size:12px; text-align:center; line-height:26px; letter-spacing:-0.01em;
color:#ffffff; font-size:12px; letter-spacing:-0.01em;

box-sizing:border-box;

.sr_only { position:absolute; white-space:nowrap; width:1px; height:1px; overflow:hidden; border:0; padding:0; clip:rect(0 0 0 0); clip-path:inset(50%); margin:-1px; }
.sr_only2 { position:relative; white-space:nowrap; width:1px; height:1px; overflow:hidden; border:0; padding:0; clip:rect(0 0 0 0); clip-path:inset(50%); margin:-1px; z-index:-1; }

.con22_mclass_cont .con22_1 .con22_cont ul.desc li { margin:0 0 3px 0; padding:0 0 0 10px; position:relative; color:#555555; font-size:14px; letter-spacing:-0.01em; transition:all 0.3s ease; }
.con22_mclass_cont .con22_1 .con22_cont ul.desc li:before { position:absolute; left:0; top:6px; display:inline-block; content:""; width:3px; height:3px; border-radius:100%; background:#111111; }

transition:background-color 0.2s;
transition:all 0.3s ease;
transform:rotate(360deg);

color:#ffffff; font-size:12px; text-align:center; line-height:26px; letter-spacing:-0.01em;
color:#ffffff; font-size:12px; letter-spacing:-0.01em;

<span class="status-span blue">미접수</span>
<span class="status-span purple">미접수</span>
<span class="status-span yellow">미접수</span>
<a href="#none" onclick="javascript:onPopupReason('${result.accidentCode}');"><span class="status-span red">미접수</span></a>
<span class="status-span light-red">미접수</span>
<a href="#none" onclick="javascript:onPopupReason('${result.accidentCode}');"><span class="status-span grey">미접수</span></a>
<span class="status-span charcoal">미접수</span>
<span class="status-span navy">미접수</span>
<span class="status-span green">미접수</span>

<img src="<c:url value="/resources/images/btn_gnb_06.png"/>" alt="전체메뉴">

.navbar_gov span:before { margin:0 5px 0 0; content:""; display:inline-block; width:44px; height:17px; background:url("../images/ic_20.png") no-repeat 0 0; vertical-align:middle; }

aspect-ratio:4 / 3;

text-decoration:underline; text-underline-position:under;

standardType="B"

data-aos="fade-up" data-aos-delay="400"

animate__animated animate__backInUp animate__infinite

class="wow swing" data-wow-iteration="infinite" data-wow-delay=".2s" data-wow-duration="3s"

font-family:"Pretendard";
color:#111111; font-size:14px; font-weight:700; line-height:1.3; text-align:center; letter-spacing:-0.02em;
letter-spacing:-0.02em;

.con_mvisual_c2 .con2 a.more:after { margin:0 0 0 8px; content:""; display:inline-block; width:18px; height:12px; background:url("../images/more_05.png") no-repeat 0 -1px; vertical-align:middle; transition:all 0.3s ease; }
*/