@charset "utf-8";
/* CSS Document */


/*首頁*/
.container-fluid{
	padding: 0;
	margin-top: 70px;
	/*background: rgba(182,229,166,1);*/
	overflow: hidden;
}
.container-fluid footer{ margin-top: 0;}

/*nav*/
.navbar {
    background-color: #ffffff;
	box-shadow: 0 0 8px 0 rgba(0,0,0,.1);
	height: 70px;
	padding-left: calc(50% - 450px);
	padding-right: calc(50% - 450px);
}
.navbar.fixed-top{
	z-index: 999999;
}
.navbar-brand{
	height:100%;
	display:flex;
	align-items: center;
	justify-content:flex-start;
	padding: 0;
}
.navbar-brand::before{
	content:'';
	width: 180px;
	height: 100%;
	background: url(../images/logo-name.png) left center no-repeat;
	background-size: auto 90%;
	/* 局方反應IE 舊版本會跑版 */
	display: inline;
}
.navbar-toggler {
    position: absolute;
	right:10px;
	top:10px;
	padding: 0 5px;
    font-size: 1.4rem;
}
.navbar-toggler-icon{
	background-image:url(../images/navbar-toggler-icon.svg);
}
/*navbar  overlay*/
.container-fluid::before{
    display: none;
	content:'' ;
	position: fixed;
	top:0;
	bottom:0;
	left:0;
	right:0;
	z-index: 99999;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, .5);
    transition: all 0.5s ease-in-out;
}
.container-fluid.overlay::before{
    display: block;
}
/*第2層（下拉）選單*/
.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    display: none;
    float: left;
    min-width: 8rem;
    padding: 0;
    margin: 0.125rem 0 0;
    font-size: 1rem;
    color: #FFFFFF;
    text-align: left;
    list-style: none;
    background-color: #4BBE7B;
    background-clip: padding-box;
    border: 0px solid #ffffff;
    border-radius: 0.5rem;
}
.dropdown-item{
	border-bottom: 1px rgba(255,255,255,0.5) solid;
	padding: 0.8rem 1.5rem 0.8rem 1.7rem;
	color: #FFFFFF;
	position: relative;
}
.dropdown-item:last-child{
	border-bottom: none;
}
.dropdown-item:hover,.dropdown-item:active,.dropdown-item:visited,.dropdown-item:focus{
	background: none;
	color: #FFFFFF;
}
.dropdown-item:hover::before{
	content: '';
	position: absolute;
	top:calc(50% - 0.3rem);
	left: 15px;
	display: block;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 6px 0 6px 8px;
	border-color: transparent transparent transparent rgba(255,255,255,.5);
}

/*navbar 電腦+平板*/
@media (min-width: 992px){
	.navbar-expand-lg .navbar-collapse{
		justify-content: flex-end;
	}
	.navbar-expand-lg .navbar-nav .nav-link {
		display: flex;
		align-items: center;
		color: #000;
		padding-right:0 ;
		padding-left:25px ;
	}
	.navbar-expand-lg .navbar-nav .nav-link:hover{
		color: rgba(0,0,0,.6);
	}
	.nav-link::after{
		content: "";
		position: relative;
		display: inline-block;
		width: 1px;
		height: 1rem;
		background: rgba(129,179,39,.5);
		margin-left: 25px;
		border: none;
	}
	.container-fluid.overlay::before{
		display: none;
	}
	.dropdown-menu {
		box-shadow: 2px 5px 8px 3px rgba(0,0,0,.4);
	}
	/*hover 下拉*/
	.navbar .nav-item .dropdown-menu{ display: none; }
	.navbar .nav-item:hover .dropdown-menu{ display: block; }
	.navbar .nav-item .dropdown-menu{ margin-top:0; }
}
/*navbar 手機*/
@media (max-width: 991px){
	.container-fluid{margin-top: 60px;}
	.navbar {height: 60px;padding: .5rem 1rem;}
	.navbar-expand-lg .navbar-collapse{
		position: absolute;
		top:60px;
		left: 0;
		right:0;
		background: #CCEDDA;
		box-shadow: 0 5px  8px 0 rgba(0,0,0,.1);
	}
	.navbar-expand-lg .navbar-nav .nav-link {
		color: #000;
		padding-right:0 ;
		padding-left:25px ;
		border-top: 1px rgba(255,255,255,0.5) solid;
	}	
	.navbar-nav .dropdown-menu {
		float: none;
		margin: 0 auto 15px auto;
		width: calc(100% - 30px);
	}
	.dropdown-item{
		padding: 0.5rem 1.5rem 0.5rem 1.7rem;
	}
	
}


