stylePages.css

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

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;
}
h1{
    color: blue;
    font-size: 20px;
}

*,*::before, *::after{
	box-sizing: border-box;
	/*outline: 1px solid black;*/
}
/*全頁寬度置中，與字的粗度設定*/
.wrap{
	width: 1024px;
	margin: 0 auto;
}

/*三個頁面的頁頭與頁尾header & footer*/
.header-bar, .footer{
	display: flex;
	justify-content: space-between;
}
.title{
	background-image: url(images/HEXSCHOOL.png);
	width: 170px;
	height: 34px;
	display: block;
	text-indent: 102%;
	overflow: hidden;
	white-space: nowrap;
}
/*三個頁面的頁頭header*/
.header-bar{
	height: 76px;
    background: linear-gradient(to right, rgba(50, 50, 40, 0.4) 0, rgba(50, 50, 40, 1) 10%, rgba(50, 50, 40, 1) 50%, rgba(50, 50, 40, 0.4) 100%);
}
h1{
	margin: 20px 0 20px 42px;
}
.navbar{
	width: 224px;
	margin-top: 30px;
	margin-right: 42px;
	display: flex;
	justify-content: space-between;
}
.navbar a{
	width: 60px;
	padding: 0 15px 23px 15px;
	color: #fff;
	font-size: 14px;
	text-decoration: none;
}
.navbar a:hover{
	color: #00cc99;
	border-bottom: 6px solid #00cc99;
}
.header-index, .header-courses, .header-questions{
	height: 560px;
}
.header-index{
	background-image: url(images/indexBanner.png);
}
.header-courses{
	background-image: url(images/coursesBanner.png);
}
.header-questions{
	background-image: url(images/questionsBanner.png);
}
/*三個頁面的頁尾footer*/
.footer{
	background-color: #323228;
}
.footer-title{
	margin: 37px 0 37px 42px;
}
.footer-title p{
	margin-top: 8px;
	margin-left: 30px;
	color: #9b9b9b;
	font-size: 12px;
}
.linkbar{
	width: 140px;
	margin: 50px 42px 50px 0;
	display: flex;
	justify-content: space-between;
}

/*按鈕與搜尋欄*/
/*三個頁面的頁頭header，頁中content，頁中下欄container的所有
按鈕共同樣式 */
.btn{
	color: #ebebeb;
	font-size: 16px;
	font-weight: 800;
	text-decoration: none;
	background-color: #00cc99;
	border-radius: 5%;
	border: none;
}
/*多頁式首頁index的頁頭header-index，多頁式課程coursePage的頁頭header-courses，
與頁中下欄container的馬上去註冊按鈕 */
.btn-regist, .btn-register, .btn-login{
	width: 220px;
	padding: 16px 34px 16px 39px;
}
.btn-regist span, .btn-register span, .btn-login span{
	margin-left: 27px;
}
/*多頁式首頁index，頁頭header-index的按鈕*/
.btn-regist{
	margin: 292px 763px 139px 42px;
	display: block;
}
/*多頁式課程coursePage，頁頭header-courses的按鈕*/
.btn-login{
	margin: 248px 763px 183px 42px;
	display: block;
}
/*多頁式課程questionsPage，頁頭header-questions的搜尋欄*/
.header-input{
	width: 620px;
	height: 52px;
	border-radius: 8%;
	margin: 241px 202px 191px 202px;
	position: relative;
}
.header-input input{
	width: calc(100%);
	height: calc(100%);
	border-radius: 8%;
	font-size: 22px;
	border: none;
}
.header-input a{
	position: absolute;
	top: 10px;
	right: 10px;
}

/*三個頁面的頁中content，與h3,h4,p,li設定*/
.col-title, .col-images{
	display: flex;
	margin-bottom: 30px;
}
h3{
	color: #00cc99;
	font-size: 32px;
	font-weight: 800;
	margin-right: 15px;
}
h4{
	color: #9b9b9b;
	font-size: 16px;
	font-weight: 800;
	margin-top: 15px;
}
p, li, th ,td{
	color: #323223;
	font-size: 14px;
	font-weight: 800;
}

