body{ font-family: Montserrat,Microsoft JhengHei; overflow-x: hidden;background-color: #FFFFFF;}
.container{ position: relative; }
a:hover{text-decoration: none;}

section#form {
    padding: 0 !important;

}
/* visual */
header#visual{height: 80vh;position: relative;overflow: hidden;background: url(../images/header-01bg.png) no-repeat bottom center;}
header#visual .logo{width: 20%;position: absolute;right: 20%;top:30%}
header#visual .title{z-index: 1000;width: 55%;margin: auto;display: block;margin-top: 18%;font-weight: bold;text-align: left;}

h3{font-size: 2.5rem;margin-bottom: 3%;color: #1eae82;font-style:italic;padding-left: 20px;font-weight: bold;}
h4{font-size: 2.5rem;margin-bottom: 3%;color: #FFF;font-weight: 400;}
header#visual span{background-color: #000000;padding: 10px 20px;}


/* blue */
section#blue{padding: 0 0 0 0;background-size: 100%;position: relative;background: url(../images/BG.png) no-repeat top center;background-attachment: fixed;}
section#blue p {
    font-size: 1.2rem;
    font-weight: 400;
    color: #000;
    line-height: 3.2rem;
}

.preface{width: 100%;height: 60vh;background: url(../images/head.jpg) no-repeat bottom center;background-size: 100%;position: relative;}
.preface > p{position: absolute;bottom: -20px;background-color: #FFFFFF;width: 49%;padding: 3%;margin-top: 20px;font-size: 1.4rem !important;font-weight: 600 !important;color: #258AD5 !important;}
.preface > p:before{content: '';position: absolute;left: 1px;top: 13%;-webkit-transform: translate(0, -50%);width: 50px;height: 50px;background: url(../images/comma.svg) no-repeat bottom center;}
.preface > p:after{content: '';position: absolute;right: 20px;bottom: -10px;-webkit-transform: translate(0, -50%);width: 50px;height: 50px;background: url(../images/comma-d.svg) no-repeat bottom center;bottom: ;}

section#blue h5{background-color: #1eae82;padding: 10px 20px;border-radius: 5px;color: #FFFFFF;font-weight: bold;margin-top: 2%;position: relative;text-indent: 40px;}
section#blue h5:before{content: '';position: absolute;left: 10px;top: 20px;-webkit-transform: translate(0, -50%);width: 35px;height: 35px;background: url(../images/dialog.svg) no-repeat bottom center;}



div.rect01 {
    z-index: -1;
    position: absolute;
    top: 539px;
    bottom: 0;
	right: calc(50% - 67vw);;
	background-color: #e7f7ee;
	width: 100%;
	height: 43vh;
    border-radius: 0 20px 20px 0;
    display: block;
}

div.rect02 {
    z-index: -1;
    position: absolute;
    top: 1358px;
    bottom: 0;
    left: calc(50% - 67vw);
	background-color: #e7f7ee;
	width: 100%;
	height: 43vh;
    border-radius: 0 20px 20px 0;
    display: block;
}

section#red{padding: 5% 0;background: url(../images/bg_dot.svg), #f8f8f8;}
/* 影片 */
.video{
	width:100%;
	height:0;
	padding-bottom:56.25%;
	position:relative;
}

.video iframe{
	width:100%;
	height:100%;
	position:absolute;
}

section#red h5{background-color: #258AD5;padding: 10px 20px;border-radius: 5px;color: #FFFFFF;font-weight: bold;margin-top: 2%;position: relative;text-indent: 40px;}
section#red h5:before{content: '';position: absolute;left: 10px;top: 18px;-webkit-transform: translate(0, -50%);width: 35px;height: 35px;background: url(../images/ico_arrow_2-2.svg) no-repeat bottom center;}

/* 表單 */
section#form{font-weight: bold;}

section#form h4{font-size: 1.5rem;line-height: 2.5;margin-bottom: 0;}
section#form .btn_bgcolor{background-color: #000000;padding: 10px 20px;}
.link_btn{background-color: #e7f7ee;padding-top: 3%;background: url(../images/entry_bg-2.svg), #e7f7ee;background-size: cover;background-position: top center;}
.btn{display: block;position: relative;background: #45b4ce;border-radius: 10px;width: 60%;margin:10px auto;color: #FFF;}
.btn:before{content: '';position: absolute;right: 16px;top: 50%;-webkit-transform: translate(0, -50%);transform: translate(0, -50%);width: 24px;height: 24px;}
.btn:before{background: url(../images/ico_arrow_2.svg) no-repeat;pointer-events: none;transition: opacity .3s;}

.btn:after{background: url(../images/ico_arrow_2-2.svg) no-repeat;}
.btn:after{content: '';position: absolute;right: 16px;top: 50%;-webkit-transform: translate(0, -50%);transform: translate(0, -50%);width: 24px;height: 24px;pointer-events: none;transition: opacity .3s;opacity: 0;}

.btn:hover:before{opacity: 0;}
.btn:hover:after{opacity: 1;}

.btn_inner{justify-content: center;height: 64px;font-weight: bold;font-size: 1.5rem;line-height: 3.6rem;letter-spacing: .03rem;}

/* form */
div.Form ul{width: 423px;padding: 10px 21px;list-style: none;clear: both;background: #fff;border-radius: 5px;display: block;margin:20px auto 0 auto;align-items: center;box-shadow: 0 0 20px rgb(0 0 0 / 30%);}
div.Form ul li{margin: 12px 0;border: 1px solid #ced4da;border-radius: 0.25rem;text-align: center;}
div.Form ul li input{width: 100%;height: 45px;border:0;border-radius: 8px;padding: 0 12px;font-size: 18px;}
div.Form ul li.send input{background: #2f7fc3;color: #FFF;font-size: 22px;}
div.Form ul li.send input:hover{background: #222; transition: 0.2s;}
div.Form ul li.send{border: 0;}

div.Form ul li.area{background: #fff;border-radius: 8px;padding:10px 10px 0;}
div.Form ul li.area p{font-size: 16px;text-align: left;padding: 0;margin: 0 0 5px;color: #000 !important;font-weight: 400;}
div.Form ul li.area input{width: auto;height: auto;padding: 0;margin-right: 2px;}
div.Form ul li.area label{margin-right: 5px;font-weight: 400;}







/* form 送出*/
.thx{ 
    background:#232323;position: fixed;width:600px;
	height:220px;z-index:9999;
	left:50%;
	top:50%;
	margin-left:-300px;
    margin-top:-100px;
    font-size: 12px;
    padding-top: 70px;
}
.thx a {color: #232323;text-decoration: none;background-color: transparent;-webkit-text-decoration-skip: objects;text-align: center;margin-left: 250px;font-size: 22px;background: #f9d302;padding: 10px 30px;}



@media (min-width: 1441px) {
}
@media (min-width: 1200px) {
.container {max-width: 1280px;}
}
@media (max-width: 1660px) {
    header#visual .title{margin-left: 15%;}
}
@media (max-width: 1440px) {
}

@media(max-width: 767px){


}

@media (max-width: 575px) {  

/* visual */
header#visual{height: 85vh;position: relative;overflow: hidden;background: url(../images/header-01bg.png) no-repeat right -365px;background-size: 400%;}
header#visual .logo{width: 55%;position: absolute;right: 20%;top:5%}
header#visual .title{width: 340px;margin-top: 0%;position: absolute;bottom: 10px;left: 0;margin-left: 0;}

h3{font-size: 2rem;margin-bottom: 3%;padding-left: 20px;font-weight: bold;}
h4{font-size: 2rem;margin-bottom: 3%;font-weight: 400;line-height: 2.2;margin-left: 4%;}
header#visual span{padding: 8px 3px;}

.preface{height: 52vh;background: url(../images/head.jpg) no-repeat top center;background-size: 100%;}
.preface > p{position: absolute;bottom: -22px;width: 100%;padding: 8%;font-size: 1.2rem !important;}
.preface > p:before{content: '';position: absolute;left: 1px;top: 5%;}
.preface > p:after{content: '';position: absolute;right: 2px;bottom: -10px;}

section#blue p {line-height: 2.5rem;}
h5{text-indent: 0;padding-left: 50px;}
div.rect01,div.rect02 {background-color: transparent;display: none;}


section#red{padding-bottom: 15%;}
section#red h5{margin-top: 10%;}

.btn{width: 100%;}

.link_btn{padding-top: 10%;padding-bottom: 50%;}


/* form */
div.Form ul{width: 100%;}

/* form 送出*/
.thx{ 
    width:320px;
	left:50%;
	top:50%;
	margin-left:-160px;
}
.thx a {margin-left: 114px;}


}