body {
			background-color: rgba(219,209,198,0.5);
		}

            /* 기본옵션 변경 ==================================================*/

		.ui.segment {
			background: none;
		}

		.ui.button {
			background-color: #fff;
		}

		.ui.button:focus {
			background-color: #ef3341;
		}

		.ui.button:hover {
			background-color: #ef3341;
		}

            .ui.pagination.menu .item {
			display: inline-block;
		}

            input[type="radio"]:checked+label.ui.button{
			background-color: #222;
			color: #fff;
		}

            section {
			position: relative;
		}

            .canvas {
                  padding-top: 5%;
		}

		.backwhite {
			background-color: #fff;
		}

            #first {
                  min-height: 110vh;
                  height: auto;
            }

            #second {
                  min-height: 180vh;
                  height: auto;
            }

            #third {
                  min-height : 110vh;
                  height: auto;
            }

            /* 표지  ==================================================*/
            #coverBox {
                  background-image: url("image/web.jpg");
                  background-size: cover;
                  background-position: bottom;
                  padding-top: 10%;
                  height: 100vh;
            }

		/* 텍스트   ==================================================*/
		/* 크기 */

		.display_1 {
			font-size: 4em;
		}

		.display_2 {
			font-size: 3em;
		}

		.display_3 {
			font-size: 2.5em;
		}

		.large {
			font-size: 1.8em;
		}

		.medium {
			font-size: 1.5em;
		}

		.medium_s {
			font-size: 1.2em;
			line-height: 1.8em;
		}

		.small {
			font-size: 0.9em;
		}

		/* 유형 */
		.paragraph {
			max-width: 520px;
		}
		/* 굵기 */
		.light {
			font-weight: 400;
		}

		.bold {
			font-weight: 600;
		}

		/* 컬러 */
		.black {
			color: #111;
		}

		.semi_black {
			color: #3f3f3f;
		}
		.grey {
			color: #888;
		}

		.white {
			color: #fff;
		}

		.red {
			color: #ba2037;
		}

		.green {
			color: #0dc0ba;
		}

            /* 본문  ==================================================*/
      	.chartbox {
                  width: 600px;
                  height: 600px;
            }

            .btnbox {
                  margin: 20px 0px;
            }

            #map {
                  width: 100%;
                  height: 500px;
            }

            /* 움직이는 동물들  ==================================================*/
		.petimg {
			width: 15%;
			height: auto;
			display: inline-flex;
		}

		.poster {
			width: 500px;
			height: 400px;
			position: absolute;
		}

		.dog {
			top: calc(100% - 400px);
			left: calc(100% - 520px);
		}

		.cat {
			top: calc(100% - 400px);
			left: calc(100% - 520px);
		}

		.parrot {
			top: calc(100% - 400px);
			left: calc(100% - 520px);
		}

		/* 그래프박스  ===============================================================*/
            .graphwrapper {
			 position: relative;
			 width: 100%;
			 margin-top: 20px;
		}

            .wrap-height {
                  height: 600px;
            }

            .wrap-long-height {
                  height: 600px;
            }


/* 모바일 ==================================================================================== */
		@media screen and (max-width: 639px) {
                  /* 기본옵션 변경 ==================================================*/
			.ui.segment {
				padding: 1em 0.5em;
			}

                  .ui.button {
 				font-size: 0.85rem;
 			}

 			.ui.table {
 				font-size: 0.9em;
 			}

 			.ui.pagination.menu .item {
 				min-width: 1.8em;
 				padding: 0.5em 1em;
 			}

			select  {
				-moz-appearance: none;
				-webkit-appearance: none;
				appearance: none;
			}

                  .canvas {
     				padding: 5vh 0;
     			}

                  #first {
                        min-height: 80vh;
                        height: auto;
                  }

                  #second {
                        min-height: 120vh;
                        height: auto;
                  }

                  #third {
                        min-height : 110vh;
                        height: auto;
                  }


			/* 텍스트   ==================================================*/
			/* 크기 */
			.display_1 {
				font-size: 2.2em;
			}

			.display_2 {
				font-size: 1.8em;
			}

			.display_3 {
				font-size: 1.8em;
			}

			.large {
				font-size: 1.4em;
			}

			.medium {
				font-size: 1.2em;
			}

			.medium_s {
				font-size: 1em;
			}

			.small {
				font-size: 0.9em;
			}

                  /* 표지  ==================================================*/
                  #coverBox {
                        background-image: url("image/mobile.jpg");
                        width: 100%;
                        padding: 15% 5%;
                        height: 90vh;
                  }
                  /* 본문  ==================================================*/

                  #map {
                        width: 100%;
                        height: 30vh;
                  }

                  /* 움직이는 동물들  ==================================================*/
      		.petimg {
      			width: 15%;
      			height: auto;
      			display: inline-flex;
      		}

			.poster {
				width: 120px;
				height: 96px;
			}

			.dog {
				top: calc(80vh - 96px);
				left: calc(100% - 120px);
			}

			.cat {
				top: 10px;
				left: calc(100% - 120px);
			}

			.parrot {
				top: calc(110vh - 96px);
				left: calc(100% - 120px);
			}

                  /* 그래프박스  ===============================================================*/
			.graphwrapper {
				 position: relative;
				 width: 100%;
			}

                  .wrap-height {
                        height: 30vh;
                  }

                  .wrap-long-height {
                        height: 50vh;
                  }
            } /* 모바일 끝 */