@charset "UTF-8";

/* CSS Document */
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+KR&display=swap');
@import url("../../dist/css/vendor/normalize/normalize.css");
@import url("./component.css");

/* element */
body { font-family: 'Helvetica Neue', 'Apple SD Gothic Neo', 'Roboto', 'Noto Sans KR', sans-serif; font-size: 15px; color: #444; line-height: 1.4; }
h1, h2, h3, h4, h5, h6 { color: #000; }
h1, h2, h3, h4, h5, h6, ul, dl, ol, li, dt, dd, div, p, strong, span, button { margin: 0; padding: 0; }
ul, ol, dl { list-style: none; }
button { cursor: pointer; }
a { color:inherit; text-decoration:none; cursor:hand; cursor:pointer; }
a:hover { text-decoration:normal; }

/* common */
.space { margin-right:15px; }
.w60p { width:60%; }
.w100p { width:100%; }

/* body */
.bg { }
.bg .wrap { }

/* progress bar */
.progress-container {position: absolute; bottom: -2px; width: 100%; height: 2px; background-color: rgb(217, 217, 217, .2);}
.progress-bar {width: 0%; height: 2px; background-color: rgb(166, 166, 166, .9); -webkit-transition: width 0.2s ease-out; transition: width 0.2s ease-out; }

/* header */
.header { position: fixed; top:0; background: #fff; box-shadow: 0 0 2px 0 rgba(0,0,0,0.20); width:100%; height:3.5em; display: flex; align-items: center; z-index: 999; }
.header .left { position: absolute; top: 50%; margin-top: -1.2em; margin-left: 0.2em; }
.header .left button.back { width:2.4em; height: 2.4em; background-color: #fff; background-image: url(''); background-repeat: no-repeat; background-position: 50% 50%; border:none; }
.header .right { position: absolute; top: 50%; margin-top: -1.2em; right: 0.3em; }
.header .right button.share { width:2.4em; height: 2.4em; background-color: #fff; background-image: url(''); background-repeat: no-repeat; background-position: 50% 50%; border:none; }
.header h1 { flex: 1; text-align: center; font-size: 1.05em; }

/* container */
.container { padding:5.5em 0; background: #fff; }
.container h3 { font-size: 1.25em; }

/* content */
.content { margin:20px 10px;  }
.content .wrap { display:flex;  }
.content .title { display:inline-flex; width:20%; padding-right:0; }
.content .code { display:inline-flex; width:70%; height:100%; }