:root{font-size: 20px; line-height: 1.8; letter-spacing: -0.025rem;}
*{ font-family: 'Noto Serif KR', serif; word-break: keep-all; font-weight: 400; box-sizing: border-box;}
body,h1,h2,h3,p,ul,li,figure{margin: 0; padding: 0}
body{background: #DDD;}
a{text-decoration: none;}
h1{}
h2{line-height: 1.4;font-size:1.5rem; font-weight: 700; margin-top: 2rem;margin-bottom: 1rem;}
nav,section .row {width: 800px; margin: auto;}
nav {display: flex;}
nav ul {display: flex;}
nav ul li{list-style-type: none;}
nav ul li a, nav h1{display: block; padding: 0.5rem 2rem 0.5rem 0;}
nav ul li a:hover{background: magenta;}

section .row{padding: 3rem 0 4rem;}
section .row a{border-bottom: 2px solid black;}
section ul li{list-style-position: outside;margin-left: 1.5rem;}
section.invert{background: black;}
section.invert h2,
section.invert p,
section.invert figcaption{color: white;}
p.bold{font-weight: bold;}
figure img{display: block; width: 100%;}
figcaption{font-size: 0.7rem;}
p,ul,figure{margin-bottom: 1rem;}
section .row p{padding-left: 200px;}
pre{background: #DDD;padding: 1rem; font-family: monospace;
	line-height: 1.5; margin: 1rem 0;overflow: auto;}

#boxmodel div{border: 1px solid black; padding: 1rem;margin: 1rem;display: flex; flex-wrap: wrap;}

.swiper-container {
  width: 100%; max-width: 1000px;
  height: inherit;
}
.swiper-container img{width: 100%;}

		
@media only screen and (max-width: 767px){
	*{font-weight: 500;}
	:root{font-size: 16px; line-height: 1.6; word-spacing: -0.01rem;}
	header{height: 12rem; padding: 0; width: 90vw; margin: auto;}

	nav, section .row{width: 100vw;}
	section h2{padding-left: 3vw;width: 97vw}
	section .row p{padding: 1rem 3vw 0;}
	h1{line-height: 1.3;padding-top: 1rem;}
	section ul li{margin-left: 5vw;}
	pre{font-size: 0.9rem;}
	section .start{padding-bottom: 0;}
}