@charset "UTF-8";

body	{margin: 0;
	font-family: '맑은 고딕', 'Apple SD Gothic Neo', sans-serif;
	background:#f7f6f6;}/*background 추가*/ 

/* 박스의 왼쪽 오른쪽에 공백 확보 .box3추가 */
.box1, .boxA, .box2-inner, .box5-inner,.box3 
	{padding-left: 10px;
	padding-right: 10px}




/* 소분류 추가 */

.b1 li {display:inline-block; text-align:center;}
.bl ul {margin:o auto; text-align:center;}
.bl {width:100%;/margin-left:*margin:o auto;*/ text-align:center;}




/* 사이트 이름 */
.site h1 a	{color: #83a4a8;
	text-decoration: none} 

.site h1	{margin: 0;
	font-size: 30px;
	font-family: 'Paytone One', sans-serif;
	font-weight: normal}


/* 내비게이션 */
.menu ul	{margin: 0;
	padding: 0;
	list-style: none;
	margin-bottom:15px;}/*margin-bottom:10px;*/

.menu li a	{display: block;
	padding: 15px;/*15px;*/
	color: #fff;
	font-size: 14px;
	text-decoration: none} /*color: #000000;*/

.menu li a:hover	{opacity:0.7;}/*background-color: #75dbe7*/

.menu ul:after	{content: "";
	display: block;
	clear: both}

.menu li	{float: left;
	width: auto}
	
	
	
/*상단 메인 추가*/

/*.main {background:#666; width:100%; height:450px; margin-bottom:20px; background-image:url(img/main1.jpg); background-size:cover;}*/

.main { margin-bottom:20px;}

/*.boxA hr {color:#fff; margin-bottom:10px; margin-top:10px;}*/



.l {border:0.5px solid #c3c7c4;margin-bottom:10px; margin-top:10px;}


/* 기사 */
.story h1	{margin-top: 0;
	margin-bottom: 20px;
	font-size: 36px}

.story p	{margin-top: 0;
	margin-bottom: 20px}

.story img	{max-width: 100%;
	height: auto}


/* 기사의 소제목 */
.story h2	{margin-top: 40px;
	padding-left: 10px;
	border-left: solid 10px #7cbac1;
	font-weight: normal}


/* 기사의 작성일 */
.story-info	{margin-top: -10px;
	margin-bottom: 20px}

.story-info i	{margin-right: 5px;
	color: #aaaaaa;
	font-size: 20px}


/* 기사 분류 */
.story-cat	{margin-bottom: 25px}

.story-cat ul	{margin: 0;
	padding: 0;
	list-style: none}

.story-cat li a	{display: block;
	margin-right: 5px;
	padding: 3px 5px;
	border-radius: 2px;
	background-color: #75dbe7;
	color: #ffffff;
	font-size: 12px;
	text-decoration: none}

.story-cat li a:hover	{background-color: #94ecf6}

.story-cat ul:after	{content: "";
	display: block;
	clear: both}

.story-cat li	{float: left;
	width: auto}



/* SNS 공유 버튼 */
.share	{margin-top: 40px}

.share ul	{margin: 0;
	padding: 0;
	list-style: none}

.share li a	{display: block;
	padding: 10px 5px;
	color: #ffffff;
	font-size: 14px;
	text-align: center;
	text-decoration: none}

.share-tw	{background-color: #55acee}
.share-fb	{background-color: #3b5998}
.share-gp	{background-color: #dd4b39}

.share li a:hover	{opacity: 0.8}

.share ul:after	{content: "";
	display: block;
	clear: both}

.share li	{float: left;
	width: 33.3333%}



/* 관련 기사 메뉴 */
.relation	{margin-top: 40px;
	padding: 20px;
	background-color: #f0f0d4}

.relation h1	{margin-top: 0;
	margin-bottom: 5px;
	color: #727224;
	font-size: 20px;
	font-weight: normal}

.relation ul	{margin: 0;
	padding: 0;
	list-style: none}

.relation li a	{display: block;
	padding: 5px;
	color: #000000;
	font-size: 14px;
	text-decoration: none}

.relation li a:hover	{text-decoration: underline}

.relation ul:after	{content: "";
	display: block;
	clear: both}

.relation li	{float: left;
	width: 25%}

.relation img	{max-width: 100%;
	height: auto;
	border: none}



/* 사이드 메뉴 */
.sidemenu	{margin-bottom: 30px}

.sidemenu ul	{margin: 0;
	padding: 0;
	list-style: none}

.sidemenu li a	{display: block;
	padding: 5px;
	color: #000000;
	font-size: 14px;
	text-decoration: none}

.sidemenu li a:hover	{background-color: #eeeeee}

.sidemenu h1	{margin-top: 0;
	margin-bottom: 10px;
	border-bottom: dotted 2px #dddddd;
	color: #666666;
	font-size: 18px}

.sidemenu i	{margin-right: 5px;
	color: #888888}


/* 추천 기사 메뉴 */
.recommend	{margin-bottom: 30px}

.recommend ul	{margin: 0;
	padding: 0;
	list-style: none}

.recommend li a	{display: block;
	margin-bottom: 10px;
	padding: 0;
	color: #000000;
	font-size: 14px;
	text-decoration: none}

.recommend li a:hover	{background-color: #eeeeee;
	opacity: 0.8}

.recommend h1	{margin-top: 0;
	margin-bottom: 10px;
	border-bottom: dotted 2px #dddddd;
	color: #666666;
	font-size: 18px}

.recommend img	{width: 100%;
	height: auto;
	border: none;
	vertical-align: bottom}

.recommend .text	{padding: 5px 10px;
	background-color: rgba(0,0,0,0.5);
	color: #ffffff}

.recommend a	{position: relative}

.recommend .text	{position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box}


/* 인기 기사 메뉴 */
.popular ul	{margin: 0;
	padding: 0;
	list-style: none}

.popular li a	{display: block;
	padding: 5px;
	border-bottom: dotted 1px #dddddd;
	color: #2288bb;
	font-size: 14px;
	text-decoration: none}

.popular li a:hover	{background-color: #eeeeee}

.popular li a img	{border: none}

.popular h1	{margin-top: 0;
	margin-bottom: 10px;
	border-bottom: dotted 2px #dddddd;
	color: #666666;
	font-size: 18px}

.popular a:after	{content: "";
	display: block;
	clear: both}

.popular img	{float: left;
	width: 60px}

.popular .text	{float: none;
	width: auto;
	margin-left: 60px;
	padding-left: 15px}

.popular span	{display: block;
	color: #666666;
	font-size: 12px}


/* 개요 .line a  .pickup a 추가*/








.m_1 {margin-bottom:/*20px;*/ 40px; text-align:center;overflow:hidden;}


.m_1 a {display:block; /*border:solid 1px #ddd;*/ color:#000; text-decoration:none;position: relative;
/*width:500px; height:320px;*/}



.text	{padding: 15px 10px; height:auto; overflow:hidden; 
	background-color: rgba(0,0,0,0.4);
	color: #fff; text-shadow:0px 0px 3px #000;position: absolute;
	bottom: -90px;
	left: 0;
	width: 100%;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	}

.text h1 {padding-top:10px;}





.text:hover {transform: translate(0,-55%); 	transition:all 0.5s;
	-webkit-transition:all 0.5s;
	-moz-transition:all 0.5s;
	-o-transition:all 0.5s;
	-ms-transition:all 0.5s;
}







.summary	{margin-bottom: 20px}

/*.summary a	{display: block;
	border: solid 1px #dddddd;
	color: #000000;
	text-decoration: none}*/


.line a {display: block;
	border: solid 1px #dddddd;
	background:#f8f6f6;
	color: #2a2a2a;
	text-decoration: none}
	
	
.line p:hover {text-decoration:underline;}/*추가*/

.line .more:hover  {text-decoration:none;}/*추가*/

.pickup .more_1:hover  {text-decoration:none; opacity:0.9;}/*추가*/

.pickup img:hover {opacity:0.8;}


.pickup a {display: block;
	border: solid 1px #dddddd;
	background:#f8f6f6;
	color: #2a2a2a;
	text-decoration: none;
	padding-bottom:20px;/*추가*/	
	}
	
	
.pickup {margin-top:50px;}/*추가*/	


.pickup h1 {padding-top:30px;}/*추가*/

.pickup p:hover {text-decoration:underline;}/*추가*/

.pickup .more:hover  {text-decoration:none;}/*추가*/


.line a:hover	{box-shadow: 0 0 10px #dddddd}

.pickup a:hover {box-shadow: 0 0 10px #dddddd}

.pickup1 { /*cursor:default;*/ margin-bottom:-10px; margin-top:0px; max-width:100%; height:auto; border:none; }


/*.summary a:hover	{box-shadow: 0 0 10px #dddddd}*/

/*.summary:nth-child(2) {margin-bottom: 30px;}*/

.summary img	{max-width: 100%;
	height: auto;
	border: none;
	/*margin-bottom: 15px;*/
	vertical-align: bottom}

.summary h1	{margin-top: -10px;
	margin-bottom: 5px;
	margin-left: 15px;
	margin-right: 15px;
	font-size: 23px}

.summary p	{margin-top: 0;
	margin-bottom: 10px;
	margin-left: 15px;
	margin-right: 15px;
	font-size: 14px}
	

.pickup1 a {max-width: 100%;margin-top:-50px;/*position: relative; height:auto;*/
	height: 400px;background-size:contain;background-position:center center;height:auto; border:none; vertical-align:bottom;
	}
	
	
.m_1 {border-bottom:1px solid #ddd; background:red; margin-top:20px;margin-bottom:0px;}/*추가*/


.chu {margin-top:50px; font-size:15px; font-weight:bold; background:#c77c84; color:#fff; padding:5px;margin-bottom:-30px;}

.chu_1 {margin-top:70px; font-size:15px; font-weight:bold; background:#c77c84; color:#fff; padding:5px;margin-bottom:10px;}





/* 계속 읽기 */




.more	{display: inline-block;
	padding: 5px 15px;
	background-color: #d37f87;
	color: #ffffff;
	border-radius: 15px;
	opacity:0.8;/*추가*/
	;} /*background-color: #3077be;*/
	
	
	
.more_1	{display: inline-block;
	padding: 5px 15px;
	background-color: #d37f87;
	color: #ffffff;
	border-radius: 15px;
	
	;} /*background-color: #3077be;*/





.more:hover {opacity:0.6;} /*.more:hover {opacity:0.8;}추가*/

.more i	{margin-left: 10px}


/* 배지 */
.badge	{width: 120px;
	height: 120px;
	padding-top: 25px;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	border-radius: 60px;
	background-color: #eeabb1;
	color: #ffffff;
	text-align: center;
	box-shadow: 0 0 4px #aaaaaa} /*background-color: #00a0e9;*/

.badge i	{display: block;
	font-size: 40px; padding-bottom:5px; transition: 1s;}
	/*font-size: 40px , padding-bottom:5px;추가 transition: 1s;추가*/
	
.badge:hover i { transform: rotate(360deg);}/*.badge i:hover { transform: rotate(360deg);}추가*/
	

.badge:hover {/*background:#fcc1c6;*/
/*backgroud:#opacity:0.9;*/} /*.badge:hover {opacity:0.7;}추가*/



.badge > h1 {color:#ffffff;}



/* 배지의 출력 위치 */
.pickup	{position: relative}

/*.main {position:relative;} /*추가*/

.badge	{position: absolute;
	top: 44%;
	right: -15px}
	
/*.badge {position:absolute; top:20%; right:150px;}*/


/* 페이지네이션 */
.pagenation	{text-align: center}

.pagenation ul	{display: inline-block;
	margin: 0;
	padding: 0;
	list-style: none}

.pagenation li a	{display: block;
	margin-left: 5px;
	margin-right: 5px;
	padding: 5px 10px;
	border: solid 1px #aaaaaa;
	color: #000000;
	font-size: 14px;
	text-decoration: none;
	background:#f2f6f3;
	}

.pagenation li a.active	{/*background-color: #cccccc;*/ border: 2px solid #535453; 

/*box-sizing:border-box;
-webkit-box-sizing:border-box;
-o-box-sizing:border-box;
-ms-box-sizing:border-box;*/}


.pagenation li a:hover	{background-color: #eeeeee; /*border: 2px solid #aaaaaa; */
/*box-sizing:border-box;
-webkit-box-sizing:border-box;
-o-box-sizing:border-box;
-ms-box-sizing:border-box;*/}

.pagenation ul:after	{content: "";
	display: block;
	clear: both}

.pagenation li	{float: left;
	width: auto}


/* 저작권 */
.copyright p	{margin: 0;
	color: #666666;
	font-size: 14px}


/* BOX2를 바의 형태로 디자인 */
.box2	{background-color: #686868; margin-bottom:-10px;} /*background-color: #7cbac1} margin-bottom:-20px;추가*/


/* BOX5 위에 구분선을 추가 */

/*.last {border-top: solid 1px #dddddd}*/
.box5	{border-top: solid 1px #dddddd}


/* 박스의 위아래 간격 */
.box1	{padding-top: 8px;
	padding-bottom: 8px}

.box3	{padding-top: 40px;
	padding-bottom: 30px}

.box4	{padding-top: 40px;
	padding-bottom: 30px}

.box5	{padding-top: 40px;
	padding-bottom: 40px}

.top .boxA	{padding-top: 20px;
	padding-bottom: 20px}


/* ########### 599px 이하 ########### */
@media (max-width: 599px) {
	





	
/*.boxA hr {display:none;}	/*추가*/
	

/* 배지 */
.badge	{-ms-transform: scale(0.5);
	-ms-transform-origin: right top;
	-webkit-transform: scale(0.5);
	-webkit-transform-origin: right top;
	transform: scale(0.5);
	transform-origin: right top;
	top: -8px;
	right: 10px}

/*.main {display:none;} /*추가*/




/* 내비게이션 */
.menu li a	{padding: 10px 3px;
	font-size: 11px}

/* 사이트 이름과 기사의 제목 */
.site h1	{font-size: 20px}

.story h1	{font-size: 26px}

/* 박스의 위아래 간격 */
.box1	{padding-top: 4px;
	padding-bottom: 4px}

.box3	{padding-top: 25px}

/* SNS 공유 버튼 */
.share span	{display: inline-block;
	text-indent: -9999px}

/* 관련 기사 메뉴 */
.relation	{padding: 10px}

.relation li	{width: 50%}

.relation li:nth-child(3)	{clear:both}

}



/* ########### 600px 이상 ########### */
@media (min-width: 600px) {

/* 개요를 가로 정렬하는 설정 */
.boxA-1:after	{content: "";
	display: block;
	clear: both}

.boxA-1 .summary	{float: left;
	width: 50%}

.boxA-1 .summary:nth-child(odd)
	{padding-right: 15px;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	clear: both}

.boxA-1 .summary:nth-child(even)
	{padding-left: 15px;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box}
	
/*.main { width:100%;}	/*추가*/	

}



/* ########### 600px 이상 ~ 767px 이하 ########### */
@media (min-width: 600px) and (max-width: 767px) {

/* 배지의 출력 위치 */
.badge	{top: 30%;
	right: 15px}


/* BOX4-1과 BOX4-2를 가로 정렬하는 설정 */
.box4:after	{content: "";
	display: block;
	clear: both}

.box4-1	{float: left;
	width: 50%}

.box4-2	{float: left;
	width: 50%}

/* BOX4-1와 BOX4-2의 왼쪽 오른쪽의 간격 */
.box4-1	{padding-right: 20px;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box}

.box4-2	{padding-left: 20px;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box}


/*.main {width:100%;}	/*추가*/ 
	

}




/* ########### 768px 이상 ########### */
@media (min-width: 768px) {

/* 픽업 */
.pickup h1	{font-size: 30px}

/* BOX3과 BOX4를 가로 정렬하는 설정 */
.boxA:after	{content: "";
	display: block;
	clear: both}

.box3	{float: left;
	width: 70%}

.box4	{float: left;
	width: 30%}

/* BOX3과 BOX4의 왼쪽 오른쪽의 간격 */
.box3	{padding-right: 50px;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box}
	
/*.main {float:left; width:100%;}	*/

}



/* ########### 1040px 이상 ########### */
@media (min-width: 1040px) {

/* 박스의 왼쪽 오른쪽에 공백 확보 .box3추가 */
.box1, .boxA, .box2-inner, .box5-inner, .box3
	{width: 1000px;
	margin-left: auto;
	margin-right: auto}
	
	
	
	/*.main {background:#666; width:100%; height:463px; margin-bottom:20px; background-image:url(img/main1.jpg); background-size:contain;}*/

}