@charset "utf-8";
/* CSS Document */
select::-ms-expand { display: none; } 
select{
	appearance:none;
	-moz-appearance:none;
	-webkit-appearance:none;
	-ms-appearance:none;}
	
.bbfont{
	font-weight:bold;
	font-family:微软雅黑;}	
	
/*一般內頁框架區*/	
.in_main{
	display:block; width:100%; height:0; padding-bottom:18.4%; background-position:center bottom; background-size:cover;background-image:url(../images/in_main_1.jpg); position:relative;}	

	
/*智能維運*/	
.in_main.set2{background-image: url(../images/in_main_2.jpg);}	


.in_main h2{ display:block; position:absolute; top:34%; left:50%; transform:translate(-50%,-46%);
	font-size:7em; color:#fff; text-shadow:0 0 5px rgba(0,0,0,0.8), 4px 4px 4px rgba(0,0,0,0.6); width:85%; text-align: center;}

	
@media screen and (max-width: 1350px) {
.in_main{padding-bottom:25%;}	
.in_main h2{ font-size:5.25vmax;}	
}

@media screen and (max-width: 768px) {
.in_main{padding-bottom:33%;}	
 }

/*框架資料內容區*/
/*SMENU*/

.in_bg .box .Left{
	width:284px; position:relative; float:left; margin-right:50px;}
	
.in_bg .box .Left h3{
	display:block; 
	font-size:3.18em; 
	text-shadow:0 0 2px rgba(0,0,0,0.6), 2px 2px 2px rgba(0,0,0,0.3); 
	color:#fff;
	padding:33px 10.56% 44px 10.56%; 
	box-sizing:border-box; 
	position: relative;
}
.in_bg .box .Left h3::after{
	content: "";
	display: block;
	border-bottom: 5px solid #fff;
	width: 32px;
	margin-top: 17px;
}
	
.in_bg .box .Left #snavs{
	display:block; 
	background:linear-gradient(to top, #2DA1B9 45%, #328648 100%);
	color:#fff; 
	padding-bottom:213px;
}
		
.in_bg .box .Left #snavs > ul{
	display:block; list-style:none; box-sizing:border-box; padding:0 10.56%; padding-bottom:15px;}
.in_bg .box .Left #snavs > ul li{
	display:block;}	
.in_bg .box .Left #snavs > ul > li > a{
	display:block; padding:20px 0 20px 35px; position:relative; font-size:1.8em; font-weight:bold; color:#fff;
	text-decoration:none; text-shadow: 0 0 3px rgba(0, 0, 0, 1), 0 0 3px rgba(0, 0, 0, 1), 1px 1px 1px rgba(0, 0, 0, 0.5)}
	
.in_bg .box .Left #snavs a:hover, .in_bg .box .Left #snavs li.on a{
	color:#ffff99;}	
	
.in_bg .box .Left #snavs > ul > li > a:before{
	content:''; display:block; width:24px; height:24px; background: url(../images/snav-arr-r.svg) center no-repeat;
	background-size: contain; position:absolute; left:0; top:17px; box-sizing:border-box;}	
	 
.in_bg .box .Left #snavs > ul > li > a.lv2m:before{
	background: url(../images/snav-arr-plus.svg); transition:all 0.4s; background-size:contain}
	
.in_bg .box .Left #snavs > ul > li > a.lv2m.open:before{
	transform:rotate(-45deg);}			
	
.in_bg .box .Left #snavs > ul > li > ul{
	display:block; list-style:none; border-radius:10px; background-color:rgba(255,255,255,0.65); overflow:hidden;}	
.in_bg .box .Left #snavs > ul > li > ul > li{ border-bottom:1px solid #2DA1B9;}
.in_bg .box .Left #snavs > ul > li > ul > li:last-child{ border-bottom:0;}

.in_bg .box .Left #snavs > ul > li > ul > li > a{
	display:block; padding:15px; color:#007070 !important; font-size:1.7em; padding-left:2em; position:relative; line-height:1.45;
}
.in_bg .box .Left #snavs > ul > li > ul > li > a:hover, .in_bg .box .Left #snavs > ul > li > ul > li > a:focus{
	background-color:#fff;}
		
.in_bg .box .Left #snavs > ul > li > ul > li > a:before{
	content:'▲'; display:block; position:absolute; left:12px; top:15px; transform:rotate(90deg); opacity:0.6}			
.in_bg .box .Left #snavs > ul > li > ul > li.on > a{
	background-color:#FF9;}
.in_bg .box{
	display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;}
	
.in_bg{ margin-top:40px;}
	
