html {
	scroll-behavior: smooth;
}

body {
	margin: 0 auto;
	text-align: center;
	user-select : none;
	font-family: "Microsoft JhengHei";
	color: #363636;
	font-size: 0.88vw;
	letter-spacing: 0.08vw;
	line-height: 1.3vw;
}

img { border: 0px;}
a { 
	outline: none; /* for Firefox Google Chrome  */
	behavior:expression(this.onFocus=this.blur()); /* for IE */
	text-decoration: none;
}
a:hover {text-decoration: none;}
li {list-style-type:none;}


@media screen and (max-width: 800px) {
	body {
		font-size: 2.1vw;
		line-height: 3.5vw;
	}
}

@media screen and (max-width: 550px) {
	body {
		font-size: 3.8vw;
		letter-spacing: 0.33vw;
		line-height: 5.8vw;
	}
}












/*=============================================================================================*/
.topbox {
	position: absolute;
	width: 910px;
	height: 590px;
	left: 50%;
	margin-left: -455px;
	top: 0
}
.ic_tw, .ic_ft1 {
	position: absolute;
	left: 50%;
	mix-blend-mode: overlay;
	-webkit-mix-blend-mode: overlay;
	-moz-mix-blend-mode: overlay;
	-ms-mix-blend-mode: overlay;
	-o-mix-blend-mode: overlay;
	z-index: 1;
}

.ic_ft1 {
	width: 700px;
	margin: 390px 0 0 -280px;
}
.ic_tw {
	width: 77px;
	margin: 150px 0 0 40px
}

.maintitle {
	font-size: 88px;
	color: #ffffff;
	line-height: 114px;
	left: 0;
	position: absolute;
	margin-top: 130px 
}

.topbox li {
	font-size: 1vw;
	line-height: 1.8vw;
	color: #ffffff;
	text-align: left;
	letter-spacing: 0.1vw;
	margin: 280px 0 0 500px;
}

.fwb {font-weight: bold}
.fwr {font-weight: normal}
.fs105 {font-size: 105px;}


.yl {color: #ffe600}
.lb {color: #2cb0c6}

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

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










/*=============================================================================================*/
.formz {
	background: #f5f1ef;
	height: auto;
	font-size: 18px;
	position: relative;
	padding: 48px 0 ;
}

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

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










/*=============================================================================================*/
.youbox {
	position: relative;
	padding: 0 0 6vw;
}
.youbox:before {
	content:"";
	width:100%;
	height: 23.5vw;
	position:absolute;
	background: #eef2f6;
	bottom: 0;
	left: 0;
	z-index: -1
}
.ic_ft2 {
	width: 486px;
	position: absolute;
	left: 50%;
	margin: 60px 0 0 -200px;
}


.youbox h, .youbox p {
	position: relative;
	text-align: left;
	display: inline-block;
	margin: 115px 20px;
	vertical-align: middle
}
.youbox h {
	font-size: 35px;
	line-height: 45px;
	letter-spacing: 2px;
}
.fs45 {font-size: 45px}
.youbox p {
	font-size: 18px;
	line-height: 31px;
	letter-spacing: 3px;
}
.bh {display: none}


.youall_m {display: none}

.youall figure {
	display: inline-block;
	width: 17.5vw;
	height: 540px;
	color: #ffffff;
	background-image: cover;
	background-repeat: no-repeat;
	vertical-align: top;
	margin: -2px;
	transition:0.5s all;
}
.youall figure:hover {
	transform: scale(.95);
}
.youall figure:hover > .on_ {opacity: 0}


.on_ {
	width: 17.5vw;
	height: 540px;
	margin-top: -540px;
	pointer-events: none;
}
.ic_qu {
	font-size: 100px;
	margin-top: 170px;
	color: rgba(44,176,198,0.8);
}

.more {display: none}

.youtype {
	margin: 7.8vw auto .8vw;
	color: #363636;
	font-size: 27px;
	font-weight: bold;
}
.youadd {
	position: relative;
	margin-top: 5px;
	color: #363636;
}

.youall figure:hover .youtype_ {
	font-size: 28px;
	font-weight: bold;
	color: #2cb0c6;
	margin-top: 110px;
}

.you1 {
	background-color: #ffffff;
	background-image: url("../images/you1.webp")
}
.you2 {
	background-color: #f6f6f6;
	background-image: url("../images/you2.webp")
}
.you3 {
	background-color: #ffffff;
	background-image: url("../images/you3.webp")
}
.you4 {
	background-color: #f6f6f6;
	background-image: url("../images/you4.webp")
}
.you5 {
	background-color: #ffffff;
	background-image: url("../images/you5.webp")
}

.youall figcaption {
	width: 100%;
	height: 540px;
	opacity: 0;
	transition:0.5s all;
}
.youall figcaption:hover {
	opacity: 1;
	background: rgba(98,111,127,0.7);
	height: 400px;
}
.youinfo {
	color: #ffffff;
	font-size: 1.1vw;
	letter-spacing: 2px;
	text-align: center;
	line-height: 32px;
	padding-top: 100px
}
.youplan {	
	font-size: 26px;
	font-weight: bold;
	letter-spacing: 6px;
	text-align: center;
	line-height: 38px;
	margin-top: 60px;
	color: #ffe600;
}

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

@media screen and (max-width: 560px){
	.ic_ft2 {
		width: 96%;
		left: 50%;
		margin: 18% 0 0 -48%;
	}
	.youbox h, .youbox p {
		margin: 0 auto;
	}
	.youbox h {
		font-size: 7.8vw;
		line-height: 10vw;
		letter-spacing: 0.8vw;
		padding-top: 15%
	}
	.fs45 {font-size: 9.7vw}
	.youbox p {
		font-size: 3.9vw;
		line-height: 7vw;
		letter-spacing: 3px;
		padding: 10% 0 11% 0
	}
	
	.youall figure {
		height: 88vw;
	}
	.youall figure .on_ {
		height: 88vw;
		margin-top: -90vw;
	}
	.youall figure figcaption {
		height: 88vw;
	}
	
	.youall figure figcaption:hover {
		height: 48vw;
	}
	
	.youall figure .on_ .more {
		display: block;
		color: #d82149;
		font-size: 3.5vw;
		font-weight: bold;
		padding-top: 3%
	}
	.youall figure .on_ .youtype {
		font-size: 5.5vw;
		margin-top: 12vw
	}
	.youall figure .on_ .youadd {
		letter-spacing: 0.4vw;
		line-height: 4.5vw;
	}
	.youall figure figcaption .youinfo {
		font-size: 4vw;
		letter-spacing: 0.4vw;
		line-height: 6vw;
		padding-top: 8vw
	}
	.youall figure figcaption .youplan {	
		font-size: 4.5vw;
		line-height: 6.5vw;
		margin-top: 10%
	}
	.youall figure:hover figcaption .youtype_ {
		font-size: 5.5vw;
		margin-top: 10.5vw
	}
	
	.youall figure.you5 {width: 55vw}
	
	.youall figure.you5 {
		height: 88vw;
	}
	.youall figure.you5 .on_ {
		height: 88vw;
		margin-top: -90vw;
	}
	
	.youall figure.you5 .on_ .youtype {
		font-size: 5.5vw;
		margin-top: 22vw
	}
	
	.youall figure.you5 figcaption {
		height: 88vw;
	}
	
	.youall figure.you5 figcaption:hover {
		height: 63vw;
	}
	
	.youall figure.you5 figcaption .youtype_ {
		margin-top: 26vw;
	}
}











/*=============================================================================================*/
p.subtitle {
	font-size: 35px;
	letter-spacing: 3px;
	margin: 0 auto;
	padding: 2vw 0;
}

@media screen and (max-width: 800px) {
	p.subtitle {
		font-size: 4vw;
		padding: 5.5vw 0;
	}
}

@media screen and (max-width: 560px) {
	p.subtitle {
		font-size: 6.8vw;
		letter-spacing: 0.2vw;
		padding: 6vw 0 ;
	}
}










/*=============================================================================================*/
#Countermeasure {
	background: url("../images/bg_dot.png");
	position: relative;
	padding-bottom: 6%
}

#Countermeasure h1 {
	font-size: 45px;
	letter-spacing: 9px;
	color: #d82149;
	margin: 0 auto;
	padding-top: 5.1%;
	font-weight: normal;
}
#Countermeasure li {
	display: inline-block; 
	margin: 55px 45px;
	vertical-align: bottom;
}