/*立即開戶*/
.account-btn-row{
	position: fixed;
	right: calc(50% - 490px);
	top:80px;
	width: 145px;
	height: auto;
	z-index: 99999;
	background: green;
}
.open-account{
	position:absolute;
	left: 0;
	top:0;
	right: 0;
	bottom:auto;
	height: 130px;
	z-index: 2;
}
.open-account a{
	display: block;
	width: 100%;
	height: 100%;
	background: url(../images/open-account.svg) top no-repeat;
	background-size: 100% auto;
	font-size: 16px;
	color: transparent;
}
.tag-menu{
	position:absolute;
	top:113px;
	width: 100%;
	height: 220px;
	margin: 0 auto;
	background: url(../images/tag-menu.svg) top no-repeat;
	background-size: 100% auto;
	padding: 66px 25px 0 20px;
}

.tag-menu a{
	position: relative;
	color: #111111;
	white-space: nowrap;
	display: flex;
	align-items: center;
	justify-content:flex-start;
	border-bottom: 1px rgba(129,179,39,.5) solid;
	font-size: 16px;
	padding: 3px 0;
}
.tag-menu a:last-child{
	border-bottom: none;
}
.tag-menu a::before{
	content: '';
	display: inline-block;
	width: 1.8rem;
	height: 2.2rem;
}
.tag-menu a:nth-child(1)::before{
	background: url(../images/icon-search.svg) center no-repeat;
}
.tag-menu a:nth-child(2)::before{
	background: url(../images/icon-idcard.svg) center no-repeat;
}
.tag-menu a:nth-child(3)::before{
	background: url(../images/icon-pdf.svg) center no-repeat;
	background-size: 110%;
}

/*錨點*/
#position-1,#position-2,#position-3,#position-4{
    position:absolute;
    width: 10px;
    height: 10px;
    z-index: 999;
    top: -90px;
}
/*home-wrapper （手機 section 排序）*/
.home-wrapper{
	display: flex;
	flex-wrap: wrap;
}
@media (max-width: 767px){
	.section-1{order: 2;}
	.section-2{order: 1;}
	.section-3{order: 3;}
	.section-4{order: 4;}
}

/*section*/
.section-1,.section-2,.section-3,.section-4{
	position:relative;
	margin:0;
	padding:0 calc(50% - 340px);
	width: 100%;
}
.section-1{
	background: url(../images/banner.png) center repeat-x;
	background-size: auto 100%;
	height: 300px;
	background-color: rgba(182,229,166,1);
}

/*For 優惠 banner link*/
#section-a01{
	position: absolute;
	top:15%;
	bottom:15%;
	left:calc(50% - 280px);
	right:calc(50% + 100px );
}

#section-a02{
	position: absolute;
	top:15%;
	bottom:15%;
	left:calc(50% - 90px);
	right:calc(50% - 90px);
}

#section-a03{
	position: absolute;
	top:15%;
	bottom:15%;
	left:calc(50% + 100px);
	right:calc(50% - 280px );
}


@media only screen and (min-width: 900px) and (max-width: 1023px){
	#section-a01{
		position: absolute;
		top:18%;
		bottom:16%;
		left:11%;
		right:67%;
	}
	
	#section-a02{
		position: absolute;
		top:18%;
		bottom:16%;
		left:32%;
		right:47%;
	}
	
	#section-a03{
		position: absolute;
		top:18%;
		bottom:16%;
		left:55%;
		right:25%;
	}
	
}
@media (max-width: 767px){
	#section-a01{
		position: absolute;
		top:6%;
		bottom:66%;
		left:calc(50% - 120px);
		right:calc(50% - 120px );
	}
	
	#section-a02{
		position: absolute;
		top:35%;
		bottom:36.5%;
		left:calc(50% - 120px);
		right:calc(50% - 120px);
	}
	#section-a03{
		position: absolute;
		top:64%;
		bottom:7%;
		left:calc(50% - 120px);
		right:calc(50% - 120px);
	}
}
/*For 優惠 banner link end*/

