/************************************************************************************
RESET
*************************************************************************************/
html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    /*vertical-align: baseline;*/
    background: transparent;
}
body {line-height: 1; -webkit-text-size-adjust: none;}
ol, ul { list-style: none;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after,q:before, q:after {content: ''; content: none;}
/* remember to define focus styles! */
:focus {outline: 0;}
/* remember to highlight inserts somehow! */
ins {text-decoration: none;}
del {text-decoration: line-through;}
/* tables still need 'cellspacing="0"' in the markup */
table {
   border-collapse: collapse;
    border-spacing: 0;
}
a img {border: none;}
img {max-width: 100%;image-rendering: -webkit-optimize-contrast;}
.clean { clear:both;}
a {color: #333333; text-decoration: none; blr:expression(this.onFocus=this.blur()); outline: none; /* for Firefox */hlbr:expression(this.onFocus=this.blur()); /* for IE */}
a:hover {text-decoration:none;-webkit-transition: all 0.3s;-moz-transition: all 0.3s;transition: all 0.3s;}
a:focus{ -moz-outline-style: none;}
.b-box{
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

body {
	margin: 0;
	padding: 0;
	font-size:14px;
	overflow-x: hidden;
	color: #434343;
}

/*wow*/
.wow:first-child {
visibility: hidden;
visibility:visible \9;
}

*{box-sizing: border-box;}

figure{margin: 0; padding: 0;}

/*PC
-----------------------------------------------------------------*/

/*主框架*/
.container {
	width:100%;
	margin: auto;
	font-family: "Noto Sans TC",Verdana,'微軟正黑體';
	overflow: hidden;
	font-size: 15px;
	color: #333333;
}
main{
	background: url(../images/bg.jpg);
	background-position: center top;
	background-size: cover;
}

.block-center {
	width: 100%;
	max-width:1200px;
	margin: auto;
	clear: both;
	position: relative;
	padding: 1rem;
}

/*主視覺*/
.block-main{
	background-image: url(../images/head_bg.jpg);
    background-repeat: no-repeat;
    background-position: center top ;
	background-size:cover;
	height: 474px;
}
.main-banner{
	width: 1200px;
	height: 474px;
	margin: 0 auto;
	position: relative;
}
.main-banner>article {
    position: absolute;
    bottom: 15%;
    text-align: right;
    right: 4%;
}
h1.head-title {
    font-size: 80px;
    font-family: "Noto Serif TC", serif;
	line-height: 1.2;
}
h1.head-title br{
   display: none;
}
.main-banner>article>figure {
	margin-bottom: 0.5rem;
}

/*內容區*/
main{
	background-position: center top;
	background-size: 100%;
	background-repeat: repeat-y;
	background-image: url(../images/bg.jpg);
}
section#forbid,section#standard,section#qa,section#remind{
	padding: 3rem 0 1rem;
}
.title{
	text-align: center;
	margin-bottom: 3rem;
}
.title h2 {
    display: inline-block;
    color: white;
    background-color: #5479f7;
    font-size: 45px;
    font-family: "Noto Serif TC", serif;
    padding: 1rem 2rem;
    border-radius: 1rem;
    font-weight: 900;
}
.intro-list {
    margin-bottom: 5rem;
}
.intro-list ul{
	padding-left: 35px;
}
.intro-list li {
    font-size: 24px;
    margin-bottom: 1.5rem;
    line-height: 1.5;
    text-align: justify;
    position: relative;
    font-weight: 400;
}
.intro-list li::before {
    content: "";
    display: block;
    width: 24px;
    height: 24px;
    margin-left: -35px;
    background-image: url(../images/icon.jpg);
    position: absolute;
    top: 3px;
}
.red{
	color: #d06403;
}
.c-block{
	text-align: center;
}
h3.s-title {
    text-align: center;
    font-size: 30px;
    display: inline-block;
    padding-bottom: 1rem;
    border-bottom: 3px solid #facd89;
}
.battery-inner {
    display: flex;
    text-align: center;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
	gap: 4rem;
	padding-top: 4rem;
}
.battery-inner figure {
    width: 300px;
    height: 300px;
    background-color: #fff9ef;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;
    align-items: center;
    overflow: hidden;
    border: 10px solid #ffa893;
	position: relative;
}
.battery-inner figure:first-child:before,
.battery-inner figure:last-child:before {
    display: block;
    content: "";
    position: absolute;
    z-index: 2;
    width: 10px;
    height: 300px;
    background-color: #ffa893;
    left: 0;
    right: 0;
    margin: 0 auto;
    transform: rotate(60deg);
}
figcaption h4 {
    font-size: 20px;
    margin: 2rem 0 0;
    font-weight: 400;
}

p.rule {
    color: #d06403;
    text-align: center;
    margin-bottom: 2rem;
    font-size: 22px;
    font-weight: 500;
}
.kr{
	margin-top: 2rem;
}
.rule-table{
	margin-bottom: 4rem;
}
.rule-table table thead tr th,
.rule-table table tbody tr td {
    border: 1px solid #333333;
    padding: 0.75rem;
    text-align: center;
    font-size: 1rem;
	font-weight: 500;
	line-height: 1.5;
}
.rule-table table tbody tr td:first-child{
	text-align: left;
}
.rule-table table tbody tr td:first-child br{
	display: none;
}
.rule-table table thead tr th{
	background-color: #facd89;
	font-size: 20px;
	font-weight: 500;
}
.rule-table table thead tr th:first-child{
	width: 18%;
}
.qa-table table thead tr th:first-child,
.qa-table table thead tr th:last-child{
	width:calc(100% / 4);
}
.rule-table table tbody tr td>span{
	color: #d06403;
}
.rule-table table tbody tr:hover{
	background-color: #ebeffe;
}
.rule-table table tbody tr:hover td.range{
	background-color: white;
}
.align {
    text-align: left !important;
}
.table-notice {
    margin-top: 1rem;
}
.table-notice ul {
    padding-left: 1.5rem;
}
.table-notice ul li {
    display: list-item;
    list-style: disc;
    line-height: 1.4;
    margin-bottom: 0.5rem;
    font-weight: 300;
}
.airline-inner {
    display: flex;
    padding: 4rem 0 2rem;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.2rem;
    align-items: center;
}
.airline-inner a {
    display: block;
    width: calc(100% / 4 - 1rem);
    padding: 1rem 1rem;
    border-radius: 30px;
    color: #5479f7;
    border: 1px solid #5479f7;
	text-align: center;
	font-weight: 500;
	font-size: 22px;
	position: relative;
}
.airline-inner a:hover{
	border: 1px solid #d06403;
	background-color: #d06403;
	color: white;
}
.qawraper {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: flex-start;
    justify-content: center;
    align-items: flex-start;
}
.qacontent,.qa-table{
	padding: 1rem;
	width:calc(100% / 2 - 1rem);
}
caption {
    caption-side: bottom;
    padding: 10px;
    text-align: right;
}
.qa-table table tbody tr td:first-child {
    text-align: center;
}
h3.q-title {
    font-size: 24px;
    margin-bottom: 0.5rem;
    font-weight: 700;
    line-height: 1.5;
}
.qacontent p {
    display: block;
    background-color: #f5f7fe;
    border-radius: 0.5rem;
    padding: 1.5rem;
    margin-bottom: 1rem;
    font-size: 20px;
    font-weight: 500;
	line-height: 1.4;
}
.qacontent p br{
	display: none;
}
.remind{
	margin-bottom: 4rem;
}
.remind p {
    text-align: center;
    font-size: 22px;
    line-height: 1.5;
    font-weight: 400;
}

/*top按鈕*/
#back-top {
    left: 57% !important;
}

/*中間調度區
-----------------------------------------------------------------*/
@media screen and (max-width: 1800px) {
	main{
		background-size: auto;
	}
}

@media screen and (max-width: 1200px) {
	.block-center {
		width:95%;
		margin: 0 auto;
	}
	.main-banner {
		width: 100%;
		height: 0;
		padding-bottom: 50%;
	}
	.block-main {
		background-image: url(../images/header_m.jpg);
		width: 100%;
		height: 0;
		padding-bottom: 50%;
	}
	.main-banner>article {
		bottom: 14%;
		right: 12%;
	}
	h1.head-title br{
		display: block;
	 }
	 .battery-inner {
		gap: 2rem;
	}
	
}
@media screen and (max-width: 1080px) {
	.battery-inner {
		gap: 1rem;
	}
	.battery-inner figure {
		width: 250px;
		height: 250px;
	}
	figcaption h4 {
		font-size: 17px;
		margin: 0.75rem 0 0;
	}
	
}

@media screen and (max-width: 960px) {
	.main-banner>article {
        bottom: 20%;
        right: 8%;
        text-align: center;
    }
	h1.head-title {
		font-size: 70px;
	}
	.intro-list li {
		font-size: 22px;
	}
	h3.q-title {
		font-size: 22px;
	}
	.qacontent p {
		font-size: 18px;
	}
}
@media (max-width:890px) {
	.qacontent p br{
		display: block;
	}
}

/*平板
-----------------------------------------------------------------*/
@media (max-width:800px) {
	.main-banner>article {
        bottom: 10%;
        right: 5%;
    }
}

@media screen and (max-width: 768px) {
	.main-banner>article {
        width: 55%;
		right: 0;
    }
	.main-banner>article>figure {
        width: 60%;
        margin-bottom: 0.5rem;
        margin-left: auto;
        margin-right: auto;
    }
	section#forbid,section#standard,section#qa,section#remind{
		padding: 2rem 0 1rem;
	}
	.airline-inner a {
		width: calc(100% / 3 - 1rem);
	}
}