#Countermeasure .body {
	width: 680px;
	height: 420px;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}
#Countermeasure #kids>.body 		{background-image: url("../images/youall1.webp");}
#Countermeasure #student>.body 		{background-image: url("../images/youall2.webp");}
#Countermeasure #civilservant>.body {background-image: url("../images/youall3.webp");}
#Countermeasure #officeworker>.body {background-image: url("../images/youall4.webp");}
#Countermeasure #teacher>.body 		{background-image: url("../images/youall5.webp");}


#Countermeasure .body h2 {
	width: 16.1vw;
	font-size: 1.7vw;
	letter-spacing: 0.1vw;
	color: #ffffff;
	padding: 2.5vw 0;
}
#Countermeasure .body h3 {
	font-size: 1vw;
	line-height: 1.8vw;
	text-align: left;
	padding: 1vw 0 0 3.1vw;
	letter-spacing: 0.1vw;
}

.fs27 {font-size: 1.3vw}

#kids>.body h2 {background: rgba(216,33,73,0.7);}
#student>.body h2 {background: rgba(255,234,80,0.7);}
#civilservant>.body h2 {background: rgba(82,158,204,0.7);}
#officeworker>.body h2 {background: rgba(172,143,198,0.7);}
#teacher>.body h2 {background: rgba(252,163,88,0.7);}

#student .body h3,
#civilservant .body h3,
#teacher .body h3 {
	color: white;
}

@media screen and (max-width: 800px){
	#Countermeasure {
		padding-top: 8%;
		padding-bottom: 15%;
	}
	
	#Countermeasure li {
		margin: 3vw auto;
	}
	
	#Countermeasure .body {
		width: 80vw;
		height: 53vw;
		background-size: cover;
	}
	
	#Countermeasure .body h2 {
		width: 37vw;
		font-size: 4.5vw;
		letter-spacing: 0.3vw;
		padding: 5vw 0;
	}

	.fs27 {font-size: 3.2vw}
	
	#Countermeasure .body h3 {
		font-size: 2.4vw;
		line-height: 3.6vw;
		padding: 2.5vw 0 0 6vw;
		letter-spacing: 0.2vw;
	}
	
}

@media screen and (max-width: 560px){
	#Countermeasure {
		padding: 12vw 0 16vw;
	}
	
	#Countermeasure li {
		margin: 4vw auto 2vw;
	}
	
	#Countermeasure .body {
		width: 85vw;
		height: 55vw;
		
	}
	
	#Countermeasure h1 {
		font-size: 9.7vw;
		letter-spacing: 0.8vw;
		padding-top: 7%;
	}
	#Countermeasure .body h2 {
		width: 44vw;
		font-size: 6vw;
		padding: 4vw 0;
	}
	
	#Countermeasure .body h3 {
		font-size: 3.6vw;
		letter-spacing: 0.33vw;
		line-height: 5.5vw;
		padding: 2.5vw 0 0 5vw;
	}
}












/*=============================================================================================*/
#Partner {
	position: relative;
	padding: 4vw 0 7.5vw;
	background: #d3f2ed;
}

#Partner ul {
	display: inline-block;
	vertical-align: top;
	position: relative;
	margin: 2vw .5vw 0;
}

#Partner ul.left {
	background: url("../images/partner.webp") no-repeat center;
	background-size: cover;
	width: 31vw;
	height: 21vw;
}