.hadGradient{
	background: rgb(138,213,221);
	background: -moz-linear-gradient(left,  #28818A 0%, #32864B 100%); 
	background: -webkit-linear-gradient(left,  #28818A 0%,#32864B 100%);
	background: linear-gradient(to right,  #28818A 0%,#32864B 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#28818A', endColorstr='#32864B',GradientType=1 );
	padding:10px 20px;
	border-radius:30px 30px 0 0;
	color:#fff;
	box-sizing:border-box;
}
dl:has(.hadGradient){margin:15px 0;}
dl:has(.hadGradient) dt{
	width:96%;
	margin:0 auto;
}
dl:has(.hadGradient) dd{
	box-sizing:border-box;
	padding:15px;
	border:1px solid #9CC86F;
}
.labelTag{
	display:inline-block;
	background-color:#FFDC00;
	color:#000;
	padding:3px 20px;
	border-radius:20px;
}
.in_bg .box .Left #sm_btn{ display:none;}	
	
.in_bg .box .Right{
	float:right; width:calc(100% - 284px - 50px);position:relative;}
.in_bg .box .Right	> p{
	display:block; font-size:1.6em; line-height:1.7; color:#000;}
	
.bline{ color:#007ACC; text-decoration:underline !important ;}	
.bline:hover{ color: #F36; }	

@media screen and (max-width: 1200px) {	
.in_bg .box .Left {
    width: 237px;
    margin-right: 40px;
}.in_bg .box .Right {
    float: right;
    width: calc(100% - 237px - 40px);
 }
}	
@media screen and (min-width: 991px) {
	.in_bg .box .Left #snavs{
		display:block !important;
		position:relative;}}
@media screen and (max-width: 990px) {
.in_bg{ margin-top:50px;}	
.in_bg .box .Left{ margin-bottom:40px;}	
.in_bg .box .Left, .in_bg .box .Right{
	width:100%;
 }	
.in_bg .box .Left h3{
	border-top:3px solid #45a976; 
	padding:20px 30px; 
	padding-top:35px; 
	font-size:4vmin; 
	z-index:2;  
	background: rgb(77,188,131); min-height: 0;
	background: -moz-linear-gradient(top,  rgba(77,188,131,1) 0%, rgba(92,192,213,1) 100%); 
	background: -webkit-linear-gradient(top,  rgba(77,188,131,1) 0%,rgba(92,192,213,1) 100%); 
	background: linear-gradient(to bottom,  rgba(77,188,131,1) 0%,rgba(92,192,213,1) 100%); 
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4dbc83', endColorstr='#2DA1B9',GradientType=0 );
}

.in_bg .box .Left h3:before{
	content: '';
    width: 70px;
    height: 66px;
    display: block;
    background: url(../images/snav-bitd-1.png) center bottom no-repeat;
    position: absolute;
    left: 8px;
    top: -36px;
    background-size: contain;
    z-index:3;}

.in_bg .box .Left #sm_btn{ 
	display: block; width:40px; height:40px; position:absolute; right:15px; top:30px;  
	font-size:0; background-image:url(../images/footer-plue-w.png); background-repeat:no-repeat; 
	background-position:center; background-size:contain; border-radius:50%; transition:all 0.4s;}
.in_bg .box .Left #sm_btn.open{ transform: rotate(45deg)}		 
.in_bg .box .Left #snavs, .in_bg .box .Left #snavs:after{ display:none}
.in_bg .box .Left #snavs{ padding-bottom:15px;}
.in_bg .box .Left #snavs > ul{ padding:0 20px;} 
.in_bg .box .Left{ margin-right:0; margin-bottom:0px;}
}
@media screen and (max-width: 768px) {
.in_bg{ margin-top:35px}	
.in_bg .box .Left h3{
	padding:30px 15px 15px 15px; position:relative;   }
.in_bg .box .Left #sm_btn{
	right:10px; top:20px;}
.in_bg .box .Left h3{
	 font-size:5vmin;   }	
.in_main h2 {
    font-size: 6vmin;
}	
.in_bg .box .Left h3:before {
    width: 65px;
    height: 59px;
    left: 8px;
    top: -35px;
	z-index:3
}	

.in_bg .box .Left #snavs > ul > li > a {
     padding:15px 0 15px 27px;}	
.in_bg .box .Left #snavs > ul > li > a:before {
    width: 22px;
    height: 22px;
    top: 13px;}

}

@media screen and (max-width: 500px) {
.in_bg .box .Left h3{
	 font-size:6vmin;   }	
.in_main h2 {
    font-size: 7.2vmin;
}	
}
.ri_nav{
	position:fixed;
	right:0;
	top:20%;
	z-index:100}
	
.ri_nav a{
	display:block;
	padding:6px 10px;
	margin-bottom:3px;
	background-color: rgba(0,0,0,0.5);
	color:#fff; font-weight:bold;
	text-decoration:none;
	font-size:1.4em;}
	
.ri_nav a.on{ background-color: rgba(0,0,0,0.8); color:#FF3}		
@media screen and (max-width: 1300px) {
.ri_nav{ display:none}	
	}

/* 共用區 */
/*--------------PAGE-----------------------*/
.comming_soon{
	margin:20px 0;
	color:#ccc;
	font-size:3em;
	font-weight:bold;
	text-align:center;}
	
/*login*/	

.login_box{
	background-color:#A5E0E4; 
	box-sizing:border-box;  
	position:relative; 
	border-radius:6px;
	margin-top:45px; 
	padding: 40px 0;
	/* background: linear-gradient(to top, #2DA1B9 65%, #328648 100%); */
}
	
.login_box.set2{ background:none; padding-bottom:10px} 
 
.login_box .log_bird{
	position:absolute; left:40px; top:-7px; z-index:1}
	

	
	
.login_box .ice_top{
	/* padding:0 30px 126px 237px; */
	/* background:#fff url(../images/login-bg-top-ice.png) left bottom no-repeat; */
	/* min-height:185px;  */
	width:100%; 
	height:auto; 
	background-size: contain; 
	box-sizing:border-box;
	padding: 0 80px 40px 80px;
}
		
.login_box .info{
	display:block; 
	z-index:2;  
	font-size:2em;
	font-weight: bold; 
	color:#fff;
	line-height:1.5;
}
	

	
.login_box	.info a{}	
	
.login_box .login_li{
	display:block; padding:0; list-style:none; margin:0; margin:0 auto; width:480px; max-width:85%}
	
.login_box .login_li li{
	display:block; border-radius:4px; background:#fff; margin-bottom:16px; height:50px; position:relative;}
.login_box .login_li li.last_btn{ height:auto; margin-top:30px;}	
.login_box .login_li li i{
	display:block; width:45px; height:50px; position:absolute; right:0; top:0; background-size:auto 17px !important;  } 
	
.login_box .login_li li.user_ico i{background:url(../images/ico-user.svg) center no-repeat;}


.login_box .login_li li.pwd_ico i{background: url(../images/login-pass-lock-ico.svg) center no-repeat;}

 
/*20221027 變更是否顯示密碼內容*/
.login_box .login_li li.pwd_ico i#eye{ cursor:pointer; background:url(../images/ico_eye1.png) center no-repeat;background-size:auto 20px !important;}		
.login_box .login_li li.pwd_ico i#eye.off{ cursor:pointer; background:url(../images/ico_eye2.png) center no-repeat;}
.login_box .login_li li.pwd_ico i#eye:hover{ background-color:#f1f1f1;}	
.login_box .login_li li.vc{
	background:none;}

.login_box .login_li li .vbx{
	display:block; height:50px; border-radius:4px; float:left; max-width:calc(100% - 235px); margin-right:8px; background:#fff; width:100%;}
	
.login_box .login_li li .vbx #vcode{
	width:calc(100% - 117px); max-width:100%;}
	
.login_box .login_li li	.vc_img, .step_txt dd .input_li > li .vc_img{ display:block; float:left; height:50px; width:110px; border-radius:4px; text-align:center;
	line-height:50px; margin-right:8px; float:left; padding:0; background:#fff;}
	
.login_box .login_li li #recycle,
.login_box .login_li li #voice,
.step_txt dd .input_li > li #recycle,
.step_txt dd .input_li > li #voice {
	display:block; float:left; width:50px; height:50px; border:0; border-radius:4px; background-color:#3b3f59;
	background-image:url(../images/recycle-ico.svg); background-position:center; background-repeat:no-repeat;
	cursor:pointer;}
.login_box .login_li li #voice,
.step_txt dd .input_li > li #voice { 
	background-image:url(../images/voice-ico.svg);
	margin-left:8px; 
}
	
.login_box .login_li li #recycle:hover,    .login_box .login_li li #recycle:focus,
.login_box .login_li li #voice:hover,      .login_box .login_li li #voice:focus, 
.login_box .login_li li .login_btn:hover,  .login_box .login_li li .login_btn:focus,
.step_txt dd .input_li > li #recycle:hover,.step_txt dd .input_li > li #recycle:focus,
.step_txt dd .input_li > li #voice:hover,  .step_txt dd .input_li > li #voice:focus{
	background-color:#203864; cursor:pointer;
}						

.input_li .v_code .input_txt{ width:120px !important; margin-right:5px !important;}


.input_li .v_code .vc_img{ box-sizing:border-box; border:1px solid #e5e5e5;}
.input_li .v_code .vc_img:hover{ outline:1px solid #000;}

@media screen and (max-width: 500px) {
.input_li .v_code .vc_img, .input_li .v_code .input_txt{ height:40px !important; line-height:40px !important;}
.input_li .v_code .vc_img{width: auto !important;}
.input_li .v_code .vc_img img{ width: auto !important;
    display: block;
    vertical-align: middle;
    height: 38px;}
.step_txt dd .input_li > li #recycle {
    width: 40px; height: 40px;}	
}

	
.login_box .login_li li label{
	display:block; height:50px; padding:0 20px; width:107px; box-sizing:border-box; line-height:50px;
	font-size:1.6em; color:#000; padding-right:0; float:left; font-weight:bold; }
	
.login_box .login_li li input{
	display:block; width:100%; max-width:calc(100% - 110px - 45px); height:50px; line-height:50px; box-sizing:border-box; 
	box-sizing:border-box; padding:0; border:0; float:left; outline:none; font-size:1.5em;  }	
	
.login_box .login_li li .login_btn{
	display:inline-block; border:0; height:56px; color:#fff; background-color:#3b3f59; font-size:2em;
	line-height:56px; text-align:center; padding:0 27px 0 60px; background-image:url(../images/login-btn-ico.png);
	background-repeat:no-repeat; background-position:27px center; border-radius:30px; }	


.login_box .login_li li .s_txt{ width:100%; padding:10px 0; float:left; text-align: left; margin-bottom:30px }

.login_box .login_li li .s_txt a{ display: inline-block; font-size:1.35em; line-height:14px; height:14px; color:#3b3f59; margin-right:10px; padding-right:10px; text-decoration:none; padding-left:17px; background-position: left center; background-repeat:no-repeat; background-size:auto 14px; float:none}
.login_box .login_li li .s_txt a:last-child{ border-right:0; padding-right:0}
.login_box .login_li li .s_txt a.ic_join{ background-image:url(../images/login-join-ico.svg);} 
.login_box .login_li li .s_txt a.ic_gorget{ background-image: url(../images/login-forget-ico.svg);}
.login_box .login_li li .s_txt a:hover, .login_box .login_li li .s_txt a:focus{ color:#000; text-decoration:underline} 
@media screen and (max-width: 1368px) {
.login_box .log_bird{ width:120px; left: 19px; top: 15px;}	

 	}		
@media screen and (max-width: 1064px) {
.login_box .log_bird{ display:none;}
	
}

@media screen and (max-width: 700px) {
.login_box .ice_top {
	padding: 0 40px 40px 40px;
}	
	}
	

	
@media screen and (max-width: 480px) {
.login_box{ margin-top:30PX;}	
.login_box .login_li li .vbx{ max-width:100%; margin-bottom:16px;}
.login_box .login_li li .vc_img {
    width: calc(100% - 60px);}
.login_box .login_li li.vc.vh{ height:auto}	

	}
	
	
/*----------Join 會員註冊區---------*/

/*steps 進度*/
.join_steps{ display:block; list-style:none; padding:0; margin-bottom:38px; padding-top:8px; }
			
.join_steps li{ display:block; width:33.3%; float:left; text-align:center; position:relative;}

.join_steps li:after{
	    content: '';
    display: block;
    width: calc(100% - 158px);
    height: 5px;
    position: absolute;
    left: calc(50% + 78px);
    top: 28px;
    background: #bbb;
	}

.join_steps li:last-child:after{ display:none}

.join_steps li i{
	display:inline-block; box-sizing:border-box; width:50px; height:50px; border:5px solid #888888; border-radius:50%; background-repeat:no-repeat;
	text-align:center; line-height:40px; font-style:normal; font-size:2.4em; color:#fff; background-color:#888888; background-position:center;}

.join_steps li.on i{border:5px solid #2DA1B9; color:#2DA1B9; background-color:#fff;}
.join_steps li.on.ok i{ background-color:#2DA1B9; font-size:0; background-image:url(../images/step_ok_v.png);}	
.join_steps li.on.ok:after{ background-color:#2DA1B9}		
.join_steps li strong{
	display:block; font-size:1.8em; color:#888888; margin-top:7px;}	
	
.join_steps li.on strong{ color:#2DA1B9}	
.cjk_list{display:block; margin:10px 0; list-style:cjk-ideographic; box-sizing:border-box;}	

.step_txt p{margin-bottom:10px;}
.step_txt p, .step_txt .cjk_list li{ font-size:1.8em; color:#000; line-height:1.75; margin-left:28px;}	
.step_txt .cjk_list li{ margin-left:3.8em;}

.step_txt dt{ background-color:#e6e6e6; padding:15px 25px; border-left:4px solid #bcbcbc}

.step_txt dt .L_Rname{ float:left; display:flex}

.step_txt dt .L_Rname label{
	padding:13px; box-sizing:border-box; font-size:2em; color:#fff; line-height:1; background-color:#747474;
	}
	
.step_txt dt .L_Rname input{ border:0; padding:0 13px; box-sizing:border-box; font-size:2em; max-width:160px;}	
.step_txt dt .D_Right{ float:right; margin-top:33px; font-size:1.4em; color:#4f4f4f;}

.step_txt dt.blue_tit{background:#2DA1B9; color:#fff; font-size:2.4em; padding:25px; line-height:1; 
	box-sizing:border-box; border-left:4px solid #6890ac}	

/*智能檢點用*/	
.step_txt dd{ padding:38px 25px; box-sizing:border-box; background:#f4f4f4; border-left:4px solid #bcbcbc;
	background: linear-gradient(-45deg, transparent 20px, #f4f4f4 0); }	
	
.step_txt dd.yellow{background:#c1eae9;}	



.step_txt dd h5{ font-size:2.2em; font-weight:bold; display:block; color:#cd3741; padding-left:28px; 
	background:url(../images/join-tit-reddot.png) left 3.5px no-repeat; line-height:1.3; margin-bottom:15px; 
	margin-top:38px;}	
	
.step_txt dd h5:first-child{ margin-top:0;}
	
	
.step_txt dd .checkr input[type=checkbox]{
	    -webkit-appearance: checkbox;
		vertical-align:middle;
		margin-right:4px;
		width:21px; height:21px;
		border:2px solid #a0a0a0;
		margin-top:-2px;
	}	
.step_txt dd .checkr{
	display:block;
	margin-top:40px;
	padding-top:25px;
	border-top:1px dashed #bdbdbd}	
.step_txt dd .checkr .agree_txt{ font-size:1.8em; font-weight:bold; cursor:pointer; color:#333;}	
.step_txt dd .checkr .agree_txt:hover{ color:#4697ce; margin-bottom:14px;}	
.step_txt dd .checkr .red{ color:#cd3741; display:block; margin:10px 0;}	
	
.btns .btn{
	display:inline-block; height:56px; line-height:56px; color:#fff; font-weight:bold; font-size:2em; padding:0 26px 0 60px; vertical-align:middle;
	background-position:27px center; background-repeat:no-repeat; background-size:25px; cursor:pointer; border:0; margin:8px; border-radius:29px; text-decoration:none;}

.btns .btn.sumit{background-image:url(../images/VVV.svg); background-color:#cd3741;}		
.btns .btn.sumit:hover{background-image:url(../images/VVV.svg); background-color:#95383d;}	
.btns .btn.reset{background-image: url(../images/XXX.svg); background-color:#666;}	
.btns .btn.reset:hover{background-image: url(../images/XXX.svg); background-color:#333;}

.btns .btn.sumit.i_resent{background-image: url(../images/ico-btn-resent.png);}
.btns .btn.reset.i_home{background-image: url(../images/ico-btn-home.png) ; }
/* -----------  STEP2 ------------- */
.step_txt dd .input_li{ list-style:none;  padding:0; margin:20px 0; }

.step_txt dd .input_li > li{ display:block; margin-bottom:15px;  }

.step_txt dd .input_li > li strong{ 
	display:block; float:left; width:165px; font-size:1.9em; font-weight:bold; line-height:50px; padding-left:57px; box-sizing:border-box; position:relative;
	vertical-align:middle; height:50px;}
	
 
.step_txt dd .star{ display:inline-block; width:17px; height:17px; background:url(../images/ico-red-star.png) center no-repeat; background-size:contain;}

.step_txt dd .input_li >  li strong .star{
	display:block; position:absolute;
	left:30px; top:50%; transform:translate(0,-50%);}	

.step_txt dd .input_li >  li .input_txt{
	font-size:1.6em; height:50px; line-height:50px; box-sizing:border-box; border:1px solid #e5e5e5; 
	border-radius:4px; width:44%; max-width:400px; float:left; padding:0 10px;}
	
.step_txt dd .input_li >  li textarea.input_txt{ min-height:200px; font-size:2.2em}	
	
	
.step_txt dd .input_li > li .input_txt.full{ width:calc(100% - 165px); max-width:100%;}	
	
.step_txt dd .input_li >  li .input_txt:focus{
	background-color:#ffff99; box-shadow:0 0 10px rgba(0,0,0,0.2)}
.step_txt dd .input_li >  li .ps_red{
	width:calc(66% - 256px);  box-sizing:border-box; line-height:1.2; color:#cd3741; font-size:1.6em; float:left; display:block; min-height:50px; position:relative; padding-left:15px; padding-top:10px;}
.step_txt dd .input_li >  li .ps_red a{ text-decoration:underline !important;}	
.step_txt dd .input_li >  li .ps_red.other{float:none; display:inline-block; vertical-align:middle; width: calc(100% - 405px);}	
	
.step_txt dd .input_li >  li .ps_red.full{
	width:100%; padding-left:165px;}	
/*.step_txt dd .input_li >  li .ps_red .v_center{ position:absolute; top:50%; transform:translate(0,-50%); display:block;  }	
*/

/*fieldset legend*/	
fieldset legend {
    position: fixed;
    width: 1px;
    height: 1px;
    color: #333;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}
/*radio checkbox*/			
 .group {
	margin:0;
  width: calc(100% - 165px);
  display:block; float:left;
}

.radio-group {
  width: auto;
  display: inline-block; margin-right:25px; line-height:50px;
 }
.radio-group.full{ width:100%;} 
.radio-input {
  /*visibility: hidden;*/
  position:absolute; /* 把原本的input藏起來 */
  width:25px; height:25px;
}
.radio-input.mt15{
  margin-top:15px;
}
.radio-label {
  font-size: 1.9em;
  cursor: pointer;
  position: relative;
   
}

.step_txt dd .red{ color:#cd3741;}

.radio-button {
  /* 自定義樣式的span */
  height: 30px;
  width: 30px;
  border: 1px solid #cdcdcd; margin-top:-2.5px;
  border-radius: 50%;
  display: inline-block; vertical-align:middle;
  margin-right:5px; position:relative; box-sizing:border-box;
  background-color:rgba(255,255,255,0.5)
}

.checkbox .radio-button{
	border-radius:2px;}

.radio-button::after { /* 中間點點 */
  content: "";
  display: block;
  height: 60%;
  width: 60%;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color:#000;
  opacity: 0;
  transition: opacity 0.2s;
}

.checkbox .radio-button::after{
	height: 30%; width: 60%;
	transform: translate(-48%, -69%) rotate(-45deg);
	background-color: transparent !important; border-left:4px solid #333; border-bottom: 4px solid #333;
	border-radius:0;
	}
.radio-input:checked ~ .radio-label .radio-button{ background-color:#fff;}


.radio-input:hover ~ .radio-label .radio-button{ background-color:#ffff99;}
.radio-input:checked ~ .radio-label .radio-button::after {
  /* 選中radio時 才顯示中間點點 */
  opacity: 1;
}
 
.step_txt dd .input_li > li .input_txt.uline_txt{ display:inline-block; box-sizing:border-box;  padding:0 10px; max-width:calc(100% - 96px); margin-left:10px; float:none; width: 100%; margin-left: 8px; }


.step_txt dd .un_mag{ margin: 0 !important; height:46px; vertical-align:middle; margin-left:5px; }
.step_txt dd p.un_mag{ height:auto;}
hr.dash{
	display:block; width:100%; margin:20px 0; border-top:1px dashed #bdbdbd;}
	
.step_txt dd .blue_dot_tit{
	display:block; line-height:1; padding:14px 42px 14px 41px; box-sizing:border-box; background-color:#fff;
	position:relative; font-size:2em; border-radius:9px; font-weight:bold; background-repeat:no-repeat; 
	background-image:url(../images/join-list-tit-ico-v.png); background-position:calc(100% - 15px) center;
	margin-left:20px; color:#000; margin-top:35px !important;}

.blue_dot_tit i{
	display:block; width:50px; height:50px; border-radius:50%; background-color:#2DA1B9; position:absolute; left:-18px; top:50%; margin-top:-25px; background-position: center; background-repeat:no-repeat; background-size:auto;}

.blue_dot_tit i.ico_lock{ background-image: url(../images/ico-lock-w.png);}
.blue_dot_tit i.ico_write{ background-image: url(../images/ico-basdata-w.png);}

@media screen and (max-width: 1110px) {
.step_txt dd .input_li >  li .ps_red{
	width:100%; padding-left:165px !important; box-sizing:border-box;}	
.step_txt dd .input_li >  li .input_txt{
	width: calc(100% - 165px); max-width:calc(100% - 165px)}	}


@media screen and (max-width: 500px) {
.step_txt dd .input_li > li .input_txt.full{ width:100%; }		
.step_txt dd .input_li > li strong, .step_txt dd .input_li .group, .step_txt dd .input_li > li .input_txt{
	width:100%; max-width:100%;}
.step_txt dd .input_li > li .input_txt{ margin-bottom:10px;}	
.step_txt dd .input_li > li .ps_red{ padding-left:0 !important; height:auto; min-height:0; margin-bottom:10px;}
.step_txt dd .input_li > li .ps_red .v_center{ position:relative; transform:none; top:auto;}	
.step_txt dd .input_li > li strong {
    line-height: 1.5;
    padding-left: 25px;
    height: auto;
    margin-bottom: 5px;
	font-size:1.7em;
}
.step_txt dd .input_li > li strong .star {
    display: block;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translate(0,-60%);
}
.step_txt p{ margin-left:0; }
.step_txt dd .input_li > li{ border-bottom:1px dotted #ccc; padding-bottom:10px;}	

.radio-group{ margin-right:10px;}
.radio-label{ font-size:1.5em;}
.radio-button { width: 22px; height: 22px; margin-top: -5px; margin-right: 2px;}

.join_steps li strong{ font-size:1.5em;}
.step_txt p, .step_txt .cjk_list li {font-size: 1.6em;}

.step_txt .cjk_list li{ margin-left:2em;}
.step_txt dd .input_li > li .input_txt {
    font-size: 1.5em; height: 40px; line-height: 40px;}
	
.btns .btn{
    height: 44px;
    line-height: 44px;
    font-size: 1.7em;
    padding: 0px 20px 0 50px;
    background-position: 18px center;
    border-radius: 22px;}
	
.step_txt dd .input_li > li .ps_red{ font-size:1.4em;}		
	
	}
	
/*---------- Step3 ---------*/	
.join_ok_ico{ margin-bottom:30px;}	


/*紀錄表 record_smart_tb */
.step_txt dd.yellow.alert_bird{ 
	position:relative; padding-left:13%; background-image:url(../images/smart-alert-bird.png); background-repeat:no-repeat;
	background-position:20px 30px; background-size:calc(13% - 35px)}
 
@media screen and (max-width: 1200px) {
.step_txt dd.yellow.alert_bird{ 
	padding-left:100px; background-position:15px 30px; background-size:calc(90px - 20px)}	
	
}
.step_txt dd.yellow .L_tit{ font-size:2.4em; color:#000; padding-bottom:10px; border-bottom:2px solid #ababab;  display:block;}
 
.record_smart_tb{ width:100%;}
.record_smart_tb th{ color:#fff; background-color:#2DA1B9; text-align:center; font-size:1.8em; font-weight:bold; padding:20px 4px; vertical-align:middle}
.record_smart_tb td{ border-bottom:1px dashed #74afb9; padding:15px 4px; font-size:1.7em; color:#000; text-align:center; vertical-align:middle}
.record_smart_tb tr:last-child td{border-bottom:1px solid #74afb9}

.record_smart_tb tr:nth-child(odd) td{ background-color:#f5f5f5}

.record_smart_tb .blue{ color:#007ACC;}

.record_smart_tb a.mo_btn{ 
	display:inline-block; float:right; text-decoration:none; color:#fff; padding:8px 24px; line-height:1; 
	border-radius:45px; background-color:#4697ce; font-size:16px; position:relative; padding-right:34px;}

.record_smart_tb a.mo_btn:after{ 
	width:10px; height:10px; border-top:2px solid #fff; border-right:2px solid #fff; position:absolute;
	right:0; top:50%; transform:translate(-20px,-50%) rotate(45deg); content:'';}

.record_smart_tb a.mo_btn:hover{ background-color:#333;}

.smart_inputs .Qs_list{ display:block; list-style:none; padding:0}

.smart_inputs .Qs_list li{ display:block; padding:10px 0;  box-sizing:border-box; border-bottom:1px dashed #ababab;}

.smart_inputs .Qs_list.last_check li{ border:0; padding:15px; border:1px  dashed #cd3741; border-radius:5px; margin-top:30px; color:#000; background-color:rgba(255,255,255,0.5)}
.smart_inputs .Qs_list.last_check li:hover{background-color:rgba(255,255,255,1)}
.smart_inputs .Qs_list.last_check li .hid_sa{ background:none; padding-left:0; display:block; color:#C36}
.smart_inputs .Qs_list.last_check li .radio-group { width:100%;}
.smart_inputs .Qs_list li:hover{ background-color:rgba(255,255,255,0.5)}
.smart_inputs .yellow  .Qs_list li:hover{ background-color:rgba(255,255,255,0.2)}
.smart_inputs .Qs_list.last_check li .group .radio-button{ border-color:#cd3741}
.smart_inputs .Qs_list.last_check li .checkbox .radio-button::after {
    border-left: 3px solid #cd3741;
    border-bottom: 3px solid #cd3741;
}

.smart_inputs .Qs_list li .hid_sa{ 
	display:none; font-size:1.4em; color:#3496B7; padding-left:16px; background:url(../images/ico-money.png) left 3px no-repeat; background-size:14px;line-height:1.2; padding-top:2px;   }
	
.smart_inputs .Qs_list li:hover .hid_sa,
.smart_inputs .Qs_list li:has(input:focus) .hid_sa{ display: block; }

.smart_inputs .Qs_list li .Q_li > strong{ color: #494949; display: inline-block; width: calc(100% - 77px); vertical-align: top; line-height: 1.3; margin-top:6px;}
.smart_inputs .Qs_list li:hover .Q_li > strong{ color: #000;}
.smart_inputs .Qs_list li .Q_li i{ 
	display:inline-block; width:30px; height:30px; line-height:30px; color:#fff; background-color:#cd3741; text-align:center;  font-style:normal;
	border-radius:50%; margin:0 6px; vertical-align:top; margin-top:2px; font-size:1.9em; font-weight:bold;}


.smart_inputs .Qs_list li .group{ width:100%; float:none;}

.smart_inputs .Qs_list li .group .radio-button{ border:2px solid #bcbcbc; background-color:#fff; vertical-align:top; margin-top:1px;}

.smart_inputs .Qs_list li  .checkbox .radio-button::after {/*變更打勾樣式*/
    height: 26%; width: 50%;
    border-left: 3px solid #666;
    border-bottom: 3px solid #666;
 }

.smart_inputs .Qs_list li .radio-group{ margin-right:0; line-height:normal;}

.smart_inputs .Qs_list li .radio-label{ font-size:1.6em;}

.smart_inputs dd.yellow  .Qs_list li .radio-label{ font-size:1.8em;}

.smart_inputs dd .bird_tit.blue_dot_tit{ margin:0 0 20px 10px !important; padding: 10px 42px 10px 41px; border-radius:22px; margin-top:40px !important;}

.smart_inputs dd .bird_tit.blue_dot_tit:first-child{ margin-top:0 !important;}

.smart_inputs dd .bird_tit.blue_dot_tit i{ background-image:url(../images/smart-alert-bird-small.png); background-color:transparent; background-size:contain;}

/*------------smart 智能試算--------------*/
.smart_infos{ margin-bottom:35px;}
.smart_infos .L_img{ display:block; width:184PX; height:184PX; float:left; margin-right:20px; margin-bottom:10px; background:url(../images/smart-idea-img.png) center no-repeat; background-size:cover; max-width:100%;}
.smart_infos {   font-size:1.7em; line-height:1.7;}
.smart_infos p{ display:block; margin-bottom:12px;} 
.visited{ font-size:1.6em; margin-bottom:30px; color:#666;}
.smart_inputs .rit_tit{
	display:block; margin-bottom:22px; font-size:2.4em; line-height:40px; padding-left:50px; background:url(../images/ico-tit-write.png) left center no-repeat; background-size:40px;}
	
.basic_input{ display:block; list-style:none;}	
.basic_input li{ display:block; margin-bottom:11px; background:#fff;}

.basic_input li .label{ display:block; float:left; width:156px; height:50px; line-height:50px; padding:0 15px; text-align:center; color:#fff; font-size:2em; font-weight:bold; background-color:#747474; box-sizing:border-box;}
.basic_input li .label.must{ background-color:#cd3741;}
.basic_input li input.txt{ border:0; box-sizing:border-box; line-height:50px; float:left; height:50px; padding:0 15px; font-size:1.6em; color:#666; 
	width:calc(100% - 156px - 110px)}
.basic_input li .R_if_txt{ float:right; width:110px; box-sizing:border-box; height:50px; line-height:50px; padding:0 10px; font-size:1.6em; color:#000;}	
.basic_input li .R_if_txt a.if_link{ display:inline-block; vertical-align:middle; width:27px; height:27px; background:url(../images/ico-info.png) center no-repeat; background-size:26px; margin-left:4px; margin-top:-4px;}
.basic_input li .R_if_txt a.if_link:hover{background:url(../images/ico-info-on.png) center no-repeat;background-size:26px;}	
.basic_input li input.txt:focus{ color:#cd3741; font-weight:bold;}
.basic_input li input.txt.full{ width:calc(100% - 156px)}
.basic_input li .group{ margin-left:15px; width:auto;}
.basic_input li .radio-group{ line-height:48px; margin-right:10px; }

.smart_inputs dt .ps_TXT{
	font-size:1.6em; padding:2px 0 0 32px; background:url(../images/ico-info.png) left top no-repeat; background-size:26px; line-height:1.5; min-height:30px;
	margin:15px 0}
	
.smart_inputs dt .ps_TXT a{ text-decoration:underline}	
	
.smart_inputs dd .alert_ifo{
	font-size:1.6em; padding-left:35px; padding-top:0px; padding-bottom:6px; background:url(../images/ico-imp.png) left top no-repeat; background-size:27px; margin-top:36px; line-height:1.5;
	}
	
/*試算結果*/	
.calc_box { margin-top:60px;}

.calc_box dt{
	display:block; width:100%; height:auto; min-height:92px; box-sizing:border-box; padding:0px 130px 90px 82px; position:relative; z-index:2}
.calc_box dt strong{
	display:block; font-size:2.8em;}	
.calc_box dt:before{
	content:''; display:block; width:66px; height:118px; background:url(../images/calc-light-img.png) center top no-repeat; background-size:contain; position:absolute;
	z-index:2; left:0; top:-20px;}	
	
.calc_box dd{
	display:block; width:100%; box-sizing:border-box; padding:73px 0px; 
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#8ed4e2+0,4cc79c+100 */
background: rgb(142,212,226); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(142,212,226,1) 0%, rgba(76,199,156,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  rgba(142,212,226,1) 0%,rgba(76,199,156,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  rgba(142,212,226,1) 0%,rgba(76,199,156,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8ed4e2', endColorstr='#4cc79c',GradientType=0 ); /* IE6-9 */
	position:relative; margin-top:-90px;
}

.calc_box dd:before{
	content:''; display:block; width:100%; height:150px; position:absolute; left:0; top:-33px;
	background:url(../images/calc-top-img.png) right top no-repeat; background-size:101% auto ;}
	
.calc_box dd:after{
	content:''; display:block; width:100%; height:50px; position:absolute; 
	left:0; bottom:-1px; background:url(../images/calc-bottom-img.png) center bottom no-repeat;
	background-size:101% auto;}

.calc_list { list-style:none ; display: flex; text-align:center; justify-content: center; flex-wrap: wrap}
.calc_list li{ display: inline-block; margin:10px 8px; position:relative; margin-top:50px; }

.calc_list li .gbox{border:3px solid #4caf50; border-radius:30px; background-color:#fff; padding:22px 10px; padding-bottom:13px; z-index:1; position:relative; height:100%; box-sizing:border-box}
.calc_list li .gbox strong{
	display:block; font-size:1.8em; margin-bottom:13px;}
	
.calc_list li .gbox span{ font-size:1.7em;}	

.calc_list li .gbox small{ font-size:65%; color:#999; padding-top:6px;}
	
.calc_list li:before{ content:''; display:block; width:56px; height:56px; position:absolute;
	z-index:0; left:50%; bottom:100%; transform:translate(-50%,7px); background-position:center bottom; background-repeat:no-repeat; background-size:auto; background-image:url(../images/bean-1.png);}
.calc_list li:after{ display:block; content:''; width:17px; height:21px; position:absolute; right:-16px; top: calc(50% - 10.5px); background:url(../images/calc-div.png)}	
.calc_list li:nth-child(2):before{background-image:url(../images/bean-2.png);}
.calc_list li:nth-child(3):before{background-image:url(../images/bean-3.png);}
.calc_list li:nth-child(3):after{ display: none;}
/*計數器*/	
.calc_list li .numbers{ display: flex; justify-content: center; margin-bottom:13px;}
.calc_list li .numbers i{ 
	display: block; font-style:normal; font-family:impact; font-size:5.5em; color:#fbb03b;
	text-align:center; padding:5px 3px; line-height:1; background-color:#000; box-sizing:border-box; border:1px solid #b3b3b3; border-radius:6px; position:relative;}
	
.calc_list li .numbers i:before, .calc_list li .numbers i:after{
	display:block; content:''; height:46%; position:absolute; left:0; width:100%; z-index:2; 
	top:0;
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffffff+0,ffffff+100&0.3+0,0+100 */
background: -moz-linear-gradient(top,  rgba(255,255,255,0.3) 0%, rgba(255,255,255,0) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  rgba(255,255,255,0.3) 0%,rgba(255,255,255,0) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  rgba(255,255,255,0.3) 0%,rgba(255,255,255,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4dffffff', endColorstr='#00ffffff',GradientType=0 ); /* IE6-9 */}	
   
.calc_list li .numbers i:after{
	top:50%; border-top:1px solid #000;} 

.alert_ps{ 
	font-size:1.7em; line-height:1.6; font-weight:bold; padding-left:55px; 
	padding-top:7px; background:url(../images/alert.png) left top no-repeat;
	margin-top:15px;}
		
@media screen and (max-width: 1200px) {
.calc_list li .numbers i{
	font-size: 4.5em;}	
	
		}
@media screen and (max-width: 768px) {
	
.basic_input li .label{ width:130px}	
.basic_input li input.txt{ width:calc(100% - 130px - 110px)}	
.basic_input li input.txt.full{ width:calc(100% - 130px)}	
.basic_input li .label{ font-size:1.75em;}	
.smart_inputs .Qs_list li .hid_sa{
	display:block;}	

.calc_box dt{padding:0px 96px 106px 58px;}
.t_hide{ display:none;}	
.calc_box dt strong{
	font-size:4.5vmin; padding-bottom:0px;}
.calc_box dt:before{
	width:50px; height:70px;top:-13px;}	
			
	}	
@media screen and (max-width: 566px) {
.calc_list li:nth-child(1){	margin-top:0;}
.calc_list li:nth-child(2){	margin-top:25px;}
.calc_list li:after{ display:none;}	
	}	
@media screen and (max-width: 500px) {
 .smart_inputs .Qs_list li .group .radio-button{ margin-top:5px; margin-right:6px;}
.smart_inputs .Qs_list li .Q_li i{ display:none;}
.basic_input li .label {font-size: 1.65em; padding: 0 10px;width: 88px;}
.basic_input li input.txt {  width: calc(100% - 58px - 88px);;padding-right: 0; font-size: 1.4em;}
.basic_input li input.txt.full {width: calc(100% - 88px);} 
.basic_input li .R_if_txt a.if_link{ display:none;}
.smart_inputs .Qs_list li .Q_li > strong {width: calc(100% - 28px);}
.smart_inputs .Qs_list li .hid_sa{ margin-top:6px;}
.step_txt dd.yellow.alert_bird{ padding:25px; padding-top: 93px; background-position: center 18px;}
.step_txt dd.yellow .L_tit{ text-align:center;}
.basic_input li .R_if_txt{ width:58px; font-size:1.4em;}
.smart_inputs .rit_tit {margin-bottom: 10px; padding-top:5px; font-size: 1.8em; padding-left: 34px; background-size: 28px;}
.smart_inputs dt .ps_TXT {
    font-size: 1.4em;
    padding: 0px 0 0 20px;
    background: url(../images/ico-info.png) left 3px no-repeat;
    background-size: 16px;
 }
}
@media screen and (max-width: 420px) {
.record_smart_tb td{ font-size:1.5em}	
.record_smart_tb th{ font-size:1.65em}	
.calc_list li .numbers i{ font-size:4em; }

.calc_list li .gbox{ padding:20px 15px;}

 .calc_box dt strong {
    font-size: 5vmin;
    padding-bottom: 7px;
 }
.calc_box dt {
    padding: 0px 31px 137px 58px;
}

.calc_box dd:before {
     height: 117px;
    background-size: 188% auto;
}
}

/*成果案例*/

.fir_ifos{
	font-size:1.7em; line-height:1.7;   }	
	
	
/*Webservice*/
/*-------sitemap info--------*/
.box .Right .info {
	width:100%;
	color:#333;
	font-size:1.7em;
	line-height:165%;
	margin:30px auto 0 auto;		
}
.box .Right .info .color-red {
	color:#cd3741;
}
.box .Right .info p {
	text-align:justify;
	margin:15px 0;
}
.box .Right .info ul {
	list-style:none;	
	margin:10px 0; 
	padding:0px;
}
.box .Right .info ul li {
	margin:10px 0 10px 1.5em;
}
/*-------sitemap--------*/
.box .Right ul.sitemap{
	display:block;
	list-style:none;
	display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
	width:calc(100% + 20px);
	margin-left:-10px;
	margin-right:-10px;
	 margin-top:15px;}
	
.box .Right ul.sitemap > li{
	display:block;
	float:left;
	width:calc(25% - 20px);
	box-sizing:border-box;
	margin:10px;
	background-color:#fff;}	
	
.box .Right ul.sitemap > li > a{
	display:block;
	padding:10px;
	box-sizing:border-box;
	background-color:#268092;
	color:#fff;
	font-size:2em;
	font-weight:bold;}
	
.box .Right ul.sitemap > li > a:hover, 
.box .Right ul.sitemap > li > a:focus{
	background-color:#666
}

.box .Right ul.sitemap > li > ul{
	display:block;
	list-style:none;}
	
.box .Right ul.sitemap > li > ul > li{
	display:block;}	
		
.box .Right ul.sitemap > li > ul > li > a{
	display:block;
	padding:10px;
	box-sizing:border-box;
	border-bottom:1px dashed #ccc;
	font-size:1.5em;
	color:#666;
	line-height:1.33;
	}
	
.box .Right ul.sitemap > li > ul > li.lv2 > a{
	padding-right:25px;
	position:relative;}	
	
.box .Right ul.sitemap > li > ul > li.lv2 > a:after{
	content:'+';
	display:block;
	width:20px; height:20px;
	color:#ccc;
	font-size:1.5em;
	line-height:15px;
	text-align:center;
	position:absolute;
	right:3px;
	top:50%;
	margin-top:-10px;
	z-index:2;
	transition:all 0.4s}	
	
.box .Right ul.sitemap > li > ul > li.lv2 > a.open:after{
	transform:rotate(45deg);
	color:#333;}	
.box .Right ul.sitemap > li > ul > li.lv2 > a:hover:after, 
.box .Right ul.sitemap > li > ul > li.lv2 > a:focus:after{
	color:#333;}	
.box .Right ul.sitemap > li > ul > li > a:hover, 
.box .Right ul.sitemap > li > ul > li > a:focus,
.box .Right ul.sitemap > li > ul > li.lv2 > a.open{
	background-color:#def2f7;
	color:#333;
	font-weight:bold;}
	
.box .Right ul.sitemap > li > ul > li.lv2 > ul{
	box-sizing:border-box;
 	display:block;}
	
.box .Right ul.sitemap > li > ul > li.lv2 > ul li{
	display:block;}	
	
.box .Right ul.sitemap > li > ul > li.lv2 > ul li a{
	display:block;
	border-bottom:1px dashed #ccc;
	font-size:1.45em;
	padding:10px;
	color:#666;
	background-color:#f1f1f1;
	}
	
.box .Right ul.sitemap > li > ul > li.lv2 > ul li a:hover,
.box .Right ul.sitemap > li > ul > li.lv2 > ul li a:focus{
	background-color:#666;
	color:#fff;}		
			
	
@media only screen and (max-width: 950px) {
.box .Right ul.sitemap > li{
	width:calc(33.3% - 20px);}	
	}
	
@media only screen and (max-width: 768px) {
.box .Right ul.sitemap > li{
	width:calc(50% - 20px);}	
	}			
@media only screen and (max-width: 420px) {
.box .Right ul.sitemap > li{
	width:calc(100% - 20px);}	
	
}

.articleBox.contacts .c_tit{
	font-size:1.2em; font-weight:bold; color:#066; display:block; margin-bottom:15px}
.articleBox.contacts ul{ padding-left:0.8em}
.articleBox.contacts ul li::marker{content:'⍟'; color:#099; transform:translateX(-5px)}		
.articleBox.contacts ul li	strong{color:#099}
.articleBox.contacts ul li{ padding-left:8px;}

.service_txt .stit{
	color:#008571; font-weight:bold;}
	
.step_txt .t_hide{ color:#999}