@charset 'utf-8';
html {
	height: -webkit-fill-available;
}
body {
    font-size: 16px;
    line-height: 1.8em;
    font-family: 'Calibri', "微軟正黑體", 'Microsoft JhengHei', sans-serif;
	background-image: url('/pic_page/flower3.jpg');
	background-repeat: no-repeat;
	background-size: cover;
	/* mobile viewport bug fix */
	min-height: -webkit-fill-available;
}
.com-left a,
.com-right a {
	display: block;
	font-weight: bold;
	font-size: 24px;
	letter-spacing: 1px;
	padding: 15px;
	width: 250px;
	border-radius: 30px;
	margin: 0 auto;
	text-align: center;
}
.com-top {
	height:70vh;
    width: 100%;
	margin-top: -20px;
}
.com-bottom {
    text-align: center;
	height:26.5vh;
    width: 100%;
}
.com-top,
.com-bottom {
	position:relative;
}
.com-top a {
    color: #231815;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-property: color, background-color;
    transition-property: color, background-color;
    font-weight: 600;
    display: inline-block;
    border: 1px solid #ffffff;
    font-size: 24px;
    padding: 10px;
    margin: 0 10px;
    animation-name: text3;
    animation-duration: 3s;
}
.com-top h1 {
    margin:0;
}
.com-top h2 {
    color:black;
}
.com-topIMG{
	text-align: center;
    position: absolute;
    margin: 0 auto;
    width: 100%;
	background-color:#00000059;
}
.com-topIMG img {
	margin: 1% 0;
    width:13%;
    animation-name: text3;
    animation-duration: 3s;
}
.com-top a:hover {
    background: #ffffff;
    color: #000000;
}
.com-left,
.com-right {
	position:absolute;
	top:35%;
    width: 50%;
	color: transparent;
	z-index:3;
}
.com-left {
    animation-name: bgcolor2;
    animation-duration: 2s;
}
.com-left h2 {
    letter-spacing: 11px;
    font-weight: 600;
}
.com-left a {
    background: #dff0d8;
}
.com-left a:hover {
    color: #ffffff;
    background: #000000;
}
.com-right {
	font-family:Comic Sans MS;
	right:0;
    animation-name: bgcolor3;
    animation-duration: 2s;
}
.com-right h2 {
    letter-spacing: 8px;
    font-weight: 600;
}
.com-right a {
    background: #dff0d8;
}
.com-right a:hover {
    color: #f1f1f1;
    background: #000000;
}
.maintitle,
.englishtitle {
	text-align:center;
    position: relative;
    top: 20vh;
}
.maintitle h2{
	font-weight: bold;
    font-size: 60px;
}
.englishtitle h2{
	font-family:Comic Sans MS;
	font-size: 40px;
}
.mailtitle h2{
	font-family:Comic Sans MS;
	font-size: 16px;
}
.company{
	position: absolute;
    width: 100%;
    height: inherit;
}
.info{
	position:relative;
	top:30%;
}
.title{
	position: absolute;
    width: 100%;
    bottom: 0;
    text-align: center;
}
.title h2{
	font-size: 16px;
	font-weight: bold;
}
@keyframes bgcolor2 {
    0% {
        left: -50%;
    }

    100% {
        left: 0;
    }
}
@keyframes bgcolor3 {
    0% {
        right: -50%;
    }

    100% {
        right: 0;
    }
}
@keyframes text {
    0% {
        opacity: 0;
    }

    60% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}
@keyframes text2 {
    0% {
        opacity: 0;
    }

    80% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}
@keyframes text3 {
    0% {
        opacity: 0;
    }

    30% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}
