/*--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
above contents are reset css
--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
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, 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,article, aside, canvas, details, embed, figure, 
figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,time, mark, audio, video {margin: 0;	padding: 0;	border: 0;	font-size: 100%;	font: inherit;	vertical-align: baseline;}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block;}
body, select, input {	line-height: 24px;	font-family: 'Roboto', sans-serif;	font-size: 16px;	color:#555555;}
body a{	text-decoration:none; color:#409ae7;}
b { font-weight: bold; }
a:hover {	text-decoration: none;	-webkit-transition: all .3s ease-in-out;	-moz-transition: all .3s ease-in-out;	-ms-transition: all .3s ease-in-out;	-o-transition: all .3s ease-in-out;}
ol, ul {	list-style: none;}
blockquote, q {	quotes: none;}
blockquote:before, blockquote:after,q:before, q:after {	content: '';	content: none;}
table {	border-collapse: collapse;	border-spacing: 0;}
.clearfix:before,
.clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix_r:before,.clearfix_r:after {  content: "";  display: table; clear: right; }
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } /* 解決padding影響寬度造成破版的問題 */


/*---------------------------------------------------------------------appeagle page-------------------------------------------------------------------------------------*/
.price_comparison .comparison{vertical-align: text-top;}
.pointWarapper { padding: 70px 0; text-align:center; }
.pointWarapper > div { width:80%; margin:0px auto; }
.pointWarapper p { font-size: 18px; line-height: 32px; }
.pointWarapper h3 { font-size: 32px; line-height: 60px; margin-bottom:15px; }
.pointWarapper h1 { font-size: 65px; line-height: 130px; font-weight:bold;  }
.pointWarapper .button { width: 300px; border: 1px solid #fff; color: #fff; display: block; margin: 27px auto 10px auto; border-radius: 5px; line-height: 55px;}
.comparison { border: 3px solid #448aca; width: 49%; display: inline-block;}
.comparison:nth-child(1) { border-right:0px; }
.comparison .bqool { background:#cae9ff; width:100%; color:#00559d;}
.comparison .appeagle { background:#f0f0f0; width:100%; color:#6a6a6a;}
.comparison table tr td { line-height: 60px; font-size: 24px; }
.comparison table tr th { line-height: 50px; font-size: 24px; font-weight: bold; padding: 15px; text-align: center; }
.comparison_logo { padding-bottom: 100px; padding: 20px 0; position: relative; color:#448aca;}
.comparison-price .appeagle td{ background: #0e64ad; font-weight: bold;line-height: 209px;color: #fff;}

.strategiesComparison {margin:30px 0px;display: table;}
.strategiesComparison p {margin:0 0 30px 40px;text-align: left;}
.strategiesComparison .tabe-img,
.strategiesComparison .tabe-txt{
	display: table-cell;
	vertical-align: middle;
}
.strategiesComparison .tabe-img {width: 20%;text-align: center;}
.strategiesComparison .tabe-img img {max-width:100%;margin: 0 auto;display: block;}
.strategiesComparison .tabe-txt {width: 80%;}

.pointWarapper .country {width: 19%; display: inline-block;}
.css-table{ display:table;}
.css-tr { display:table; vertical-align:middle;margin: 20px 0;}
.css-td { display:table-cell; vertical-align:middle; text-align:left;}
.comoparison_feature .css-td:nth-child(2) {padding-left:40px;}

.pointWarapper h5 { font-size: 18px; font-weight: bold; margin-bottom: 7px; } 
.pointWarapper .button { width: 300px; border: 1px solid #fff; color: #fff; display: block; margin: 27px auto 10px auto; border-radius: 5px; line-height: 55px;}
.pointWarapper div.exclulsiveFeature { display: inline-block; width: 30%; margin: 0 1.5%; vertical-align: top; }
.pointWarapper div.exclulsiveFeature h2 { font-size: 20px; padding-bottom: 10px; font-weight: bold; padding-top: 20px; }
.pointWarapper div.exclulsiveFeature p { font-size:16px; }
.bg-gray span {
    font-size: 24px;
    margin: 0 20px;
}
.bg-gray a:hover {
    color: #448aca;
    text-decoration: underline;
}

/*---------------------------------------------------------------------------RWD 950px-------------------------------------------------------------------------------------*/
@media screen and ( max-width: 950px) {
	.comparison { width: 100%; display: block; }
	.comparison:nth-child(1) { border-right:3px solid #448aca; margin-bottom: 40px; }
}

/*---------------------------------------------------------------------------RWD 800px-------------------------------------------------------------------------------------*/
@media screen and (max-width: 890px) {
	.strategiesComparison{display: block;}
	.strategiesComparison .tabe-img, .strategiesComparison .tabe-txt {
		display: inline-block;
		vertical-align: middle;
	}
	.strategiesComparison .tabe-img {
		width: 80%;
		margin: 0 0 30px 0;
	}
	.strategiesComparison .tabe-txt {
		width: 100%;
	}
	.strategiesComparison p { margin:0 auto 40px auto;}
	.bg-gray span {
		font-size: 24px;
		margin: 20px 20px;
		display: inline-block;
	}	
}
@media screen and (max-width: 800px) {
	.pointWarapper .country { width: 33%; display: inline-block; margin-bottom: 20px; }
	.pointWarapper .country { width: 40%; margin-bottom:40px;}
}

/*---------------------------------------------------------------------------RWD 600px-------------------------------------------------------------------------------------*/
@media screen and ( max-width: 640px) {
	.css-td { display: block; text-align: center; }
	.comoparison_feature .css-td:nth-child(2) { padding-left: 0px; }
	.pointWarapper h1 { font-size: 48px;}
}

@media screen and ( max-width: 499px) {
	.pointWarapper .country {   width: 53%;}
}