.section-2{
	padding:0 ;
}
.section-2-bg{
	position: absolute;
	top:0;
	bottom:0;
	left:0;
	right:0;
	z-index: -1;
	text-align: center;
}
.section-2-bg img{
	width: 100%;
	max-width: 1024px;
	margin:-100px auto 0 auto;
}
.section-2-bg::before{
	content:'';
	position: absolute;
	top:0;
	left: 0;
	right: 0;
	height: 40px;
	z-index: 1;
	background-image: linear-gradient(to top, rgba(182,229,166,0) , rgba(182,229,166,1) );
}
.section-2-bg::after{
	content:'';
	position: absolute;
	top:0;
	bottom:0;
	left: 0;
	right: 0;
	z-index: -1;
	background-image: linear-gradient(to bottom, rgba(182,229,166,1) 30% , rgba(255,255,255,1) );
}
.kv-md{
	display: block;
	width: 100%;
	max-width: 680px;
	margin:0 auto;
}
.kv-md img{
	/* 局方反應IE 舊版本會跑版 */
	height: 100%;
	max-width: 700px;
}
.kv-xs{display: none;}

.section-title{
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #a6e092;
	width:9rem;
	height: 3.6rem;
	border-radius: 50%;
	font-size: 1.3rem;
	font-weight: 700;
	color: #ffffff;
	margin:10px auto ;
	text-shadow: 0 0 10px rgba(112,156,34,1);
}
.section-title::before,
.section-title::after{
	content: '';
	position: absolute;
	top:calc(50% - 1px);
	z-index: 2;
	display: block;
	width: 150px;
	height: 2px;
}
.section-title::before{
	right: calc(9rem + 10px);
	background-image: linear-gradient(to left, rgba(0,140,55,1) 20% , rgba(0,140,55,0) );
}
.section-title::after{
	left: calc(9rem + 10px);
	background-image: linear-gradient(to right, rgba(0,140,55,1) 20% , rgba(0,140,55,0) );
}

/*.section-3  .news*/
.section-3{
	background-image: linear-gradient(to top, rgba(209,239,223,1) 20% , rgba(255,255,255,1) );
}
.news{
	position: relative;
	margin:0 auto 30px auto;
}
.news > li{
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	padding: 10px 0;
	border-top: 1px #a6e092 solid;
}
.news > li:first-child{
	border-top: none;
}
.news > li > span{
	font-size: .95rem;
	color: #008c37;
	font-weight: 700;
	width: 100%;
}
.news > li > div{
	width: calc(100% - 7rem);
	font-size: 1rem;
	color: #111111;
	line-height: 1.5;
	text-align:justify;
	word-break: break-all;
}
.news > li > div:last-child{
	width: 5.5rem ;
}
.news .btn{
	width: 5.5rem ;
	min-width: 5.5rem;
	font-size: .889rem;
	padding-left: 0;
	padding-right: 0;
	margin-left: 0;
	margin-right: 0;
	background: #a6e092 !important ;
    border-color: #a6e092 !important ;
	color: #ffffff;
	text-shadow: 0 0 4px rgba(11,107,40,1);
}
.news .btn-primary:hover{
    opacity: 0.9;
}
.news .btn-primary:hover, 
.news .btn-primary:active{
    background: #0f9036 !important ;
    border-color: #0f9036 !important ;
    opacity: 0.9;
}
/*.section-4  .events*/
.section-4{
	background: rgba(209,239,223,1);
}
.events{
	position: relative;
	margin:0 auto 80px auto;
}
.events > li{
	position: relative;
	padding: 10px 0;
	border-top: 1px #a6e092 solid;
}
.events > li:first-child{
	border-top: none;
}
.events > li > a > img{
	width: 100%;
	height: auto;
	max-height: 250px;
}

