/* ---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 {
	line-height: 1;
}
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;
}
/* ---reset.css--- */

*{
	margin: 0;
	padding: 0;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	-o-box-sizing:border-box;
	box-sizing:border-box;
	}

html{-webkit-text-size-adjust:none;
     /*font-family: Meiryo, "Meiryo UI", "Microsoft JhengHei UI", "Microsoft JhengHei", sans-serif;*/
	 font-family: Arial, Helvetica,"微軟正黑體", "Microsoft JhengHsans", sans-serif;
}

h1, h2, h3, h4, .process p{
	font-family: Arial, Helvetica,"source-han-sans-traditional","微軟正黑體", "Microsoft JhengHsans",
	 sans-serif;
}

body{
	font-size:17px;
}

a{text-decoration:none !important;}

/* ----------電腦版型--------------------------- */
.header{
	background-color: #ee781e;
	padding-top: 15px;
	padding-bottom: 15px;
}

.pconline_logo{
	margin: 0 auto;
	width: 50vw;
	max-width: 250px;
}	
	
/*------------- CONTENT1 -------------*/	
.CONTENT1, .CONTENT2, .CONTENT3, .CONTENT4{
    width:100%;
	height:auto;
	position:relative;
	overflow:hidden;
	background-color: #fcedd4;
}

.CONTENT2, .CONTENT4{
	background-color: #fff;
	background-image:url(../images/bg01.png);
}
	
.CONTENT1 .container, .CONTENT2 .container, .CONTENT3 .container, .CONTENT4 .container{
	padding-top:60px;
	padding-bottom:60px;}
h1{
	text-align: center;
	font-size: 30px;
	color: #ee781e;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 1px;
	margin-bottom: 20px;
}

h3{
	text-align: center;
	font-size: 30px;
	color: #ee781e;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 1px;
	margin-bottom: 20px;
}

.process{
	margin: 0 auto;
	max-width: 550px;
	width: 100%;
	padding-top:5px;
	padding-bottom:5px;
	border-radius: 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
}

.process1{
	background-color: #7bc3ad;
}

.process2{
	background-color: #cccc33;
}

.process3{
	background-color: #f6aa32;
}

.process div{
	margin: 0 auto;
	width: 58%;
	min-width: 300px;

}

.process img, .process p{
	display: inline-block;
	vertical-align: middle;
}

.process img{
	max-width: 90px;
	height: auto;
}

.process p{
	font-size: 21px;
	color: #fff;
	text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
	font-weight: 500;
	line-height: 1.3;
}

p.chevron-down{
	font-size: 30px;
	color: #a3a3a3;
	text-align: center;
}



/*------------- CONTENT2 -------------*/
p.sub{
	text-align: center;
	color: #333;
	font-size: 21px;
	line-height: 1.5;
}

p.sub span{
	font-weight: bold;
}

.block{
	height: 50px;
}

.download{
	margin: 0 auto;
	max-width: 550px;
	width: 100%;
	padding-top:5px;
	padding-bottom:5px;
}

.download .img_block, .download .download_block{
	display: inline-block;
	vertical-align: middle;
}

.download .img_block{
	width: 30%;
	max-width: 150px;
	margin-right: 5%;
}

.img_block img{
	margin-bottom: 10px;
}

.download .download_block{
	width: 65%;
	max-width: 400px;
}

.download_but{
	width: 100%;
	border-radius: 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	margin-bottom: 20px;
	cursor: pointer;
}

.but01{
	background-color: #60b6ff;
}

.but02{
	background-color: #ff9e40;
}

.download_but p{
	font-size: 21px;
	line-height:50px;
	color: #fff;
	text-align: center;
}

.download_but:hover p{
	font-size: 23px;
}

.but01:hover{
	background-color: #1f8ae5;
}

.but02:hover{
	background-color: #f17700;
}



/*------------- CONTENT3 -------------*/
.underline{
	margin: 0 auto;
	width: 100px;
	line-height: 1.5;
	border-bottom: 5px solid #ee781e;
	margin-bottom: 20px;
}

.CONTENT3 .container img{
	cursor: pointer;
}

	
/*------------- CONTENT4 -------------*/
ul.note{
	margin: 0 auto;
	max-width: 550px;
	width: 90%;
}

ul.note li{
	list-style-type: disc; 
	line-height: 1.3;
	margin-bottom: 5px;
}

ul.note li span{
	color: #ff0000;
}

	
/* --平板版型1-------------------------------------*/
@media screen and (max-width:1023px) {

}

/* --平板版型2-------------------------------------*/
@media screen and (max-width:767px) {
h1{ font-size: 23px; }
h3{ font-size: 23px; }
.process p{ font-size: 19px;}
.download .download_block{width: 60%;}
p.sub{ font-size: 18px; }
}
	
/* --手機版型1-------------------------------------*/
@media screen and (max-width:639px) {

}

/* --手機版型2-------------------------------------*/
@media screen and (max-width:479px) {
.header, .CONTENT1, .CONTENT2, .CONTENT3, .CONTENT4{ min-width:320px;}
.download_but p{ font-size: 17px;}
.download .img_block{margin-right: 1%;}
.download_but:hover p{font-size: 18px;}
.download .download_block{width: 65%;}
}

/* --手機版型3-------------------------------------*/
@media screen and (max-width:374px) {

}

/* --電腦版型w320以下-------------------------------------*/
@media screen and (max-width:319px) {

}