@charset "utf-8";
/* 1.0 Generic */
html, body {
  color:#454545;
  font-family:'Microsoft YaHei UI', 'Microsoft YaHei', '微软雅黑', 'Microsoft JhengHei UI', 'Microsoft JhengHei', '微軟正黑體', PMingLiU, '新細明體', MingLiu, '細明體', Arial, 'Arial Unicode MS', sans-serif;
  font-size:16px;
  line-height:30px;
  letter-spacing:2px;
  margin:0px;
  padding:0px;
}

h1, h2, h3, h4, h5, h6, h7 {
	margin: 0px;
}

a:link { color:#9c27b0; text-decoration:none; }
a:visited { color:#9c27b0; text-decoration:none; }
a:hover { color:#e91e63; text-decoration:none; }
a:active { color:#e91e63; text-decoration:none; }

textarea {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  width:100%;
  height:70px;
  border:1px #a9a9a9 solid;
  color:#454545;
  font-family:'Microsoft YaHei UI', 'Microsoft YaHei', '微软雅黑', 'Microsoft JhengHei UI', 'Microsoft JhengHei', '微軟正黑體', PMingLiU, '新細明體', MingLiu, '細明體', Arial, 'Arial Unicode MS', sans-serif;
  font-size:16px;
  line-height:30px;
  padding:5px;
  resize:none;
}
textarea:focus {
  outline:none;
}
select {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  width:100%;
  height:40px;
  border:1px #a9a9a9 solid;
  color:#787878;
  font-family:'Microsoft YaHei UI', 'Microsoft YaHei', '微软雅黑', 'Microsoft JhengHei UI', 'Microsoft JhengHei', '微軟正黑體', PMingLiU, '新細明體', MingLiu, '細明體', Arial, 'Arial Unicode MS', sans-serif;
  font-size:16px;
  line-height:40px;
  padding:0px 5px 0px;
}
input[type=text], input[type=password] {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  width:100%;
  height:40px;
  border:1px #a9a9a9 solid;
  color:#787878;
  font-family:'Microsoft YaHei UI', 'Microsoft YaHei', '微软雅黑', 'Microsoft JhengHei UI', 'Microsoft JhengHei', '微軟正黑體', PMingLiU, '新細明體', MingLiu, '細明體', Arial, 'Arial Unicode MS', sans-serif;
  font-size:16px;
  line-height:40px;
  padding:0px 5px 0px;
}
input[type=text]:focus {
  outline:none;
}

input[type="radio"] {
  width:16px;
  height:16px;
}

input[type="checkbox"] {
  width:16px;
  height:16px;
  vertical-align: middle;
}

input[type=submit] {
  -webkit-appearance: none;
  -webkit-border-radius:0px;
  -moz-border-radius:0px;
  border-radius:0px;
  width:100%;
  max-width:124px;
  border:0px;
  background-color:#9c27b0;
  color:#ffffff;
  font-family:'Microsoft YaHei UI', 'Microsoft YaHei', '微软雅黑', 'Microsoft JhengHei UI', 'Microsoft JhengHei', '微軟正黑體', PMingLiU, '新細明體', MingLiu, '細明體', Arial, 'Arial Unicode MS', sans-serif;
  font-size:16px;
  text-align:center;
  padding:10px 0px 10px;
  cursor:pointer;
}

input[type=submit]:hover {
  background-color:#e91e63;
}

.clear_float {
  clear:both;
}

.wrapper {
  width:96%;
  margin:auto;
}

.hide_desktop {
  display:none;
}

.hide_mobile {
  display:block;
}

.text_center {
  text-align: center;
}

.margin_bottom {
  margin-bottom:20px;
}

.mb-2 {
	margin-bottom: 20px;
}
.pt-5 {
	padding-top: 50px;
}
.pb-5 {
	padding-bottom: 50px;
}

.box_shadow {
  -moz-box-shadow:0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);
  -webkit-box-shadow:0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);
  box-shadow:0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);
  /*box-shadow: 0 .1875rem .4375rem 0 rgba(0, 0, 0, .13), 0 .0625rem .125rem 0 rgba(0, 0, 0, .11);*/
}

.box_sizing {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.btn_input {
  -webkit-appearance: none;
  -webkit-border-radius:0px;
  -moz-border-radius:0px;
  border-radius:0px;
  width:100%;
  max-width:124px;
  border:0px;
  background-color:#9c27b0;
  color:#ffffff;
  font-family:'Microsoft YaHei UI', 'Microsoft YaHei', '微软雅黑', 'Microsoft JhengHei UI', 'Microsoft JhengHei', '微軟正黑體', PMingLiU, '新細明體', MingLiu, '細明體', Arial, 'Arial Unicode MS', sans-serif;
  font-size:16px;
  text-align:center;
  padding:10px 0px 10px;
  display: inline-block;
  cursor:pointer;
}

.btn_input:hover {
  background-color:#e91e63;
}



.subtitle_v0 {
  font-size: 21px;
  font-weight: 700;
  color: #e91e63;
}

.subtitle_v1 {
  font-weight: 700;
  color: #e91e63;
  text-decoration: underline;
}

.permission_msg {
  color: #9c27b0;
  font-size: 60px;
  font-weight: 700;
  text-align: center;
}


@media only screen and (max-width:870px) {
  .hide_desktop {
    display:block;
  }
  .hide_mobile {
    display:none;
  }
}












/* 2.0 Container */
#container {
  width:100%;
  height:100%;
}

/* 2.1 Header */
#container > #header {
  width:100%;
  background-color:#ffffff;
}