.text-display{
  text-align: right
}
.br-desktop{
  display: block; /* 電腦版顯示換行 */
}
.br-mobile{
  display: none; /* 電腦版不顯示換行 */
}


/*電腦--1920 以上*/
@media (min-width: 1920px){
	.kv-md{max-width: 800px;}
	.section-2-bg img {max-width: 1280px;}
	.text-display{
	  text-align: right
	}
    .br-desktop{
      display: block; /* 電腦版顯示換行 */
    }
    .br-mobile{
      display: none; /* 電腦版不顯示換行 */
    }
}
/*平板橫式-- 1024 到 1600 中間*/
@media only screen and (min-width: 1024px) and (max-width: 1600px){
	.section-1{
		height: 250px;
	}
	.text-display{
	  text-align: right
	}
    .br-desktop{
      display: block; /* 電腦版顯示換行 */
    }
    .br-mobile{
      display: none; /* 電腦版不顯示換行 */
    }
}
/*平板直式--901 到 1023 中間*/
@media only screen and (min-width: 901px) and (max-width: 1023px){
	.account-btn-row{
		right: -5px;
	}
	.section-1{
		background-position: -470px center;
		height: 280px;
	}
	.text-display{
	  text-align: right
	}
    .br-desktop{
      display: block; /* 電腦版顯示換行 */
    }
    .br-mobile{
      display: none; /* 電腦版不顯示換行 */
    }
}
/*平板直式--768 到 900 中間*/
@media only screen and (min-width: 768px) and (max-width: 900px){
	.section-1{
		background-position: center;
		height: 300px;
	}
    .text-display{
	  text-align: right
	}
    .br-desktop{
      display: block; /* 電腦版顯示換行 */
    }
    .br-mobile{
      display: none; /* 電腦版不顯示換行 */
    }
}
/*手機--900 以下*/
@media (max-width: 900px){
	.account-btn-row{
		position: fixed;
		left: 0;
		right: 0;
		bottom:0;
		top:auto;
		height: 50px;
		width: auto;
		background: #ffffff;
		box-shadow: 0 0 8px 0 rgba(0,0,0,.1);
		z-index: 99999;
	}
	.open-account{
		position: fixed;
		left: auto;
		right: 0;
		bottom:50px;
		top:auto;
		width: 100px;
		height: 90px;
	}
	.open-account a{
		display: block;
		width: 100%;
		height: 100%;
		background: url(../images/open-account-xs.svg) center no-repeat;
		background-size: 100% auto;
		font-size: 16px;
		color: transparent;
	}
	.tag-menu{
		position:relative;
		width: 100%;
		max-width: 550px;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 0 auto;
		left: auto;
		right: auto;
		top: auto;
		bottom: auto;
		background-image: none;
		padding:0;
	}
	.tag-menu a{
		position: relative;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 18px;
		border-bottom: none;
	}
	.tag-menu a:nth-child(3)::before{
		width: 1.5rem;
		background-size: 150%;
	}
	.tag-menu a:nth-child(1),
	.tag-menu a:nth-child(2){width: 50%;}
	.tag-menu a:nth-child(2){padding-right: 30px;}
}

/*手機-767 以下*/
@media (max-width: 767px){
	.section-1{
		background: url(../images/banner-vertical.png) center top no-repeat;
		background-size: auto 95%;
		height: 500px;
	}
	.section-1::after{
		content:'';
		position: absolute;
		top:0;
		bottom:0;
		left: 0;
		right: 0;
		z-index: -1;
		background-image: linear-gradient(to bottom, rgba(182,229,166,1) 70% , rgba(255,255,255,1) );
	}
	.section-2-bg img{
		width: 100%;
		margin:0 auto;
	}
	.section-2-bg::before{
		display: none;
	}
	.section-2-bg::after{
		background-image: linear-gradient(to bottom, rgba(194,233,181,1.00) 30% , rgba(182,229,166,1) );
	}
	
	.kv-md{display: none;}
	.kv-xs{
		display: block;
		width: 100%;
		max-width: 580px;
		margin:0 auto;
	}
	.kv-xs img{
		width: 100%;
		height: auto;
	}
	.section-3,
	.section-4{
		padding-left: 20px;
		padding-right: 20px;
	}
	.news > li > div{
		width: 100%;
	}
	.news > li > div:last-child{
		width: 100% ;
		text-align: right;
	}
    .text-display{
      text-align: left
    }
    .br-desktop{
      display: none; /* 手機板不顯示換行 */
    }
    .br-mobile{
      display: block; /* 手機板顯示換行 */
    }
}

