@charset "utf-8";
@font-face { 
	font-family: 'sonfon'; 
	src: url('../media/fonts/sonfon.ttf');
}

.sonfon {
	font-family: sonfon;
}

.sheadlint {
	background-color: var(--mainbgcolor3);
	color: var(--maincolor);
	padding-top: 2px;
	padding-bottom: 2px;
}

.headbg {
	background-color: var(--coloryellow);
	background-image: linear-gradient(var(--mainbgcolor2), var(--mainbgcolor1), var(--mainbgcolor3));
	padding-top: 20px;
	padding-bottom: 20px;
}

.headphnm {
	font-size: 40px;
	font-weight: 600;
}

.nav-link {
	color: inherit;
	background-color: inherit;
}

.fodnav {
	border-top: 12px solid var(--maincolor);
	padding-top: 16px;
}

.conboxbg {
	background-image: linear-gradient(45deg, var(--mainbgcolor5), var(--mainbgcolor6));
}

.paralax {
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: 50% 50%;
	min-height: 350px;
}
.wave {
	background-image: url(../media/web/wave.jpg);
	min-height: 450px;
	margin-top: -16x;
}

.welcome {
	background-image: url(../media/web/welcome.jpg);
	min-height: 450px;
	margin-top: -16x;
}

.menulink {
	font-size: 21px;
}

.sidelink {
	font-size: 28px;
	padding: 1px;
}

.mtit {	
	font-size: 8vw;
	color: var(--mainbgcolor5);
	text-shadow: -1px 0 var(--maincolor), 0 1px var(--maincolor), 1px 0 var(--maincolor), 0 -1px var(--maincolor);
}

.panel {
	background-color: var(--mainbgcolor1);
	color: var(--maincolor);
	position: fixed;
    right: -400px; /*left or right and the width of your navigation panel*/
    width: 400px; /*should match the above value*/
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 999;
}
.wrap {
    position: relative;
}

.padding4 {	
	padding:4px;
}

@media only screen and (min-width: 1200px) {
.imgbgcase {
	min-height: 450px;
}

.headphnm {
	font-size: 40px;
	font-weight: 600;
}
}

/*		Wide Mobile Layout: 720px.   */

@media only screen and (min-width: 768px) and (max-width: 1199px) {
.imgbgcase {
	min-height: 350px;
}

.headphnm {
	font-size: 32px;
	font-weight: 600;
}
}

/*		Small Mobile Layout: 480px.   */

@media only screen and (max-width: 767px) {
.imgbgcase {
	min-height: 300px;
}

.headphnm {
	font-size: 24px;
	font-weight: 600;
}
}