@import url("https://fonts.googleapis.com/css?family=Noto+Sans+TC&display=swap");
@import url("https://fonts.googleapis.com/earlyaccess/notosanstc.css");

*,*::before,*::after{
	box-sizing:border-box;
}

html{
	overflow-x:hidden;
	scroll-behavior:smooth;
}

body{
	font-family:"Noto Sans TC","Arial",sans-serif;
	margin:0px;
}

ul,li,h1,h2,h3,h4,h5,h6{
	font-size:20px;
	list-style:none;
	padding:0px;
	margin:0px;
}

a{
	text-decoration:none;
}

#bg1{
	background:url('../img/bg1.jpg');
	background-attachment:fixed;
	background-repeat:no-repeat;
	background-size:cover;
	padding:100px 0px;
}

@media(max-width:650px){
	#bg1{
		padding:60px 0px;
	}
}

@media(max-width:400px){
	#bg1{
		padding:40px 0px;
	}
}

#title{
	width:1200px;
	margin:0px auto;
	flex-wrap:wrap;
	display:flex;
}

#title div:nth-child(1){
	width:35%;
	position:relative;
}

#title div:nth-child(1) img{
	bottom:0px;
	width:100%;
	position:absolute;
}

#title div:nth-child(2){
	width:65%;
}

#title div:nth-child(2) img{
	width:100%;
}

@media(max-width:1300px){
	#title{
		width:900px;
	}

	#title div:nth-child(1){
		width:35%;
	}

	#title div:nth-child(1) img{
		bottom:0px;
		width:100%;
	}

	#title div:nth-child(2){
		width:65%;
	}

	#title div:nth-child(2) img{
		width:100%;
	}
}

@media(max-width:950px){
	#title{
		width:600px;
	}

	#title div:nth-child(1){
		width:35%;
	}

	#title div:nth-child(1) img{
		bottom:0px;
		width:100%;
	}

	#title div:nth-child(2){
		width:65%;
	}

	#title div:nth-child(2) img{
		width:100%;
	}
}

@media(max-width:650px){
	#title{
		width:95%;
	}

	#title div:nth-child(1){
		width:35%;
	}

	#title div:nth-child(1) img{
		bottom:0px;
		width:100%;
	}

	#title div:nth-child(2){
		width:65%;
	}

	#title div:nth-child(2) img{
		width:100%;
	}
}

@media(max-width:400px){
	#title{
		width:95%;
	}

	#title div:nth-child(1){
		width:25%;
	}

	#title div:nth-child(1) img{
		bottom:0px;
		width:100%;
	}

	#title div:nth-child(2){
		width:75%;
	}

	#title div:nth-child(2) img{
		width:100%;
	}
}

#reason{
	width:1200px;
	background:#fff9bb;
	border-radius:20px;
	padding:15px 15px;
	margin:0px auto;
}

#reason_1{
	width:100%;
	border:6px solid #e73828;
	border-radius:20px;
	padding:40px 40px;
}

#reason_1 h1{
	font-size:24px;
	font-weight:400;
	letter-spacing:1px;
	line-height:1.6;
	text-align:justify;
}

#reason_1_1{
	flex-wrap:wrap;
	display:flex;
	margin:20px 0px 0px 0px;
}

#reason_1_1 div:nth-child(1){
	width:60%;
	position:relative;
}

#reason_1_1 div:nth-child(2){
	width:40%;
}

#reason_1_1 h2{
	color:#e73828;
	font-size:24px;
	font-weight:500;
	letter-spacing:1px;
	line-height:1.6;
}

#reason_1_1 h3{
	bottom:20px;
	right:30px;
	position:absolute;
}

#reason_1_1 h3 span{
	position:relative;
	color:#ffffff;
	background:#e73828;
	font-size:20px;
	font-weight:500;
	letter-spacing:1px;
	border-radius:100px;
	padding:0px 10px;
}

#reason_1_1 h3 span::after{
	content:'';
	top:50%;
	right:4px;
	transform:translate(100%,-50%);
	position:absolute;
	border-style:solid;
	border-width:6px 0px 6px 20px;
	border-color:transparent transparent transparent #e73828;
}

#reason_1_1 img{
	margin:0px auto;
	display:block;
}