/*手機--520 以下*/
@media (max-width: 520px){
	.tag-menu a{
		font-size: 17px;
	}
	.section-2{
		height: calc(100vh - 50px);
	}
	.slide-down{
		display: block;
		position: fixed;
		bottom:58px;
		left:calc(50vw - 20px);
		z-index: 3;
		width:40px;
		height: 40px;
		border-radius:50%; 
		background: url(../images/slide-down-icon.svg) center no-repeat;
		background-size: contain;
		opacity: 1;
	}
	.slide-down::before{
		content: '更多優惠內容';
		position: absolute;
		top:-35px;
		left: -40px;
		width:120px;
		padding: 7px 0;
		background:rgba(103,199,70,.8);
		border-radius: 20px;
		white-space: nowrap;
		text-align: center;
		font-size: .889rem;
		color: #ffffff;
		text-shadow: 0 0 4px rgba(11,107,40,1);
	}
	.section-title{
		width:8rem;
		height: 3.5rem;
		font-size: 1.2rem;
	}
	.section-title::before,
	.section-title::after{
		width: calc(50vw - 5rem);
	}
	.section-title::before{
		right: calc(8rem + 5px);
	}
	.section-title::after{
		left: calc(8rem + 5px);
	}
}

/*2D-table*/
.table-2D{
	position: relative;
	width: auto;
	overflow-x: auto;
}
.table-2D table{
    width: 100%;
    max-width: 100%;
    border-collapse: collapse;
    box-sizing: border-box;
    border-spacing: 0;
}
.table-2D th{
	padding: 8px;
    color: #203B28;
    text-align: center;
    vertical-align: middle;
    font-size: 1rem;
    line-height: 1;
    font-weight: 700;
    background: #C0E9B2;
    border: 1px solid #DDF3D5;
    min-width: 58px
}
.table-2D th:first-child{
    min-width: 72px
}
.table-2D td:first-child {
    background: #C0E9B2;
	text-align: center;
	font-weight: 700;
	color: #203B28;
	min-width:72px
}
.table-2D td {
    padding: 8px;
    vertical-align: middle;
    border: 1px solid #DDF3D5;
    border-top: none;
    font-size: 1rem;
    line-height: 1.3;
    height: 3rem;
    text-align: left;
    min-width: 58px
}
.title-2D{
	width: 80px;
	max-width: 80px;
	min-width: 80px;
	height: 75px;
	max-height: 75px;
	min-height: 75px;
	position: relative;
	padding: 0 !important;
	
}
.title-2D div{
	position: relative;
	width: 100%;
	height: 100%;
	border-right: 1px solid #DDF3D5;
}
.title-2D div::after{
	content: '';
	position: absolute;
	bottom:0;
	left: 0;
	width: 50px;
	height: 50px;
	border-style: solid;
	border-width: 75px 0 0 80px;
	border-color: transparent transparent transparent rgba(255,255,255,0.3);
}
.title-2D span{
	position: absolute;
	z-index: 1;
}
.title-2D span:first-child{
	top:8px;
	right:6px;
}
.title-2D span:last-child{
	bottom:8px;
	left:6px;
}
.h1-md{
	font-size: 1rem;
    color: #008c37;
    font-weight: 700;
	padding: 10px 0;
}
.icon-X,
.icon-checked{
	padding-left: 20px;
	margin: 5px 0;
}
.icon-X::before{
	content: '';
	position: relative;
	display: inline-block;
	width: 18px;
	height: 18px;
	text-align: center;
	color: #FFFFFF;
	font-size: 15px;
	font-weight: bold;
	margin-right: 5px;
	margin-left: -22px;
	background:#A2DE8D url(../images/icon-X.svg) center no-repeat;
	background-size: contain;
}

