@font-face { 
	font-family: 'Didot';
	font-style: normal;
	font-weight: 500;
	src: url(../font/Didot.eot) format('eot'), 
	url(../font/Didot.woff) format('woff');
}

@font-face { 
	font-family: 'UniversLTStd';
	font-style: normal;
	font-weight: 500;
	src: url(../font/UniversLTStd.eot) format('eot'), 
	url(../font/UniversLTStd.woff) format('woff');
}

@font-face { 
	font-family: 'UniversLTStd-Light';
	font-style: normal;
	font-weight: 400;
	src: url(../font/UniversLTStd-Light.eot) format('eot'), 
	url(../font/UniversLTStd-Light.woff) format('woff');
}

@font-face { 
	font-family: 'Cormorant Garamond';
	font-style: normal;
	font-weight: 400;
	src: url(../font/CormorantGaramond-Regular.eot) format('eot'), 
	url(../font/CormorantGaramond-Regular.woff) format('woff');
}

@font-face { 
	font-family: 'Cormorant Garamond';
	font-style: normal;
	font-weight: 600;
	src: url(../font/CormorantGaramond-SemiBold.eot) format('eot'), 
	url(../font/CormorantGaramond-SemiBold.woff) format('woff');
}

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600&display=swap');

html, body, div, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, span, form, fieldset, input, select, label, textarea, table, caption, thead, tfoot, tbody, tr, th, td
{margin:0;padding:0;font:30px/1.5 'Didot', 'Apple SD Gothic Neo', 'Malgun Gothic', '맑은고딕', '돋움', Dotum, sans-serif;color:#5f4c3d;-webkit-text-size-adjust:none;word-break:keep-all}
b, span, strong, input, a, button{font-size:inherit;font-family:inherit;color:inherit}
article, aside, dialog, footer, header, section, footer, nav, figure, hgroup, details, summary, figure, figcaption {display: block;}
cite{display:inline}
html, body {height:100%;} 
body {margin:0px;background:url(../img/bg1.jpg) repeat;background-attachment:fixed}
a:link {text-decoration:none;} 
a:visited {text-decoration:none;}
img{border:0;max-width:100%}
label, input, textarea, select{vertical-align:middle}
ol, ul{list-style:none;}  
table{border-collapse:collapse;table-layout:fixed;}
fieldset{border:none}
.skip, legend{position:absolute;left:-1000%;width:1px;height:1px;font-size:0;line-height:0;overflow:hidden;}
button{margin:0;padding:0;border:none;background:none;outline:none;cursor:pointer;display:inline-block;}

/*layout*/

header{
	padding:50px 0 263px;margin:0 100px;
	border-bottom:2px solid #5f4c3d
}
header h1{width:200px;margin:0 auto;text-align:center;}
h1 embed{width:100%}
header p{padding:230px 0 60px;font-size:80px;line-height:1.2em;}
#gnb{font-size:0;}
#gnb li{display:inline-block;margin-right:15px}
#gnb li a{display:inline-block;font-size:24px;border-bottom:1px solid #5f4c3d;font-weight:600;line-height:1.1em;letter-spacing:1px}
#container{width:100%;overflow:Hidden;}
#container section{position:relative;}

/*about*/
#about h2{
	position:absolute;left:100px;top:100px;
	/*font-family: 'UniversLTStd-Light';*/font-size:24px;font-weight:600
}
#about p{font-family: 'Cormorant Garamond', serif;font-weight:600;font-size:24px;line-height:1.4em}
.about1{
	padding:100px 100px 0 750px
}
.about1 p+p{margin-top:30px;}
.about1 p img{display:block;margin:70px 0}
.about2 ul{font-size:0;width:calc(100% + 20px);margin:200px 0 170px}
.about2 ul li{display:inline-block;width:calc(33.33% - 20px);font-size:0;margin-bottom:20px}
.about2 ul li img{width:100%}
.about3 p{padding:0 100px 200px;font-size:30px;text-align:justify;color:#98877a}
.about3 p b{color:#5f4c3d;font-weight:600}



/*brand*/
#brand{padding-bottom:270px}
.brand1{margin:0 100px;font-size:0}
.brand1 ul{width:calc(100% + 20px);font-size:0;}
.brand1 ul li{position:relative;display:inline-block;width:calc(33.33% - 20px);margin-bottom:20px;font-size:0}
.brand1 ul li img{width:100%}
.brand1 ul li span{position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;transition:.3s}
.brand1 ul li:hover span{opacity:1}
.brand1 ul li.col2{width:calc(66.66% - 20px);}
.brand2{position:absolute;bottom:290px;left:100px;width:calc(28% - 40px);}
.brand2 dt,
.brand2 dd{
	font-family: 'UniversLTStd-Light';font-size:20px;
}
.brand2 dt embed{width:200px;}
.brand2 dt span{display:block;margin-top:8px;font-size:20px}
.brand2 dd{margin-top:50px}
.brand2 dd a{
	font-family: 'UniversLTStd';font-size:20px;
	border-bottom:1px solid #5f4c3d;
}

/*contact*/
#contact{
	padding:100px 100px;
	background:url(../img/bg2.jpg) repeat;background-attachment:fixed
}
#contact h2{
	margin-bottom:50px;
	/*font-family: 'UniversLTStd-Light';*/font-size:24px;font-weight:600
}
#contact p{
	margin-top:50px;
	font-family: 'UniversLTStd-Light';font-size:18px;
}
#contact ul{margin-top:160px;font-size:0}
#contact ul li{display:inline-block;margin-right:45px}
#contact ul a{
	font-family: 'UniversLTStd-Light';font-size:16px;
	border-bottom:1px solid #5f4c3d;
}
#contact address{
	position:absolute;bottom:100px;right:160px;
	font-family: 'UniversLTStd-Light';font-size:16px;font-style:Normal
}