@media(max-width:1300px){
	#reason{
		width:900px;
		border-radius:20px;
		padding:15px 15px;
	}

	#reason_1{
		border:4px solid #e73828;
		border-radius:20px;
		padding:20px 20px;
	}

	#reason_1 h1{
		font-size:20px;
	}

	#reason_1_1{
		margin:10px 0px 0px 0px;
	}

	#reason_1_1 div:nth-child(1){
		width:55%;
	}

	#reason_1_1 div:nth-child(2){
		width:45%;
	}

	#reason_1_1 h2{
		font-size:20px;
	}

	#reason_1_1 h3{
		bottom:20px;
		right:30px;
	}

	#reason_1_1 h3 span{
		font-size:18px;
		padding:0px 10px;
	}

	#reason_1_1 h3 span::after{
		top:50%;
		right:4px;
		transform:translate(100%,-50%);
		border-width:6px 0px 6px 20px;
	}

	#reason_1_1 img{
		width:100%;
	}
}

@media(max-width:950px){
	#reason{
		width:600px;
		border-radius:20px;
		padding:10px 10px;
	}

	#reason_1{
		border:4px solid #e73828;
		border-radius:20px;
		padding:20px 20px;
	}

	#reason_1 h1{
		font-size:20px;
	}

	#reason_1_1{
		margin:10px 0px 0px 0px;
	}

	#reason_1_1 div:nth-child(1){
		width:100%;
		padding:0px 0px 50px 0px;
	}

	#reason_1_1 div:nth-child(2){
		width:100%;
		padding:25px 0px 0px 0px;
	}

	#reason_1_1 h2{
		font-size:20px;
	}

	#reason_1_1 h3{
		bottom:0px;
		right:50%;
		transform:translate(50%,0%);
	}

	#reason_1_1 h3 span{
		font-size:18px;
		padding:2px 10px;
	}

	#reason_1_1 h3 span::after{
		top:100%;
		right:50%;
		transform:translate(50%,0%);
		border-width:8px 8px 0px 8px;
		border-color:#e73828 transparent transparent transparent;
	}

	#reason_1_1 img{
		width:400px;
	}
}

@media(max-width:650px){
	#reason{
		width:95%;
		border-radius:20px;
		padding:10px 10px;
	}

	#reason_1{
		border:4px solid #e73828;
		border-radius:20px;
		padding:20px 20px;
	}

	#reason_1 h1{
		font-size:18px;
	}

	#reason_1_1{
		margin:10px 0px 0px 0px;
	}

	#reason_1_1 div:nth-child(1){
		width:100%;
		padding:0px 0px 50px 0px;
	}

	#reason_1_1 div:nth-child(2){
		width:100%;
		padding:25px 0px 0px 0px;
	}

	#reason_1_1 h2{
		font-size:18px;
	}

	#reason_1_1 h3{
		width:100%;
		bottom:0px;
		right:50%;
		transform:translate(50%,0%);
		text-align:center;
	}

	#reason_1_1 h3 span{
		font-size:16px;
		padding:2px 10px;
	}

	#reason_1_1 h3 span::after{
		top:100%;
		right:50%;
		transform:translate(50%,0%);
		border-width:8px 8px 0px 8px;
		border-color:#e73828 transparent transparent transparent;
	}

	#reason_1_1 img{
		width:90%;
	}
}

@media(max-width:400px){
	#reason{
		width:95%;
		border-radius:20px;
		padding:5px 5px;
	}

	#reason_1{
		border:2px solid #e73828;
		border-radius:20px;
		padding:10px 10px;
	}

	#reason_1 h1{
		font-size:16px;
	}

	#reason_1_1{
		margin:10px 0px 0px 0px;
	}

	#reason_1_1 div:nth-child(1){
		width:100%;
		padding:0px 0px 50px 0px;
	}

	#reason_1_1 div:nth-child(2){
		width:100%;
		padding:25px 0px 0px 0px;
	}

	#reason_1_1 h2{
		font-size:16px;
	}

	#reason_1_1 h3{
		width:100%;
		bottom:0px;
		right:50%;
		transform:translate(50%,0%);
		text-align:center;
	}

	#reason_1_1 h3 span{
		font-size:14px;
		padding:2px 10px;
	}

	#reason_1_1 h3 span::after{
		top:100%;
		right:50%;
		transform:translate(50%,0%);
		border-width:8px 8px 0px 8px;
		border-color:#e73828 transparent transparent transparent;
	}

	#reason_1_1 img{
		width:100%;
	}
}

.explain{
	width:1200px;
	position:relative;
	background:#ffffff;
	border:2px solid #40210f;
	border-radius:20px;
	box-shadow:0px 6px 0px #40210f;
	padding:40px 40px 20px 40px;
	margin:80px auto 0px auto;
}

.explain_title{
	top:-28px;
	left:-22px;
	position:absolute;
}

