@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;700&display=swap');
/*font-family: 'Noto Sans', sans-serif;*/

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@300;400;500;700&display=swap');
/*font-family: 'Noto Sans TC', sans-serif;*/

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap');
/*font-family: 'Noto Sans SC', sans-serif;*/

body {font: 1em/1.4em 'Noto Sans TC', sans-serif;color:#333333; overflow-x: hidden; overflow-y:scroll; background-color:#4052ab;/*background:url("../images/bg.jpg") top center no-repeat*/;} 
html {-webkit-font-smoothing: antialiased;}
a {color:#333; text-decoration: none; transition:0.3s ease;transition-property:all;}
a:hover{text-decoration: none; opacity:0.6}
input::-webkit-input-placeholder { padding-top: 8px;}

p { font-size:1.4em; font-weight:300; line-height: 1.6em;}
h2 { font-size:1.5em;font-weight:500;line-height: 1.6em;}
h3 { font-size:0.9em;font-weight:bold;}
h4 { font-size:0.8em;font-weight:bold;}
h5 { font-size:0.9em; line-height: 2em;}

.weight500{ font-weight:500}

/*外層包圍*/
.pagewrap { width: 100%; margin:0 auto; }

.goback{
  float: left;
  display: flex;
  width: 100%;
  justify-content: end;
  margin-top: 30px;
}
.layui-btn{
  background-color: #00244b;
}
.logo{
  display: flex;
  flex-direction: column;
  justify-content: center;
    align-items: center;
  padding-top: 20px;
  padding-bottom: 20px;
  background: #fff;
}
.logo p{
  color: #4052ab;
}
.logo img{
  max-width: 100%;
}
  /*inner all*/
.section_con { position:relative;float:left; width:100%; z-index:20000 }
.section_conin {position:relative; width:1200px; margin:0 auto ;}


/*index*/
.index_con{float:left; width:100%;background-color:#053870; margin: 50px 0 50px 0}
.index_btn01 { float:left; width:40%; margin: 100px 30% 0 30%}
.index_btn02 { float:left; width:40%; margin: 30px 30% 0 30%}
.index_btn03 { float:left; width:40%; margin: 70px 30% 200px 30%}

.index_title01 { font: 500 2em/1.4em 'Noto Sans TC', sans-serif; color:#fff;text-align: center;margin:0 0 20px 0}
.index_box01 {float: left; width:100% ; margin:0 0 0 0}


/*inner*/
.inner_con01{float:left; width:100%;background-color:#053870; margin: 30px 0 30px 0;display: flex}
.inner_con02{float:left; width:90%;background-color:#fff; margin: 0 0 50px 0;padding: 30px 5%}


.inner_btn01 {   width:67%;     margin: 30px auto;}
.inner_btn02 { float:left; width:100%; margin: 0 0 0 0; }
.inner_btn03 { float:left; width:47.5%; margin: 40px 5% 50px 0; }
.inner_btn04 { float:left; width:47.5%; margin: 40px 0 50px 0; }

.inner_btn05 { float:left; width:90%;   color:#fff;   display: flex;
  flex-direction: column;
  justify-content: center;
 margin:30px 0 30px 15px;}
.inner_btn06 { float:left; width:100%; margin: 0 0 0 0; }
.inner_btn07 { float:left; width:100%; margin: 30px 0 0 0; }
.inner_btn08 { float:left; width:100%; margin: 10px 0 0 0; }
.inner_btn09 { float:left; width:50%; margin: 40px 5% 20px 0; }
.inner_btn10 { float:left; width: 100%; display: flex;justify-content: space-between;margin-top: 30px; }

.inner_btn11 { float:left; width:100%; margin: 0 0 0 0; }
.inner_btn12 { float:left; width:90%; margin: 0 0 0 0; }


.inner_title01 { font: 500 1.5em/1.4em 'Noto Sans TC', sans-serif; color:#000;text-align:left;margin:0 0 20px 0}
.inner_title02 { font: 500 1.5em/1.4em 'Noto Sans TC', sans-serif; color:#000;text-align:left;margin:0 0 30px 0}
.inner_box01 {float: left; width:100% ; margin:0 0 0 0}
.inner_box02 {float: left; width:100% ; min-height:100px; margin:0 0 0 0; }
.inner_box02in {float: left; width:45%; margin: 10px 2.5%}
.inner_box03 {float: left; width:100% ; margin:0 0 0 0}


.from_text01 { width:90%; font: 1.5em/1.4em 'Noto Sans TC', sans-serif; letter-spacing:0em; color:#000; padding:15px 5%; border:2px solid #fff; text-align:center; background-color:#fff; }
.from_text01:focus { outline:none; color:#000}

.from_text01 { width:90%; font: 1.5em/1.4em 'Noto Sans TC', sans-serif; letter-spacing:0em; color:#000; padding:15px 5%; border:2px solid #053870; text-align:left; background-color:#fff; }
.from_text01:focus { outline:none; color:#000}

.inner_form_textm01 { width:90%; height:150px; font:400 1.4em/1.6em 'Noto Sans TC', sans-serif; letter-spacing:0em; color:#999; padding:15px 5%; border:2px solid #053870;  border-radius:0px; background-color:#fff; }
.inner_form_textm01:focus { outline:none; color:#000;}


.from_select01 { width:90%; font: 1.5em/1.4em 'Noto Sans TC', sans-serif; letter-spacing:0em; color:#000; padding:25px 5%; border:2px solid #fff; text-align:center; background-color:#fff; overflow:hidden; text-overflow:ellipsis;white-space:nowrap}
.from_select01:focus { outline:none; color:#000}

.from_select02 { width:100%; font: 1.5em/1.4em 'Noto Sans TC', sans-serif; letter-spacing:0em; color:#000; padding:15px 5%; border:2px solid #053870; text-align:left; background-color:#fff; }
.from_select01:focus { outline:none; color:#000}


.form_btn {float: left; width:90%; margin: 10px 0 0 0 ; background-color: #00244b; color: #fff;border:2px solid #fff; font: 700 2em/1.2em 'Noto Sans TC', sans-serif; padding: 25px 5% 25px 5%;cursor: pointer;text-align:center;}
.form_btn:hover{background-color: #000;color: #fff;}

.form_btn02 {float: left; width:90%; margin: 0 0 0 0 ; background-color: #00244b; color: #fff;border:2px solid #fff; font: 700 1.6em/1.2em 'Noto Sans TC', sans-serif; padding: 25px 5% 25px 5%;cursor: pointer;text-align:center;}
.form_btn02:hover{background-color: #000;color: #fff;}


/*checkbox*/
/* The container */
.container {
  display: block;
  position: relative;
  padding-left: 60px;
  padding-top: 0px;
  margin-bottom: 30px;
  cursor: pointer;
  font-size: 1.4em;
  line-height: 1.5em;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default checkbox */
.container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 40px;
  width: 40px;
  background-color: #eee;
}

/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {
  background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.container input:checked ~ .checkmark {
  background-color: #2196F3;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.container input:checked ~ .checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */
.container .checkmark:after {
  left: 12px;
  top: 2px;
  width: 10px;
  height: 25px;
  border: solid white;
  border-width: 0 5px 5px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}





.contact_form_textm01 { width:95%; height:150px; font: 1em/1.2em 'Noto Sans', sans-serif; letter-spacing:0em; color:#c1c1c1; padding:15px 15px; border:0px solid #738087;  background-color:#fff;}
.contact_form_textm01:focus { outline:none; color:#000;}



/********** MEDIA QUERIES ***********************/
/* for webkit only */
@media screen and (-webkit-min-device-pixel-ratio:0) {  


} 

/* for 1850px or less */
@media screen and (max-width: 1850px) {

}

/* for 1440px or less */
@media screen and (max-width: 1440px) {

}

/* for 1280px or less */

@media screen and (max-width: 1280px) {
body { background-color:#053870; }  

/*inner all*/
.section_conin {position:relative; width:100%; margin:0 auto ;}

/*index*/
.index_con{float:left; width:100%;background-color:#053870; margin: 0}
.index_btn01 { float:left; width:60%; margin: 15% 20% 0 20%}
.index_btn02 { float:left; width:60%; margin: 30px 20% 0 20%}
.index_btn03 { float:left; width:60%; margin: 70px 20% 200px 20%}

/*inner*/
.inner_con02{float:left; width:90%;background-color:#fff; margin: 0 0 0 0;padding: 30px 5%}
.inner_btn01 {  width:87%;     margin: 30px auto;}


.inner_btn09 { float:left; width:100%; margin: 40px 0 20px 0; }



}

/* for 1200px or less */

@media screen and (max-width: 1200px) {


}

/* for 1024px or less */
@media screen and (max-width: 1024px) {

}


/* for 768px or less */
@media screen and (max-width: 768px) {
  .inner_btn10 { float:left; width:100%;  flex-direction: column }
/*index*/
.index_con{float:left; width:100%;background-color:#053870; margin: 0}
.index_btn01 { float:left; width:80%; margin: 25% 10% 0 10%}
.index_btn02 { float:left; width:80%; margin: 30px 10% 0 10%}
.index_btn03 { float:left; width:80%; margin: 70px 10% 200px 10%}

/*inner*/
.inner_con01{float:left; width:100%;background-color:#053870; margin: 30px 0 0 0}



.inner_btn01 {   width:89%;     margin: 30px auto;}
.inner_btn02 { float:left; width:100%; margin: 0 0 0 0; }
.inner_btn03 { float:left; width:100%; margin: 50px 0 0 0; }
.inner_btn04 { float:left; width:100%; margin: 20px 0 50px 0; }


}

/* for 480px or less */
@media screen and (max-width: 480px) {


}