/*多頁式首頁index的頁中content-index*/
.content-index{
	padding: 60px 42px;
}
/*多頁式首頁index的頁中content-index，的col-courses部分(col-images部分設定
放在上方三個頁面的頁中content)*/
.col-courses{
	margin-bottom: 60px;
}
.col-courses h4{
	margin-right: 509px;
}
.col-courses a{
	color: #00cc99;
	font-size: 12px;
	text-decoration: none;
	border: 2px solid #00cc99;
	border-radius: 10%;
	background-color: #fff;
	padding: 7px 14px;
}
.col-images{
	justify-content: space-between;
}
.col-images img{
	border: 1px solid #f4f4f4;
	box-shadow: -2px 0 5px #d9d9d9, 2px 3px 5px #d9d9d9;
}
/*多頁式首頁index的頁中content-index，的col-compare部分*/
.col-compare th, .col-compare td{
	padding: 17px 139px 17px 18px;
	text-align: center;
}
.col-compare th:nth-child(3), .col-compare td:nth-child(3){
	padding-right: 148px;
}
.col-compare th:last-child, .col-compare td:last-child{
	padding-right: 21px;
}
.col-compare th{
	background-color: #ebebeb;
}
.text-accent{
	color: #00cc99;
}

/*多頁式課程coursePage的頁中content-courses*/
.content-courses{
	padding: 60px 202px;
}
/*多頁式課程coursePage的頁中content-courses，的col-teacher部分*/
.col-teacher{
	display: flex;
	margin-bottom: 60px;
}
.col-teacher h3{
	margin: 69px 52px;
	line-height: 1.5;
}
.col-teacher span{
	color: #323223;
}
.col-teacher ul{
	margin-top: 69px;
	margin-bottom: 45px;
}
.col-teacher li{
	color: #9b9b9b;
	line-height: 1.5;
	text-indent: 1.5em;
	list-style-type: square;
}
.col-teacher li::marker{
	font-size: 8px;
}
/*多頁式課程coursePage的頁中content-courses，的col-advantages部分*/
.col-advantages{
	margin-bottom: 60px;
}
.col-advantages li{
	list-style-type: decimal;
	line-height: 1.5;
	text-indent: 0.5em;
	margin-left: 15px;
}
/*多頁式課程coursePage的頁中content-courses，的col-outline部分*/
.col-outline li{
	padding-top: 20px;
	padding-bottom: 20px;
	padding-left: 38px;
}
.col-outline li:nth-child(2n+1){
	background-color: #ebebeb;
}
.col-outline li:nth-child(2n){
	color: #9b9b9b;
}

/*多頁式問答questionsPage的頁中content-questions*/
.content-questions{
	padding: 60px 122px;
}
.col-questions, .col-paid{
	margin-bottom: 60px;
}
.col-questions div, .col-paid div, .col-refund div, dd{
	margin-bottom: 35px;
}
dd:last-child{
	margin-bottom: 0;
}
dt{
	color: #323223;
	font-size: 18px;
	font-weight: 800;
	line-height: 1.5;
}
dd, .col-paid p, .col-refund p{
	color: #9b9b9b;
	font-size: 14px;
	font-weight: 800;
	line-height: 1.5;
}
.email{
	color: #00cc99;
	margin-left: 5px;
	margin-right: 5px;
}
.circle{
	margin-left: 24px;
	margin-right: 24px;
}
.decimal{
	margin-left: 30px;
	margin-right: 20px;
}


/*三個頁面頁中下欄container*/
.container{
	display: flex;
	background-color: #ebebeb;
}
.container h3{
	color: #323223;
	font-size: 26px;
	line-height: 2em;
	letter-spacing: 0.1em;
}
.container form{
	display: flex;
	flex-direction: column;
}
.input-name, .input-email, .container-email textarea{
	width: 460px;
	padding-top: 16px;
	padding-left: 22px;
	margin-bottom: 20px;
	color: #9b9b9b;
	font-size: 16px;
	border-radius: 5%;
	border: none;
}
.input-name, .input-email{
	padding-bottom: 16px;
}
.input-name, .container-email textarea{
	font-weight: 800;
}
.btn-submit{
	width: 140px;
	padding: 16px 40px;
	margin-left: 320px;
}
/*多頁式首頁index的頁中下欄container-msg部分*/
.container-msg h3{
	margin: 148px 130px 148px 44px;
}
.container-msg form{
	margin-top: 140px;
	margin-right: 44px;
	margin-bottom: 60px;
}
/*多頁式課程coursePage的頁中下欄container-register部分*/
.container-register h3{
	margin: 155px 63px 152px 162px;
}
.btn-register{
	margin-top: 205px;
	margin-right: 162px;
	margin-bottom: 160px;
}
/*多頁式問答questionsPage的頁中下欄container-email部分
(container-email textarea部分設定放在三個頁面頁中下欄container)*/
.container-email h3{
	margin: 136px 157px 375px 40px;
}
.container-email form{
	margin-top: 120px;
	margin-right: 40px;
	margin-bottom: 60px;
}
.container-email textarea{
	padding-bottom: 168px;
}