#Partner ul li {
	display: inline-block;
	vertical-align: top;
	width: 9vw;
	margin: 0 .6vw;
	position:relative;
}

#Partner ul li div {
	background-color: rgba(255,255,255,.5);
	width: 9vw; 
	height: 21vw;
	position: absolute;
	left: 0; top: 0;
	clip-path: polygon(0 21vw, 0% 0, 9vw 21vw);
}

#Partner nav {
	width: 4.7vw;
	height: 3.4vw;
	margin: .3vw auto;
}

#Partner #pn1 nav {background: #ed1e79;} #Partner #pn1 h1 {color: #ed1e79}
#Partner #pn2 nav {background: #51d0fc;} #Partner #pn2 h1 {color: #51d0fc}
#Partner #pn3 nav {background: #866ce5;} #Partner #pn3 h1 {color: #866ce5}
#Partner #pn4 nav {background: #4ead53;} #Partner #pn4 h1 {color: #4ead53}


#Partner nav::before{
	font-family: "Font Awesome 5 Free";
	font-weight: 600;
	color: white;
	font-size: 2vw;
	line-height: 3.4vw;
}

#Partner #pn1 nav::before {content: "\f200";}
#Partner #pn2 nav::before {content: "\f004";}
#Partner #pn3 nav::before {content: "\f51c";}
#Partner #pn4 nav::before {content: "\f508";}

#Partner aside {
	color: #b3b3b3;
	font-size: 2.6vw;
	padding: 1.4vw 0 1.6vw;
	font-weight: 600;
}

#Partner h1 {
	color: #b3b3b3;
	font-size: 1.5vw;
	font-weight: 600;
	line-height: 1.6vw;
	position: relative;
}

#Partner .tgl {font-size: 1vw;}

#Partner h2 {
	position: relative;
	margin: .8vw 1vw;
	text-align: justify;
}

@media screen and (max-width: 800px){
	#Partner {
		padding: 6vw 0 17vw;
	}

	#Partner ul {
		display: block;
		margin: 2.5vw auto;
	}

	#Partner ul.left {
		width: 66vw;
		height: 40vw;
	}

	#Partner ul li {
		width: 20vw;
		margin: 2vw 1.5vw 0;
	}

	#Partner ul li div {
		width: 20vw; 
		height: 45vw;
		clip-path: polygon(0 45vw, 0% 0, 20vw 45vw);
	}

	#Partner nav {
		width: 8vw;
		height: 6vw;
		margin: .8vw auto;
	}

	#Partner nav::before{
		font-size: 3.5vw;
		line-height: 6vw;
	}

	#Partner aside {
		font-size: 5vw;
		padding: 1.4vw 0 3vw;
	}

	#Partner h1 {
		font-size: 3vw;
		line-height: 3.5vw;
	}

	#Partner .tgl {font-size: 2vw;}

	#Partner h2 {
		margin: 1.5vw 2vw;
	}
}

@media screen and (max-width: 560px){
	#Partner {
		padding: 9vw 0 20vw;
	}

	#Partner ul {
		margin: 3vw auto;
	}

	#Partner ul.left {
		width: 78vw;
		height: 55.5vw;
	}

	#Partner ul li {
		width: 38vw;
		margin: 7vw 1.5vw;
	}

	#Partner ul li div {
		width: 38vw; 
		height: 80vw;
		clip-path: polygon(0 80vw, 0% 0, 38vw 80vw);
	}

	#Partner nav {
		width: 15vw;
		height: 10vw;
		margin: 1vw auto;
	}

	#Partner nav::before{
		font-size: 5.5vw;
		line-height: 10vw;
	}

	#Partner aside {
		font-size: 8vw;
		padding: 3vw 0 4vw;
	}

	#Partner h1 {
		font-size: 6vw;
		line-height: 7vw;
	}

	#Partner .tgl {font-size: 4vw;}

	#Partner h2 {
		margin: 3vw 4vw;
	}
}






/*========================*/
#Partner .video {
	background: rgba(54,54,54,.7);
	bottom: 0;
	width: 100%;
	padding: 1.6vw 0;
	color: white;
	font-size: 1.2vw;
	font-weight: 200;
}

#Partner .video ol {
	padding-left: 4vw;
}

#Partner .video::before {
	font-size: 2.3vw;
	margin: 0 -11.5vw
}

#Partner .video:hover {
	background: rgba(54,54,54,.9);
}
/*========================*/



@media screen and (max-width: 800px){
	#Partner .video {
		padding: 3vw 0;
		font-size: 2.8vw;
	}

	#Partner .video ol {
		padding-left: 8vw;
	}

	#Partner .video::before {
		font-size: 4.6vw;
		margin: 0 -25vw
	}
}

@media screen and (max-width: 560px){
	#Partner .video {
		padding: 4vw 0;
		font-size: 3.5vw;
	}

	#Partner .video ol {
		padding-left: 8vw;
	}

	#Partner .video::before {
		font-size: 6vw;
		margin: 0 -35vw
	}
}







/*=============================================================================================*/
.video {
	position: absolute;
	transition: 0.5s all;
}

.video::before {
	content: "\f144";
	font-family: "Font Awesome 5 Free";
	font-weight: normal;
	position: absolute;
}







/*=============================================================================================*/
#Tools {
	padding: 0.1vw 0 0;
	/*background: #DDDFE2;*/
	height: 45vw;
}

#Tools p {color: white;}


@media screen and (max-width: 768px){
	#Tools {
		padding: 20vw 0 0;
		height: 75vw;
	}
}

@media screen and (max-width: 480px){
	#Tools {
		padding: 9vw 0 0;
		height: 140vw;
	}
}

/*===== tab設定 =====*/
#Tools .tabs {
	position: relative;
	margin-top: 15.5vw;
}

#Tools .tabs li {
 	display: inline-block;
}

#Tools .tabs input[type="radio"] {
	display: none;
}