.explain_1,.explain_2{
	flex-wrap:wrap;
	display:flex;
}

.explain_1 div:nth-child(1){
	width:45%;
}

.explain_1 div:nth-child(2){
	width:55%;
	position:relative;
}

.explain_2 div{
	margin:0px 50px 0px 0px;
}

.explain h1{
	font-size:20px;
	font-weight:400;
	letter-spacing:1px;
	line-height:1.6;
	margin:10px 0px;
}

.explain h2{
	color:#e73828;
	font-size:20px;
	font-weight:500;
	letter-spacing:1px;
	line-height:1.6;
}

.explain_1 img{
	top:50%;
	right:0px;
	transform:translate(0%,-50%);
	position:absolute;
}

@media(max-width:1300px){
	.explain{
		width:900px;
		border:2px solid #40210f;
		border-radius:20px;
		box-shadow:0px 6px 0px #40210f;
		padding:40px 40px 20px 40px;
		margin:80px auto 0px auto;
	}

	.explain_title{
		top:-28px;
		left:-22px;
	}

	.explain_1 div:nth-child(1){
		width:40%;
	}

	.explain_1 div:nth-child(2){
		width:60%;
	}

	.explain_2 div{
		margin:0px 16px 0px 0px;
	}

	.explain h1{
		font-size:18px;
		margin:10px 0px;
	}

	.explain h2{
		font-size:18px;
	}

	.explain_1 img{
		top:50%;
		right:0px;
		width:100%;
		transform:translate(0%,-50%);
	}
}

@media(max-width:950px){
	.explain{
		width:600px;
		border:2px solid #40210f;
		border-radius:20px;
		box-shadow:0px 6px 0px #40210f;
		padding:40px 40px 20px 40px;
		margin:80px auto 0px auto;
	}

	.explain_title{
		top:-28px;
		left:-22px;
	}

	.explain_1 div:nth-child(1){
		width:100%;
	}

	.explain_1 div:nth-child(2){
		width:100%;
	}

	.explain_2 div{
		margin:5px 40px 0px 0px;
	}

	.explain h1{
		font-size:18px;
		margin:10px 0px;
	}

	.explain h2{
		font-size:18px;
	}

	.explain_1 img{
		top:50%;
		right:0px;
		width:100%;
		transform:translate(0%,-50%);
		position:relative;
	}

	.explain_pd1{
		padding:0px 0px 0px 52px;
	}
}

@media(max-width:650px){
	.explain{
		width:95%;
		border:2px solid #40210f;
		border-radius:20px;
		box-shadow:0px 6px 0px #40210f;
		padding:40px 15px 15px 15px;
		margin:60px auto 0px auto;
	}

	.explain_title{
		top:6px;
		left:-16px;
		width:140px;
	}

	.explain_1 div:nth-child(1){
		width:100%;
	}

	.explain_1 div:nth-child(2){
		width:100%;
	}

	.explain_2 div{
		margin:5px 135px 0px 0px;
	}

	.explain h1{
		font-size:16px;
		margin:10px 0px;
	}

	.explain h2{
		font-size:16px;
	}

	.explain_1 img{
		top:50%;
		right:0px;
		width:100%;
		transform:translate(0%,-50%);
		position:relative;
	}

	.explain_pd1{
		padding:0px 0px 0px 0px;
	}
}

@media(max-width:400px){
	.explain{
		width:95%;
		border:2px solid #40210f;
		border-radius:20px;
		box-shadow:0px 4px 0px #40210f;
		padding:40px 15px 15px 15px;
		margin:40px auto 0px auto;
	}

	.explain_title{
		top:6px;
		left:-14px;
		width:120px;
	}

	.explain_1 div:nth-child(1){
		width:100%;
	}

	.explain_1 div:nth-child(2){
		width:100%;
	}

	.explain_2 div{
		margin:5px 40px 0px 0px;
	}

	.explain h1{
		font-size:14px;
		margin:10px 0px;
	}

	.explain h2{
		font-size:14px;
	}

	.explain_1 img{
		top:50%;
		right:0px;
		width:100%;
		transform:translate(0%,-50%);
		position:relative;
	}

	.explain_pd1{
		padding:0px 0px 0px 0px;
	}
}

#bg1>h3{
	width:650px;
	color:#ffffff;
	background:#40210f;
	font-size:20px;
	font-weight:500;
	text-align:center;
	letter-spacing:1px;
	border-radius:100px;
	padding:10px 0px;
	margin:80px auto 0px auto;
}

.br1{
	display:none;
}