.icon-checked::before{
	content: '';
	position: relative;
	display: inline-block;
	width: 18px;
	height: 18px;
	background-color: #EB9595;
	color: #FFFFFF;
	font-size: 15px;
	font-weight: bold;
	margin-right: 5px;
	margin-left: -22px;
	background:#EB9595 url(../images/checked.svg) center no-repeat;
	background-size: contain;
}


/*開戶教學 .teach-wrapper */
.teach-wrapper .section-1,.teach-wrapper .section-2,.teach-wrapper .section-3,.teach-wrapper .section-4 {
    padding: 0 calc(50% - 450px);
}
@media (max-width: 900px){
	.teach-wrapper .section-3, .teach-wrapper .section-4 {
		padding-left: 20px;
		padding-right: 20px;
	}
}
.teach-wrapper .section-2-bg {
    position: absolute;
    top: -20px;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: -1;
    text-align: center;
}
.teach-wrapper .section-2 h1{
	color: #FFFFFF;
	text-shadow:  0 0 5px rgba(97,181,50,1.00);
	font-size: 1.8rem;
	margin: 60px 0  10px 0;
}
.teach-wrapper .section-2 h2{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #6ECC4E;
    width: 9rem;
    height: 3.6rem;
    border-radius: 50%;
    font-size: 1.3rem;
    font-weight: 700;
    color: #ffffff;
    margin: 10px auto;
    text-shadow: 0 0 10px rgb(112 156 34);
}
.teach-wrapper .section-2 h2::before, 
.teach-wrapper .section-2 h2::after {
    content: '';
    position: absolute;
    top: calc(50% - 1px);
    z-index: 2;
    display: block;
    width: 150px;
    height: 2px;
	background: transparent;
}
.teach-wrapper .section-3 {
    background-image: linear-gradient(to top, rgba(209,239,223,1) 20% , rgba(209,239,223,1) );
	background: #FFFFFF;
	box-shadow: 0 -2px 5px 2px rgba(0,0,0,.2);
	padding-top: 30px;
	padding-bottom: 30px;
}
.teach-wrapper .section-3 h3 {
    text-align: center;
	margin: 0;
	font-size: 1.5rem;
}
.teach-wrapper .section-4 {
	/*background-image: linear-gradient(to top, rgba(209,239,223,1) 20% , rgba(255,255,255,1) );*/
	background:rgba(209,239,223,1);
	padding-top: 70px;
	padding-bottom: 40px;
}
.teach-wrapper .section-4 h1 {
	margin: 30px 0;
	font-size: 1.75rem;
	font-weight: 500;
	color: #515151;
}
.teach-wrapper .section-4 h2 {
	font-size: 1.222rem;
	font-weight: 600;
	color: #0f9036;
	display: block;
	margin: 20px auto;
	/*background: #62AD85;*/
	border: 1px #62AD85 solid;
	border-radius: 5px;
	text-align: center;
	padding: 10px 20px;
	width: auto;
}
.teach-wrapper .section-4 h2::after {
    display: none;
}
.teach-wrapper .section-4 .btn-row{
	padding-top: 30px;
}
.teach-wrapper  h1.step-title{
	font-size: 1.5rem;
	margin-top: 10px;
	margin-bottom: 20px;
	color: #62AD85;
	display: flex;
	align-items: center;
	justify-content: center;
}
.teach-wrapper  h1.step-title span{
	display: inline-block;
	width: 1.8rem;
	height: 1.8rem;
	border-radius: 50%;
	border: 2px #62AD85 solid;
	color: #FFFFFF;
	background: #62AD85;
	margin-left: 10px;
	margin-right: 10px;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.7rem;
}
.teach-wrapper  .btn-row{
	border-top: 1px #FFFFFF solid;
}
.teach-wrapper .btn-row.no-border{
	border-top: none;
	margin-top: 10px;
	padding: 0;
}
.teach-wrapper  .btn-row .btn,
.teach-wrapper  .btn-row .btn:focus,
.teach-wrapper  .btn-row .btn:active{
	font-size: 1.2rem;
	font-weight: 700;
	position: relative;
	padding:12px 15px 12px 40px;
	color: #FFFFFF;
	background: #0f9036;
	border-color: #0f9036;
}
.teach-wrapper .btn-row .btn::after{
	content: '';
	position: relative;
	display:inline-block;
	height: 30px;
	width: 30px;
	background: url(../images/flip-btn-up.svg) center no-repeat;
	transform: rotate(90deg);
	margin-left: 15px;
}
.teach-wrapper .identity-grid {
    background: none;
    padding: 30px 20px;
    margin: 0;
}
.teach-wrapper .row.identity-grid {
	padding: 0;
}
.teach-wrapper .identity-grid > div {
	
	padding: 15px;
}
.teach-wrapper .identity-grid h3 {
    font-size: 1.222rem;
    text-align: center;
    font-weight: bold;
    margin: 20px 0 0 0;
	white-space: nowrap;
}
.teach-wrapper .identity-grid .note {
    margin: 5px 0 0 0;
	color: #515151;
	font-size: 1rem;
}
.teach-wrapper .identity-grid .card-shadow {
    box-shadow: 2px 2px 7px 0 rgba(0,0,0,0.3);
	border-radius: 10px;
}
.teach-wrapper .identity-grid.circle img {
	box-shadow: 5px 5px 15px 0 rgba(0,0,0,0.2) inset;
	border-radius: 50%;
	background: #FFFFFF;
	max-height: 250px;
}
.teach-wrapper .identity-grid.XL img {
	max-height: 261px;/*FOR 直式*/
}
.teach-wrapper .identity-grid.circle.XL img {
	max-height: 309px;/*FOR 圓*/
}