#Tools .tabs label {/*標題*/
	display: block;
  	padding: .5vw 1vw;
 	font-size: 1.2vw;
  	border: solid #36383d 1px;
 	cursor: pointer;
	transition: all 0.5s ease-in-out;
	margin: 0 .6vw;
	color: #36383d
	
}
#Tools .tabs label:hover {
  background: rgba(255,255,255,.8);
}

#Tools .tabs .tab-content {/*內容*/
	z-index: 2;
	display: none;
	overflow: hidden;
  	position: absolute;
  	background: rgba(0,0,0,.1);
	margin: 2.5vw -31.5vw;
	left: 50%;
}

#Tools .tabs [id^="tab"]:checked + label {
	background: #fdfdfd;
	border: solid #fdfdfd 1px;
	color: #36383d;
}
#Tools .tabs [id^="tab"]:checked ~ [id^="tab-content"] {
  display: block;
}

@media screen and (max-width: 800px){
	#Tools .tabs {
		margin-top: 0;
	}
	
	#Tools .tabs label {/*標題*/
		padding: .5vw 1.5vw;
		font-size: 2.2vw;
		margin: 0 1vw;
	}
	
	#Tools .tabs .tab-content {/*內容*/
		margin: 4vw -47vw;
	}
}

@media screen and (max-width: 480px){
	#Tools .tabs {
		margin-top: 11vw;
	}
	
	#Tools .tabs label {/*標題*/
		padding: 1.5vw 2.4vw;
		font-size: 4.3vw;
		margin: 1.4vw;
	}
	
	#Tools .tabs .tab-content {/*內容*/
		margin: 30vw 2.5vw;
		left: 0; top: 0;
	}
}
/*===== === === =====*/








/*========================*/
#Tools label::before {
	font-family: "Font Awesome 5 Free";
	font-weight: 600;
}
#Tools label.tab1::before {content: "\f108";}
#Tools label.tab2::before {content: "\f3cd";}
#Tools label.tab3::before {content: "\f02d";}
#Tools label.tab4::before {content: "\f14b";}
#Tools label.tab5::before {content: "\f012";}





/*===== tab內容 =====*/
#Tools .tab-content li {
	width: 31.5vw;
	height: 21vw;
	display: inline-block;
	vertical-align: top;
	position: relative;
}

#Tools main h1 {
	font-size: 1.8vw;
	letter-spacing: 0.2vw;
	font-weight: bold;
	padding: 3.5vw 4.5vw 0;
}

#Tools main h2 {
	font-size: 1vw;
	letter-spacing: 0.1vw;
	line-height: 1.7vw;
	padding: 1.3vw 4.5vw 0;
}

@media screen and (max-width: 768px){
	#Tools .tab-content li {
		width: 47vw;
		height: 34vw;
	}
	
	#Tools main h1 {
		font-size: 3.2vw;
		letter-spacing: 0.4vw;
	}

	#Tools main h2 {
		font-size: 2.1vw;
		line-height: 3vw;
	}
}

@media screen and (max-width: 560px){
	#Tools .tab-content li {
		width: 83vw;
		height: 60vw;
		
	}
	
	#Tools main h1 {
		font-size: 6vw;
		padding: 5.5vw 6.5vw 0;
	}

	#Tools main h2 {
		font-size: 3.9vw;
		line-height: 5.5vw;
		padding: 3vw 6.5vw 0;
	}
}









/*========================*/
#Tools .video {
	color: midnightblue;
	margin: 0 4.5vw;
	border-radius: 3vw;
	bottom: 1.0vw;
	padding: .8vw 2vw;
	background: #ffd400;
	font-weight: bold;
}

#Tools main ol {
		margin-left: 2.8vw;
		font-size: 1vw;
	}

#Tools .video::before {
	font-size: 2.5vw;
	margin: 0.8vw -.3vw
}

#Tools .video:hover {
	background: #f9e453;
	color: #d82149;
}

@media screen and (max-width: 800px){
	#Tools .video {
		border-radius: 3.8vw;
		bottom: 4vw;
		padding: 1.3vw 2vw;
	}
	
	#Tools main ol {
		margin-left: 4.5vw;
		font-size: 2.2vw;
		line-height: 2.6vw
	}

	#Tools .video::before {
		font-size: 4vw;
		margin: 1.1vw -.3vw
	}
}

@media screen and (max-width: 560px){
	#Tools .video {
		border-radius: 8vw;
		bottom: 5vw;
		padding: 3vw 3.5vw;
	}
	
	#Tools main ol {
		margin-left: 8vw;
		font-size: 4vw;
		line-height: 5vw
	}

	#Tools .video::before {
		font-size: 8vw;
		margin: 2vw -.3vw
	}
}
/*========================*/








#Tools .left {
	border: solid 1px rgba(253,253,253,.4);
	box-sizing: border-box;
}

#Tools .right {
	background: url("../images/tic-tac-toe.webp");
	text-align: left;
	margin: 0 -.25vw
}

#Tools .studypic img {
	width: 100%;
}

@media screen and (max-width: 800px){
	#Tools .right {
		margin: 0 -.5vw
	}
	
	#Tools #tab-content1 .studypic img {
		height: 100%;
	}
}

@media screen and (max-width: 560px){
	#Tools .right {
		margin: 0 auto
	}
}





/*===== tab2 =====*/
#Tools #tab-content2 .left {
	background: url("../images/hiapp.webp") no-repeat center;
	background-size: 27%;
}

#Tools #tab-content2 h3,
#Tools #tab-content3 h3 {
	font-size: 1vw;
	background: #2f70b7;
	border-radius: 10px;
	color: #fdfdfd;
	padding: .5vw .7vw;
	position: absolute;
}

#Tools #tab-content2 h3.ft1 {top: 4vw; left: 4vw;} 
#Tools #tab-content2 h3.ft2 {top: 10vw; left: 4vw;} 
#Tools #tab-content2 h3.ft3 {top: 16vw; left: 4vw;}
#Tools #tab-content2 h3.ft4 {top: 2.5vw; right: 4vw;}
#Tools #tab-content2 h3.ft5 {top: 7vw; right: 4vw;}
#Tools #tab-content2 h3.ft6 {top: 11.75vw; right: 4vw;}
#Tools #tab-content2 h3.ft7 {top: 16.5vw; right: 3.1vw;}