@media screen and (min-width:767px) and (max-width: 991px) {
    .com-top {
        width: 100%;
    }
    .com-left,
    .com-right {
        width: 50%;
        top: auto;
        bottom: 0;
        top:25% !important;
    }
    .com-left {
        right: auto;
    }
    .com-left h2 {
        letter-spacing: 7px;
    }
    .com-right {
        left: auto;
    }
    .com-right h2 {
        letter-spacing: 4px;
    }
	.com-topIMG{
		height:25vh;
	}
	.com-topIMG img {
		position: relative;
		top: 20%;
	}
    @keyframes bgcolor {
        0% {
            height: 0%;
        }

        100% {
            height: 100%;
        }
    }
    @keyframes bgcolor2 {
        0% {
            bottom: -40%;
        }

        100% {
            bottom: 0;
        }
    }
    @keyframes bgcolor3 {
        0% {
            bottom: -40%;
        }

        100% {
            bottom: 0;
        }
    }
    @keyframes text {
        0% {
            opacity: 0;
        }

        30% {
            opacity: 1;
        }

        100% {
            opacity: 1;
        }
    }
    @keyframes text2 {
        0% {
            opacity: 0;
        }

        60% {
            opacity: 1;
        }

        100% {
            opacity: 1;
        }
    }
    @keyframes text3 {
        0% {
            opacity: 0;
        }

        90% {
            opacity: 1;
        }

        100% {
            opacity: 1;
        }
    }
}
@media screen and (min-width:480px) and (max-width: 767px) {
    .com-top {
        width: 100%;
    }
    .com-left,
    .com-right {
        width: 50%;
        bottom: 0;
    }
    .com-left a,
    .com-right a{
        width: 60%;
    }
    .com-left {
        right: auto;
    }
    .com-left h2 {
        letter-spacing: 7px;
    }
    .com-right {
        left: auto;
    }
    .com-right h2 {
        letter-spacing: 4px;
    }
	.com-topIMG{
		height:30vh;
	}
	.com-topIMG img {
		position: relative;
		top: 20%;
	}
	.maintitle h2{
		font-size: 30px;
	}
	.englishtitle h2{
		font-size: 20px;
	}
	.mailtitle h2{
		font-size: 8px;
	}
	.title h2{
		font-size: 8px;
		font-weight: bold;
	}
    @keyframes bgcolor {
        0% {
            height: 0%;
        }
        100% {
            height: 100%;
        }
    }
    @keyframes bgcolor2 {
        0% {
            bottom: -25%;
        }
        100% {
            bottom: 0%;
        }
    }
    @keyframes bgcolor3 {
        0% {
            bottom: -25%;
        }
        100% {
            bottom: 0;
        }
    }
}
@media screen and (max-width: 480px) {
    html,
    body {
		height:100%;
        overflow-y: none;
    }
    .com-top {
        position: relative;
        z-index: 2;
		margin-top:0;
		height: 70%;
    }
    .com-left,
    .com-right {
        position: relative;
		text-align:center;
		border-color: transparent transparent transparent transparent;
		height: 50%;
		width:100%;
		top:0;
    }
    .com-top a {
        margin-bottom: 20px;
    }
	body,
    .com-top,
    .com-top a,
    .com-left,
    .com-right{
        animation: none;
    }
	.com-left a,
	.com-right a {
		width:70vw;
		position: absolute;
		left: 50%;
		margin-left: -35vw;
		top: 50%;
		margin-top: -30px;
	}
	.com-left {
		background: #5C5B8C;
	}
	.com-right{
		background: #ffffff;
	}
	.maintitle h2{
		font-size: 28px;
	}
	.englishtitle h2{
		font-family:Comic Sans MS;
		font-size: 18px;
	}
	.title h2{
		font-size: 12px;
	}
	.mailtitle h2{
		font-size: 12px;
	}
	.com-topIMG{
		display:none;
	}
	.com-topIMG img {
		margin:-5px;
		width: 20%;
	}
	.com-top h2 {
		margin: 10px;
	}
	.company{
		height:-webkit-fill-available;
	}
}
/*IPAD*/
@media screen and (min-width:960px) and (max-width: 1025px){
	.com-left, 
	.com-right {
		top: 20%;
	}
}