.teach-wrapper .identity-grid.XLL img {
	max-height: 339px;/*FOR 完成*/
}

.teach-wrapper .identity-grid.arrow-right > div::after{
    content: '';
	position: absolute;
	top:calc(50% - 50px);
	right: -5px;
	display: block;
	border-color: #62AD85;
	border-style: solid;
	border-width: 2px 2px 0 0;
	height: 20px;
	width: 20px;
	transform: rotate(45deg);
}
.teach-wrapper .identity-grid.arrow-right > div:last-child::after{
    display: none;
}
.teach-wrapper .identity-grid.arrow-right.sm > div::after{
	top:calc(50% - 10px);
}
.teach-wrapper .identity-grid.list h3{
	text-align: left;
	padding-left: 25px;
	color: #0f9036;
}
.teach-wrapper .identity-grid.list h3::before{
    content: '';
	position: relative;
	display: inline-block;
	height: 10px;
	width: 10px;
	transform: rotate(45deg);
	background: #6BD35A;
	margin: 0 15px 4px -25px;
	
}
.teach-wrapper .identity-grid.list .note{
	padding-left: 25px;
	text-align: left;
}
.teach-wrapper .identity-grid.board{
	background: #FFFFFF;
	border-radius: 10px;
	position: relative;
}
.teach-wrapper .identity-grid.board > div{
	border-right: 3px #D1EFDF solid;
	padding: 0;
}
.teach-wrapper .identity-grid.board > div:last-child{
	border-right: none;
}
.teach-wrapper .identity-grid.board h3{
	margin: 0;
	padding: 15px 0;
	background: #0f9036;
	color: #FFFFFF;
}
.teach-wrapper .identity-grid.board .note{
	padding: 20px;
	margin: 0;
	text-align: left;
}
.teach-wrapper .identity-grid.board .note .list{
	position: relative;
	display: block;
}
.teach-wrapper .identity-grid.board .note .list::before{
    content: '';
	position: relative;
	display: inline-block;
	height: 7px;
	width: 7px;
	border-radius: 50%;
	background: #0f9036;
	margin: 0 10px 4px 0;
}
.teach-wrapper .board.arrow-top::after{
    content: '';
	position: absolute;
	top:-25px;
	right: 13%;
	display: block;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 30px 30px 30px;
	border-color: transparent transparent #0f9036 transparent;
}


