@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;400;500;700;900&display=swap');

/* reset */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,textarea,p,blockquote,th,td,input,select,textarea,button {margin:0;padding:0;font-family: 'Noto Sans KR', sans-serif;}
fieldset,img {border:0 none}
dl,ul,ol,menu,li {list-style:none}
blockquote, q {quotes:none}
blockquote:before, blockquote:after,q:before, q:after {content:'';content:none}
input,select,textarea,button {font-size:100%;vertical-align:middle}
button {border:0 none;background-color:transparent;cursor:pointer}
table {border-collapse:collapse;border-spacing:0}
body {-webkit-text-size-adjust:none} /* 뷰표트 변환시 폰트크기 자동확대 방지 */
input[type='text'],input[type='password'],input[type='submit'],input[type='search'] {-webkit-appearance:none; border-radius:0}
input:checked[type='checkbox'] {background-color:#666; -webkit-appearance:checkbox}
button,input[type='button'],input[type='submit'],input[type='reset'],input[type='file'] {-webkit-appearance:button; border-radius:0}
input[type='search']::-webkit-search-cancel-button {-webkit-appearance:none}
body {background:#fff}
body,th,td,input,select,textarea,button {font-size:20px;line-height:1.5;font-family:'Malgun Gothic', '맑은 고딕', sans-serif;color:#333} /* color값은 디자인가이드에 맞게사용 */
a {color:#000;text-decoration:none}
a:active, a:hover , a:visited{text-decoration:none;color:#000;}
address,caption,cite,code,dfn,em,var {font-style:normal;font-weight:normal}

._HTML_CONTENT {width:100%;display:flex;}
._HTML_WRAPPER {position:relative;width:640px;margin:0 auto;}
._HTML_WRAPPER > section {position:relative;width:100%;}
._HTML_WRAPPER > ._HTML_HEAD {}
._HTML_WRAPPER > ._HTML_BODY {}
._HTML_WRAPPER > ._HTML_FOOTER {}


.active_bar.on {
    position:absolute;
    top:0;
    right:0;
    width: 0;
    height: 0;
    border-bottom: 30px solid transparent;
    border-top: 30px solid skyblue;
    border-left: 30px solid transparent;
    border-right: 30px solid skyblue;
}
.active_bar.on::before {content:'';position:absolute;background-image:url('../images/key.png');width:20px;height:20px;background-size: cover;top:-20px;left:5px;}

.active_bar {
    position:absolute;
    top:0;
    right:0;
    width: 0;
    height: 0;
    border-bottom: 30px solid transparent;
    border-top: 30px solid #DEDEDE;
    border-left: 30px solid transparent;
    border-right: 30px solid #DEDEDE;    
}
.active_bar::before {content:'';position:absolute;background-image:url('../images/lock.png');width:20px;height:20px;background-size: cover;top:-20px;left:5px;}

@media (min-width: 700px) {
    ._HTML_CONTENT {width:100%;display:flex;}
    ._HTML_WRAPPER {position:relative;width:640px;margin:0 auto;scale:.8}
    ._HTML_WRAPPER > section {position:relative;width:100%;}
    ._HTML_WRAPPER > ._HTML_HEAD {}
    ._HTML_WRAPPER > ._HTML_BODY {}
    ._HTML_WRAPPER > ._HTML_FOOTER {}

}