/*中間調度區
-----------------------------------------------------------------*/
@media (max-width:680px) {

}
@media (max-width:600px) {
	
	#back-top {
		display: none !important;
	}
	.rule-table table{
		width: 100%;
        display: block;
        overflow-x: auto;
        white-space: nowrap;
	}
	.rule-table table thead tr th, .rule-table table tbody tr td {
		padding: 0.5rem;
	}
	.rule-table table tbody tr td:first-child br{
		display: block;
	}
	.qa-table table{
		display: table;
		overflow-x:unset;
	}
	.qacontent, .qa-table {
        padding: 0;
        width: 100%;
        margin: 0 auto;
    }
	
}
@media (max-width:550px) {
    h1.head-title {
        font-size: 50px;
    }
	.title h2 {
		font-size: 32px;
		padding: 1rem;
	}
	.intro-list li {
		font-size: 20px;
	}
	.battery-inner {
		padding-top: 3rem;
	}
	p.rule {
        font-size: 20px;
        line-height: 1.4;
        margin-bottom: 1rem;
    }
	.airline-inner {
        gap: 1rem;
        padding: 2rem 0 0;
    }
	.airline-inner a {
		width: calc(100% / 2 - 1rem);
		font-size: 20px;
	}
	.remind p {
		font-size: 20px;
	}

}
/*手機
-----------------------------------------------------------------*/

@media (max-width: 480px) {
	
	h1.head-title {
        font-size: 47px;

    }
	.block-main {
        background-image: url(../images/header_m_phone.jpg);
        padding-bottom: 66%;
    }
	.main-banner>article {
        width: 59%;
        bottom: -15px;
    }
	.intro-list li {
        font-size: 18px;
    }
	.airline-inner a {
		font-size:18px;
	}
	p.rule {
        font-size: 18px;
    }
	.remind p {
        font-size: 18px;
        text-align: left;
    }
	.remind {
		margin-bottom: 3rem;
	}

}
@media (max-width: 400px) {
	/*h1.head-title {
        font-size: 36px;
    }*/
	
}
@media (max-width: 375px) {
    .title h2 {
        font-size: 28px;
    }
	.title {
		margin-bottom: 2rem;
	}
	h3.s-title {
		font-size: 23px;
	}
	/*.battery-inner figure {
		width: 250px;
		height: 250px;
	}*/

}

@media (max-width: 320px) {
	h1.head-title {
        font-size: 38px;
    }
	.title h2 {
        font-size: 25px;
    }
	h3.s-title {
		font-size: 21px;
	}
	p.rule {
		font-size: 18px;
	}
	.airline-inner a {
        font-size: 16px;
    }
}