@media(max-width:1300px){
	#bg1>h3{
		width:550px;
		font-size:24px;
		padding:10px 0px;
		margin:80px auto 0px auto;
	}
}

@media(max-width:650px){
	#bg1>h3{
		width:380px;
		font-size:18px;
		padding:10px 0px;
		margin:60px auto 0px auto;
	}
}

@media(max-width:400px){
	#bg1>h3{
		width:95%;
		font-size:16px;
		padding:10px 0px;
		margin:40px auto 0px auto;
	}

	#bg1>h3>span{
		display:none;
	}

	.br1{
		display:inline;
	}
}

/** 基本設定 **/
#gotop{
	bottom:20px;
	right:20px;
	width:60px;
	height:60px;
	position:fixed;
	color:#ffffff;
	background:rgba(0,0,0,0.7);
	font-size:15px;
	text-align:center;
	border-radius:50%;
	padding:8px 0px;
	cursor:pointer;
	z-index:100;
}

@media screen and (max-width:46em){
	#gotop{
		bottom:10px;
		right:10px;
		width:50px;
		height:50px;
		position:fixed;
		color:#ffffff;
		background:rgba(0,0,0,0.7);
		font-size:12px;
		text-align:center;
		border-radius:50%;
		padding:8px 0px;
		cursor:pointer;
		z-index:100;
	}
}

footer {
    background-color: #6248db;
    position: relative;
    bottom: 0px;
    padding: 5vh 6vw;
    color: #fff;
    font-size: 1.2em;
    line-height: 1.8;
    text-align: center;
}
footer h2 {
    text-align: center;
}
footer h3 {
    margin: 0 0;
    font-size: 2.6vw;
}
footer h4 {
    margin: 0 0;
    font-size: 1.6vw;
    border-bottom: 1px solid;
    border-top: 1px solid;
}
footer table,
.me {
    width: 38vw;
    display: inline-block;
    text-align: left;
    margin: auto 2vw;
    vertical-align: top;
}
footer table td {
    padding: 0.2vh 1vw;
}
footer a:hover,
footer a {
    color: #fff;
}
footer i {
    font-size: 2vw;
    margin: 2vh 1vw;
}
@media (max-width: 75em) {
    footer table,
    .me {
        width: 100%;
        padding-bottom: 3vh;
        font-size: 0.75em;
    }
    footer {
        padding: auto 0.5vw;
        padding-bottom: 15vh;
    }
    footer table td {
        padding: auto 2px;
    }
    footer h2 {
        font-size: 1em;
    }
    footer h3 {
        margin: 0 0;
        font-size: 1.6em;
        line-height: 1.8;
        font-weight: 400;
        text-align: center;
    }
    footer h4 {
        margin: 0 0;
        font-size: 1.2em;
        line-height: 1.8;
        font-weight: 400;
        text-align: center;
    }
    footer i {
        font-size: 6vw;
    }
}

#talk {
    line-height: 1.5;
    text-align: center;
    position: fixed;
    top: 15vh;
    vertical-align: middle;
    left: 0px;
    text-align: left;
    color: #fff;
}
#talk ul {
    margin: 0px 0px;
    padding: 0px 0px;
    list-style-type: none;
}
#talk ul li {
    width: 68px;
    height: 68px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1em;
    line-height: 1.3;
    text-align: center;
    vertical-align: middle;
    padding-top: 15px;
    margin-top: 5px;
    color: #0033cc;
    font-weight: 600;
}

#talk ul li:nth-child(1) {
    //   background-color: #1eb007;
    // color: #1eb007;
}
#talk ul li:nth-child(2) {
    // /*background-color: #0033cc;*/
    // padding-top: 12px;
    // color:#0033cc ;
}
#talk ul li:nth-child(3) {
    // padding-top: 12px;
    // color: #6d2e03;
}
#talk ul li:nth-child(4) {
    background-color: #ff0000;
    padding-top: 13px;
    border: 1px solid #fff;
    color: #fff;
    letter-spacing: -0.5px;
    font-weight: bold;
}
#talk ul li i {
    /*color:rgba(255,255,255,0.9);*/
    font-size: 3em;
    padding-top: 0px !important;
    margin-top: 0px !important;
}

