/* Noti CSS */

body, html {
	width: 100%;
	height: 100%;
	overflow: hidden;
	margin: 0;
	padding: 0;
}
body {
	display: flex;
    justify-content: center;
    flex-direction: column;
    text-align: center;
    align-items: center;
	font-family: 'Noto Sans HK', sans-serif;
	font-size: 1em;
    line-height: 1.35em;
}
a, a:link {
	color: rgb(154,98,52);
	text-decoration: none;
	outline: none;
	-webkit-transition: color 0.35s;
	transition: color 0.35s;
}
a:hover {
	color: rgba(176,124,81,0.5);
}
.wrap {
    width: 50%;
    margin: 0;
}
.wrap img {
	max-width: 70%;
}
.wrap .sep {
	width: 100%;
    height: 2px;
    font-size: 0;
    line-height: 0;
    background: rgb(45,45,45);
	background: -moz-linear-gradient(left, #ffffff 0%, #b07c51 50%, #ffffff 100%);
	background: -webkit-linear-gradient(left, #ffffff 0%,#b07c51 50%,#ffffff 100%);
	background: linear-gradient(to right, #ffffff 0%,#b07c51 50%,#ffffff 100%);
}
@media only screen and (max-width: 1024px) and (orientation: portrait) {
  .wrap { width: 60%; }
  .wrap img { max-width: 80%; }
}
@media only screen and (max-width: 768px) {
  .wrap { width: 70%; }
  .wrap img { max-width: 90%; }
}
@media only screen and (max-width: 414px) {
  .wrap { width: 90%; }
  .wrap img { max-width: 100%; }
}
@media only screen and (max-width: 824px) and (orientation: landscape) {
  .wrap { width: 90%; }
  .wrap img { max-width: 25%; }
  .wrap .sep { height: 1px; }
}