@charset "utf-8";

/* ------------------------------------------------------------ articles */

	#article {
		padding: 85px 0 0;
	}

		#article .list {
			width: 720px;
			float: left;
		}

		#article .head_title {
			padding: 0 0 30px;
		}

		#article .head_title span {
			font-size: 12px;
			display: inline-block;
			padding: 6px 25px;
			background: #7ec8a7;
			color: #fff;
		}

		#article .head_title h2 {
			font-size: 30px;
			padding: 15px 0 25px;
			border-bottom: 1px solid #000;
			font-weight: bold;
		}

		#article .head_title time {
			font-size: 12px;
			padding: 25px 0 0;
			display: block;
		}

		#article .thumb {
			padding: 0 0 100px;
		}

		#article .thumb img {
			width: 100%;
			height: auto;
		}

		#article .sns_share {
			padding: 65px 0 0;
		}

		#article .sns_share li {
			float: left;
			margin: 0 0 0 4px;
		}

		#article .sns_share li:nth-child(2) {
			margin: 0;
		}

		#article .list .tags {
			padding: 70px 0;
		}

		#article .recommend {
			padding: 0 0 130px;
		}

		#article .recommend h3 {
			font-size: 24px;
			font-weight: bold;
			padding: 0 0 15px;
			border-bottom: 1px solid #000;
			margin: 0 0 35px;
		}

		#article .recommend article {
			float: right;
			width: 340px;
		}

		#article .recommend article:first-child {
			float: left;
		}
		#article .recommend a {
			display: block;
		}


		#article .recommend article .image {
			position: relative;
			width: 130px;
			overflow: hidden;
			float: left;
		}

		#article .recommend article .image img {
			height: 120px;
			width: auto;
		}

		#article .recommend article .image span {
			position: absolute;
			left: 0;
			bottom: 0;
			font-size: 12px;
			color: #fff;
			background: #7ec8a7;
			display: block;
			width: 100%;
			text-align: center;
			line-height: 23px;
		}

		#article .recommend article .text {
			float: right;
			width: 190px;
		}

		#article .recommend article .text time {
			display: block;
			font-size: 12px;
		}

		#article .recommend article .text h2 {
			font-size: 16px;
			font-weight: bold;
			padding: 10px 0 5px;
			line-height: 140%;
		}

		#article .recommend article .text p {
			font-size: 12px;
			line-height: 140%;
		}

/* ------------------------------------------------------------ blog_detail */


	.blog_details .blog_title {
		font-size: 24px;
		font-weight: bold;
		padding: 0 0 10px;
		border-bottom: 1px solid #000;
		margin: 0 0 30px;
	}

	.blog_details .blog_text {
		line-height: 200%;
		margin: 0 0 60px;
	}

		.blog_details .blog_text a {
			color: #7ec8a7;
			text-decoration: underline;
		}

	.blog_details .blog_image {
		text-align: center;
		margin: 0 0 60px;
	}

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

	.blog_details .blog_btn {
		text-align: center;
		margin: 0 0 60px;
	}

		.blog_details .blog_btn a {
			min-width: 240px;
			line-height: 60px;
			padding: 0 20px;
			color: #fff;
			background: #7ec8a7;
			display: inline-block;
			border-radius: 30px;
			font-size: 16px;
		}

	.blog_details .summary {
		margin: 0 0 30px;
		padding: 15px;
		border: 1px solid #000;
	}

		.blog_details .summary .left {
			float: left;
		}

		.blog_details .summary .right {
			float: right;
		}

		.blog_details .summary .photo {
			width: 38%;
		}

		.blog_details .summary .photo img {
			width: 100%;
			height: auto;
		}

		.blog_details .summary .text {
			width: 59%;
		}

		.blog_details .summary .text h4 {
			font-size: 18px;
			font-weight: bold;
			padding: 0 0 10px;
		}

		.blog_details .summary .text p {
			font-size: 14px;
			line-height: 180%;
		}

	.blog_details .youtube {
	  position: relative;
	  width: 100%;
	  padding-top: 56.25%;
	  margin: 0 0 60px;
	}

		.blog_details .youtube iframe {
		  position: absolute;
		  top: 0;
		  right: 0;
		  width: 100%;
		  height: 100%;
		}

	.blog_details .blog_twitter {
		margin: 0 0 60px;
	}

	.blog_details .blog_twitter .twitter-tweet {
		margin: 0 auto;
	}

	.blog_details .blog_insta {
		margin: 0 0 60px;
	}

	.blog_details .blog_insta iframe {
		margin: 0 auto 12px!important;
	}

	.blog_details .page_area {
		text-align: center;
		margin: 0 0 40px;
	}

	.blog_details .page {
		padding: 40px 0 0;
	}
	
	.blog_details .page a {
		display: inline-block;
		line-height: 37px;
		text-align: center;
		color: #fff;
		width: 139px;
	}
	
	.blog_details .page a.next {
		float: right;
		background: url(../../images/next.png) no-repeat center center;
	}
	
	.blog_details .page a.prev {
		float: left;
		background: url(../../images/prev.png) no-repeat center center;
	}
	
		