#Tools #tab-content2 h3.ft1::after,
#Tools #tab-content2 h3.ft2::after,
#Tools #tab-content2 h3.ft3::after {
	content: "";
	width: 3.5vw;
	height: 1px;
	background: #2f70b7;
	position: absolute;
	top: 1.1vw
}

#Tools #tab-content2 h3.ft3::after {
	transform: rotate(15deg);
	top: 1.6vw;
	width: 5.2vw;
}

#Tools #tab-content2 h3.ft4::before,
#Tools #tab-content2 h3.ft5::before,
#Tools #tab-content2 h3.ft6::before,
#Tools #tab-content2 h3.ft7::before {
	content: "";
	width: 3.5vw;
	height: 1px;
	background: #2f70b7;
	position: absolute;
	top: .8vw;
	left: -2.8vw
}

#Tools #tab-content2 h3.ft4::before,
#Tools #tab-content2 h3.ft6::before {
	transform: rotate(15deg);
	top: .8vw;
}
#Tools #tab-content2 h3.ft5::before,
#Tools #tab-content2 h3.ft7::before {
	transform: rotate(-15deg);
	top: 1.5vw;
}
@media screen and (max-width: 768px){
	#Tools #tab-content2 h3,
	#Tools #tab-content3 h3 {
		padding: .5vw 1vw;
	}
	
	#Tools #tab-content2 h3.ft1 {top: 7vw; left: 4.5vw;} 
	#Tools #tab-content2 h3.ft2 {top: 16vw; left: 4.5vw;} 
	#Tools #tab-content2 h3.ft3 {top: 25vw; left: 4.5vw;}
	#Tools #tab-content2 h3.ft4 {top: 4vw; right: 6.5vw;}
	#Tools #tab-content2 h3.ft5 {top: 11vw; right: 6.5vw;}
	#Tools #tab-content2 h3.ft6 {top: 17.5vw; right: 6.5vw;}
	#Tools #tab-content2 h3.ft7 {top: 25vw; right: 4.6vw;}

	#Tools #tab-content2 h3.ft1::after,
	#Tools #tab-content2 h3.ft2::after,
	#Tools #tab-content2 h3.ft3::after {
		width: 7vw;
		height: 1px;
		top: 2.1vw
	}

	#Tools #tab-content2 h3.ft3::after {
		top: 2.8vw;
	}

	#Tools #tab-content2 h3.ft4::before,
	#Tools #tab-content2 h3.ft5::before,
	#Tools #tab-content2 h3.ft6::before,
	#Tools #tab-content2 h3.ft7::before {
		width: 5vw;
		left: -4vw
	}

	#Tools #tab-content2 h3.ft4::before,
	#Tools #tab-content2 h3.ft6::before {
		top: 1.5vw;
	}
	#Tools #tab-content2 h3.ft5::before,
	#Tools #tab-content2 h3.ft7::before {
		top: 2.6vw;
	}
}

@media screen and (max-width: 480px){
	#Tools #tab-content2 h3,
	#Tools #tab-content3 h3 {
		padding: 1vw 1.5vw;
	}
	
	#Tools #tab-content2 h3.ft1 {top: 12vw; left: 11.5vw;} 
	#Tools #tab-content2 h3.ft2 {top: 28vw; left: 11.5vw;} 
	#Tools #tab-content2 h3.ft3 {top: 44.5vw; left: 11.5vw;}
	#Tools #tab-content2 h3.ft4 {top: 8vw; right: 11.5vw;}
	#Tools #tab-content2 h3.ft5 {top: 20vw; right: 11.5vw;}
	#Tools #tab-content2 h3.ft6 {top: 32vw; right: 11.5vw;}
	#Tools #tab-content2 h3.ft7 {top: 45.5vw; right: 8.6vw;}

	#Tools #tab-content2 h3.ft1::after,
	#Tools #tab-content2 h3.ft2::after,
	#Tools #tab-content2 h3.ft3::after {
		width: 8vw;
		top: 3.5vw
	}

	#Tools #tab-content2 h3.ft3::after {
		top: 4.5vw;
	}

	#Tools #tab-content2 h3.ft4::before,
	#Tools #tab-content2 h3.ft5::before,
	#Tools #tab-content2 h3.ft6::before,
	#Tools #tab-content2 h3.ft7::before {
		width: 7vw;
		left: -7vw
	}

	#Tools #tab-content2 h3.ft4::before,
	#Tools #tab-content2 h3.ft6::before {
		top: 1.5vw;
	}
	#Tools #tab-content2 h3.ft5::before,
	#Tools #tab-content2 h3.ft7::before {
		top: 4.5vw;
	}
}






/*===== tab3 =====*/
#Tools #tab-content3 .left {
	background: url("../images/hinote.webp") no-repeat center;
	background-size: 56%;
}

#Tools #tab-content3 h3.ft1 {top: 2.8vw; left: 2vw;} 
#Tools #tab-content3 h3.ft2 {top: 8vw; left: 2vw;} 
#Tools #tab-content3 h3.ft3 {top: 3vw; right: 2vw;}
#Tools #tab-content3 h3.ft4 {top: 9.7vw; right: 2vw;}
#Tools #tab-content3 h3.ft5 {top: 15vw; right: 2vw;}

#Tools #tab-content3 h3.ft1::after,
#Tools #tab-content3 h3.ft2::after {
	content: "";
	width: 3.5vw;
	height: 1px;
	background: #2f70b7;
	position: absolute;
	top: 1.8vw
}

#Tools #tab-content3 h3.ft2::after {
	transform: rotate(-15deg);
	top: 1.4vw;
	width: 4vw;
}