/* 2.1.1 Logo */
#container > #header > .wrapper > .logo_box {
  width:100%;
  max-width:200px;
  padding:20px 0px 20px;
  float:left;
}
#container > #header > .wrapper > .logo_box > a > .logo_wpedu {
  width:100%;
  max-width:200px;
  height:51px;
  background:url(../images/logo/logo_wpedu.png) no-repeat center center;
  background-size:100% auto;
}

/* 2.1.2 Menu */
#container > #header > .wrapper > .nav {
  width: 100%;
  max-width: calc(100% - 250px);
  line-height: 51px;
  float:right;
}
#container > #header > .wrapper > .nav > .menubox {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  width: 20%;
  height: 91px;
  border-bottom: 5px #ffffff solid;
  padding: 20px 0px 20px;
  position: relative;
  float: left;
  cursor: pointer;
}
#container > #header > .wrapper > .nav > .menubox:hover {
  border-bottom: 5px #e91e63 solid;
}
#container > #header > .wrapper > .nav > .menubox:hover > a {
  color: #e91e63;
}
#container > #header > .wrapper > .nav > .menubox > a > .menu {
  text-align: center;
}
#container > #header > .wrapper > .nav > .menubox > .submenubox {
  width: 100%;
  position: absolute;
  top: calc(100% + 5px);
  left: 0%;
  display: none;
}
#container > #header > .wrapper > .nav > .menubox > .submenubox > a > .submenu, #container > #header > .wrapper > .nav > .menubox > .submenubox > .subbox > a > .submenulable {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background-color: #ffffff;
  text-align: center;
}
#container > #header > .wrapper > .nav > .menubox > .submenubox > a:hover > .submenu, #container > #header > .wrapper > .nav > .menubox > .submenubox > .subbox:hover > a > .submenulable {
  background-color: #e91e63;
  color: #ffffff;
}
#container > #header > .wrapper > .nav > .menubox > .submenubox > .subbox > .submenubox_s {
  width: 100%;
  position: absolute;
  top: 0;
  left: 100%;
  display: none;
}
#container > #header > .wrapper > .nav > .menubox > .submenubox > .subbox > .submenubox_s > a > .subsmenu {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background-color: #ffffff;
  text-align: center;
}
#container > #header > .wrapper > .nav > .menubox > .submenubox > .subbox > .submenubox_s > a:hover > .subsmenu {
  background-color: #ffffff;
  color: #9c27b0;
}
#container > #header > .wrapper > .mobilenav {
  position: relative;
  float: right;
}
#container > #header > .wrapper > .mobilenav > .icon_menu {
  width: 60px;
  height: 60px;
  color: #9c27b0;
  text-align: center;
  cursor: pointer;
}
#container > #header > .wrapper > .mobilenav > .icon_menu:hover {
  background-color: #e91e63;
  color: #ffffff;
}
#container > #header > .wrapper > .mobilenav > .mobilemenubox {
  position: absolute;
  top: 100%;
  right: 0;
  display: none;
}
#container > #header > .wrapper > .mobilenav > .mobilemenubox > a > .mobilemenu {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  width: 200px;
  background-color: #ffffff;
  text-align: center;
  padding: 20px;
  cursor: pointer;
}
#container > #header > .wrapper > .mobilenav > .mobilemenubox > a > .mobilemenu:hover {
  background-color: #e91e63;
  color: #ffffff;
}
@media only screen and (max-width:870px) {
  #container > #header > .wrapper > .logo_box {
    margin: 5px 0px 4px;
    padding:0px;
  }
}

/* 2.2 Page Title or Banner */
#container > .page_title {
  background-color:#9c27b0;
  color:#ffffff;
  padding:20px 0px 20px;
}
#container > .page_title > .wrapper > .title {
  font-size:36px;
  line-height:60px;
  text-align:center;
}