.about2_m,
.brand1_m{visibility:hidden;opacity:0;position:absolute}


@media all and (max-width:1580px){
	.about1{padding-left:450px}
	.brand2{position:relative;bottom:0;left:0;padding:100px 100px 0 100px;width:auto}
}

@media all and (max-width:1200px){
	header{margin:0 100px;padding:50px 0 165px}
	header p{padding:165px 0 40px;font-size:70px}
	#gnb li a{font-size:28px}

	#about h2{position:relative;left:100px;top:50px}
	.about1{padding:100px 100px 0}
	#about p{font-size:26px}
	.about2 ul{margin:100px 0}
	.about3 p{padding:0 100px 100px}
	
	#brand{padding-bottom:150px}
	.brand1{margin:0 100px}
	.brand1 ul li{width:calc(50% - 20px) !important;}
	.brand2{padding:80px 100px 0 100px}

	#contact{padding:80px 100px;}
	#contact ul{margin:100px 0 50px;}
	#contact address{position:relative;bottom:0;right:0}
}

@media all and (max-width:760px){
	body{background-attachment:inherit}
	header{margin:0 50px;padding:30px 0 200px}
	h1 {max-width:55%;}
	header p{padding:160px 0 20px;font-size:40px;}
	
	#about h2{top:40px;left:50px;font-size:25px;font-weight:600}
	#about p{font-size:24px;}
	.about1 p+p{margin-top:40px}
	.about1{padding:120px 50px 0}

	.about2,
	.brand1{visibility:hidden;opacity:0;position:absolute;}
	.about2_m,.brand1_m{visibility:visible;opacity:1;position:relative;outline:none}
	.slick-track, .slick-slide{outline:none}
	.slick-dots{position:absolute;left:0;bottom:20px;width:100%;text-align:center;}
	.slick-dots li{display:inline-block;margin:0 4px;}
	.slick-dots li button{display:inline-block;width:8px;height:8px;background:rgba(113,113,113,0.5);border-radius:50%;font-size:0}
	.slick-dots li.slick-active button{background:#fff}
	.about2_m{position:relative;margin:100px 0;}
	/*
	.about2_m #videobcg{
		padding: 0;
		width: 100%;
		height: 100vh;
		overflow: hidden;
		position: relative;
	}
	.about2_m #videobcg iframe{
		box-sizing: border-box;
		width: 177.77777778vh;
		height: 56.25vw;
		min-width: 100%;
		min-height: 100%;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}
	.about2_m li.slick-slide{position:relative;height:100vh}
	
	.about2_m ul li{
		width:100%;height:100vh;
		background-size:cover;background-position:center;
	}
	*/
	.about2_m p{
		position:absolute;top:50%;left:0;
		display:block;width:100%;
		padding:0 50px;
		box-sizing:border-box;
		text-align:center;font-size:22px;
		z-index:10;transform:translateY(-50%);
	}
	.about2_m p b{display:block;font-size:30px;margin-bottom:14px;line-height:1.3em}
	.about2_m .slick-dots{display:none}
	.about3 p{padding:0 0 100px;text-align:justify}

	#brand{padding-bottom:100px}
	.brand1_m ul li{position:relative;}
	.brand1_m ul li span{position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;transition:.3s}
	.brand1_m ul li:hover span{opacity:1}
	.brand2{padding:100px 50px 0}
	.brand2 dt{max-width:60%}
	.brand2 dt, .brand2 dd{font-size:18px}

	#contact{padding:100px 50px}
	#contact h2{margin-bottom:50px}
	#contact p{margin-top:30px;font-size:18px}
	#contact ul{margin:50px 0 30px;}
	#contact ul li a,
	#contact address{font-size:18px}

}

@media all and (max-width:460px){
	header{margin:0 30px;padding:30px 0 200px}
	header p{font-size:28px;font-weight:600;line-height:1.3em}
	#gnb li a{font-size:18px}

	#about h2{left:30px;font-size:22px;font-weight:600}
	#about p{font-size:20px;}
	.about1{padding:120px 30px 0}
	.about1 p+p{margin-top:30px}
	.about1 p img{margin:60px 0}

	.brand2{padding:100px 30px 0}
	.brand2 dd{margin-top:30px}
	.brand2 dd a{font-size:18px}

	#contact{padding:100px 30px}
	#contact h2{margin-bottom:30px;font-size:22px}
	#contact p{margin-top:20px;font-size:16px}
	#contact ul li{margin:0}
	#contact ul li+li{margin-left:20px}
	#contact ul li a,
	#contact address{font-size:16px}
}