#Tools #tab-content3 h3.ft3::before,
#Tools #tab-content3 h3.ft4::before,
#Tools #tab-content3 h3.ft5::before {
	content: "";
	width: 3.5vw;
	height: 1px;
	background: #2f70b7;
	position: absolute;
	top: .8vw;
	left: -2.8vw
}

#Tools #tab-content3 h3.ft4::before {
	transform: rotate(15deg);
	top: .8vw;
}
#Tools #tab-content3 h3.ft5::before {
	transform: rotate(-15deg);
	top: 1.5vw;
}

@media screen and (max-width: 800px){
	#Tools #tab-content3 h3 {
		padding: .8vw 1vw;
		line-height: 2.5vw;
	}
	
	#Tools #tab-content3 h3.ft1 {top: 5vw; left: 2vw;} 
	#Tools #tab-content3 h3.ft2 {top: 13vw; left: 2vw;} 
	#Tools #tab-content3 h3.ft3 {top: 5vw; right: 2vw;}
	#Tools #tab-content3 h3.ft4 {top: 15vw; right: 2vw;}
	#Tools #tab-content3 h3.ft5 {top: 22.5vw; right: 2vw;}

	#Tools #tab-content3 h3.ft1::after,
	#Tools #tab-content3 h3.ft2::after {
		width: 5vw;
		top: 3.5vw
	}

	#Tools #tab-content3 h3.ft2::after {
		top: 2vw;
		width: 5.5vw;
	}

	#Tools #tab-content3 h3.ft3::before,
	#Tools #tab-content3 h3.ft4::before,
	#Tools #tab-content3 h3.ft5::before {
		width: 5vw;
		height: 1px;
		top: 1.5vw;
		left: -4vw
	}
}

@media screen and (max-width: 560px){
	#Tools #tab-content3 h3 {
		padding: 1.5vw 1vw;
		line-height: 5vw;
	}
	
	#Tools #tab-content3 h3.ft1 {top: 8vw; left: 3.5vw;} 
	#Tools #tab-content3 h3.ft2 {top: 23vw; left: 3.5vw;} 
	#Tools #tab-content3 h3.ft3 {top: 6vw; right: 3.5vw;}
	#Tools #tab-content3 h3.ft4 {top: 26vw; right: 3.5vw;}
	#Tools #tab-content3 h3.ft5 {top: 41vw; right: 3.5vw;}

	#Tools #tab-content3 h3.ft1::after {
		width: 8vw;
		top: 6vw
	}

	#Tools #tab-content3 h3.ft2::after {
		top: 2vw;
		width: 8vw;
	}

	#Tools #tab-content3 h3.ft3::before,
	#Tools #tab-content3 h3.ft4::before,
	#Tools #tab-content3 h3.ft5::before {
		width: 8vw;
		top: 6vw;
		left: -8vw
	}
}






/*===== tab4 =====*/
#Tools .hiquiz01, #Tools .hiquiz02 {
	position: absolute;
	background-size: cover;
	background-repeat: no-repeat;
	border: solid 6px #2f70b7;
}

#Tools .hiquiz01 {
	background-image: url("../images/hiquiz01.webp");
	width: 18vw;
	height: 11vw;
	top: 1.5vw; left: 1.5vw;
}

#Tools .hiquiz02 {
	background-image: url("../images/hiquiz02.webp");
	width: 14.3vw;
	height: 9.7vw;
	bottom: 1.5vw; right: 1.5vw;
}

@media screen and (max-width: 800px){
	#Tools .hiquiz01 {
		width: 36vw;
		height: 22vw;
		top: 2vw; left: 2vw;
	}

	#Tools .hiquiz02 {
		width: 28.6vw;
		height: 19.4vw;
		bottom: 2vw; right: 2vw;
	}
}

@media screen and (max-width: 560px){
	#Tools .hiquiz01 {
		width: 48vw;
		height: 29vw;
		top: 5vw; left: 5vw;
	}

	#Tools .hiquiz02 {
		width: 38vw;
		height: 26vw;
		bottom: 5vw; right: 5vw;
	}
}






/*===== tab5 =====*/
#Tools .scroll {
	overflow-y: scroll;
}

/* width */
#Tools .studypic::-webkit-scrollbar {
	width: 11px;
	background: rgba(255,255,255,.5);
}

/* Track */
#Tools .studypic::-webkit-scrollbar-track {
	background: rgba(255,255,255,.3);
}

/* Handle */
#Tools .studypic::-webkit-scrollbar-thumb {
	background: rgba(0,0,0,.5);
	border-radius: 10px;
}

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

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









/*=============================================================================================*/
#Overriding {
	background: #f5f1ef;
	padding: 4vw 0 6.5vw;
}

#Overriding ul {
	display: inline-block;
	background: rgba(0,0,0,.1);
	padding: 1.5vw 3vw;
	margin-top: .8vw;
}
#Overriding h1 {
	color: #D8503F;
}

#Overriding h2 {
	font-size: 1.5vw;
	color: white;
	font-weight: bold
}

#Overriding h2::before {
	content:"\f521";
	font-family: "Font Awesome 5 Free";
	font-weight: 600;
	padding-right: .4vw;
	color: #F43B75;
	font-size: 1.4vw;
	vertical-align: bottom
}

#Overriding li.hihi {
	font-size: 1.2vw;
	color: white;
	line-height: 1.85vw
}

#Overriding li {
	color: rgba(0,0,0,.6)
}

#Overriding h3 {
	font-weight: bold;
}

#Overriding tr {
	border-bottom: solid 1px rgba(0,0,0,.2);
}

#Overriding td {
	vertical-align: middle;
	padding: 1vw 1.5vw;
	border-left: solid 1px rgba(0,0,0,.2);
}

#Overriding th {
	vertical-align: middle;
	padding: 1.5vw 1vw;
	background: white;
}