/*手機 520 以下*/
@media (max-width: 520px){
	.teach-wrapper .section-2 {
		height: calc(100vh - 170px); ;
		padding-top: 5vh;
	}
	.teach-wrapper .section-2 h1 {
		margin: 30px 0 10px 0;
	}
	.teach-wrapper .section-2 h2 {
		width: 8rem;
		height: 3.5rem;
		font-size: 1.2rem;
	}
	.teach-wrapper .section-2 h2::before,
	.teach-wrapper .section-2 h2::after{
		width: calc(50vw - 5rem);
	}
	.teach-wrapper .section-2 h2::before{
		right: calc(8rem + 5px);
	}
	.teach-wrapper .section-2 h2::after{
		left: calc(8rem + 5px);
	}
	.teach-wrapper .section-3 {
		padding: 20px 0px;
	}
	.teach-wrapper .section-3 h3 {
		font-size: 1.2rem;
	}
	.teach-wrapper .section-4 {
		padding-top: 40px;
		padding-bottom: 10px;
	}
	.teach-wrapper .section-4 .btn-row {
		margin: 20px 0 60px 0;
	}
	.teach-wrapper .section-4 h1 {
		margin: 20px 0;
		font-size: 1.3rem;
	}
	.teach-wrapper .section-4 h2 {
		font-size: 1.111rem;
		white-space: normal;
	}
	.teach-wrapper .identity-grid h3 {
		font-size: 1.111rem;
	}
	.teach-wrapper .btn-row .btn {
		width: 85%;
		max-width: none;
	}
	.teach-wrapper .identity-grid.circle img {
		max-height: 200px;
	}
	.teach-wrapper .section-4{
		min-height: calc(100vh - 130px);/*FOR 申請完成頁面高度*/
	}
}
/*手機 900以下*/
@media screen and (max-width: 900px){
	.home-wrapper.teach-wrapper #return-to-top {
		bottom: -15px;
	}
	.teach-wrapper .section-3.fixed-top{
		position: fixed ;
		top:60px;
	}
}
/*手機 767以下*/
@media (max-width: 767px){
	.teach-wrapper .identity-grid.circle img,
	.teach-wrapper .identity-grid.circle.XL img{
		max-height: 336px;
	}
	.section-2-bg img {
		width: 150vw;
		height: auto;
		margin: 0 -25vw;
	}
	.teach-wrapper .section-2-bg {
		top: 0;
	}
	.teach-wrapper .identity-grid.arrow-right > div::after{
		display: none;
	}
	.teach-wrapper .identity-grid.board > div{
		border-right: none;
	}
	.teach-wrapper .board.arrow-top::after{
		right: calc(50% - 30px);;
	}
}

/*捲動固定*/
#step-progress.fixed-top{
	position: fixed ;
	top:70px;
	padding-top: 10px;
    padding-bottom: 10px;
}
#step-progress.fixed-top h3{
	display: none;
}
#step-progress-blank{
	position: relative;
	display: none;
	background: rgba(209,239,223,1);
	width: 100%;
	height: 129px;
}
/*捲動固定*/ /*手機 991以下*/
@media screen and (max-width: 991px){
	#step-progress.fixed-top{
		position: fixed ;
		top:58px;
	}
}
/*捲動固定*/ /*手機 767以下*/
@media (max-width: 767px){
	#step-progress.fixed-top{
		height: 80px;
	}
	#step-progress-blank{
		height: 80px;
	}
}
/*捲動固定*/ /*手機 400以下*/
@media (max-width: 400px){
	#step-progress.fixed-top{
		height: 70px;
	}
	#step-progress-blank{
		height: 70px;
	}
	.teach-wrapper .section-4{
		min-height: calc(100vh - 120px);/*FOR 申請完成頁面高度*/
	}
}

/*手機 300 以下*/
@media (max-width: 300px){
	.teach-wrapper .identity-grid h3 {
		font-size: 1.056rem;
		white-space: normal;
		margin: 20px -25px 0 -25px;
	}
}