@charset "utf-8";


@font-face {
font-family:LG;
font-style:regular;
font-weight:400;
src:url(../fonts/LGSmHaTR.woff2) format('woff2')
}
@font-face {
font-family:LG;
font-style:regular;
font-weight:300;
src:url(../fonts/LGSmHaTL.woff2) format('woff2')
}

@font-face {
font-family:LG;
font-style:semibold;
font-weight:600;
src:url(../fonts/LGSmHaTSB.woff2) format('woff2')
}

@font-face {
font-family:LG;
font-style: bold;
font-weight: 700;
src:url(../fonts/LGSmHaTB.woff2) format('woff2')
}



/* Style */

html { font-size: 10px;} /*10px로 해야 모바일에서 rem 으로 작업할때 계산하기 편리함*/

body { overflow-x:hidden; font-size: 1rem; background:#535353; color:#eee;} /*--1rem으로 정의하겠다. --*/
body.hidden { position: fixed; overflow-y:hidden; touch-action: none; font-size: 1.4rem; line-height:2.1rem; color:#eee; display: block;}
a, button { color:#666;}
p, li{word-break: keep-all;}
.clear {clear:both;}
.clear:after { content:""; display:block; clear:both;}
caption > div,
legend,
.hide {overflow: hidden; display:block; position:absolute; border: 0; width: 1px; height: 1px; clip: rect(1px, 1px, 1px, 1px);}
.skip { position: absolute; left: 0; right: 0; top:-100%; transition: all .5s; line-height: 5rem; background: #000; color:#fff; text-align: center; z-index: 100;}
.skip:focus { top: 0; }

/* Reset */
html,body,h1,h2,h3,h4,h5,h6,div,p,blockquote,pre,code,address,ul,ol,li,nav,section,article,header,footer,main,aside,dl,dt,dd,table,thead,tbody,tfoot,label,caption,th,td,form,fieldset,legend,hr,input,button,textarea,object,figure,figcaption {margin:0;padding:0;}
body,input,select,textarea,button,img,fieldset {border:none;}
ul,ol,li{list-style:none;}
table{width:100%;border-spacing:0;border-collapse:collapse;}
address,cite,code,em,i{font-style:normal;font-weight:normal;}
label,img,input,select,textarea,button,a {vertical-align:middle;}
u,ins,a{text-decoration:none;}
button { cursor: pointer;}

/* Normalize */
body { font-family: 'LG';}
select { appearance:none;}
select::-ms-expand { display:none;}
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration,
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button { -webkit-appearance:none;}
input[type="number"]{ -moz-appearance:textfield;}
input[type="number"],
input[type="text"],
input[type="password"],
input[type="url"],
input[type="email"],
input[type="tel"],
input[type="date"],
textarea { -webkit-appearance:none; -moz-appearance:none; appearance:none; -webkit-border-radius:0; outline:0;}
textarea { resize: none;}

/*-- 스크롤바--*/
::-webkit-scrollbar {width:4px;}
::-webkit-scrollbar-thumb {
	-webkit-border-radius:10px;
	border-radius:10px;
	background:rgba(34,34,34,0.5);
	height:30%;	
}
::-webkit-scrollbar-thumb:window-inactive {
	background:rgba(0,0,0,0.4);
}

.title_wrap {z-index:100;position:fixed; top:0; padding:20px 20px; width:100%; background:#ffd800;box-sizing:border-box;}
.title {position:relative;display:block; font-size:24px;margin:0 auto; letter-spacing:-0.1rem;  font-weight:200;
        text-align:center; color:#000 }
.header {position:absolute; top:0;left:0; width:100%;height:50px; background:#efca00;}
.header p {font-size:20px; font-weight:700; color:#000; position:absolute; top:10px;
    left:50%;transform:translateX(-50%);}
.content {position:absolute; top:50px;left:0;width:100%;text-align:center; font-size:14px; overflow-y:auto;
     padding:10px;box-sizing:border-box;}

dl {margin-bottom:10px;}
dt, dd {padding:5px 0;}
dt {color:#75abff; font-size:1.4rem}
dd {font-weight:300; font-size:1.4rem; color:#939393;}
.content_wrap {display:block;margin:0 auto; padding:100px 20px 100px 20px;}
.list_wrap {display:block; margin:0 auto; text-align:center; margin-bottom:20px;}
.content > div {border-bottom:1px solid #686868; padding:20px 0;}
.list_wrap p { font-weight:800; font-size:2rem; color:#ffcc00; margin-bottom:10px;}