.thehi {background: #2F70B7}
.other {background: #efefef}

@media screen and (max-width: 800px){
	#Overriding {
		padding: 5vw 0 12vw;
	}
	
	#Overriding ul {
		padding: 3vw;
	}
	
	#Overriding th {
		width: 9vw;
		padding: 1.5vw 2vw;
	}
	
	#Overriding td {
		padding: 1.5vw 2vw;
	}
	
	#Overriding h2 {
		font-size: 3.2vw;
		width: 100%;
		margin: 0 auto
	}

	#Overriding h2::before {
		padding-right: 1vw;
		font-size: 2.7vw;
	}

	#Overriding li.hihi {
		font-size: 2.5vw;
		line-height: 4.3vw;
		padding: 1.5vw 2vw;
	}
	
	#Overriding .other br,#Overriding li.hihi br {
		display: none;
	}
}

@media screen and (max-width: 560px){
	#Overriding {
		padding: 8vw 0 16vw;
	}
	
	#Overriding h2 {
		font-size: 5vw;
	}

	#Overriding h2::before {
		padding-right: 1vw;
		font-size: 4vw;
	}

	#Overriding li.hihi {
		font-size: 4.2vw;
		line-height: 6vw;
		padding: 1.5vw 2vw;
	}
}











/*=============================================================================================*/
#Testimony {
	position: relative;
	background: #B24D3D;
	padding: 3.5vw 0 6vw;
	color: white;
}

#Testimony::before {
	content: "";
	width: 100%;
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	background-image: radial-gradient(rgba(255,255,255,.1) 10%,transparent 20%);
  	background-position: 0 0,20px 20px;
  	background-size: 8px 8px;
}

#Testimony li {
	width: 15.6vw;
	display: inline-block;
	vertical-align: top;
	margin: 2vw 3vw 0;
	text-align: justify;
}

#Testimony li aside {
	background-size: cover;
	width: 15.6vw;
	height: 8.8vw;
	border-radius: 6px;
}

#Testimony li aside.st1 {background-image: url("../images/st1.webp");}
#Testimony li aside.st2 {background-image: url("../images/st2.webp");}
#Testimony li aside.st3 {background-image: url("../images/st3.webp");}

#Testimony li ol {
	font-size: 1.2vw;
	letter-spacing: 0.12vw;
	font-weight: bold;
	padding: .7vw 0 .5vw;
}

#Testimony li ol::after {
	font-family: "Font Awesome 5 Free";
	content: " \f4ad";
	font-weight: 600;
}

#Testimony li .sidebar-box {
	max-height: 4vw;
	position: relative;
	overflow: hidden;
	border-bottom: solid 1px rgba(255,255,255,.2);
	padding-bottom: 1.5vw;
}

#Testimony li .sidebar-box .read-more { 
	position: absolute; 
	bottom: 0;
	width: 100%; 
	text-align: center;
	padding: 1.8vw 0; 
			
	/* "transparent" only works here because == rgba(0,0,0,0) */ 
	background-image: linear-gradient(0, transparent, #B24D3D);
	background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, transparent),color-stop(1, #B24D3D));
}

#Testimony li .sidebar-box .read-more a.button {
	font-size: .8vw;
	padding: .1vw .4vw .25vw;
	background: white;
	color: #B24D3D;
	border-radius: 10px;
}

@media screen and (max-width: 800px) {
	#Testimony {
		padding: 3.5vw 0 8vw;
	}

	#Testimony li {
		width: 33vw;
		margin: 2vw 5vw 4vw;
	}

	#Testimony li aside {
		width: 33vw;
		height: 18vw;
	}

	#Testimony li ol {
		font-size: 2.5vw;
		letter-spacing: 0.25vw;
		padding: 1.5vw 0 1vw;
	}

	#Testimony li .sidebar-box {
		max-height: 9.5vw;
		padding-bottom: 3vw;
	}

	#Testimony li .sidebar-box .read-more { 
		padding: 3.6vw 0;
	}

	#Testimony li .sidebar-box .read-more a.button {
		padding: .1vw 1vw .5vw;
		font-size: 2vw;
		border-radius: 8px;
	}
}

@media screen and (max-width: 560px) {
	#Testimony {
		padding: 7vw 0 11vw;
	}

	#Testimony li {
		width: 67vw;
		margin: 2vw 0 66vw;
	}

	#Testimony li aside {
		width: 67vw;
		height: 36vw;
	}

	#Testimony li ol {
		font-size: 5vw;
		letter-spacing: 0.5vw;
		padding: 3vw 0 2vw;
	}

	#Testimony li .sidebar-box { 
		max-height: 18vw;
		padding-bottom: 4vw;
	}

	#Testimony li .sidebar-box .read-more { 
		padding: 7vw 0;
	}

	#Testimony li .sidebar-box .read-more a.button {
		padding: .2vw 2vw 1vw;
		font-size: 3vw;
		border-radius: 6px;
	}
}








/*=============================================================================================*/
.gotrial {
	padding: 1vw 0;
	color: white;
	font-size: 1.3vw;
	letter-spacing: 5px;
	background-color: #B29347;
	transition:0.5s all;
}

.gotrial:hover {
	background-color: #2F70B7;
}

@media screen and (max-width: 800px) {
	.gotrial {
		font-size: 3vw;
		padding: 3.3vw 0;
	}
}

@media screen and (max-width: 560px) {
	.gotrial {
		font-size: 6.6vw;
		padding: 7vw 0;
	}
}




/*=============================================================================================*/
.footerz {
	position: relative;
	color: #fff;
	background: #292D33
}
.edm_footer_001 .svg {
	color: #fff;
	fill: #fff
}
.edm_footer_001 .icon_list > li > p {
	color: #fff;
	font-weight: bold;
    margin: .5em 0 .5em 40px;
    line-height: 1.5em;
	font-size: 21px;
}
.edm_footer_001 .icon_list > li {
    position: relative;
    margin-bottom: 1em;
    border-bottom: 1px solid #fff;
}
.frp {
	background: #e4754a;
	margin-top: -20px
}
.frp a {
	color: #e68058; 
	font-size: 5px;
	pointer-events:none;
	margin-top: -22px
}




