@font-face {
    font-family: 'garamond';
    src: url('./font/GaramondNo2RegularItalic/font.woff') format('truetype');
}
@font-face {
    font-family: 'garamond';
    src: url('./font/GaramondNo2RegularItalic/font.woff2') format('truetype');
}

@font-face {
    font-family: 'lehav';
    src: url('./font/LeHavreRoundedLight/font.woff2') format('truetype');
}
@font-face {
    font-family: 'lehav';
    src: url('./font/LeHavreRoundedLight/font.woff2') format('truetype');
}

@font-face {
    font-family: 'lucia';
    src: url('./font/LuciaRegular/font.woff2') format('truetype');
}
@font-face {
    font-family: 'lucia';
    src: url('./font/LuciaRegular/font.woff2') format('truetype');
}

@font-face {
    font-family: 'palace';
    src: url('./font/PalaceScriptRegular/font.woff2') format('truetype');
}
@font-face {
    font-family: 'palace';
    src: url('./font/PalaceScriptRegular/font.woff2') format('truetype');
}

@font-face {
    font-family: 'univers';
    src: url('./font/UniversNext330BasicLight/font.woff2') format('truetype');
}
@font-face {
    font-family: 'univers';
    src: url('./font/UniversNext330BasicLight/font.woff2') format('truetype');
}

