.tb{
	border: 1px solid red;
}
header{
	background-image: url(../img/kv_bg.png);
	background-size: cover;
	background-position: top center;
	background-repeat: no-repeat;
	height:644px ;
}
.logo{
	padding-top: 2rem;
	padding-left: 3.3rem;
}
/********************************************kv*/
.kv{
	padding-left: 6rem;
	padding-top: 3.8rem ;
}
.kv h1{
	font-size: 3.25rem;
	font-weight: bold;
	color: #fff100;
	line-height: 1.2;
	position: relative;
	width: 7em;
}
.kv h2{
	font-size: 2.25rem;
	font-weight: bold;
	color:#ffffff;
	line-height: 1.6;
}
.kv h3{
	font-size: 1.87rem;
	color: #ffffff;
	font-weight: bold;
	letter-spacing: 0.1em;
	line-height: 1.6;
}
.kv a{
	display: block;
	text-align: center;
	font-size: 1.625rem;
	font-weight: bold;
	letter-spacing: 0.1em;
	color: #074580;
	line-height: 1.92;
	width: 14em;
	background-color: #ffc600;
	text-decoration: none;
	margin-top: 1.4rem;
}
.kv span.line:after{
	content: "";
	position: absolute;
	width: 3.5em;
	border-top: 1px solid #fff100;
	top:0.6em;	left: 3.5em;
}
/********************************************intro*/
.intro{
	background-color: transparent;
/*	z-index: -50;*/
	padding-left: 10%;
	position: relative;
}
.intro p{
	position: relative;
	width: 100%;	max-width: 34.2em;
	font-size: 1.25rem;	line-height: 1.9;	font-weight: bold;
	color: #001864;
	padding: 1.25rem 0 4rem 0;
}
.intro:before{  /* cloud 1 */
	content: "";
	display: block;	position: absolute;
	width: 449px;	height: 106px;
	background-image: url(../img/cloud_left.svg);
	background-size: cover;
	right: 14.8%;	bottom: -12%;
	z-index: -1;
}


.intro p:before{ /*	左括號*/
	content: "";display: block;	position: absolute;
	width: 40px;	height: 29px;
	background-image: url(../img/intro_left.svg);
	background-size: cover;
	left:-4.375rem;	top: -0.625rem;
}
.intro p:after{ /*	右括號*/
	content: "";
	display: block;	position: absolute;
	width: 40px;	height: 29px;
	background-image: url(../img/intro_right.svg);
	background-size: cover;
	right:-3.625rem;	bottom: 2rem;
}

/******************************************** form title*/
.form_title{
	background-image: url(../img/bg_01.png);
	background-size: cover;
	background-position: top center;
	background-repeat: no-repeat;
	height:288px;
	padding: 5.7rem 0 0 6.25rem;
	z-index: 99999;
}

