body {
			width: 100%;
			overflow-x: hidden;
		}

		/* ========================================  메뉴 */
		/*  진행 스크롤 바 */
		#progress {
			width: 100%;
			height : 5px;
			background-color: #1f1f1f;
			overflow: hidden;
			content: "";
			display: table;
			table-layout: fixed;
			position: fixed;
			top: 0;
			left: 0;
			z-index: 1000;
		}

		#bar {
			width: 0%;
			height: 100%;
			float: left;
			max-width: 100%;
			background-color: #d71921;
			z-index: 99;
			-webkit-transition: width .6s ease;
			-o-transition: width .6s ease;
			transition: width .6s ease;

		}

		/* 버튼 */
		.navbtn {
			width: 50px;
			height: 50px;
			background-color: #2f2f2f;
			position: fixed;
			top: 15px;
			left: calc(100% - 60px);
			z-index: 999;
			border-radius: 50%;
		}

		.menuicon {
			width: 20px;
			height: 20px;
			position: absolute;
			top: 15px;
			left: 15px;
			fill: #fff;
		}

		/* 문단 버튼  */
		nav {
			display: none;
			width: 300px;
			height: calc(100vh - 5px);
			padding: 70px 50px 0px 50px;
			position: fixed;
			top: 5px;
			left: calc(100% - 400px);
			background-color: #fff;
			z-index: 900;
		}

		nav ul {
			text-align: left;
		}

		nav ul li.chapter_btn {
			margin: 2em 0em;
			font-size: 0.9em;
			font-weight: 600;
			cursor: pointer;
			color: #6f6f6f;
		}

		/* ========================================  커버 */
		#main {
			width: 100%;
			height: calc(56.25vw - 90px);
			float: left;
			text-align: center;
			position: relative;
		}

		.mainback {
			background-image:url(http://img.sbs.co.kr/newimg/news/20170810/201080864.jpg);
			background-size: 100%;
		}

		/* 제목 */
		.title_box {
			z-index: 2;
			width: 100%;
			position: absolute;
			top: 100px;
			left: 0%;
		}

		.titleimg {
			width: 30%;
			margin: 0 auto;
		}

		.title_box p  {
			color: #fff;
			font-size: 3em;
			font-weight: 700;
			letter-spacing: -2px;
		}

  		/* 기사 리스트 */
  		.listbox {
  			width: 100%;
			height: 80px;
			padding:0;
			background-color: rgba(0,0,0,0.6);
  			position: absolute;
  			top: calc(56.25vw - 170px);
  			left: 0;
  		}

  		.clickme {
  			width: 21%;
  			height: 65px;
  			padding: 5px 2% 0px 2%;
  			display: inline-block;
  			border-bottom: 5px solid #000;
  			text-align: center;
  		}

		.clickme:hover {
			border-bottom: 5px solid #d71921;
		}

  		.clickme a {
  			margin: 0;
  			padding: 0;
  			font-size: 1.1em;
  			line-height: 1.2em;
  			font-weight: 600;
  			color: #ccc;
  		}

		.listbox li.web {
			display: block;
			float: left;
		}

		.listbox li.mobile {
			display: none;
		}
  		/* 마우스 스크롤 이펙트 */
		.mouse {
			width: 24px;
			height: 42px;
			border-radius: 14px;
			transform: none;
			border: 2px solid rgba(255, 255, 255, 0.7);
			margin:100px auto 0px auto;
		}

		.wheel {
			width: 3px;
			height: 3px;
			display: block;
			margin: 5px auto;
			background: white;
			position: relative;
			border: 1px solid  rgba(255, 255, 255, 0.7);
			-webkit-border-radius: 8px;
			border-radius: 8px;

			-webkit-animation: mouse-wheel 1.5s linear infinite;
			-moz-animation: mouse-wheel 1.5s linear infinite;
		}

		.scrollme {
			font-weight: 300;
			color:#fff;
			font-size: 0.9em;
		}

		@-webkit-keyframes mouse-wheel
			{
				0% {
					opacity: 1;
					-webkit-transform: translateY(0);
					-ms-transform: translateY(0);
					transform: translateY(0);
				}

				100% {
					opacity: 0;
					-webkit-transform: translateY(6px);
					-ms-transform: translateY(6px);
					transform: translateY(6px);
				}
			}

		@-moz-keyframes mouse-wheel
			{
				0% { top: 1px; }
				25% { top: 2px; }
				50% { top: 3px;}
				75% { top: 2px;}
				100% { top: 1px;}
			}

  		/* ========================================  중간제목 */

 		/* 전체 영역 */
		.chapter  {
			width: 100%;
			height: 56.25vw;
			padding-top: 10vw;
			background-color: #1f1f1f;
			background-size: cover;
			position: relative;
		}

		/* 텍스트 영역 */
		.chapter_box {
			width: 700px;
			height: 250px;
			position: absolute;
			top: 40%;
			left: 30%;
			padding: 10px;
		}

		/* 숫자 */
		.chapter_number {
			margin: 0;
			font-size: 6em;
			font-weight: 700;
			color: rgba(0,0,0,0.2);
		}

		/* 중간제목 */
		.chapter_title {
			margin: 10px;
			font-size: 3em;
			font-weight: 700;
		}


		/* 개별 배경 */
		#chapter2 {
			background-image: url("http://cfile10.uf.tistory.com/image/2353F340592FD93B059DB3");
		}

		/* 크레딧 */
		.people {
			margin-top: 20px;
			font-size: 1em;
			letter-spacing: -1px;
			font-family: sans-serif;
			font-weight: 400;
			text-align: left;
		}

		.people th {
			padding: 10px 40px 10px 0px;
			color: #aaa;
		}

		.people td {
			padding: 10px 10px 10px 0px;
			color: #fff;
		}

		/* ========================================  기사본문 */
		section {
			float: left;
		}

		.articlebox {
			width: 100%;
			min-height:  56.25vw;
			background-image:url(http://img.sbs.co.kr/newimg/news/20170810/201080864.jpg);
			background-size: 100%;
		}

		.full_column {
			width: 100%;
			padding: 4%;
			height: auto;
		}

 		.half_column {
 			width: 50%;
 			padding:  4% 0%;
 		}

		/* 기사 본문 */
		.left article {
			width: 570px;
			margin: 0px auto;
		}

		.right article {
			width: 70%;
			margin: 0px auto;
		}


		/* 왼쪽 or 오른쪽 */
		.left {
			float: left;
			background-color: #fff;
			min-height:  56.25vw;
		}

		.right {
			min-height:  56.25vw;
			float: left;
			background-image:url(http://img.sbs.co.kr/newimg/news/20170810/201080864.jpg);
			background-size: 100%;
		}

		/* 움직임 */
		.fixed {
			height:  56.25vw;
			position: fixed;
			top: 0;
			right: 0;
			-webkit-transform : translateY(100%);
			-ms-transform : translateY(100%);
			-o-transform : translateY(100%);
 			transform: translateY(100%);

			-webkit-transition: all 0.5s ease-out;
			-ms-transition: all 0.5s ease-out;
			-o-transition:  all 0.5s ease-out;
			transition:  all 0.5s ease-out;

		}

		.current {
			-webkit-transform : translateY(0%);
			-ms-transform : translateY(0%);
			-o-transform : translateY(0%);
 			transform: translateY(0%);
		}

		/* 작은 제목  */

		section  article  h1{
			font-size: 1.5em;
			line-height: 1.5em;
			color: #e3120b;
		}


		section  article  h2{
			font-size: 1.3em;
			line-height: 1.5em;
			color: #e3120b;
		}

		/* 본문 텍스트 */
		section article p {
			letter-spacing: -0.5px;
			font-size: 1.1em;
			line-height: 1.8em;
			color: #444444;
			text-align: justify;
		}

		.explain {
			font-size: 0.9em;
			margin: 0;
			color: #ccc;
		}

		/* ======================================== 컬러 설정 */
		.red {
			background-image:url(http://img.sbs.co.kr/newimg/news/20170807/201079376.jpg);
			background-size: 100%;
		}

		div.red  h1{
			color: #fff;
		}


		div.red  h2{
			color: #fff;
		}


		.black {
			background-image:url(http://img.sbs.co.kr/newimg/news/20170810/201080864.jpg);
			background-size: 100%;
		}

		div.black  h1{
			color: #fff;
		}

		div.black  h2{
			color: #fff;
		}

		/* ======================================== 기사 그래프 */
		.graph {
			width: 100%;
			height: auto;
			margin-bottom: 40px;
		}

		.item {
			cursor: pointer;
		}
		/* ======================================== 지도  */
		.mapbox {
			width: 100%;
			height: 40vw;
			background-color: #2f3035;
		}

		.leaflet-container {
		    background-color: #2f3035;
		}



		.mapwindow {
	    		width: 280px;
	    		height: 250px;
	    		padding: 10px;
	    		background-color: #fff;
	    	}

		.maptitle {
			font-weight: 600;
			font-size: 1.4em;
			color: #d71921;
		}

	    	.mapinfo {
	    		width:100%;
	    		font-size: 1.2em;
	    	}

	    	.mapinfo th, td {
	    		padding: 5px 10px 5px 0px;
	    		text-align: left;
	    		color : #666666;
	    	}

		/* ======================================== 영상  */

		.moviebox {
			width: 100%;
			height: 600px;
			display: block;
			margin: 0px auto 0px auto;
			z-index: 1;
		}


 		/* ======================================== 기타  */
	 	.newspaper {
	 		width: 400px;
	 		height: auto;
	 	}

	 	.nextarticle {
	 		width: 100%;
	 		height: 40px;
	 		padding: 5px 15px;
	 		margin-top: 40px;
	 		background-color: #d71921;
	 		cursor: pointer;
	 	}

	 	.nextarticle p {
	 		margin: 0;
	 		font-size: 1em;
	 		font-weight: 700;
	 		color: #fff;
	 	}
/* ===================================================================================================  와이드 모니터 */


/* ===================================================================================================  모바일 */

	@media screen and (max-width: 639px) {
		body {
			width: 100%;
			overflow-x:hidden;
		}

		nav {
			display: none;
			width: 90%;
			min-height: 450px;
			padding: 70px 20px 0px 20px;
			position: fixed;
			top: 50px;
			left: 0px;
			background-color: #fff;
			z-index: 900;
		}

		/* 버튼 */
		.navbtn {
			position: fixed;
			top: 85vh;
			left: calc(100% - 60px);
		}


		/* ========================================  커버 */
		#main {
			height: 100vh;
		}

		.title_box p  {
			color: #fff;
			font-size: 1.8em;
			font-weight: 700;
			letter-spacing: -2px;
		}

		/* 스크롤 아이콘 숨김 */
		#mousebox {
			display: none;
		}

		/* 제목 */
		.title_box {
			z-index: 2;
			width: 100%;
			position: absolute;
			top: 150px;
			left: 0%;
		}

		.titleimg {
			width: 80%;
			height: auto;
			margin: 0 auto;
		}

		.title_box p  {
			color: #fff;
			font-size: 3em;
			font-weight: 700;
			letter-spacing: -2px;
		}

  		/* 기사 리스트 */
  		.listbox {
  			width: 100%;
			height: 80px;
			padding:0;
			background-color: rgba(0,0,0,0.6);
  			position: absolute;
  			top: calc(100vh - 80px);
  			left: 0;
  		}

		.listbox li.web {
			display: none;
		}

		.listbox li.mobile {
			display: block;
			float: left;
		}

  		.clickme {
  			width: 20%;
  			height: 45px;
  			padding: 30px 2% 0px 2%;
  			display: inline-block;
  			border-bottom: 5px solid #000;
  		}


		.clickme:hover {
			border-bottom: 5px solid #d71921;
		}

  		.clickme a {
  			font-size: 1.1em;
  			font-weight: 600;
  			color: #ccc;
  		}


		/* ========================================  중간제목  */

		/* .chapter  {
			width: 100%;
			height: 100vh;
			padding-top: 20vh;
			background-color: #735cb2;
			background-size: cover;
			position: relative;
		} */

		.chapter  {
			width: 100%;
			height: 100vh;
			padding: 10vh 5%;
			background-size: cover;
			position: relative;
		}

		.chapter_box {
			width: 90%;
			height: auto;
			position: absolute;
			top: 15%;
			left: 5%;
		}

		.chapter_number {
			font-size: 3em;
		}

		.chapter_title {
			font-size: 1.2em;
		}

		/* 크레딧 */
		.people {
			width: 90%;
			margin-top: 20px;
			font-size: 0.8em;
			letter-spacing: -1px;
			font-family: sans-serif;
			font-weight: 500;
			text-align: left;
		}

		.people th {
			width: 30%;
			padding: 10px 10px 10px 0px;
			color: #aaa;
		}

		.people td {
			width: 70%;
			padding: 10px 0px 10px 0px;
			color: #fff;
		}

		/* ========================================  기사본문 */

		section {
			width: 100%;
			min-height:  56.25vw;
			background-color: #d32024;
		}

		.full_column {
			width: 100%;
			padding: 4%;
			height: auto;
		}

 		.half_column {
 			width: 100%;
 			padding:  10% 0%;
 			float: left;
 		}


		/* 기사 본문 */
		.left {
			background-color: #fff;
		}

		.left article {
			width: 100%;
			padding: 4%;
			margin: 0px auto;
		}

		.right article {
			width: 100%;
			padding: 4%;
			margin: 0% auto;
		}


		/* 왼쪽 or 오른쪽 */
		.left {
			float: left;
		}

		.right {
			height: auto;
			float: left;
			background-color: #fff;
		}

		/* 움직임 */
		.fixed {
			height: auto;
			position: relative;
			top: 0;
			right: 0;
			-webkit-transform : none;
			-ms-transform : none;
			-o-transform : none;
 			transform : none;
		}

		.current {
			-webkit-transform : none;
			-ms-transform : none;
			-o-transform : none;
 			transform : none;
		}

		/* 작은 제목  */

		section  article  h1{
			font-size: 1.2em;
			color: #e3120b;
		}


		section  article  h2{
			font-size: 1.1em;
			color: #e3120b;
		}

		/* 본문 텍스트 */
		section article p {
			letter-spacing: -0.5px;
			font-size: 1em;
		}

		/* ======================================== 지도  */
		.mapbox {
			height: 50vh;
		}

		/* ======================================== 기타 */
		.nextarticle {
	 		width: 100%;
	 	}

	 	.nextarticle p {
	 		margin: 0;
	 		font-size: 1em;
	 		font-weight: 700;
	 		color: #fff;
	 	}

		.moviebox {
			width: 100%;
			height: 450px;
			display: block;
			margin: 0px auto 0px auto;
			z-index: 1;
		}
		

	}