body{margin:0px;}
p {margin:0px;}
@media all and (min-width:1024px){
	.main {background: transparent linear-gradient(90deg, #C4C4C4 0%, #CDCDCD 15%, #D2D2D2 32%, #FAFAFA 100%) 0% 0% no-repeat padding-box;
	opacity: 1;width:100%;height: 1026px;}

	.contact {width:100%;height: 72px;display:flex;justify-content:space-between;align-items: center;}

	.menu {width:100%;height: 204px;background: #E8E8E8 0% 0% no-repeat padding-box;opacity: 1;}

	.menubottom{width: 100%;
    height: 100px;
    margin-bottom: 7px;
    padding-bottom: 17px;
    background: #E8E8E8 0% 0% no-repeat padding-box;
    opacity: 1;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-content: center;
    align-items: flex-end; }

	.slide {margin-top: -21px;}

	.slide_info {width:100%;height: 283px;}

	.footer {display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		align-content: space-around;
		align-items: center;width:100%;height: 77px;background: #F2F2F2 0% 0% no-repeat padding-box;opacity: 1;font-family: univers;}

	.hoc {text-align: center;padding-top: 46px;}
	.hoc #p1{font-size: 18px;margin: 0px;font-family: univers;color:#221B1C}
	.hoc #p2{font-size: 11px;margin: 0px;font-family: garamond;
		color:#231815}
	.main_color_info p {color:#706F5B;font-family: univers;}
	.hocinfo{margin-top:20px;display: flex;justify-content: space-around;text-align: center;}
	.center{text-align: center;font-size:11px;font-family: garamond;
		color: #231815;}

	.left,.right{font-size:18px;width:90px;color:#706F5B;font-family: univers;}

	.main_color{text-align:center;padding: 40px 0 33px 0;}
	.main_color_info{text-align:center;font-size:13px;padding-bottom: 40px;}
	.main_color img {width: 172px;
height: 332px;}
	.main_list{display:flex;justify-content: space-around;padding: 0px 150px;font-size: 11px;color: #706F5B;font-family: univers;line-height: 10.75pt;}
	.main_list .listbox3, .listbox4, .listbox3 p, .listbox4 p {text-align:center}

	.listbox4 img{margin-top:86px;}
	.contact2 {margin-right: 4%;}
	.contact p {text-align: center;font-size:12px;font-family: univers;}
	.contact3 {padding-right: 57px;}
	.contact3:hover{color:#8D8E8E;-webkit-transition: all ease .3s;

		-o-transition: all ease .3s;

		-moz-transition: all ease .3s;

		-ms-transition: all ease .3s;

		transition: all ease .3s;cursor:pointer}
	.contact1 {padding-left: 57px;}
	.contact1:hover {color:#8D8E8E;-webkit-transition: all ease .3s;

		-o-transition: all ease .3s;

		-moz-transition: all ease .3s;

		-ms-transition: all ease .3s;

		transition: all ease .3s;cursor:pointer}
	.contact2:hover {color:#8D8E8E;-webkit-transition: all ease .3s;

		-o-transition: all ease .3s;

		-moz-transition: all ease .3s;

		-ms-transition: all ease .3s;

		transition: all ease .3s;cursor:pointer}
	#sub {font-size:11px;font-family: garamond;
		 color:#231815;}
	.modal {
		display: none;
		z-index: 500;
		width: 100%;
		height: 100vh;
		position: fixed;
		top: 0;
		left: 0;
	}

	.modal button {
		position: absolute;
		top: 3rem;
		right: 3rem;
		background: transparent;
		border: 0;
		color: #ffffff;
		font-size: 3rem;
	}

	.modalBox {
		position: relative;
		top: 20%;
		left: 50%;
		transform: translate(-50%, -20%);
		width: 50%;
		height: 0%;
		text-align: center;

	}

	.modalBox img {
		width: 100%;
	}

	.menu_box{
		position:absolute;
		left: 57px;
		width: 393px;
		height: 204px;
		/* UI Properties */
		background: #F4F4F4 0% 0% no-repeat padding-box;
		opacity: 1;

	}


	.color_box1{
		position:absolute;
		right: 200px;
		width: 200px;
		height: 200px;
		background: #B1693F 0% 0% no-repeat padding-box;
		opacity: 1;
	}
	.color_box2{
		position:absolute;
		right: 0px;
		width: 200px;
		height: 200px;
		background: #706F6D 0% 0% no-repeat padding-box;
		opacity: 1;
	}
	.change_ment1{
		font-size:11px;
		margin-left:57px;
		color:#8D8E8E;
		width: 30%;
		font-family: garamond;
		
	}

	.change_ment2{
		font-size:11px;
		text-align:center;
		width: 30%;font-family: 'univers';margin-right: 4%;padding-top: 20px;
	}
	.change_ment3{
		width: 30%;
	}

	.num{position: relative;
		top: 45px;
		right: 45px;
		float: right;
		color: #E6E6E6;
		font-size: 12px;font-family: 'univers';}

	.cont img {width:100% !important;}
 
	.info1 a:hover {color:#231815;-webkit-transition: all ease .3s;

		-o-transition: all ease .3s;

		-moz-transition: all ease .3s;

		-ms-transition: all ease .3s;

		transition: all ease .3s;cursor:pointer }
	.info {font-size:14px;display: flex;
		justify-content: space-between;padding: 30px 57px 0;}
	.info1{float: left;font-family: univers;color:#8D8E8E}
	.info2 {font-size:11px;font-family: univers;padding-top: 23.64px;}
	.info2 p {color:#231815;line-height: 11pt;}
	.infoimg{position: relative;
		float: right;
		right: 0px;
		bottom: 90px;}
	.cosmos {
    font-size: 52px;
    text-align: center;
    position: relative;
    bottom: 43%;
    width: 330px;
    margin: 0px auto;
	color:#585655
}
	.cosmos p{font-size:11px;font-family: garamond;margin-top: -8px;color: #6A6967;}
	.cosmos span{font-family: lucia;
		color: #00000000;
		-webkit-text-stroke: 1px #231815;}
	.infoimg{}

	.tab {text-align:center;padding-top: 25px;}
	.tab li {font-size: 10px;
    text-align: center;
    font-family: univers;
    line-height: 10.5pt;letter-spacing: 0px;}

	.tab li a:hover{color:#8D8E8E;-webkit-transition: all ease .3s;

		-o-transition: all ease .3s;

		-moz-transition: all ease .3s;

		-ms-transition: all ease .3s;

		transition: all ease .3s;cursor:pointer}
	.menu_box .p1{font-size:11px;text-align:center;float: left;
		position: relative;
		left: 15px;
		bottom: 20px;color:#8D8E8E;font-family: univers;}
	.menu_box .p2{font-size:11px;text-align:center;float: right;
		position: relative;
		right: 22px;
		bottom: 10px;font-family: univers;}

	.footer .fp1{margin-left: 57px;font-size:12px;color:#6A6967}
	.footer .fp2{font-size:10px;text-align:center;color:#6A6967}
	.footer .fp3{margin-right: 57px;font-size:12px;color:#395C9B}
	.infoimg img {width: 259px;height: 259px;}
	
	
}
@media all and (min-width:768px) and (max-width:1023px){
		.main {background: transparent linear-gradient(90deg, #C4C4C4 0%, #CDCDCD 15%, #D2D2D2 32%, #FAFAFA 100%) 0% 0% no-repeat padding-box;
	opacity: 1;width:100%;height: 890px;}

	.contact {width:100%;height: 72px;display:flex;justify-content:space-between;align-items: center;}

	.menu {width:100%;height: 200px;background: #E8E8E8 0% 0% no-repeat padding-box;opacity: 1;}

	.menubottom{width:100%;height: 100px;background: #E8E8E8 0% 0% no-repeat padding-box;opacity: 1;display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		align-content: center;
		align-items: flex-end; }

	.slide {aspect-ratio: 16 / 9;margin-top: -21px;margin-left: 57px;margin-right: 57px;}

	.slide_info {width:100%;height: 283px;}

	.footer {display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		align-content: space-around;
		align-items: center;width:100%;height: 77px;background: #8B8B8B 0% 0% no-repeat padding-box;opacity: 1;}

	.hoc {text-align: center;padding-top: 46px;}
	.hoc #p1{font-size: 18px;margin: 0px;font-family: univers;}
	.hoc #p2{font-size: 11px;margin: 0px;font-family: garamond;
		 }
	.main_color_info p {color:#706F5B;}
	.hocinfo{margin-top:20px;display: flex;justify-content: space-around;text-align: center;}
	.center{text-align: center;font-size:11px;font-family: garamond;
		 }

	.left,.right{font-size:18px;width:90px;color:#706F5B;}

	.main_color{text-align:center;padding: 40px 0 20px 0;}
	.main_color_info{text-align:center;font-size:13px;padding-bottom: 35px;}

	.main_list{display:flex;justify-content: space-around;padding: 0px 150px;font-size: 11px;color: #706F5B;}
	.main_list .listbox3, .listbox4, .listbox3 p, .listbox4 p {text-align:center}

	.listbox4 img{margin-top:86px;}

	.contact p {text-align: center;font-size:12px;}
	.contact3 {padding-right: 40px;}
	.contact3:hover{color:#8D8E8E;-webkit-transition: all ease .3s;

		-o-transition: all ease .3s;

		-moz-transition: all ease .3s;

		-ms-transition: all ease .3s;

		transition: all ease .3s;cursor:pointer}
	.contact1 {padding-left: 40px;}
	.contact2:hover {color:#8D8E8E;-webkit-transition: all ease .3s;

		-o-transition: all ease .3s;

		-moz-transition: all ease .3s;

		-ms-transition: all ease .3s;

		transition: all ease .3s;cursor:pointer}
	#sub {font-size:11px;font-family: garamond;
		 color:#231815;}
	.modal {
		display: none;
		z-index: 500;
		width: 100%;
		height: 100vh;
		position: fixed;
		top: 0;
		left: 0;
	}

	.modal button {
		position: absolute;
		top: 3rem;
		right: 3rem;
		background: transparent;
		border: 0;
		color: #ffffff;
		font-size: 3rem;
	}

	.modalBox {
		position: relative;
		top: 20%;
		left: 50%;
		transform: translate(-50%, -20%);
		width: 60%;
		height:0%
		text-align: center;

	}

	.modalBox img {
		width: 100%;
	}

	.menu_box{
		position:absolute;
		left: 57px;
		width: 393px;
		height: 200px;
		/* UI Properties */
		background: #F4F4F4 0% 0% no-repeat padding-box;
		opacity: 1;

	}


	.color_box1{
		position:absolute;
		right: 200px;
		width: 200px;
		height: 200px;
		background: #B1693F 0% 0% no-repeat padding-box;
		opacity: 1;
	}
	.color_box2{
		position:absolute;
		right: 0px;
		width: 200px;
		height: 200px;
		background: #706F6D 0% 0% no-repeat padding-box;
		opacity: 1;
	}
	.change_ment1{
		font-size:11px;
		margin-left:57px;
		color:#8D8E8E;
		width: 20%;
		font-family: garamond;
		 
	}

	.change_ment2{
		font-size:11px;
		text-align:center;
		width: 20%;
	}
	.change_ment3{
		width: 20%;
	}

	.num{position: relative;
		top: 60px;
		right: 70px;
		float: right;
		color: #fff;}

	.cont img {width:100%;height:100%}
	.info1 a:hover {color:#8D8E8E;-webkit-transition: all ease .3s;

		-o-transition: all ease .3s;

		-moz-transition: all ease .3s;

		-ms-transition: all ease .3s;

		transition: all ease .3s;cursor:pointer }
	.info {font-size:14px;display: flex;
		justify-content: space-between;padding: 30px 50px 0;}
	.info1{float: left;}
	.info2 {font-size:11px;}
	.infoimg{position: relative;
		float: right;
		right: 0px;
		bottom: 90px;}
	.cosmos {
    font-size: 52px;
    text-align: center;
    position: relative;
    bottom: 40%;
    width: 330px;
    margin: 0px auto;
	color:#585655
}
	.cosmos p{font-size:11px;font-family: garamond;
		 margin-top: -8px;color: #6A6967;}
	.cosmos span{font-family: lucia;
		 color: #00000000;
		-webkit-text-stroke: 1px #231815;}
	.infoimg{}

	.tab {text-align:center;padding-top: 25px;}
	.tab li {font-size:9px;text-align:center}

	.tab li a:hover{color:#8D8E8E;-webkit-transition: all ease .3s;

		-o-transition: all ease .3s;

		-moz-transition: all ease .3s;

		-ms-transition: all ease .3s;

		transition: all ease .3s;cursor:pointer}
	.menu_box .p1{font-size:11px;text-align:center;float: left;
		position: relative;
		left: 15px;
		bottom: 15px;color:#8D8E8E;}
	.menu_box .p2{font-size:11px;text-align:center;float: right;
		position: relative;
		right: 20px;
		bottom: 5px;}

	.footer .fp1{margin-left: 50px;font-size:12px;color:#6A6967}
	.footer .fp2{font-size:10px;text-align:center;color:#6A6967}
	.footer .fp3{margin-right: 50px;font-size:12px;color:#395C9B}
	.infoimg img {width: 258px;
height: 258px;}

}
@media all and (max-width:767px){
	.main {background: transparent linear-gradient(90deg, #C4C4C4 0%, #CDCDCD 15%, #D2D2D2 32%, #FAFAFA 100%) 0% 0% no-repeat padding-box;
	opacity: 1;width:100%;}

	.contact {width:100%;height: 62px;display:flex;justify-content:space-around;align-items: center;}

	.menu {width:100%;background: #E8E8E8 0% 0% no-repeat padding-box;opacity: 1;}

	.menubottom{position: relative;
    z-index: 23;
    width: 100%;
    height: 60px;
    background: #E8E8E8 0% 0% no-repeat padding-box;
    opacity: 1;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-content: center;
    align-items: flex-end; }

	.slide {width:100%;height: unset !important;margin-top: -21px;}

	.slide_info {width:100%;}

	
	.footer {display: flex;
    flex-wrap: nowrap;
    width: 100%;
    height: 40px;
    background: #8B8B8B 0% 0% no-repeat padding-box;
    opacity: 1;
    align-items: center;
    justify-content: space-around;}

	.hoc {text-align: center;padding-top: 46px;}
	.hoc #p1{font-size: 11.77pt;margin: 0px;font-family: univers;}
	.hoc #p2{font-size: 11px;margin: 0px;font-family: garamond;
		 }
	.main_color_info p {color:#706F5B;font-family: univers;}
	.hocinfo{margin-top:0px;display: flex;justify-content: space-around;align-items: center;text-align: center;}
	.center{text-align: center;font-size:7.5pt;font-family: garamond;
		 color:#231815}

	.left,.right{font-size:9pt;width:90px;color:#706F5B;font-family: univers;}

	.main_color{text-align:center;padding: 20px 0 20px 0;color:#231815}
	.main_color_info{text-align:center;font-size:8.8pt;padding-bottom: 35px;padding-left: 10px;
    padding-right: 10px;}

	.main_list{
	display: flex;
    padding: 0px 30px;
    font-size: 8.8pt;
    color: #706F5B;
    flex-wrap: wrap;
    flex-direction: column;
    align-items: center;font-family: univers;}
	.main_list .listbox3, .listbox4,.listbox1, .listbox2 {text-align:center;margin-bottom: 40px;}
	.stars{text-align: center;}
	.stars img {width: 75%;
    margin-bottom: 64px;}
	
	.contact1 p, .contact3 p {font-size:6.5pt;font-family: univers;color:#8C8A87;}
	.contact2 p {text-align: center;font-size:8pt;font-family: univers;}
	.contact2 {margin-right: 30px;}
	.contact3 {padding-right: 15px;}
	.contact3:hover{color:#8D8E8E;-webkit-transition: all ease .3s;

		-o-transition: all ease .3s;

		-moz-transition: all ease .3s;

		-ms-transition: all ease .3s;

		transition: all ease .3s;cursor:pointer}
	.contact1 {padding-left: 15px;}
	.contact2:hover {color:#8D8E8E;-webkit-transition: all ease .3s;

		-o-transition: all ease .3s;

		-moz-transition: all ease .3s;

		-ms-transition: all ease .3s;

		transition: all ease .3s;cursor:pointer}
	#sub {font-size:5pt;font-family: garamond;
		 color:#231815;}
	.modal {
		display: none;
		z-index: 500;
		width: 100%;
		height: 100vh;
		position: fixed;
		top: 0;
		left: 0;
	}

	.modal button {
		position: absolute;
		top: 3rem;
		right: 3rem;
		background: transparent;
		border: 0;
		color: #ffffff;
		font-size: 3rem;
	}

	.modalBox {
		position: relative;
		top: 20%;
		left: 50%;
		transform: translate(-50%, -20%);
		background-color: #ffffff;
		width: 90%;
		height:0%;
		text-align: center;

	}

	.modalBox img {
		width: 100%;
	}

	.menu_box{
		
		width: 100%;
		/* UI Properties */
		background: #F4F4F4 0% 0% no-repeat padding-box;
		opacity: 1;

	}


	.color_box1{
		position:absolute;
		right: 200px;
		width: 200px;
		height: 200px;
		background: #B1693F 0% 0% no-repeat padding-box;
		opacity: 1;
	}
	.color_box2{
		position:absolute;
		right: 0px;
		width: 200px;
		height: 200px;
		background: #706F6D 0% 0% no-repeat padding-box;
		opacity: 1;
	}
	.change_ment1{
		font-size:5.6pt;
		color:#8D8E8E;
		width: 50%;
		font-family: garamond;
		margin-bottom:8px;
		margin-left: 20px;
	}

	.change_ment2{
		font-size:7pt;
		text-align:right;
		width: 38%;
		margin-top: 10px;
		margin-right: 20px;
		margin-bottom: 10px;
		font-family: univers;
	}
	.change_ment3{
		width: 20%;
	}

	.num{
	position: relative;
    top: 50px;
    right: 35px;
    float: right;
    color: #fff;
    font: normal normal 300 11px/15px Univers;
    letter-spacing: 0px;
    color: #FFFFFF;
    opacity: 1;}

	.cont img {width:100%;height:unset !important;}
	.info1 a:hover {color:#8D8E8E;-webkit-transition: all ease .3s;

		-o-transition: all ease .3s;

		-moz-transition: all ease .3s;

		-ms-transition: all ease .3s;

		transition: all ease .3s;cursor:pointer }
	.info {font-size:12px;display: flex;
		justify-content: space-between;padding: 15px 25px 0px;height: fit-content;}
	.info1{float: left;width: 100%;height: fit-content;font-family: univers;white-space:nowrap;color:#8D8E8E}
	.info2 {float: left;font-size:5.48pt;color: #070002;font-family: univers;margin-top: 12.25px;}
	.info1 a {font-size: 5pt;}
	.info1 p {font-size: 5pt;}
	.infoimg{position: relative;
    right:0px important;
    bottom: 33px;
	float:right;
    }
	.infoimg img {width: 85.64pt;}
	.cosmos {
    text-align: center;
    position: relative;
    left: 19%;
    float:left;
    width: 177.2pt;
    color: #585655;
    
	margin-bottom: 20px;
}
	.cosmos p{font-size:5.07pt;font-family: garamond;margin-top: -5px;color: #6A6967;}
	.cosmos span{font-family: lucia;
		 color: #00000000;
		-webkit-text-stroke: 1px #231815;}
	.menu_box div {width: 100%;
    text-align: center;
    height: unset;}
	.bars{background: transparent url('/img/main/logo/bars.svg') 0% 0% no-repeat padding-box;width: 15.25pt;height: 7.05pt;display: inline-block;margin: 16px 0px 15px;}
	.tab {text-align:center;padding: 40px 15px 20px 15px;}
	.tab li {text-align:center;font-size: 12.16pt;line-height: 18.86pt;font-family: univers;}

	.tab li a:hover{color:#8D8E8E;-webkit-transition: all ease .3s;

		-o-transition: all ease .3s;

		-moz-transition: all ease .3s;

		-ms-transition: all ease .3s;

		transition: all ease .3s;cursor:pointer}
	.menu_box .p1{font-size:11px;text-align:center;float: left;
		position: relative;
		left: 15px;
		bottom: 15px;color:#8D8E8E;font-family: univers;}
	.menu_box .p2{font-size:11px;text-align:center;float: right;
		position: relative;
		right: 20px;
		bottom: 5px;font-family: univers;}

	.footer .fp1{font-size:4.5pt;color:#FFFFFF;font-family: univers;}
	.footer .fp2{font-size:4.5pt;text-align:center;color:#FFFFFF;font-family: univers;}
	.footer .fp3{font-size:6pt;color:#395C9B;font-family: univers;}

	.menu span{cursor:pointer;}
    .menu .tab{display:block;}
	
}