/* 2.3 Main */
#main {
  width:100%;
}
#main > .generic_wrap > .section {
	padding-left: 5%;
	padding-right: 5%;
}
#main > .generic_wrap > .grid_wrap {
  display: grid;
  grid-template-columns: repeat(2, 1fr);;
  grid-auto-rows: auto;
  grid-column-gap: 0px;
  grid-row-gap: 0px;
}
#main > .generic_wrap > .grid_wrap > .box {
  height: 100%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
#main > .generic_wrap > .grid_wrap > .box > .section {
  padding: 50px;
}

@media only screen and (max-width:700px) {
  #main > .generic_wrap > .grid_wrap {
    grid-template-columns: repeat(1, 1fr);;
  }
}




















.homepage {
  border-top:5px #9c27b0 solid;
}
.banner {
  border-top:5px #9c27b0 solid;
}









/* form_box setting start */
.table_box {
  width:100%;
  margin-bottom:20px;
  display:table;
}
.cell_bottom {
  border-bottom:1px #ffffff solid;
}
.unfixed_table {
  width: 100%;
  display: table;
}
.unfixed_row {
  display:table-row;
}
.unfixed_cell {
  display:table-cell;
}
.fixed_table {
  width:100%;
  display:table;
}
.fixed_row {
  display:table-row;
}
.fixed_cell {
  display:table-cell;
}
.num_cell {
  width:56px;
  background-color:#9c27b0;
  color:#ffffff;
  text-align:center;
  padding:10px 0px 10px;
}
.que_cell {
  border-left:1px #ffffff solid;
  background-color:#f0f0f0;
  padding:10px 10px 10px;
}
.radio_cell {
  width:44px;
  border-left:1px #ffffff solid;
  background-color:#f0f0f0;
  text-align:center;
  padding:10px;
}
.radio_cell_title {
  background-color:#9c27b0;
  color:#ffffff;
  vertical-align:bottom;
}
.radio_cell_box {
  cursor:pointer;
}
.mobile_radio_lab {
  display:none;
}
.checkbox_row {
  height:40px;
  line-height:40px;
}
.checkbox_cell {
  width: 50%;
  height: auto;
  text-align: left;
  display: table-cell;
  cursor: pointer;
}
.text_box_row {
  height:100px;
}
.text_cell {
  width:304px;
  border-left:1px #ffffff solid;
  background-color:#f0f0f0;
  text-align:center;
  vertical-align:top;
  padding:10px;
}
.info_box_row {
  height:60px;
  line-height:40px;
}
.info_box_row_2 {
  height:181px;
  line-height:40px;
}
.info_cell {
  width:80%;
  border-left:1px #ffffff solid;
  background-color:#f0f0f0;
  text-align:center;
  vertical-align:top;
  padding:10px;
}
/* form_box setting start */


.info_table {
  width: 100%;
  height: 100%;
}
.info_table > tbody > tr > td {
  border: 1px #e91e63 solid;
  border-right: 0px;
  border-bottom: 0px;
  padding: 20px 10px 20px;
}
.info_table > tbody > tr:first-child > td:first-child {
  border-bottom: 1px #e91e63 solid;
}
.info_table > tbody > tr:first-child > td {
  text-align: center;
}
.info_table > tbody > tr > td:last-child {
  border-right: 1px #e91e63 solid;
}
.info_table > tbody > tr:last-child > td {
  border-bottom: 1px #e91e63 solid;
}



/* footer setting start */
#footer {
  width:100%;
  border-top:5px #9c27b0 solid;
  background-color:#ffffff;
  text-align:center;
  padding:30px 0px 30px;
}
#footer > .wrapper > .Copyright {
  color:#333333;
  font-size:14px;
  line-height:30px;
}
/* footer setting end */

#btn_goto_top {
  width:48px;
  height:48px;
  -webkit-border-radius:5px;
  -moz-border-radius:5px;
  border-radius:5px;
  background:url(../images/icon/goto_top_48_48.png) #9c27b0 no-repeat center center;
  padding:6px;
  position:fixed;
  bottom:70px;
  right:30px;
  display:none;
}

#btn_goto_top:hover {
  background-color:#e91e63;
}


