body{
font-family: 'Noto Sans TC', sans-serif;
}
/*淺藍*/
.color-bule{
color: #67A9CF;
}
/*粉紅*/
.color-pink{
color: #E58BA7;
}
/*灰*/
.color-gray{
color: #B3B3B3;
}
/*深藍*/
.color_darkblue{
color: #17427E;
}
/*字級------------------------------------------*/
.title1{
font-size: 4em;
font-weight: 900;
margin-bottom: 0;
line-height: 1.2;
letter-spacing: -2px;
}
.title2{
font-size: 3em;
font-weight: 500;
margin-bottom: 0;
line-height: 1.2;
}
.title2-bold{
font-size: 3em;
font-weight: 900;
margin-bottom: 0;
line-height: 1.2;
letter-spacing: -2px;
}
.title3{
font-size: 1.3em;
font-weight: 100;
margin-bottom: 0;
line-height: 1.5;
}
.title4{
font-size: 0.8em;
text-align: center;
padding: 10px 0;
}
.title4 a{
color: #666;
}
.title5{
font-size: 3em;
font-weight: 700;
margin-bottom: 0;
line-height: 1.2;
background-color: rgba(229,218,224,0.6);
padding: 5%;
margin-bottom: -3px;
}
.title6{
font-size: 1.5em;
font-weight: 700;
margin-bottom: 0;
line-height: 1.5;
text-indent: -31px;
margin-left: 31px;
}
.title7{
font-size: 1.8em;
font-weight: 400;
margin-bottom: 0;
line-height: 2;
color: #fff;
}
.title8{
font-size: 1.2em;
font-weight: 100;
margin-bottom: 0;
line-height: 1.5;
text-indent: -18px;
margin-left: 18px;
margin-bottom: 10px;
text-align: justify;
}
.title9 {
font-size: 1.3em;
font-weight: 700;
margin-bottom: 0;
line-height: 1.5;
text-indent: -21px;
margin-left: 21px;
}
.title10 {
font-size: 0.8em;
font-weight: 100;
margin-bottom: 0;
line-height: 1.5;
}
/*樣式-----------------------------------------------*/
.kv1{
width: 100%;
height: auto;
overflow: hidden;
}
.kv1 img{
width: 100%;
}
.kv2{
width: 100%;
height: auto;
overflow: hidden;
background-color: #0F2750;
text-align: center;
padding: 60px 0;
}
.kv3{
width: 100%;
height: auto;
overflow: hidden;
background-color: #F7EEE1;
text-align: center;
padding: 60px 0;
}
.form_box{
width: 100%;
height: auto;
}
.kv3_left{
width:80%;
height: auto;
overflow: hidden;
margin: 0 auto;
margin-bottom: 40px;
}
.kv3_left img{
width: 100%;
}
.kv3_right{
width: 100%;
height: auto;
overflow: hidden;
}
.kv4{
width: 100%;
height: auto;
overflow: hidden;
background: url(../images/kv4_bg.jpg) repeat;
padding: 60px 0;
}
.kv4_top{
width: 100%;
height: auto;
overflow: hidden;
margin-bottom: 10px;
}
.kv4_top_box{
display: block;
width: 100%;
height: auto;
overflow: hidden;
margin-bottom: 0;
}
.kv4_top_box_img img{
width: 100%;
}
.kv4_center-bold{
width: 100%;
height: auto;
overflow: hidden;
border: #17427E solid 5px;
padding: 5px;
background-color: #fff;
box-shadow: 0 0 10px #333;
margin-bottom: 50px;
}
.kv4_center{
width: 100%;
height: auto;
overflow: hidden;
border: #17427E solid 2px;
padding: 2%;
}
.kv4_center_graybox{
width: 80%;
height: auto;
overflow: hidden;
padding: 5%;
background-color: #E5E5E5;
text-align: left;
margin: 0 auto;
}
.kv4_img{
width: 90%;
height: auto;
overflow: hidden;
margin: 0 auto;
}
.kv4_img img{
width: 100%;
}
.kv4_center_teacher{
width:80%;
height: auto;
overflow: hidden;
margin: 0 auto;
padding: 2% 5%;
}
.teacher_box{
width: 100%;
max-height: 450px;
margin-bottom: 30px;
overflow: hidden;
}
.teacher_img{
width: 100%;
max-height: 230px;
margin: 0 auto;
border-top-left-radius: 40px;
border-bottom-right-radius: 40px;
overflow: hidden;
margin-bottom: 10px;
}
.teacher_img img{
width: 100%;
}
.kv4_bottom{
width: 100%;
height: auto;
overflow: hidden;
background: url(../images/kv4_form_bg.png) 50% 50% no-repeat;
text-align: center;
padding: 5%;
}
.event_box{
width: 98%;
height: auto;
overflow: hidden;
border: #f19db4 1px solid;
padding: 2%;
margin-bottom: 20px;
float: left;
margin-right: 2%;
}
.event_box_pic{
width: 100%;
max-height: 200px;
overflow: hidden;
position: relative;
margin-bottom: 10px;
}
.event_box_pic img{
width: 110%;
height: auto;
}
.kv3_title{
position: absolute;
left: 0;
top: 142px;
width: 100%;
height: auto;
overflow: hidden;
font-size: 1.2em;
line-height: 1.8;
text-align: center;
color: #fff;
background-color: rgba(241,157,180,0.7);
}
.kv3_p1,.kv3_p2,.kv3_p3{
font-size: 1em;
line-height: 1.5;
text-align: left;
color: #000;
margin-bottom: 0;
}
.kv3_a{
display: block;
width: 100%;
height: auto;
font-size: 1em;
line-height: 2;
color: #fff;
background-color: #f19db4;
margin-top: 10px;
text-align: center;
}
.form_box1{
width: 50%;
height: auto;
margin: 0 auto;
background-color: #B3B3B3;
padding: 2% 5%;
box-shadow: 0 0 10px #333;
}
.teacher_txt{
width: 200px;
height: auto;
float: right;
margin-left: 30px;
margin-bottom: 10px;
}
.teacher_txt img{
width: 100%;
}
.box {
width: 100%;
background: #fff;
padding: 10px;
min-height: 140px;
margin-bottom: 15px;
box-shadow: 0 0 10px #ccc;
}
.kv5{
width: 100%;
height: auto;
overflow: hidden;
}
.kv5 img{
width: 100%;
}
/*pad pro------------------------------------------*/
@media (max-width:1199px) and (min-width:992px){
.title2 {
font-size: 2.5em;
font-weight: 500;
margin-bottom: 0;
line-height: 1.2;
}
.kv4_center_graybox {
width: 95%;
height: auto;
overflow: hidden;
padding: 3% 5%;
background-color: #E5E5E5;
text-align: left;
margin: 0 auto;
}
.kv4_img {
width: 100%;
height: auto;
overflow: hidden;
margin: 0 auto;
}
.kv4_center_teacher {
width: 90%;
height: auto;
overflow: hidden;
margin: 0 auto;
padding: 2% 5%;
}
}
/*pad 768------------------------------------------*/
@media (max-width:991px) and (min-width:768px){
.kv2 {
width: 100%;
height: auto;
overflow: hidden;
background-color: #0F2750;
text-align: center;
padding: 30px 0;
}
.title1 {
font-size: 3em;
font-weight: 900;
margin-bottom: 0;
line-height: 1.2;
letter-spacing: -2px;
}
.title2 {
font-size: 2em;
font-weight: 500;
margin-bottom: 0;
line-height: 1.5;
}
.title3 {
font-size: 1em;
font-weight: 100;
margin-bottom: 0;
line-height: 1.5;
}
.kv3 {
width: 100%;
height: auto;
overflow: hidden;
background-color: #F7EEE1;
text-align: center;
padding: 30px 0;
}
.form_box {
width: 100%;
height: auto;
margin-bottom: 0;
}
.title4 {
font-size: 0.8em;
text-align: center;
padding: 10px 0;
margin-bottom: 0;
}
.title5 {
font-size: 2em;
font-weight: 700;
margin-bottom: 0;
line-height: 1.2;
background-color: rgba(229,218,224,0.6);
padding: 5%;
margin-bottom: -3px;
}
.title2-bold {
font-size: 2em;
font-weight: 900;
margin-bottom: 0;
line-height: 1.2;
letter-spacing: -2px;
}
.kv4_center_graybox {
width: 100%;
height: auto;
overflow: hidden;
padding: 2% 1%;
background-color: #E5E5E5;
text-align: left;
margin: 0 auto;
}
.title6 {
font-size: 1.25em;
font-weight: 700;
margin-bottom: 0;
line-height: 1.5;
text-indent: -31px;
margin-left: 31px;
}
.kv4_img {
width: 100%;
height: auto;
overflow: hidden;
margin: 0 auto;
}
.kv4_center_teacher {
width: 96%;
height: auto;
overflow: hidden;
margin: 0 auto;
padding: 2% 5%;
}
.teacher_box{
width: 100%;
max-height: 450px;
margin-bottom: 30px;
overflow: hidden;
}
.teacher_img{
width: 100%;
max-height: 165px;
margin: 0 auto;
border-top-left-radius: 40px;
border-bottom-right-radius: 40px;
overflow: hidden;
margin-bottom: 10px;
}
.form_box1 {
width: 70%;
height: auto;
margin: 0 auto;
background-color: #B3B3B3;
padding: 2% 5%;
box-shadow: 0 0 10px #333;
}
.title7 {
font-size: 1.5em;
font-weight: 400;
margin-bottom: 0;
line-height: 2.5;
color: #fff;
}
.title9 {
font-size: 1.5em;
font-weight: 700;
margin-bottom: 0;
line-height: 1.5;
text-indent: -21px;
margin-left: 21px;
}
.title10 {
font-size: 1em;
font-weight: 100;
margin-bottom: 0;
line-height: 1.5;
}
}
/*MOBILE 414------------------------------------------*/
@media screen and (max-width:767px){
.kv1 img {
width: 180%;
margin-left: -48%;
}
.title1 {
font-size: 2.3em;
font-weight: 900;
margin-bottom: 5px;
line-height: 1.2;
letter-spacing: -3px;
}
.kv2 {
width: 100%;
height: auto;
overflow: hidden;
background-color: #0F2750;
text-align: center;
padding: 30px 0;
}
.title2 {
font-size: 1.6em;
font-weight: 500;
margin-bottom: 10px;
line-height: 1.2;
}
.title3 {
font-size: 0.9em;
font-weight: 100;
margin-bottom: 0;
line-height: 1.3;
}
.kv3 {
width: 100%;
height: auto;
overflow: hidden;
background-color: #F7EEE1;
text-align: center;
padding: 30px 0;
}
.kv3_left {
width: 60%;
height: auto;
overflow: hidden;
margin: 0 auto;
margin-bottom: 40px;
}
.form_box {
width: 90%;
height: auto;
margin: 0 auto;
}
.kv4_top {
width: 100%;
height: auto;
overflow: hidden;
}
.title5 {
font-size: 1em;
font-weight: 700;
margin-bottom: 0;
line-height: 1.2;
background-color: rgba(229,218,224,0.6);
padding: 5%;
margin-bottom: -3px;
letter-spacing: -2px;
}
.title2-bold {
font-size: 2em;
font-weight: 900;
margin-bottom: 0;
line-height: 1.2;
letter-spacing: -2px;
}
.kv4_center_graybox {
width: 100%;
height: auto;
overflow: hidden;
padding: 5%;
background-color: #E5E5E5;
text-align: left;
margin: 0 auto;
}
.kv4_top_box{
display: block;
width: 100%;
height: auto;
overflow: hidden;
margin-bottom: 0;
}
.title6 {
width: 100%;
height: auto;
font-size: 1.2em;
font-weight: 700;
margin-bottom: 0;
line-height: 1.5;
margin-left: 0;
text-align: left;
text-indent: 0;
overflow: hidden;
}
.kv4_img {
width: 100%;
height: auto;
overflow: hidden;
margin: 0 auto;
margin-bottom: 10px;
}
.kv4_center-bold {
width: 100%;
height: auto;
overflow: hidden;
border: #17427E solid 5px;
padding: 5px;
background-color: #fff;
box-shadow: 0 0 10px #333;
margin-bottom: 20px;
}
.kv4_center_teacher {
width: 100%;
height: auto;
overflow: hidden;
margin: 0 auto;
padding: 0%;
margin-top: 10px;
}
.teacher_box{
width: 100%;
max-height: 270px;
margin-bottom: 10px;
overflow: hidden;
}
.teacher_img{
width: 100%;
max-height: 100px;
margin: 0 auto;
border-top-left-radius: 20px;
border-bottom-right-radius: 20px;
overflow: hidden;
margin-bottom: 10px;
}
.teacher_img img{
width: 112%;
}
.form_box1 {
width: 100%;
height: auto;
margin: 0 auto;
background-color: #B3B3B3;
padding: 2% 5%;
box-shadow: 0 0 10px #333;
}
.title7 {
font-size: 1.2em;
font-weight: 400;
margin-bottom: 5px;
line-height: 2.5;
color: #fff;
}
.title4 {
width: 100%;
height: 40px;
font-size: 0.8em;
text-align: center;
padding: 10px 0;
margin-bottom: 0;
overflow: hidden;
}
.title8 {
font-size: 1em;
font-weight: 100;
margin-bottom: 0;
line-height: 1.3;
text-indent: -15px;
margin-left: 13px;
margin-bottom: 10px;
text-align: justify;
}
.teacher_txt {
width: 200px;
height: auto;
float: right;
margin-left: 10px;
margin-bottom: 10px;
}
.kv5 img{
width: 100%;
}
.box {
width: 100%;
background: #fff;
padding: 20px;
min-height: 140px;
margin-bottom: 15px;
box-shadow: 0 0 10px #ccc;
}
.title9 {
font-size: 1.8em;
font-weight: 700;
margin-bottom: 0;
line-height: 1.5;
text-indent: -21px;
margin-left: 21px;
}
.title10 {
font-size: 1em;
font-weight: 100;
margin-bottom: 0;
line-height: 1.5;
}
}