.form_title h2{
	font-size: 2.5rem;
	color: #ffffff;
	line-height:1.35;
	position: relative;
}
.form_title h2:before{
	content: "";
	display: block;
	position: absolute;	top: 0.2em;
	left:-0.6em;
	width: 6px;	height: 40px;
	background-color: #ffc600;
}
.form_title h2:after{  /* cloud 2 */
	content: "";
	display: block;	position: absolute;
	width: 542px;	height: 128px;
	background-image: url(../img/cloud_right.svg);
	background-size: cover;
	right:-22%;	
	bottom: 0.1em;
	z-index: 0;
}
/******************************************** form */
.form_bg{
	background-image: url(../img/form_bg.png);
	background-repeat: repeat;
	width: 100%;
	padding-bottom: 1.2rem;
}
.form{ /*白色區域*/
	width:calc( 100% - 40px);
	max-width: 920px;
	margin: 0 auto 0 auto;	padding: 4.75rem 1.875rem 4rem 1.875rem;
	background-color: #ffffff;
	height: auto;
	position: relative;
	top: -4.875rem;
}
.topLine{
	width: 100%;	height: 26px;	
	position: absolute;	top:0;	left: 0;
	background-color: #ffc600;
}
.topLine:after{
	content: "";
	display: block;	position: absolute;
	bottom: 0;
	width: 100%;	height: 10px;
	background-image: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0.15)), to(#ffc600));
	background-image: linear-gradient(to top, rgba(0, 0, 0, 0.15), #ffc600);
}

/******************************************** form > form box */
.form .flexBox{	width: 100%;}
.form .boxImg{
	display: inline-block;
	width: 25%;	max-width: 210px;
	padding-left: 1.5rem;
}
.form .boxImg img{width: 100%; max-width:7.5rem;}
.form .boxInn{
	display: inline-block;
	width: 75%;	max-width: 650px;
	padding:0 0.3em 0 0 ;
}

.form .boxInn h4{
	font-size: 1.625rem;	line-height: 1.46;
	letter-spacing: 0.03em;	color: #0078d7;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: end;
	-ms-flex-align: end;
	align-items: flex-end
}
.form .boxInn h4 span.title{	display: inline-block;}
.form .boxInn h4 span{position: relative;}
.form .boxInn h4 span:before{
	content: " ";
	display: inline-block;
	width: 45px;	height: 58px;
	margin-right: 0.6rem;
	background-size: cover;
	background-repeat: no-repeat;
}
.form .boxInn p{
	font-size: 1.25rem;	line-height: 1.9;
	margin-top: 0.3em;
	letter-spacing: 0.03em;
	color: #000000;
}

.f5 .boxImg img{width: 100%; max-width:9.125rem;}
.f6 .boxImg img{width: 100%; max-width:3.75rem;}

	/*number*/
.f1 .boxInn h4 span:before{	background-image: url(../img/num1.png);margin-right: 0rem;}
.f2 .boxInn h4 span:before{	background-image: url(../img/num2.png);}
.f3 .boxInn h4 span:before{	background-image: url(../img/num3.png);}
.f4 .boxInn h4 span:before{	background-image: url(../img/num4.png);}
.f5 .boxInn h4 span:before{	background-image: url(../img/num5.png);}
.f6 .boxInn h4 span:before{	background-image: url(../img/num6.png);}
.f7 .boxInn h4 span:before{	background-image: url(../img/num7.png);}

.f4 a{
	display: inline-block;
	font-size: 1.25rem;	line-height: 1.9;
	margin-top: 0.5rem;
	letter-spacing: 0.03em;
	text-decoration: none;
}
.f4 a.a1{width: 6.2em; margin-right: 0.5em;}
.f4 a.a2{width: 11.7em;}

.dash{
	margin:2rem 0;		height: 1px;	width: 100%;
	background-image: url(../img/dash.svg);
	background-repeat: repeat-x;
}


/******************************************** form 底部 */
.form_b{
	width:calc( 100% - 40px);
	max-width: 920px;
	margin: 0 auto 0 auto;	padding: 2rem 0 0 0;
	position: relative;
	top: -4.875rem;
}
.form_b .boxG{
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
}
.form_b .innG{
	width: 100%;	max-width: 16.875rem;
}
.form_b  .innG .flexBox{
	width: 100%;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
}
.form_b .innG p{
	display: block;	width: 100%;
	font-size:18px;	line-height:1.8;
	letter-spacing: 0.05rem;
}
.form_b .btnG {
	width: 100%;	max-width: 39.06rem;
}
.form_b .btnG .flexBox{
	width: 100%;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
}
.form_b .btn{
	display: inline-block;	
	width: 100%;	max-width: 12rem;
	height: 3.125rem;
}
.form_b .btn1,.btn.btn1{background-color: #ffc600;}
.form_b .btn2{background-color: #d83b01;}
.form_b .btn3{background-color: #ff7286;}
.form_b .btn a{
	display: block;
	font-size: 1.375rem;	line-height:3.125rem;
	padding-left: 20%;
	text-decoration: none;
}

/******************************************** sec_01 白底，有個框框  */
.sec_01{
	padding: 6.75rem 0 0 0;
}
.sec_01 h2{
	font-size: 2.5rem;	line-height: 1.35;
	letter-spacing: 0.04rem;
	font-weight: bold;	color: #063569;
	width:calc( 100% - 40px ) ;	max-width: 23.5em;
	margin: 0 auto;
	position:relative;
}
.sec_01 h2:before{
	content: "";
	display: block;
	position: absolute;	top: 0.2em;
	left:-0.6em;
	width: 6px;	height: 40px;
	background-color: #ffc600;
}
.sec_01 .inn{
	width: 100%;	max-width: 55.25rem;
	border: 5px solid rgba(235, 97, 0, 0.20);
	padding: 3rem 1.375rem 1.53rem 2.5rem;
	margin: 4.25rem auto 4.25rem auto;
	position: relative;
}
.sec_01 .inn p{ 
	font-size: 1.25rem;	line-height: 1.9;
}
.sec_01 .inn:before{
	content: "";
	display: block;
	position: absolute;	
	top: -0.4em;	left:-1em;
	width: 58px;	height: 53px;
	background-image: url(../img/sec01_left.svg);

}
.sec_01 .inn:after{
	content: "";
	display: block;
	position: absolute;	
	bottom: -0.5em;	right:-1.3em;
	width: 58px;	height: 53px;
	background-image: url(../img/sec01_right.svg);
}
.sec_01 a{
	display: block;
	font-size: 1.25rem;	line-height: 1.9;
	margin-top: 1rem;
	text-decoration: none;
	width: 7em;
}



/******************************************** sec_02  淡藍色底*/
.sec_02{
	background-color: #ebfbff;
	padding: 4rem 0;
}
.sec_02 h2{
	font-size: 2.5rem;	line-height: 1.35;
	letter-spacing: 0.04rem;	font-weight: bold;
	color: #000000;
	width: 100%;	max-width: 1000px;
	margin: 0 auto;
	padding-left: 0.6em;
	position: relative;
}
.sec_02 h2:before{
	content: "";
	display: block;
	position: absolute;	top: 0.2em;
	left:0;
	width: 6px;	height: 40px;
	background-color: #ffc600;
}
.sec_02 .flexBox{
	width: 100%;	max-width: 1000px;
	margin: 2.3rem auto 0 auto;
}
.sec_02 ul{
	display: inline-block;
	width: 100%;
}
.sec_02 ul.ull{
	max-width: 300px;
}
.sec_02 ul.ulr{
	max-width: 700px;
}

.sec_02 ul li{
	font-size: 1.25rem;	line-height: 1.9;
	padding-left: 1.87rem;
	position: relative;
}
.sec_02 ul li:before{
	content: "";
	display: block;
	position: absolute;	top: 0.45em;	left:0;
	width: 19px;	height: 18px;
	background-image: url(../img/pin.svg);
	background-size: cover;
	background-repeat: no-repeat;
}

/* lightBox
----------------------------------------------------------------*/
.LBBtn{cursor: pointer;}
.lightBox{
	position: fixed; top: 0; left: 0;
	width: 100%; height: 100%;
	background-color: rgba(0,0,0,0.7);
	z-index: 120;
	display: none;
}


.lightBox h4{ 
	font-size:2.5rem; line-height: 1;
	letter-spacing: 0.04em;
	color: #000000; 
	margin-bottom: 2.5rem;
	padding-left: 1.4rem;
	font-weight: 600;
	position: relative;
}
.lightBox h4:before{
	content: ''; display: block;
	width: 6px; height: 1.1em;
	position: absolute;
	top: 0; left: 0;
	background-color: #ff7286;
}
.lightBox p{ font-size: 1.25rem; line-height: 1.9; letter-spacing: 0.03em;}

.lightBox > .flexBox{
	width: 100%; height: 100%;
	position: relative;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
}
.LBmask{
	position: absolute; top: 0; left: 0;
	width: 100%; height: 100%;
	z-index: 125;
}
.lbTent{
	width: 90%; max-width: 1000px;
	height:31.25rem; max-height: 90%;
	position: relative; z-index: 130;
	background-color: #ffffff;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	
}
.scrollBox{
	padding: 2.5rem 2.5rem;
	position: absolute; left: 0; right: 0;
	width: 100%;
	height: 100%;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
.scrollTent{ padding: 1.875rem 0;}
.scrollFlx{
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
	margin-top: 1.25rem;
}
.tools{ width: 23%; max-width: 200px;}
.greyCube{
	background-color: #f7f7f7;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	width: 100%;
	height: 6.25rem;
	margin-bottom: 0.3rem;
}

/* closeBtn */
.closeBtn{
	position: absolute;
	top: 0.46rem; right: 0.3rem;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	z-index: 140;
	cursor: pointer;
	padding: 0.9rem 0;
}
.closeBtn span{
	display: block;
	width: 2.5rem; height: 3px;
	background-color: #000000;
	position: relative;
}
.closeBtn span:before{
	content: ''; display: block;
	position: absolute; top: 0; left: 0;
	width: 100%; height: 100%;
	background-color: #000000;
	-webkit-transform: rotate(90deg);
	transform: rotate(90deg);
}