* {
	font-family: 'Mircosoft JhengHei', 'Noto Sans TC', 'Source Han Sans TW';
	box-sizing: border-box
}

body{margin:0}

:root {
	--primary-color: #98abc9;
	--secondary-color: #3C3C3C;
	--font-base: 14px;
	--font-medium: 16px;
	--font-big: 18px;
	--font-large: 20px;
}

.container {
	max-width: 1440px;
	padding-left: 30px;
	padding-right: 30px;
	margin-left: auto;
	margin-right: auto;
}

.text-white{color:white !important}
.d-block{display:block !important}
.main-content{min-height: calc(100vh - 558px);}
.iframe-container{position:relative;border:6px}
footer {
	background-color: var(--primary-color);
	padding-top: 40px;
	padding-bottom: 40px;
}

footer .company-medias {
	width: 48%;
}
.company-medias .company-position{margin:40px 0}
.company-medias .medias ul{list-style:none;padding-left:0;margin:0}
.company-medias .medias ul li{float:left;margin-right:20px}
.company-medias .medias ul li:last-child{margin-right:0}
.company-medias .company-position{}
.company-medias .company-position p {
	font-size: var(--font-big);
	margin: 10px 0;
	font-weight: 500;
	letter-spacing: 2px;
}
.company-medias .company-position p > a {color:white;text-decoration:none}

header {
	padding: 20px 0 30px;
	position: relative;
}
header .container,
footer .container{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between}

header .container{align-items:center}
header h1{margin:0;width:300px}
header h1 a,header h1 img{display:block}
header h1 img{width:100%}
header .menus{width:calc(100% - 350px);margin-left:50px}
header .menus ul{list-style:none;padding-left:0;margin:0;display:flex;align-items:center;justify-content:right}
header .menus ul li{margin:0 15px;letter-spacing:1.2px;position:relative}
header .menus ul li > .following-menu{position:absolute;
	left:-50px;
	top:calc(100% + 10px);border:1px solid #C9C9C9;
	box-shadow:0 3px 6px #C9C9C9;
	width:calc(100% + 100px);
	z-index: 500;
	background-color: white;

	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);
	transition: all 0.3s ease;
	pointer-events: none;
}
header .menus ul li:hover > .following-menu,
header .menus ul li > .following-menu:hover,
li.has-submenu.show-submenu > .following-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	pointer-events: auto;
}
header .menus ul li > .following-menu a{display:block;color:black;text-decoration:none;padding:8px 5px;font-size:.85rem;border-bottom:1px solid #CECECE}
header .menus ul li > .following-menu a:hover{background-color:var(--primary-color);color:white;}
header .menus ul li > a{font-size:var(--font-base);color:var(--secondary-color);text-decoration:none}

header .menus #language-switch{position:relative}
header .menus #language-switch select{outline:none;border-color:transparent;background-color:transparent;font-size:var(--font-base);color:var(--secondary-color);
	appearance: none;
	cursor: pointer;
	padding: 5px 10px;
}
header .menus #language-switch::after {
	content: '';
	position: absolute;
	top: 0;
	right: -20px;
	width: 20px;
	height: 20px;
	background-image: url('../images/icons/search.png');
	background-size: contain;
	background-repeat: no-repeat;
	pointer-events: none;
}

footer{position:relative}
footer .company-map{width:48%}

footer .company-map .iframe-container{padding-top:300px;object-fit:cover;overflow:hidden;border-radius:10px}
footer .company-map .iframe-container iframe{position:absolute;left:0;top:0;width:100%;height:100%;border:0}

#go-top-btn {
    position: absolute;
    top: -65px;
    left: 50%;transform: translateX(-50%);
    font-size: 30px;
    width: 130px;
    height: 65px;
    background-color: var(--primary-color);
    border-top-left-radius: 60px;
    border-top-right-radius: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    z-index: 1000;
}
#go-top-btn span{font-size:30px;display:inline-block;text-align:center}

.main-content img.banner,
.main-content img.mobile-banner{width:100%}
.main-content img.mobile-banner{display:none !important}

.side-menu-lang-select {
    margin: 20px 0;
}
.side-menu-lang-select select {
    width: 100%;
    padding: 6px 10px;
    font-size: 16px;
}

.editor-img-mobile{display:none !important}
.editor-img-pc{display:block !important}
@media screen and (max-width:1050px) {
	/* hamburger menu */
	header .menus ul{display:none}
	header .hamburger{display:flex}
}

@media screen and (max-width:810px) {
	footer .company-medias{width:100%}
	footer .company-medias img{width:100%;max-width:280px}
	footer .company-map{display:none}
}

@media screen and (max-width:768px){
	.main-content img.banner{display:none !important}
	.main-content img.mobile-banner{display:block !important}

	.editor-img-mobile{display:block !important}
	.editor-img-pc{display:none !important}
}

@media screen and (max-width:600px) {
	header h1 img{max-width:200px}
	.hamburger{top:35px !important}
	.company-medias .company-position p{font-size:var(--font-medium)}
}

@media screen and (max-width:500px) {
	.company-medias .company-position p{font-size:var(--font-base)}
	.company-medias .medias ul img{width:50px}
}