/*=============================================================================================*/
@media screen and (max-width:1560px) {
	#kids,#student,#civilservant,#officeworker {
		margin: 55px 20px;
	}
}


@media screen and (max-width:1490px) {
	#kids,#student,#civilservant,#officeworker {
		margin: 55px 5px;
	}
}


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

	
	.youbox {
		height: auto;
		padding-bottom: 11%
	}
	.youall figure {
		width: 23%
	}
	.on_ {
		width: 100%
	}
	
	#kids,#student,#civilservant,#officeworker {
		margin: 25px 5px;
	}
	
	.topbrandbox {
		height: auto;
		padding-bottom:11%
	}
	.hiservice li {
		margin: 0 auto;
		margin-top: 60px;
	}
}

@media screen and (max-width:1290px) {
	
	.tbtitle p {
		padding-bottom: 4%;
	}
	.hiservice li {
		margin: 25px;
	}
}

@media screen and (max-width:1030px) {
	.youall figure {
		width: 24%;
	}

	.youinfo {
		font-size: 2vw;
		line-height: 3vw;
	}
	.youplan {
		font-size: 2.5vw;
		letter-spacing: 0.3vw;
	}
}
@media screen and (max-width:1010px) {
	.youbox h, .youbox p {
		margin: 15px 20px;
	}
	.youbox h {
		padding-top: 8%
	}
	.youbox p {
		padding-bottom: 5%
	}
}
@media screen and (max-width:960px) {
}
	
	.topbox {
		width: 100%;
		height: 100vw;
		left: 0;
		margin-left: 0;
	}
	.ic_tw {
		width: 10%;
		margin: 0 auto;
		top: 3%;
		margin-left: -2%;
	}
	.ic_ft1 {
		width: 90%;
		margin: 0 auto;
		top: 61%;
		margin-left: -45%;
	}
	.ic_tw img,.ic_ft1 img {width: 100%}
	
	.maintitle {
		font-size: 10.5vw;
		line-height: 13vw;
		left: 0;
		position: relative;
		margin-top: 20%;
	}
	.fs105 {font-size: 13.6vw;}
	.topbox li {
		font-size: 2.5vw;
		line-height: 4.1vw;
		letter-spacing: 0.3vw;
		margin: 2% 0 0 39%;
	}
}

@media screen and (max-width:780px) {
	
	
	.youbox:before {
		height: 55%;
	}
	.youall figure {
		width: 42%;
		height: 68vw;
		margin: 2% 1%;
		background-size: contain;
	}
	.on_ {
		width: 100%;
		height: 68vw;
		margin-top: -68vw;
	}
	.ic_qu {
		font-size: 12vw;
		margin-top: 50%;
	}
	.youtype {
		margin-top: 40%;
	}
	.youadd {
		margin-top: 2%;
		color: #363636;
		letter-spacing: 0.3vw;
	}
	.youall figcaption {
		height: 68vw;
	}
	.youall figcaption:hover {
		height: 48vw;
	}
	.youinfo {
		font-size: 2.7vw;
		letter-spacing: 0.3vw;
		line-height: 4vw;
		padding-top: 28%
	}
	.youplan {	
		font-size: 3.5vw;
		letter-spacing: 0.8vw;
		line-height: 5.2vw;
		margin-top: 15%
	}
	.youall figure:hover .youtype_ {
		font-size: 4vw;
		margin-top: 36%
	}
	
	
	
	/*--------------------------*/
	
}

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

	
	/*--------------------------*/
	.youbox {
		padding-bottom: 18%
	}
	.ic_ft2 {
		width: 80%;
		left: 50%;
		margin: 18% 0 0 -40%;
	}
	.ic_ft2 img {width: 100%}
	
	.bh {display:inherit}
	
	
	/*--------------------------*/
	.tbtitle h {
		padding-top: 11%;
		font-size: 6.2vw;
		letter-spacing: 0.7vw;
	}
	.tbtitle p {
		font-size: 3.8vw;
		letter-spacing: 0.7vw;
		margin-top: 2%;
	}
	.tbtitle p > br {display: block}
	.hiservice li {
		margin: 10px;
	}
}

@media screen and (max-width:480px) {
	.topbox {
		height: 130vw;
	}
	.ic_ft1 {
		top: 42%;
	}
	.maintitle {
		font-size: 12vw;
		line-height: 15vw;
		margin-top: 23%;
		letter-spacing: 0.6vw;
	}
	.fs105 {font-size: 16vw;}
	.topbox li {
		font-size: 3.7vw;
		line-height: 6vw;
		letter-spacing: 0.5vw;
		margin: 33% 0 0 0 ;
		text-align: center
	}
	
	/*--------------------------*/
	
	
	
	
	

	
	/*--------------------------*/
	.topbrandbox {
		padding-bottom:15%
	}
	.tbtitle h {
		padding-top: 15%;
		font-size: 7.9vw;
	}
	.tbtitle p {
		font-size: 4.7vw;
	}
	.hiservice li {
		width: 38vw;
		height: 38vw;
		margin: 2%;
		border-radius: 18%;
	}
	.hiservice li > p {
		font-size: 5vw;
		line-height: 7vw;
		margin-top: 10%;
	}
	.hiservice img {
		width: 38%;
		padding-top: 5%
	}

}
/*=============================================================================================*/
.footerz {
	position: relative;
	color: #fff;
	background: #292D33
}
.edm_footer_001 .svg {
	color: #fff;
	fill: #fff
}
.edm_footer_001 .icon_list > li > p {
	color: #fff;
	font-weight: bold;
    margin: .5em 0 .5em 40px;
    line-height: 1.5em;
	font-size: 21px;
}
.edm_footer_001 .icon_list > li {
    position: relative;
    margin-bottom: 1em;
    border-bottom: 1px solid #fff;
}
.frp {
	background: #e4754a;
	margin-top: -20px
}
.frp a {
	color: #e68058; 
	font-size: 5px;
	pointer-events:none;
	margin-top: -22px
}