@media only screen and (max-width:700px) {
  input[type="submit"] {
    max-width:none;
  }
  .tdfeaturesl {
    width: 100%;
    text-align: center;
      margin-bottom: 30px;
  }
  .table_box {
    border-bottom:1px #dcdcdc solid;
    margin-bottom:20px;
  }
  .unfixed_table {
    display:block;
  }
  .unfixed_row {
    display:block;
  }
  .unfixed_cell {
    display:block;
  }
  .row_title {
    display:none;
  }
  .radio_cell_box {
    width:100%;
  }
  .radio_cell {
    width:100%;
    height:50px;
    border:0px;
    border-bottom:1px #ffffff solid;
    background-color:#ffffff;
    padding:0px;
  }
  .mobile_radio_input {
    padding-top:13px;
    padding-right:6px;
    padding-bottom:7px;
    padding-left:62px;
    float:left;
  }
  .mobile_radio_lab {
    height:30px;
    padding:10px 0px 10px;
    float:left;
    display:block;
  }
  .checkbox_row {
    height:auto;
    line-height:30px;
  }
  .checkbox_cell {
    width: 100%;
    height: auto;
    line-height: 50px;
  }
  .text_box_row {
    height:auto;
  }
  .text_cell {
    width:100%;
    height:80px;
    border:0px;
    border-bottom:1px #ffffff solid;
    background-color:#ffffff;
    padding:10px 0px 10px;
  }
  .info_box_row {
    height:auto;
    line-height:30px;
  }
  .info_box_row_2 {
    height:auto;
    line-height:30px;
  }
  .info_cell {
    width:100%;
    min-height:50px;
    border:0px;
    border-bottom:1px #ffffff solid;
    background-color:#ffffff;
    padding:10px 0px 10px;
  }
}


















.generic_grid_wrap {
  display: grid;
  grid-auto-rows: auto;
  grid-column-gap: 10px;
  grid-row-gap: 10px;
}
.generic_grid_wrap_style_1 {
  background-color: #fffbdc;
}
.generic_grid_wrap_style_2 {
  background-color: #ffdeef;
}
.generic_grid_wrap > .box {
  height: 100%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background-color: #ffffff;
}

.gen_gw_1 {
  grid-template-columns: repeat(1, 1fr);;
}

.gen_gw_2 {
  grid-template-columns: repeat(2, 1fr);;
}

.gen_gw_3 {
  grid-template-columns: repeat(3, 1fr);;
}

.gen_gw_4 {
  grid-template-columns: repeat(4, 1fr);;
}

.gen_gw_6 {
  grid-template-columns: repeat(6, 1fr);;
}

.gen_gw_12 {
  grid-template-columns: repeat(12, 1fr);;
}

.card-s1-t {
	padding: 30px 30px 10px;
}
.card-s1-c {
	padding: 10px 30px 30px;
}

.card-s2-t {
	text-align: center;
	padding: 30px 30px 30px;
}

.card-s2-c {
  padding: 30px 30px 30px;
}

.card-s3-t-box {
  vertical-align: middle;
}
.card-s3-b-box {
  width: 202px;
  vertical-align: middle;
}

.card-s3-t {
  padding: 30px;
}
.card-s3-b {
  width: 100%;
  height: 100%;
  border-left: 1px #ffffff solid;
  background-color: #9c27b0;
  color: #ffffff;
  text-align: center;
  padding-top: calc(50% - 15px);
  padding-bottom: calc(50% - 15px);
}

.card-s3-b:hover {
  background-color: #e91e63;
}

.card-s4-t-box {
  vertical-align: middle;
}
.card-s4-b-box {
  width: 100px;
  vertical-align: middle;
}

.card-s4-t {
  padding: 30px;
}
.card-s4-b {
  width: 100%;
  height: 100%;
  background-color: #9c27b0;
  color: #ffffff;
  text-align: center;
  padding-top: calc(50% - 15px);
  padding-bottom: calc(50% - 15px);
}

.card-s4-b:hover {
  background-color: #e91e63;
}


.article_title {
  color: #9c27b0;
}

.article_sub_title {
  color: #e91e63;
  font-weight: 700;
}

@media only screen and (max-width:700px) {
  .card-s3-b-box {
    width: 100%;
  }
  .card-s3-b {
    padding-top: 15px;
    padding-bottom: 15px;
  }
  .card-s3-b-l {
    border-left: 0px;
  }

  .card-s4-b-box {
    width: 100%;
  }
  .card-s4-b {
    padding-top: 15px;
    padding-bottom: 15px;
  }
}


@media only screen and (max-width:700px) {
  .generic_grid_wrap {
    grid-template-columns: repeat(1, 1fr);;
  }

	.gen_gw_4, .gen_gw_6 {
  	grid-template-columns: repeat(2, 1fr);;
	}
}


.form_icon {
  background: #9c27b0 no-repeat center center;
  background-size: 50% auto;
}

.login_wrapper {
  width: 96%;
  max-width: 480px;
  margin: auto;
}



.report_sub_title {
  color: #ffffff;
  font-size: 24px;
  font-weight: bold;
  padding: 10px 20px 10px;
}
.report_sub_title_s1 {
  background-color: #FF0000;
}
.report_sub_title_s2 {
  background-color: #009900;
}
.report_sub_content {
  padding: 0px 20px 0px;
}



.answer_radio_cell {
  padding: 10px;
  text-align: center;
  vertical-align: middle;
}
.answer_text_cell {
  padding: 10px;
  vertical-align: middle;
}