﻿@import url(http://fonts.googleapis.com/earlyaccess/nanumgothiccoding.css);
@import url(http://fonts.googleapis.com/css?family=Playfair+Display);

@import url(http://fonts.googleapis.com/css?family=Dosis);



/* -----brand------ */
#brand{
	width: 100%;
	margin: -10px auto;
	border-top: 3px solid #343434;
}
	#brand #brand_img{
		width: 800px;
		margin: 15px auto;
	}
	
	#brand #brand_text{
		width: 965px;
		margin: 0 auto;
	}
		#brand_text .big_text{
			/* font-family: 'Dosis', sans-serif; */
			font-family: 'Playfair Display', serif;
			font-weight: bold;
			margin: 20px 0 50px 290px;
			overflow:hidden;height:50px
		}
			#brand_text .big_text dt{
				font-size: 2.5em;
				color: #514644;
				letter-spacing: 2px;
				display:inline-block
			}
			#brand_text .big_text dd{
				font-size: 2.5em;
				color: #746663;
				letter-spacing: 2px;
				display:inline-block
			}
		
		#brand_text .m_text{
			width: 800px;
			margin: 0 auto;
		}
			#brand_text .m_text .history_text{	
				width: 470px;
				float: left;
				margin-top: 15px;
			}
				.m_text .history_text h2{
					width: 153px;
					font-family: 'Dosis', sans-serif;
			
					font-size: 1.625em;
					font-weight: bold;
					border-bottom: 1px solid #B87562;
					padding: 5px;
					color: #B87562;
					margin-left: 24px;
				}
				.m_text .history_text .p_text{
					width: 480px;
					margin: 20px 0 0 25px;
					float: left;
				}
				.m_text .history_text .p_text p{
					font-family: 'Nanum Gothic Coding', serif;
					font-size: 0.75em;
					font-weight: bold;
					color: #5C5C5A;
					line-height: 18px;
				}
				.m_text .history_text .p_text dt{
					font-family: 'Nanum Gothic Coding', serif;
					font-size: 0.75em;
					font-weight: bold;
					color: #FFF;
					background: #7D6B6B;
					line-height:18px;
					float: left;
				}
				.m_text .history_text .p_text dd{
					font-family: 'Nanum Gothic Coding', serif;
					font-size: 0.75em;
					font-weight: bold;
					color: #5C5C5A;
					float: left;
					line-height: 18px;
				}
				
				
			#brand_text .m_text .m_img{
				width: 330px;
				height: 440px;
				float: left;
			}

	
	
	@media screen and (max-width:800px) {
		#brand #brand_img{width:auto;padding:0 10px}
		#brand #brand_img img{width:100%}
		#brand #brand_text{width:auto }
		#brand_text .big_text{margin:20px 0 40px 0;text-align:center}
		#brand_text .m_text{width:auto}
		.m_text .history_text .p_text{width:auto;padding-right:20px}
		#brand_text .m_text .history_text{width:auto}
		#brand_text .m_text .m_img{display:none}
		#brand{border:none;margin-top:80px}
	}
	
	@media screen and (max-width:480px) {
		#brand_text .big_text{margin:10px 0}
		#brand_text .big_text dt{font-size:1.2em}
		#brand_text .big_text dd{font-size:1.2em}
		#brand_text .big_text{height:30px}
		.m_text .history_text h2{font-size:1.2em}
	}
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	