@media screen and (max-width: 38em) {
    #talk {
        width: 100%;
        /*background-color:rgba(255,227,23,0.5);*/
        background-color: rgba(176, 161, 161, 0.8);
        line-height: 1.5;
        color: #999;
        padding: 0px 0px 0px 0px;
        text-align: center;
        position: fixed;
        bottom: 0px;
        left: 0px;
        top: auto;
    }
    #talk ul li {
        width: 55px;
        height: 55px;
        text-align: center;
        vertical-align: middle;
        padding-top: 10px;
        margin: 0px 5px 0px 5px;
        display: inline-block;
        font-size: 1em;
    }
    .fb_icon {
        font-size: 2.3em;
        padding-top: 0px !important;
        margin-top: 0px !important;
    }
    #talk ul li:nth-child(4) {
        background-color: #ff0000;
        padding-top: 10px;
        border: 1px solid #ff0000;
        color: #fff;
        letter-spacing: -0.5px;
        font-weight: bold;
        font-size: 0.9em;
    }
}

#message{
	color:#333;
	background:#ffcc99;
	text-align:center;
	padding:10px 0px;
	margin:0px auto;
}

#message div{
	width:92%;
	background:#ffffff;
	border-radius:20px;
	padding:20px 0px;
	margin:40px auto;
}

#message h2{
	color:#663300;
	font-size:40px;
	font-weight:600;
	text-align:center;
	line-height:1.2;
}

.dropdown-menu{position:absolute;top:100%;left:0;z-index:1000;display:none;float:left;min-width:10rem;padding:.5rem 0;margin:.125rem 0 0;font-size:1rem;color:#212529;text-align:left;list-style:none;background-color:#fff;background-clip:padding-box;border:1px solid rgba(0,0,0,.15);border-radius:.25rem}.dropup .dropdown-menu{margin-top:0;margin-bottom:.125rem}.dropup .dropdown-toggle::after{display:inline-block;width:0;height:0;margin-left:.255em;vertical-align:.255em;content:"";border-top:0;border-right:.3em solid transparent;border-bottom:.3em solid;border-left:.3em solid transparent}.dropup .dropdown-toggle:empty::after{margin-left:0}.dropright .dropdown-menu{margin-top:0;margin-left:.125rem}.dropright .dropdown-toggle::after{display:inline-block;width:0;height:0;margin-left:.255em;vertical-align:.255em;content:"";border-top:.3em solid transparent;border-bottom:.3em solid transparent;border-left:.3em solid}.dropright .dropdown-toggle:empty::after{margin-left:0}.dropright .dropdown-toggle::after{vertical-align:0}.dropleft .dropdown-menu{margin-top:0;margin-right:.125rem}.dropleft .dropdown-toggle::after{display:inline-block;width:0;height:0;margin-left:.255em;vertical-align:.255em;content:""}.dropleft .dropdown-toggle::after{display:none}.dropleft .dropdown-toggle::before{display:inline-block;width:0;height:0;margin-right:.255em;vertical-align:.255em;content:"";border-top:.3em solid transparent;border-right:.3em solid;border-bottom:.3em solid transparent}.dropleft .dropdown-toggle:empty::after{margin-left:0}.dropleft .dropdown-toggle::before{vertical-align:0}.dropdown-divider{height:0;margin:.5rem 0;overflow:hidden;border-top:1px solid #e9ecef}.dropdown-item{display:block;width:100%;padding:.25rem 1.5rem;clear:both;font-weight:400;color:#212529;text-align:inherit;white-space:nowrap;background-color:transparent;border:0}.dropdown-item:focus,.dropdown-item:hover{color:#16181b;text-decoration:none;background-color:#f8f9fa}.dropdown-item.active,.dropdown-item:active{color:#fff;text-decoration:none;background-color:#007bff}.dropdown-item.disabled,.dropdown-item:disabled{color:#6c757d;background-color:transparent}.dropdown-menu.show{display:block}

.linefirend{
	font-size:2.5em;
	animation-name:linefirend;
	-webkit-animation-name:linefirend;
	animation-duration:2.5s;
	-webkit-animation-duration:2.5s;
	animation-iteration-count:infinite;
	-webkit-animation-iteration-count:infinite;
}

@keyframes linefirend{
	0%{transform:rotate(-4deg);}
	50%{transform:rotate(4deg);}
	100%{transform:rotate(-4deg);}
}

@-webkit-keyframes linefirend{
	0%{-webkit-transform:rotate(-4deg);}
	50%{-webkit-transform:rotate(4deg);}
	100%{-webkit-transform:rotate(-4deg);}
}

@media (max-width:767px){
	.linefirend{
		font-size:1em;
		animation-name:linefirend;
		-webkit-animation-name:linefirend;
		animation-duration:2.5s;
		-webkit-animation-duration:2.5s;
		animation-iteration-count:infinite;
		-webkit-animation-iteration-count:infinite;
	}
}