/* ------------------------------------------------------------ mobile ------------------------------------------------------------ */
@media only screen and (max-width: 640px) {

/* ------------------------------------------------------------ articles */

	#article {
		padding: 25px 0 0;
	}

		#article .list {
			width: 100%;
			float: none;
		}

		#article .head_title {
			padding: 0 0 20px;
		}

		#article .head_title span {
			padding: 6px 20px;
		}

		#article .head_title h2 {
			font-size: 20px;
			padding: 15px 0;
		}

		#article .head_title time {
			padding: 15px 0 0;
		}

		#article .thumb {
			padding: 0 0 50px;
		}

		#article .sns_share {
			padding: 60px 0 0;
			text-align: center;
			width: 280px;
			margin: 0 auto;
		}

		#article .sns_share li {
			margin: 0 10px;
			line-height: 40px;
			
		}

		#article .sns_share li img {
			max-width: 94%;
			height: auto;
			margin: 0 auto;
		}

		#article .sns_share li:first-child {
			margin: 0 20px 0 0;
		}

		#article .sns_share li:nth-child(2) {
			margin: 0 10px;
		}

		#article .list .tags {
			padding: 40px 0;
		}

		#article .recommend {
			padding: 0 0 65px;
		}

		#article .recommend h3 {
			font-size: 18px;
			padding: 0 0 10px;
			margin: 0 0 25px;
		}

		#article .recommend article {
			float: none;
			width: 100%;
		}

		#article .recommend article:first-child {
			float: none;
			margin: 0 0 30px;
		}

		#article .recommend article .image {
			width: 38.23%;
		}

		#article .recommend article .image img {
			width: 100%;
			height: auto;
		}

		#article .recommend article .text {
			width: 58.77%;
		}

		#article .recommend article .text h2 {
			font-size: 14px;
			padding: 5px 0 0;
		}

		#article .recommend article .text p {
			height: 33px;
			overflow: hidden;
		}

/* ------------------------------------------------------------ blog_detail */


	.blog_details .blog_title {
		font-size: 18px;
		padding: 0 0 10px;
		margin: 0 0 20px;
	}

	.blog_details .blog_text {
		margin: 0 0 40px;
	}

	.blog_details .blog_image {
		margin: 0 0 40px;
	}

	.blog_details .blog_btn {
		margin: 0 0 40px;
	}

		.blog_details .blog_btn a {
			line-height: 50px;
			padding: 0 20px;
			border-radius: 25px;
			font-size: 14px;
		}

	.blog_details .summary {
		margin: 0 0 20px;
		padding: 3%;
	}

		.blog_details .summary .left {
			float: left;
		}

		.blog_details .summary .right {
			float: right;
		}

		.blog_details .summary .photo {
			width: 38%;
		}

		.blog_details .summary .photo img {
			width: 100%;
			height: auto;
		}

		.blog_details .summary .text {
			width: 59%;
		}

		.blog_details .summary .text h4 {
			font-size: 16px;
			padding: 0 0 10px;
		}

		.blog_details .summary .text p {
			font-size: 13px;
			line-height: 160%;
		}

	.blog_details .youtube {
	  margin: 0 0 40px;
	}

	.blog_details .blog_twitter {
		margin: 0 0 40px;
	}

	.blog_details .blog_insta {
		margin: 0 0 40px;
	}

	.blog_details .page_area {
		text-align: center;
		margin: 0 0 20px;
	}

	.blog_details .page {
		padding: 20px 0 0;
	}

}