/* container */
	#container{margin-left:15%; margin-right:20%; width:65%;}
		#visual{background:#fff url("../img/m0.jpg") no-repeat center; background-size:cover; height:100%; overflow:hidden; position:relative;}


			.v_top{width:1000px; margin:30px auto;}
			.v_top span{font-size:14px; display:inline-block; width:20%; text-align:center; color:#666;}

			h2{position:absolute; top:10%; left:10%; font-size:60px; color:#fff; font-family: 'Nanum Gothic', sans-serif; font-weight:900;}
				h2 img{width:70%;}

			/*.small{color:#fff; font-size:50px; font-family: 'Nanum Gothic', sans-serif; font-weight:100;}
			.color{color:#ff8492; font-family: 'Nanum Gothic', sans-serif;}
				.color span{color:#ff8492; font-weight:100;}

			h2 img{vertical-align:middle; padding-bottom:5px;}
			*/
			.v_notice{position:absolute; bottom:5%; left:50%; margin-left:-45%; background-color:rgba(0,0,0,0.6); width:90%; height:100px; text-align:center; padding:10px;}
					.v_notice strong{color:#fff; padding:20px 0; display:block; color:#ccc;}
						.v_name{color:#ff8492; padding:0 15px; font-size:12px;}

		.heart{position:absolute; top:150px; left:5%;}
		.back{position:absolute; left:225px; top:405px;}

		/* 오른쪽 영역 */
		#notice{float:left; position:fixed; right:0; top:0; width:20%; height:100%; background-color:#ececec;}
			.n_area{width:100%;}

			.notice_img{width:100%; height:38%; background-color:#ececec; /*background:#000 url("../img/m2.png") no-repeat center; background-size:cover;*/ text-align:center; overflow:hidden;}
			.notice_text{width:88%;  padding:4% 6%; max-height:35%; overflow-y:scroll; border-bottom:1px solid #ccc; position:relative;}
				.notice_text dt{font-size:20px; margin:20px 0 5px; color:#555;}
				.notice_text dd{width:95%; overflow:hidden; padding:5px 0; border-bottom:1px solid #ccc;}
				.notice_text dd a{display:block; overflow:hidden; cursor:pointer;}

					.notice_box{width:25%; float:left; border:1px solid #ff8492; box-sizing:border-box; margin-right:2%; font-size:12px; text-align:center; padding:2px 0;}
						.day{font-size:16px; font-weight:bold; line-height:1.7em; color:#ff8492;}
						.date{color:#ff8492;}
					.notice_notice{width:72%; float:left; font-size:12px; line-height:1.9em; position:relative;}
						.notice_notice strong{width:100%; display:block; font-size:14px; padding-bottom:3px; position:absolute; text-overflow:ellipsis; overflow:hidden; white-space:nowrap;}
						.notice_notice p{width:100%; text-overflow:ellipsis; overflow:hidden; white-space:nowrap;}

					.notice_text dd:last-child{}

					.n_t_b{display:inline-block; font-size:12px; line-height:2.5em; position:absolute; right:20px;/*float:right;*/}

						.notice_text dd a:hover .notice_box, .notice_text dd a:focus .notice_box{background-color:#ff8492; transition:all .5s;}
						.notice_text dd a:hover .notice_box p, .notice_text dd a:focus .notice_box p{color:#fff;}

			.notice_text2{width:88%;  padding:0 6%; max-height:25%; overflow-y:scroll; position:relative;}
				.notice_text2 dt{font-size:20px; margin:20px 0 20px; color:#555;}
				.notice_notice2{width:95%;}
					.notice_notice2 strong{display:block;  width:100%;  padding:6px 0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:14px;}
				.notice_notice2 img{width:18px; vertical-align:sub; margin-right:10px;}

					.notice_notice2 a:hover, .notice_notice2 a:focus{text-decoration:underline;}

					dt a:hover .n_t_b, dt a:focus .n_t_b{text-decoration:underline;}

					.g_color{color:#666; font-size:14px;}
					.ccolor{color:#094FA3; font-weight:bold;}

			.n_img{width:100%;}

	/* animation */
	.aniArea{width:100%; height:60px; position:relative; background-color:#fff; overflow:hidden; padding-top:40px;}
		.ani{font-size:20px; overflow:hidden; display:inline-block; line-height:18px; width:94%; margin:0 3% 2%;  height:20px; text-align:center;}
		.hide1{width:33px; display:inline-block; /*outline:1px solid red;*/opacity:1; animation:hide1 4s infinite alternate; overflow:hidden; transition:all .5s;}
		.hide2{width:63px; display:inline-block; /*outline:1px solid blue;*/ opacity:1; animation:hide2 4s infinite alternate; overflow:hidden; transition:all .5s;}
		.hide3{width:20px; display:inline-block; /*outline:1px solid coral;*/ opacity:1; animation:hide3 4s  infinite alternate; overflow:hidden; transition:all .5s;}

		.ani span{height:20px;}
			.ani span img{height:100%;}


	@keyframes hide1{0%{width:0;} 25%{width:0;} 45%{width:33px; opacity:1; transition:all .5s;} 100%{width:33px; opacity:1; transition:all .5s;}}
		@keyframes hide2{0%{width:0;} 46%{width:0;} 65%{width:63px; opacity:1; transition:all .5s;} 100%{width:63px; opacity:1; transition:all .5s;}}
		@keyframes hide3{0%{width:0;} 66%{width:0;} 85%{width:20px; opacity:1; transition:all .5s;} 100%{width:25px; opacity:1; transition:all .5s;}}

		.love{width:50px; position:absolute; top:10px; right:22px;}
			.love img{width:100%;}

		.love_gray{font-size:14px; color:#666; text-align:center; border-bottom:1px solid #ccc; width:70%; margin:0 auto; padding-bottom:5%;}
		.m_img{width:200px; width:150px;}


		.pppop{position:fixed; z-index:99999; top:55px; width:500px; left:5%; background-color:#fff;}
		.pppop img{width:100%;}
		.pppop_x{position:absolute; right:-25px; top:-25px; font-size:30px; background-color:#666; border-radius:15px; width:30px; height:30px; text-align:center; line-height:25px; color:#fff; cursor:pointer;}

@media screen and (min-width:1199px) and (max-width:1600px){
	/* 오른쪽 영역 */
	#notice{float:left; position:fixed; right:0; top:0; width:20%; height:100%; background-color:#ececec;}
		.n_area{width:100%;}

		.notice_img{width:100%; height:38%; background-color:#ececec; /*background:#000 url("../img/m2.png") no-repeat center; background-size:cover;*/ text-align:center; overflow:hidden;}
		.notice_text{width:88%;  padding:0 6%; max-height:280px; overflow-y:scroll;}
			.notice_text dt{font-size:16px; margin:10px 0 5px; color:#555;}
			.notice_text dd{width:100%; overflow:hidden; padding:5px 0; border-bottom:1px solid #ccc;}
			.notice_text dd a{display:block; overflow:hidden; cursor:pointer;}

				.notice_box{width:25%; float:left; border:1px solid #ff8492; box-sizing:border-box; margin-right:2%; font-size:12px; text-align:center; padding:2px 0;}
					.day{font-size:16px; font-weight:bold; line-height:1.7em; color:#ff8492;}
					.date{color:#ff8492;}
				.notice_notice{width:73%; float:left; font-size:12px; line-height:1.9em; position:relative;}
					.notice_notice strong{width:100%; display:block; font-size:14px; padding-bottom:3px; position:absolute; text-overflow:ellipsis; overflow:hidden; white-space:nowrap;}
					.notice_notice p{width:100%; text-overflow:ellipsis; overflow:hidden; white-space:nowrap;}

				.notice_text dd:last-child{}

				.n_t_b{display:inline-block; font-size:12px; line-height:2.5em;  float:right;}

					.notice_text dd a:hover .notice_box, .notice_text dd a:focus .notice_box{background-color:#ff8492; transition:all .5s;}
					.notice_text dd a:hover .notice_box p, .notice_text dd a:focus .notice_box p{color:#fff;}

		.notice_text2{width:88%;  padding:0 6%; max-height:190px; overflow-y:scroll;}
			.notice_text2 dt{font-size:16px; margin:20px 0 20px; color:#555;}
			.notice_notice2{width:100%;}
				.notice_notice2 strong{display:block;  width:100%;  padding:6px 0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:14px;}
			.notice_notice2 img{width:18px; vertical-align:sub; margin-right:10px;}

				.notice_notice2 a:hover, .notice_notice2 a:focus{text-decoration:underline;}

				dt a:hover .n_t_b, dt a:focus .n_t_b{text-decoration:underline;}

				.g_color{color:#666; font-size:14px;}
				.ccolor{color:#094FA3; font-weight:bold;}

		.n_img{width:100%;}

}

@media screen and (min-width:1100px) and (max-width:1200px){
	#container{margin-left:15%; margin-right:20%; width:65%;}
		#visual{background:#000 url("../img/m0.jpg") no-repeat center; background-size:cover; height:100%; overflow:hidden; position:relative;}


			.v_top{width:1000px; margin:30px auto;}
			.v_top span{font-size:14px; display:inline-block; width:20%; text-align:center; color:#666;}

			h2{position:absolute; top:10%; left:10%; font-size:60px; color:#fff; font-family: 'Nanum Gothic', sans-serif; font-weight:900;}
				h2 img{width:70%;}

			/*.small{color:#fff; font-size:50px; font-family: 'Nanum Gothic', sans-serif; font-weight:100;}
			.color{color:#ff8492; font-family: 'Nanum Gothic', sans-serif;}
				.color span{color:#ff8492; font-weight:100;}

			h2 img{vertical-align:middle; padding-bottom:5px;}
			*/
			.v_notice{position:absolute; bottom:5%; left:50%; margin-left:-45%; background-color:rgba(0,0,0,0.6); width:90%; height:80px; text-align:center; padding:10px;}
					.v_notice strong{color:#fff; padding:10px 0; display:block; color:#ccc; font-size:14px;}
						.v_name{color:#ff8492; padding:0 15px; font-size:12px;}

		.heart{position:absolute; top:150px; left:5%;}
		.back{position:absolute; left:225px; top:405px;}

		/* 오른쪽 영역 */
		#notice{float:left; position:fixed; right:0; top:0; width:20%; height:100%; background-color:#ececec;}
			.n_area{width:100%;}

			.notice_img{width:100%; height:35%; background-color:#ececec; /*background:#000 url("../img/m2.png") no-repeat center; background-size:cover;*/ text-align:center; overflow:hidden;}
			.notice_text{width:88%; padding:4% 6%;}
				.notice_text dt{font-size:16px; margin:20px 0 5px; color:#555;}
				.notice_text dd{width:100%; overflow:hidden; padding:5px 0; border-bottom:1px solid #ccc;}
				.notice_text dd a{display:block; overflow:hidden; cursor:pointer;}

					.notice_box{width:25%; float:left; border:1px solid #ff8492; box-sizing:border-box; margin-right:2%; font-size:12px; text-align:center; padding:2px 0;}
						.day{font-size:16px; font-weight:bold; line-height:1.7em; color:#ff8492;}
						.date{color:#ff8492;}
					.notice_notice{width:73%; float:left; font-size:12px; line-height:1.9em;}
						.notice_notice strong{width:100%; display:block; font-size:12px; padding-bottom:3px;}
						.notice_notice p{width:100%; text-overflow:ellipsis; overflow:hidden; white-space:nowrap;}

					.notice_text dd:last-child{}

					.n_t_b{display:inline-block; font-size:10px; line-height:2.5em;  float:right;}

						.notice_text dd a:hover .notice_box, .notice_text dd a:focus .notice_box{background-color:#ff8492; transition:all .5s;}
						.notice_text dd a:hover .notice_box p, .notice_text dd a:focus .notice_box p{color:#fff;}

			.notice_text2{width:88%;  padding:0 6%;}
				.notice_text2 dt{font-size:16px; margin:20px 0 20px; color:#555;}
				.notice_notice2{width:100%;}
					.notice_notice2 strong{display:block;  width:100%;  padding:6px 0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px;}
				.notice_notice2 img{width:18px; vertical-align:sub; margin-right:10px;}

					.notice_notice2 a:hover, .notice_notice2 a:focus{text-decoration:underline;}

					dt a:hover .n_t_b, dt a:focus .n_t_b{text-decoration:underline;}

					.g_color{color:#666; font-size:14px;}
					.ccolor{color:#094FA3; font-weight:bold;}

			.n_img{width:100%;}

			/* animation */
			.aniArea{width:100%; height:50px; position:relative; background-color:#fff; overflow:hidden; padding-top:40px;}
				.ani{font-size:20px; overflow:hidden; display:inline-block; line-height:18px; width:94%; margin:0 3% 2%;  height:20px; text-align:center;}
				.hide1{width:33px; display:inline-block; /*outline:1px solid red;*/opacity:1; animation:hide1 4s infinite alternate; overflow:hidden; transition:all .5s;}
				.hide2{width:63px; display:inline-block; /*outline:1px solid blue;*/ opacity:1; animation:hide2 4s infinite alternate; overflow:hidden; transition:all .5s;}
				.hide3{width:20px; display:inline-block; /*outline:1px solid coral;*/ opacity:1; animation:hide3 4s  infinite alternate; overflow:hidden; transition:all .5s;}

				.ani span{height:20px;}
					.ani span img{height:100%;}


			@keyframes hide1{0%{width:0;} 25%{width:0;} 45%{width:33px; opacity:1; transition:all .5s;} 100%{width:33px; opacity:1; transition:all .5s;}}
				@keyframes hide2{0%{width:0;} 46%{width:0;} 65%{width:63px; opacity:1; transition:all .5s;} 100%{width:63px; opacity:1; transition:all .5s;}}
				@keyframes hide3{0%{width:0;} 66%{width:0;} 85%{width:20px; opacity:1; transition:all .5s;} 100%{width:25px; opacity:1; transition:all .5s;}}

				.love{width:50px; position:absolute; top:10px; right:22px;}
					.love img{width:100%;}

				.love_gray{font-size:14px; color:#666; text-align:center; border-bottom:1px solid #ccc; width:70%; margin:0 auto; padding-bottom:5%;}
				.m_img{width:200px; width:150px;}
}

@media screen and (min-width:0px) and (max-width:1099px){
	/* container */
		#container{width:100%; overflow:hidden; height:100%; margin:0;}
			#visual{width:100%; margin-top:60px; background:#000 url("../img/m0.jpg") no-repeat center; background-size:cover; height:420px; overflow:hidden; position:relative;}

				h2{width:300px; position:absolute; top:40px; left:5%; font-family: 'Nanum Gothic', sans-serif;}
					h2 img{width:100%;}

				.v_notice{position:absolute; bottom:20px; left:50%; margin-left:-45%; background-color:rgba(0,0,0,0.6); width:90%; height:70px; text-align:center; padding:10px 0;}
					.v_notice strong{color:#fff; display:block; color:#ccc; font-size:12px; margin-bottom:0; padding:10px 0 5px;}
						.v_notice p{overflow-x:scroll; margin:0 auto; width:90%; height:40px;}
						.v_name{display:block; float:left; width:100%; color:#ff8492; font-size:12px; margin-top:5px; padding:0;}


			.heart{position:absolute; top:150px; left:5%;}
			.back{position:absolute; left:225px; top:405px;}

			/* 오른쪽 영역 */
			#notice{width:100%; height:200px; background-color:#ececec; position:static;}
				.n_area{width:100%;}

				.notice_img{width:100%; height:30%; background-color:#fff; /*background:#000 url("../img/m2.png") no-repeat center; background-size:cover;*/ text-align:center; padding-top:40px; display:none;}


				.notice_text{width:88%; padding:5% 6%; margin-top:7%; border-bottom:1px solid #ccc;}
					.notice_text dt{font-size:14px; margin:0 0 5px; color:#555;}
						.notice_text dt a{vertical-align:sub;}
					.notice_text dd{width:100%; overflow:hidden; padding:5px 0; border-bottom:1px solid #ccc; font-size:12px;}
					.notice_text dd a{display:block; overflow:hidden; cursor:pointer; font-size:12px;}

						.notice_box{width:18%; float:left; border:1px solid #ff8492; box-sizing:border-box; margin-right:2%; font-size:12px; text-align:center; padding:2px 0;}
							.day{font-size:16px; font-weight:bold; line-height:1.7em; color:#ff8492;}
							.date{color:#ff8492;}
						.notice_notice{width:80%; float:left; font-size:12px; line-height:1.9em;}
							.notice_notice strong{width:100%; display:block; font-size:12px; padding-bottom:3px;}
							.notice_notice p{width:100%; text-overflow:ellipsis; overflow:hidden; white-space:nowrap;}

						.notice_text dd:last-child{}

						.n_t_b{display:inline-block; font-size:12px; line-height:2.5em;  float:right;}

							.notice_text dd a:hover .notice_box, .notice_text dd a:focus .notice_box{background-color:#ff8492; transition:all .5s;}
							.notice_text dd a:hover .notice_box p, .notice_text dd a:focus .notice_box p{color:#fff;}

				.notice_text2{width:88%; padding:0 6% 5%; margin-top:7%;}
					.notice_text2 dt{font-size:14px; margin:0 0 20px; color:#555;}
						.notice_text2 dt a{vertical-align:sub;}
					.notice_notice2{width:100%;}
						.notice_notice2 strong{display:block;  width:100%;  padding:6px 0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px;}
					.notice_notice2 img{width:18px; vertical-align:sub; margin-right:10px;}

						.notice_notice2 a:hover, .notice_notice2 a:focus{text-decoration:underline;}

						dt a:hover .n_t_b, dt a:focus .n_t_b{text-decoration:underline;}

		/* animation */
		.aniArea{width:100%; height:200px; position:relative; opacity:0.8;}
			.ani{font-size:20px; overflow:hidden; display:inline-block; line-height:18px; width:94%; margin:22% 3% 2%;  height:30px; text-align:center;}
			.hide1{width:49px; display:inline-block; /*outline:1px solid red;*/opacity:1; animation:hide1 4s infinite alternate; overflow:hidden; transition:all .5s;}
			.hide2{width:97px; display:inline-block; /*outline:1px solid blue;*/ opacity:1; animation:hide2 4s infinite alternate; overflow:hidden; transition:all .5s;}
			.hide3{width:25px; display:inline-block; /*outline:1px solid coral;*/ opacity:1; animation:hide3 4s  infinite alternate; overflow:hidden; transition:all .5s;}

			.ani span{height:30px;}
				.ani span img{height:100%;}


			@keyframes hide1{0%{width:0;} 25%{width:0;} 45%{width:49px; opacity:1; transition:all .5s;} 100%{width:49px; opacity:1; transition:all .5s;}}
			@keyframes hide2{0%{width:0;} 46%{width:0;} 65%{width:97px; opacity:1; transition:all .5s;} 100%{width:97px; opacity:1; transition:all .5s;}}
			@keyframes hide3{0%{width:0;} 66%{width:0;} 85%{width:25px; opacity:1; transition:all .5s;} 100%{width:25px; opacity:1; transition:all .5s;}}

			.love{width:50px; position:absolute; top:60px; right:20px;}
				.love img{width:100%;}

			.love_gray{font-size:14px; color:#666; text-align:center;}


			.pppop{position:fixed; z-index:99999; top:100px; width:55%; left:5%; background-color:none;}
			.pppop img{width:100%;}
			.pppop_x{position:absolute; right:-25px; top:-25px; font-size:30px; background-color:#666; border-radius:15px; width:30px; height:30px; text-align:center; line-height:25px; color:#fff; cursor:pointer;}
}
@media screen and (min-width:0) and (max-width:600px){
	.pppop{position:fixed; z-index:99999; top:100px; width:80%; left:5%; background-color:none;}
	.pppop img{width:100%;}
	.pppop_x{position:absolute; right:-25px; top:-25px; font-size:30px; background-color:#666; border-radius:15px; width:30px; height:30px; text-align:center; line-height:25px; color:#fff; cursor:pointer;}
}