@charset "utf-8";

/* main-banner */
.main-banner {
    position: relative;
    width: 100%;
    overflow: hidden;
}
.banner-swiper {
    width: 100%;	
    height: 580px;
}
.banner-swiper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Slogan */
.banner-slogan {
    position: absolute;
    top: 25px;
    left: 50%;
	transform: translateX(-50%);
	width:1380px;
    z-index: 10;	
}
.banner-slogan h2, .banner-slogan h3{ margin:0;}
.banner-slogan h2 img, .banner-slogan h3 img{width:auto;}
.banner-text{max-width:580px; padding:0 42px; box-sizing:border-box;}
.banner-text p{font-size: 1.7em; margin-top: 0.5rem; line-height:1.5;}
.banner-cta{display:flex;gap:6px;margin-top:15px;flex-wrap:wrap;}
.cta-btn{padding:10px 20px;border-radius:40px;font-size:1.6em;display:inline-flex;align-items:center;gap:1px;}
.cta-btn small {font-size:80%;}
.cta-primary{background:var(--green);color:white;border:2px solid var(--green);}
.cta-secondary{color:var(--green);border:2px solid rgba(26,115,57,.5);}
.cta-btn:hover{background:var(--green-dark);color:var(--gold);transform:translateY(-2px);}

/* Swiper 分頁點點 */
.swiper-pagination {bottom: 20px !important;}
.swiper-pagination-bullet {background: rgba(255,255,255,0.7); opacity: 1;}
.swiper-pagination-bullet-active {background: #fff;}
.swiper-button-next,.swiper-button-prev {		
	color:var(--white,var(--paper));
	background: rgba(0, 0, 0, .75);
	border-radius: 50%;
    transition: all 0.5s ease;	
    text-shadow: 2px 2px 6px rgba(0,0,0,0.6);	
 	--swiper-navigation-size: 30px;
  	width: calc(var(--swiper-navigation-size) / 44 * 27);
	padding:10px;
    width: 50px;
    height: 50px;	
}
.swiper-button-next:hover,.swiper-button-prev:hover,
.swiper-button-next:focus,.swiper-button-prev:focus {background: #cc3300;}
@media(max-width:1400px){
	.banner-slogan {left:0; transform: translateX(0); width:560px;}
	.banner-text{max-width:100%;}
	.banner-text p{font-size:1.6em;}		
}
@media(max-width:1200px){
	.banner-slogan h2 img, .banner-slogan h3 img{width:85%;}
	.banner-text{padding-right:120px;}
	.cta-btn{display:inline-block; text-align:center; width:48%;}
	.cta-btn i{display:none;}
	.cta-btn span, .cta-btn small {display:block;}			
}
@media(max-width:990px){
	.main-banner{margin-top:60px;}
	.banner-slogan {top: 20px; width:80%;}	
	.banner-slogan h2, .banner-slogan h3{ margin-top:-3px;}	
	.banner-slogan h2 img, .banner-slogan h3 img{width:47%;}
	.banner-text{padding:0 25px;}		
	.banner-cta{margin-top:10px;}	
	.cta-btn span, .cta-btn small {display:inline-block;}
	.swiper-button-next,.swiper-button-prev {
		--swiper-navigation-size: 20px;
		width: 40px;
		height: 40px;			
	}
				
}
@media (max-width: 768px) {
	.banner-slogan h2 img, .banner-slogan h3 img{width:60%;}
	.banner-text p{font-size:1.5em;}					
}
@media (max-width: 520px) {
	.banner-slogan {width:100%;}		
	.banner-slogan h2 img, .banner-slogan h3 img{width:85%; margin:0 auto;}
	.banner-text{padding:0 20px;}		
	.banner-text p{font-size:1.4em;}		
}


/* ── HERO ── */
.hero{
	color: white;
	position: relative;
 	background-position: bottom;
	background-repeat: no-repeat;
	background-size: cover;	
	min-height: 580px;	
	overflow: hidden;	
 }
.hero item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.hero-inner{width:1400px; margin:0 auto; position:absolute; top:0; left:50%; margin-left:-700px; display:block;}
.hero-inner h1{width:582px; height:auto;}
/*.hero-inner .hero-sub{margin-top:8px; color:#1a7339; font-size:1.8em;}*/
.hero-text{max-width:600px; padding:0 50px; box-sizing:border-box;}
.hero-text p{color:#000000;font-size:1.7em;line-height:1.5;margin-top:10px;}

.main1{background-image: url(../images/main-1.jpg)}
.main2{background-image: url(../images/main-2.jpg)}	
@media(max-width:1400px){
	.hero{/*min-height: 500px;*/}	
	.hero-inner{margin:0;}
	.hero-inner h1 { width:520px;}	
	.hero-text{max-width:540px; padding:0 35px;}
	.hero-text p{font-size:1.6em;}		
	.main1{background-image: url(../images/main-1-1400.jpg)}
	.main2{background-image: url(../images/main-2-1400.jpg)}		
}
@media(max-width:1200px){
	.hero-text{max-width:540px; padding:0 100px 0 35px;}
		
}
@media(max-width:990px){
	#banners{margin-top:60px;}
	.main1{background-image: url(../images/main-1-768.jpg)}
	.main2{background-image: url(../images/main-2-768.jpg)}		
}
@media(max-width:768px){			
	.hero-text p {font-size:1.6em; max-width: 90%}
	.cta-btn{padding:6px 12px;font-size:1.6em;}	

	.hero-text{ margin-left: 50px; width: calc(100% - 50px)}
}
@media(max-width:580px){
	.hero-text{ width: 80%; margin-left: 10px }
}
@media(max-width:414px){
	.hero{ padding: 30px 24px}
	.main1{background-image: url(../images/main-1-414.jpg)}
	.main2{background-image: url(../images/main-2-414.jpg)}	
	.cta-btn{padding:4px 10px;font-size:1.4em;}
	.hero-text p{ width: 100%; max-width: 100%}
	.hero-text{ margin-left: 0; width: 100%}
}	

#banners{ position: relative;}
#banners .slick-arrow{ 
	display: block; 
	width: 44px; height: 44px; 
	border-radius: 50%; 
	background: rgba(0,0,0,0.4) center no-repeat; 
	background-size: contain;
	z-index: 10;
}
#banners .slick-arrow:before{ display: none;}
#banners .slick-arrow.slick-prev { background-image: url(../images/prevbtn-w.svg); left: 10px;}
#banners .slick-arrow.slick-next { background-image: url(../images/nextbtn-w.svg); right: 10px;}


/* ── SECTION ── */
.section{max-width:1320px;margin:0 auto;padding:48px 24px;}
.section-head{display:flex;align-items:center;gap:16px;margin-bottom:28px;}
.section-head h2{font-family:'Noto Serif TC',serif;font-size:4.4em;font-weight:700;white-space:nowrap;}
.sec-en{font-size:45%;color:var(--ink-soft);margin-left:6px;font-family:'Noto Sans TC',sans-serif;font-weight:400;}
.section-divider{flex:1;height:1px;background:linear-gradient(90deg,var(--green),transparent);}
@media(max-width:768px){
	.section-head h2{font-size:3.9em;}
}
@media(max-width:480px){
	.sec-en{display:block;}
}

/* ── SEC GUIDE ── */
.sec-guide{display:flex;align-items:flex-start;gap:10px;background:var(--paper-dark);border:1px solid var(--border);border-radius:8px;padding:10px 16px;margin-bottom:24px;flex-wrap:wrap;}
.sg-zh{flex:1;font-size:1.8em;color:var(--ink-mid);}
.sg-step{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;background:var(--green);color:white;font-size:1.3em;font-weight:700;margin:0 3px;}
.sg-en-btn{background:var(--blue);color:white;border:none;padding:3px 10px;border-radius:10px;cursor:pointer;font-size:1.3em;font-weight:700;font-family:inherit;white-space:nowrap;flex-shrink:0;}
.sg-en-box{display:none;width:100%;font-size:1.6em;color:var(--blue);font-style:italic;padding-top:7px;border-top:1px dashed #c8dff0;margin-top:6px;line-height:1.7;}
.sg-en-box.show{display:block;}

/* ── BOOK GRID ── */
.book-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;}
@media(max-width:1000px){.book-grid{gap:8px;}}
@media(max-width:990px){.book-grid{grid-template-columns:repeat(3,1fr);gap:14px;}}
@media(max-width:520px){.book-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:360px){.book-grid{gap:6px;}}
.book-card{background:white;border-radius:12px;overflow:hidden;border:2px solid var(--border);cursor:pointer;transition:all .25s;display:block;}
.book-card:hover:not(.locked){transform:translateY(-4px);box-shadow:0 12px 32px rgba(0,0,0,.12);}
.book-card.active{border-color:var(--green);box-shadow:0 0 0 3px rgba(46,125,70,.15);}
.book-cover{display:flex;align-items:center;justify-content:center;font-family:'Noto Serif TC',serif;font-weight:900;color:white;position:relative; padding-bottom:140%;}
.book-cover-num{position:absolute;bottom:8px;right:10px;font-size:1.4em;opacity:.7;}
.book-label{padding:11px 13px 13px;}
.book-label h3{font-size:2em;font-weight:700;font-family:'Noto Serif TC',serif;}
.b-en{font-size:1.3em;color:var(--ink-soft);margin-top:2px;}
.book-label p{font-size:1.4em;color:var(--ink-soft);margin-top:3px;}
.tag{display:inline-block;font-size:1.3em;padding:2px 8px;border-radius:10px;margin-top:6px;font-weight:600;}
.tag-available{background:var(--green-light);color:var(--green);}
.tag-coming{background:var(--paper-dark);color:var(--ink-soft);}
.book-card.locked{opacity:.6;cursor:not-allowed;}
.bc-1{background:url(../images/textBoox1.jpg) no-repeat; background-size: cover;}
.bc-2{background:url(../images/textBoox2.jpg) no-repeat; background-size: cover;}
.bc-3{background:url(../images/textBoox3.jpg) no-repeat; background-size: cover;}
.bc-4{background:url(../images/textBoox4.jpg) no-repeat; background-size: cover;}
.bc-5{background:url(../images/textBoox5.jpg) no-repeat; background-size: cover;}
.bc-6{background:url(../images/textBoox6.jpg) no-repeat 50% 50%; background-size: cover;}
.book-hint{text-align:center;margin-top:14px;font-size:1.6em;color:var(--ink-soft);}

/* ── LESSON PANEL ── */
.lesson-panel{display:none;margin-top:24px;background:white;border-radius:16px;border:2px solid var(--green);overflow:hidden;animation:slideDown .3s ease;}
.lesson-panel.open{display:block;}
@keyframes slideDown{from{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:translateY(0)}}
.lp-header{background:linear-gradient(135deg,var(--green),var(--green-dark));color:white;padding:16px 24px;display:flex;align-items:flex-start;gap:16px;justify-content:space-between;flex-wrap:wrap;}
.lp-header-info h3{font-family:'Noto Serif TC',serif;font-size:3.2em;font-weight:700;}
.lp-header-info h3 small{display:block;font-size:1.3em;opacity:.8;}
.lp-en{font-size:1.6em;opacity:.7;margin-top:3px;}
.lp-header-info p{font-size:1.6em;opacity:.65;margin-top:4px;}
.lp-header-info p small{ display:block;}
.lp-close{background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.3);color:white;padding:6px 14px;border-radius:6px;cursor:pointer;font-size:1.6em;font-family:inherit;white-space:nowrap;align-self:center;}
.lp-guide{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);border-radius:8px;padding:8px 14px;margin-top:10px;font-size:1.6em;opacity:.85;display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.lp-guide-en{display:none;font-style:italic;font-size:1.4em;opacity:.75;width:100%;padding-top:4px;}
.lp-guide-en.show{display:block;}
.lp-en-btn{background:rgba(255,255,255,.25);border:1px solid rgba(255,255,255,.4);color:white;padding:2px 8px;border-radius:8px;cursor:pointer;font-size:1.3em;font-weight:700;font-family:inherit;}
.lp-tabs{display:flex;gap:6px;padding:14px 20px;border-bottom:1px solid var(--border);background:var(--paper);flex-wrap:wrap;}
.lp-tab{padding:6px 14px;border-radius:20px;font-size:1.6em;font-weight:600;cursor:pointer;border:1.5px solid var(--border);background:white;color:var(--ink-soft);transition:all .2s;font-family:inherit;}
.lp-tab.active,.lp-tab:hover{background:var(--green);border-color:var(--green);color:white;}
.lp-body{padding:20px;}
.lessons-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:11px;}
.lesson-row{display:flex;border-radius:10px;border:1.5px solid var(--border);overflow:hidden;cursor:pointer;transition:all .22s;text-decoration:none;color:inherit;background:white;}
.lesson-row:hover{border-color:var(--green);box-shadow:0 4px 16px rgba(46,125,70,.1);transform:translateY(-2px);}
.lesson-row.culture{border-style:dashed;border-color:var(--gold);}
.lesson-row.culture:hover{box-shadow:0 4px 16px rgba(212,160,23,.2);}
.lesson-row.phonics-row{border-color:var(--teal);}
.lr-num{width:66px;display:flex;align-items:center;justify-content:center;font-family:'Noto Serif TC',serif;font-size:3.2em;font-weight:900;color:white;flex-shrink:0;flex-direction:column;gap:2px;}
.ln-label-sm{font-size:30%;font-weight:400;opacity:.75;}
.n-lesson{background:linear-gradient(135deg,var(--green),var(--green-dark));}
.n-culture{background:linear-gradient(135deg,var(--gold),#B8860B);}
.n-phonics{background:linear-gradient(135deg,var(--teal),#1a5e5b);}
.lr-body{padding:11px 14px;flex:1;}
.lr-title{font-size:2.2em;font-weight:700;font-family:'Noto Serif TC',serif;}
.lr-en{font-size:1.4em;color:var(--ink-soft);margin-top:2px;font-style:italic;}
.lr-tags{display:flex;gap:4px;flex-wrap:wrap;margin-top:6px;}
.lr-tag{font-size:1.3em;padding:2px 7px;border-radius:8px;font-weight:600;}
.lt-text{background:var(--blue-light);color:var(--blue);}
.lt-vocab{background:var(--teal-light);color:var(--teal);}
.lt-grammar{background:var(--green-light);color:var(--green);}
.lt-culture{background:var(--gold-light);color:#8B6010;}
.lt-phonics{background:var(--teal-light);color:var(--teal);}
.lr-enter{display:flex;align-items:center;padding:0 14px;color:var(--border);font-size:3.2em;transition:color .2s;}
.lesson-row:hover .lr-enter{color:var(--green);}

/* ── HOW TO ── */
.how-section{ background: var(--green-dark) url(../images/studyBg.png) no-repeat center center;	padding:48px 24px; color:white;}
.how-inner{max-width:1320px;;margin:0 auto;}
.how-title{font-family:'Noto Serif TC',serif;font-size:4em;font-weight:700;margin-bottom:4px;}
.how-sub{font-size:1.8em;opacity:.7;margin-bottom:28px;}
.steps{display:flex;gap:0;flex-wrap:wrap;}
.step{flex:1;min-width:200px;text-align:center;padding:20px 16px;position:relative;}
.step:not(:last-child)::after{content:'→';position:absolute;right:-10px;top:48%;font-size:4em;color:rgba(255,255,255,.3);}
.step-circle{width:52px;height:52px;border-radius:50%;background:rgba(255,255,255,.2);border:2px solid rgba(255,255,255,.4);color:white;font-family:'Noto Serif TC',serif;font-size:4em;font-weight:900;display:flex;align-items:center;justify-content:center;margin:0 auto 12px;}
.step h4{font-size:2em;font-weight:700;margin-bottom:3px;}
.step .step-en{font-size:1.4em;opacity:.65;margin-bottom:6px;font-style:italic;}
.step p{font-size:1.6em;opacity:.8;line-height:1.6;}
.step-en-detail{display:none;font-size:1.4em;opacity:.65;font-style:italic;margin-top:6px;line-height:1.5;}
.step-en-detail.show{display:block;}
.step-en-btn{background:rgba(255,255,255,.2);border:1px solid rgba(255,255,255,.3);color:white;padding:3px 10px;border-radius:10px;cursor:pointer;font-size:1.3em;font-weight:700;font-family:inherit;margin-top:8px;}
@media(max-width:1200px){
	.step{;padding:10px 0;}
	.step:not(:last-child)::after{display:none;}	
}
@media(max-width:990px){
	.step{min-width:auto;}	
	.step-circle{font-size:3.6em;}
	.step p{font-size:1.4em;}		
}
@media(max-width:768px){
	.how-section{background-image: none;}
	.how-title{font-size:3.65em;}
	.how-sub{font-size:1.65em;}	
	.step{flex: 0 0 50%; max-width:50%;}
	.step:nth-child(n+3) { margin-top:20px;}
	.step-circle{font-size:3em;}	
	.step p{font-size:1.3em;}					
}
@media(max-width:414px){
	.step-circle{font-size:2.5em;}
	.step-circle{width:45px;height:45px;}
	.lp-header{padding:12px 16px;}	
	.lp-header-info h3{font-size:2.8em;}	
	.lp-header-info p{font-size:1.25em;}
	.lp-close{font-size:1.4em;}	
}

/* ── FEATURES ── */
#featuresBox{background: url(../images/tailBackground2.png) no-repeat bottom; padding-bottom:300px;}
.features-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
.feature-card{background:white;border-radius:14px;padding:24px 22px;border:1.5px solid var(--border); position:relative;}
.feature-icon{width:96px;height:85px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:4.4em;margin-bottom:14px; position:absolute; right:20px;}
.fi-red{background:var(--green-light);}
.fi-blue{background:var(--blue-light);}
.fi-teal{background:var(--teal-light);}
.fi-gold{background:var(--gold-light);}
.fi-green{background:var(--green-light);}
.fi-purple{background:var(--purple-light);}
.feature-card h3{font-size:2.2em;font-weight:700;margin-bottom:4px;font-family:'Noto Serif TC',serif; margin-top:35px;}
.fc-en{font-size:1.4em;color:var(--ink-soft);font-style:italic;margin-bottom:7px;}
.feature-card p{font-size:1.6em;color:var(--ink-soft);line-height:1.7;}
.feature-card p em{display:block;}
@media(max-width:1340px){ #featuresBox{padding-bottom:250px;} }
@media(max-width:1120px){ #featuresBox{padding-bottom:200px;} }
@media(max-width:990px){
	#featuresBox{padding-bottom:25%; background-size:228% auto; background-position:52.5% bottom;}	
	.features-grid{grid-template-columns:repeat(2,1fr);}	
	.feature-icon{width:85px;height:75px;}
	.feature-card h3{margin-top:20px;}		
}
@media(max-width:720px){
	.features-grid{grid-template-columns:1fr;}
}
@media(max-width:580px){
	#featuresBox{padding-bottom:30%; background-size:310% auto; background-position:45.7% bottom;}
}
@media(max-width:360px){
	.feature-icon{width:75px;height:66px; font-size:3.8em;}
	.feature-card h3{font-size:1.9em; margin-top:15px;}	
}


/* 通知點 */
.fab-dot{
	position:absolute;
	top:4px;right:4px;
	width:13px;height:13px;
	background:#FFD700;
	border-radius:50%;
	border:2px solid white;
	animation:dotPulse 2s infinite;
}
@keyframes dotPulse{
	0%,100%{transform:scale(1);opacity:1;}
	50%{transform:scale(1.3);opacity:.7;}
}

/* 文字標籤 */
.fab-tag{
	background:white;
	color:var(--green);
	border:1.5px solid var(--green-light);
	border-radius:20px;
	padding:4px 12px;
	font-size:1.4em;
	font-weight:700;
	box-shadow:0 2px 10px rgba(0,0,0,.1);
	white-space:nowrap;
	animation:tagBounce 3s ease-in-out infinite;
	cursor:pointer;
	font-family:'Noto Serif TC',serif;
	transition: opacity .6s ease;
}
.fab-tag.fade-out {opacity: 0;}
@keyframes tagBounce{
	0%,100%{transform:translateY(0);}
	50%{transform:translateY(-4px);}
}
@media(max-width:768px){
	.main-nav{display:none;} 
	#yutong-fab{right:14px;bottom:24px;}
	.fab-menu{width:220px;}
}
body,td,th {
	font-family: "Noto Sans TC", "Microsoft JhengHei", sans-serif;
}
.sr-only {
	position:absolute;
	width:1px;
	height:1px;
	padding:0;
	margin:-1px;
	overflow:hidden;
	clip:rect(0,0,0,0);
	border:0;
}
.sr-only-focusable {
    position:fixed;
	top:0;
	left:0;
	color:#000;
	opacity:0;
	z-index:9999;
}
.sr-only-focusable:active,
.sr-only-focusable:focus {
	color:#FFF;
	font-size:1.2em;
	padding:5px 10px;	
	opacity:1;
	background:#e60617;
}


.accessInstr {
	position:absolute;
	width:calc(78% - 20px);	
	right:10px;
    top: 50%;
    transform: translate(0, -50%);
	font-size:1em;		
	text-align:left;
}
.accessInstr_sp {
	font-size:1.1em;
	margin:20px auto 0;
}

/* P4:平台使用限制說明(開通頁簽「立即註冊」按鈕正下方,字體縮小) */
.accessInstr-sm {
    font-size: 0.85em;
    line-height: 1.6;
    margin: 12px auto 0;
    color: #666;
}


/** formBox **/
.form-wrap {
	position: relative;
	overflow: hidden;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	background-image: url(../images/main-login-768.jpg);
	font-family:'Noto Serif TC',serif;
	min-height: 580px;	
}
.form-inner {width:100%; padding: 50px 24px;box-sizing:border-box; margin: 0 auto;}
#sloganBox {width:100%;margin:0 auto 20px;text-align:center;}
#sloganBox h1{font-size:2.55em;font-weight:900;color:#5b4931;	line-height:1.4; margin-left:-0.5em;}
#sloganBox h1 span{font-size:55%; display:block; margin-left:1em;}
#sloganBox h2{font-size:1.9em;margin-top:7px;color:#333;text-align: justify; line-height: 1.55;}
#sloganBox p{font-size:1.5em;margin-top:7px;color:#222;text-align: justify; line-height: 1.55;}
#formBox {
	margin:0 auto;
	width:100%;	
	background:#fcf9f5;
	border:solid 1px #f2ece4;
	box-shadow: 0 0 10px rgba(82,67,45,.1);
	border-radius:15px;
	overflow:hidden;
	padding:20px 40px;
	box-sizing:border-box;
}
#formBox > ul {position:relative; height:auto !important;}
#formBox > ul > li {list-style:none;}
#formBox > ul > li > a {
	display:block;
	width:100%;
	color:#333;
	border-bottom:solid 2px #eee;
	text-align:center;
}
#formBox > ul > li > a:hover,
#formBox > ul > li > a:focus {
	color:#bf2626;
	border-bottom:solid 2px #bf2626;
}
#formBox > ul > li > a.saTab,
#formBox > ul > li > a.saTabOn {
	position:absolute;
	top:0;
	text-align:center;
	border-right:2px solid #eee;
	box-sizing:border-box;
}
#formBox > ul > li:last-child > a.saTab,
#formBox > ul > li:last-child > a.saTabOn {border-right:none;}
#formBox > ul.tot2 > li > a.saTab,
#formBox > ul.tot2 > li > a.saTabOn {width:50%;}
#formBox > ul.tot3 > li > a.saTab,
#formBox > ul.tot3 > li > a.saTabOn {width:33.3333%;}
#formBox > ul > li > a.saTabOn {
	position:relative;
	color:#215020;
	border-bottom:solid 4px #215020;	
	cursor:text;
	z-index:1;
}
#formBox > ul > li:nth-child(1) > a.saTab,
#formBox > ul > li:nth-child(1) > a.saTabOn { left:0; }
#formBox > ul.tot2 > li:nth-child(2) > a.saTab,
#formBox > ul.tot2 > li:nth-child(2) > a.saTabOn { left:50%; }
#formBox > ul > li:first-child > a {border-radius:15px 0 0 0;}
#formBox > ul > li:last-child > a {border-radius:0 15px 0 0;}
#formBox > ul > li > a strong {
	display:flex;
	width:100%;
	min-height:50px;
	font-size:2.2em;
	font-weight:bold;
	text-align:center;
	align-items:center;
	flex-direction:column;
}
#formBox > ul > li .saCont {position:relative; width:100%;}
@media screen and (max-width:768px) {
	.form-inner {padding: 40px 24px; margin-top:0;}	
	#formBox {padding:20px 25px;}				
	#formBox > ul > li > a {padding:5px 5px 15px 5px;}
	#formBox.p6 > ul > li > a { min-height:95px; }
	#formBox > ul > li > a strong { font-size:2.1em; min-height:auto;}
}
@media screen and (max-width:420px) {
	#formBox {padding:10px;}	
	#formBox > ul > li > a strong {font-size:1.9em;}
	#sloganBox p{font-size:1.4em; text-align:center;}	
}
@media screen and (min-width:991px) {
	.form-inner {margin-top:0;}	
	#formBox {width:80%;}	
	#formBox > ul > li > a strong {font-size:2.7em;}
}
@media screen and (min-width:991px) {
	.form-wrap {
		position:relative;
		background:url(../images/main-login.png) 50% bottom;
		background-size:auto 100%;
	}
	.form-wrap:before {  
		content:'';
		display:block;
		position:absolute;
		top:0;
		left:0;
		width:100%;
		height:100%;
		background:url(../images/main-login-top.png) no-repeat 50% 0;
		background-size:auto 100%;
	}
	.form-inner {
		position:relative;
		max-width:1320px;
		padding:50px 24px;
		display:flex;
		flex-wrap:wrap;
		align-items:flex-start;
		gap:20px;
		z-index:1;
	}
	#sloganBox {width:35%; text-align:left; padding-right: 2%; box-sizing: border-box; margin:20px auto;}	
	#sloganBox h1{font-size:2.95vw;}
	#sloganBox h2{font-size:1.55vw;}
	#formBox {width:calc(65% - 20px);}
}
@media screen and (min-width:1121px) {
	.form-inner { padding:70px 24px;}
}
@media screen and (min-width:1281px) {
	.form-wrap,
	.form-wrap:before {background-size:cover;}
	.form-inner {padding:80px 24px;}
	#sloganBox h1{font-size:3.8em;}
	#sloganBox h2{font-size:2em;}
	.accessInstr {font-size:1.2em;right:20px; width:calc(80% - 20px);}		
}
@media screen and (min-width:1301px) {
	#sloganBox {padding-right: 3%;}		
}


/* ----- loginBox ----- */
.loginBox {
	width:100%;
	text-align:left;
	margin:0 auto;
	padding-top:20px;
	box-sizing:border-box;	
}
.loginBox .mbTex {
	position:relative;
	display:flex;
	width:100%;
	min-height:80px;
	font-size:1.7em;
	line-height:165%;
	font-weight:bold;
	flex-direction:column;
	justify-content:center;
	align-items:center;
	padding-left:120px;
	box-sizing:border-box;
	margin-bottom:30px;
}
.loginBox .mbTex:before {
    content:"";
    display:block;
    position:absolute;
	left:20px;
    top:0;
    width:80px;
    height:80px;
	background-repeat:no-repeat;
	background-position:50% 50%;
	background-size:cover;
	z-index:1;
}
.loginBox .mbTex.login:before {background-image:url(../images/member-login.svg);}
.loginBox .mbTex.forgot:before {background-image:url(../images/member-forgot.svg);}
.loginBox .mbTex.revise:before {background-image:url(../images/member-revise.svg);}
.loginBox .mbTex.mail:before {background-image:url(../images/member-mail.svg);}
.loginBox .login-list {
	display:flex;
	width:100%;
	flex-wrap:wrap;
	margin:0 auto;
}
.loginBox .login-list + .login-list {
	margin-top:10px;
}
.loginBox .formLabel {
	display:inline-block;
	width:120px;
	height:50px;
	color:#333;
	font-size:1.7em;
	font-weight:bold;
	line-height:50px;
	text-align:center;
	background:#fff;
	border:1px solid #CCC;
	border-right:none;
	box-sizing:border-box;
	-webkit-border-radius:5px 0 0 5px;
	   -moz-border-radius:5px 0 0 5px;
            border-radius:5px 0 0 5px;
}
.loginBox .formLabel.lb2 {
	-webkit-border-radius:5px;
	   -moz-border-radius:5px;
            border-radius:5px;
}
.loginBox .formLabel > span {
	position:relative;
	width:100%;
	min-height:50px;
	display:flex;
	flex-wrap:wrap;
    align-items:center;
	align-content:center;
	box-sizing:border-box;
	overflow:hidden;
}
.loginBox .formLabel > span.wd2 {
	letter-spacing:2em;
	white-space:nowrap;
}
.loginBox .formLabel > span.wd3 {
	letter-spacing:0.5em;
	white-space:nowrap;
}
.loginBox .formLabel > span.pwd {
	width:calc(5em + 17.5px);
	padding:0 0 0 17.5px;
}
.loginBox .formLabel > span.pwd.wd4 {
	letter-spacing:0.33333em;
	white-space:nowrap;
}
.loginBox .formLabel > span.account,
.loginBox .formLabel > span.password,
.loginBox .formLabel > span.captcha,
.loginBox .formLabel > span.mail,
.loginBox .formLabel > span.subscribe {
	width:calc(4em + 38px);
	padding:0 0 0 38px;
}
.loginBox .formLabel > span.account:before,
.loginBox .formLabel > span.password:before,
.loginBox .formLabel > span.captcha:before,
.loginBox .formLabel > span.mail:before,
.loginBox .formLabel > span.subscribe:before {
 	content:"";
	display:block;
	position:absolute;
	top:50%;
    left:13px;
	width:20px;
	height:20px;
	background-position:50% 50%;
	background-repeat:no-repeat;
	background-size:cover;
	margin:-10px 0 0 0;
}
.loginBox .formLabel > span.account:before {background-image:url(../images/formLabel-account.svg);}
.loginBox .formLabel > span.password:before {background-image:url(../images/formLabel-password.svg);}
.loginBox .formLabel > span.captcha:before {background-image:url(../images/formLabel-captcha.svg);}
.loginBox .formLabel > span.mail:before {background-image:url(../images/formLabel-mail.svg);}
.loginBox .formLabel > span.subscribe:before {background-image:url(../images/formLabel-subscribe.svg);}
.loginBox fieldset {
	display:inline-block;
	width:calc(100% - 120px);
	padding-left:10px;
	vertical-align:middle;
	box-sizing:border-box;
}
.loginBox fieldset legend {
    position:fixed;
    width:1px;
    height:1px;
	color:#000;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip:rect(0, 0, 0, 0);
    border:0;	
}
.loginBox .radionote {
	font-size:1.7em;
	margin:-5px;
	letter-spacing:-9px;
	vertical-align:top;
}
.loginBox .radionote .box {
	position:relative;
	display:inline-block;
	letter-spacing:0;
	margin:5px;
}
.loginBox .radionote input[type="radio"] {
	position:absolute;
	display:block;
	width:100%;
	height:100%;
	margin:0;
	border-color:transparent;
	background-color:transparent;
	-webkit-appearance:none;
	-webkit-tap-highlight-color:rgba(0,0,0,0);
	cursor:pointer;
}
/*for ie9*/
:root .loginBox .radionote input[type="radio"] {
	left:50%\9!important;
	top:50%\9!important;
    width:22px\9!important;
    height:22px\9!important;
	border:none\9!important;
	background:#FFF\9!important;
	margin:-11px 0 0 -8.25em\9!important;
	z-index:10\9!important;
}
/*for ie10 、 ie11*/
@media screen and (-ms-high-contrast:active),(-ms-high-contrast:none){
	.loginBox .radionote input[type="radio"] {
		left:50%;
		top:50%;
		width:22px;
		height:22px;
		border:none;
		background:#FFF;
		margin:-11px 0 0 -8.25em;
		z-index:10;
	}
}
.loginBox .radionote input[type="radio"] + label {
	display:inline-block;
	width:100%;
	color:#a40035;
	font-family:"PingFang TC", "微軟正黑體", "Microsoft JhengHei", Arial, Helvetica, sans-serif;
    font-size:1em;
	font-weight:bold;
	line-height:48px;
	padding:0 20px;
	background:#f2dfe5;
	border:1px solid #e5a1b6;
	box-sizing:border-box;
	vertical-align:middle;
	cursor:pointer;
	-webkit-border-radius:5px;
	   -moz-border-radius:5px;
            border-radius:5px;
}
.loginBox .radionote input[type="radio"] + label span {
	position:relative;
	display:inline-block;
	padding-left:35px;
}
.loginBox .radionote input[type="radio"] + label span:after {
	content:"";
	position:absolute;
    display:block;
	top:50%;
	left:0;    
    padding:0;
    width:28px;
    height:28px;
    background:#FFF;
	margin:-14px 0 0 0;
	-webkit-border-radius:100%;
	   -moz-border-radius:100%;
            border-radius:100%;
}
.loginBox .radionote input[type="radio"]:hover + label,
.loginBox .radionote input[type="radio"]:focus + label {
	color:#C73200;
	background:#f2eadf;
	border-color:#FF9933;
}
.loginBox .radionote input[type="radio"]:checked + label,
.loginBox .radionote input[type="radio"]:checked:hover + label {
	color:#FFF;
	border-color:#a40035;
	background:#a40035;
}
.loginBox .radionote input[type="radio"]:checked + label span:before,
.loginBox .radionote input[type="radio"]:checked:hover + label span:before,
.loginBox .radionote input[type="radio"]:checked:focus + label span:before  {
	content:"";
	position:absolute;
    display:block;
	top:50%;
	left:7px;
	width:14px;
    height:14px;
	margin-top:-7px;
	background:#000;
    z-index:2;
	-webkit-border-radius:100%;
	   -moz-border-radius:100%;
            border-radius:100%;
}
.loginBox .inputTxt {	
	display:inline-block;
	width:calc(100% - 120px);
	height:50px;
    padding:0 10px;
    font-family:"PingFang TC", "微軟正黑體", "Microsoft JhengHei", Arial, Helvetica, sans-serif;
	font-size:1.7em;
	letter-spacing:0;
    line-height:50px;
    vertical-align:middle;
	box-sizing:border-box;
    border:1px solid #CCC;
	border-left:none;
	background:#FFF;
	-webkit-border-radius:0 5px 5px 0;
	   -moz-border-radius:0 5px 5px 0;
            border-radius:0 5px 5px 0;
}
.loginBox .inputTxt:focus {
	background-color:#f8f2e2;
    border:1px solid #FF9933;
}
.loginBox .inputTxt.w1 {
	width:calc(100% - 120px - 240px);
}
.loginBox .verification {
	width:230px;
	display:flex;
	flex-wrap:wrap;
	align-items:center;
	margin-left:10px
}
.loginBox .verification .captchaImg {
	display:inline-block;
	vertical-align:middle;
}
.loginBox .verification .btnVoice,
.loginBox .verification .btnReload {
	display:inline-block;
	position:relative;
	color:#FFF;
	width:50px;
	height:50px;
	text-indent:-999px;
	text-align:left;
	background:#757575;
	vertical-align:middle;
	overflow:hidden;
	margin-left:10px;
	-webkit-border-radius:5px;
	   -moz-border-radius:5px;
	        border-radius:5px;
}
.loginBox .verification .btnVoice:before {
	content:"";
	position:absolute;
    top:0;
	left:0;
	display:block;
    width:100%;
    height:100%;
    background:url(../images/voice-icon.svg) 50% 50% no-repeat;
	background-size:cover;
}
.loginBox .verification .btnReload:before {
	content:"";
	position:absolute;
    top:0;
	left:0;
	display:block;
    width:100%;
    height:100%;
    background:url(../images/reload-icon.svg) 50% 50% no-repeat;
	background-size:cover;
}
.loginBox .verification .btnVoice:hover,
.loginBox .verification .btnVoice:focus,
.loginBox .verification .btnReload:hover,
.loginBox .verification .btnReload:focus {
	background:#D35E16;
}
.loginBox .loginBot {
	width:230px;
	display:flex;
	flex-wrap:wrap;
	align-items:center;
	justify-content:flex-end;
}
.loginBox .loginBot a {	
	position:relative;
	display:inline-block;
	color:#000;
    font-size:1.7em;
    font-weight:bold;
	line-height:30px;
}
.loginBox .loginBot a + a {
	margin-left:20px;
}
.loginBox .loginBot a:hover,
.loginBox .loginBot a:focus {
	color:#B20000;
}
.loginBox .loginBot a span {
    display:flex;
    align-items:center;
	padding-left:35px;
}
.loginBox .loginBot a span:before {
	position:absolute;
	left:0;
	top:50%;
    content:'';
    display:block;
    width:30px;
    height:30px;
	margin-top:-15px;
	background-position:50% 50%;
	background-repeat:no-repeat;
	background-size:cover;
	background-color:#000;
	-webkit-mask-size:30px 30px;
			mask-size:30px 30px;
	-webkit-border-radius:50px;
	   -moz-border-radius:50px;
	        border-radius:50px;
	-webkit-transition:all 0.3s ease;
	   -moz-transition:all 0.3s ease;
	     -o-transition:all 0.3s ease;
	        transition:all 0.3s ease;
}
.loginBox .loginBot a.member span:before {
	-webkit-mask-image:url(../images/loginBot-member.svg);
			mask-image:url(../images/loginBot-member.svg);
}
.loginBox .loginBot a.password span:before {
	-webkit-mask-image:url(../images/loginBot-password.svg);
			mask-image:url(../images/loginBot-password.svg);
}
.loginBox .loginBot a:hover  span:before,
.loginBox .loginBot a:focus  span:before {
	background-color:#B20000;
}
@media screen and (max-width:640px) {
	.loginBox .inputTxt.w1 {width:calc(100% - 120px);}
	.loginBox .mbTex {min-height:inherit; padding:90px 0 0 0;}
	.loginBox .mbTex:before {left:50%; margin-left:-40px;}
	.loginBox .verification {width:100% !important; justify-content:center;margin:10px 0 0 0;}	
}
@media screen and (max-width:560px) {
	.loginBox .radionote .box {width:calc(50% - 10px);}
	.loginBox .radionote input[type="radio"] + label {text-align:center; padding:0;}
}
@media screen and (max-width:480px) {
	.loginBox .formLabel {display:flex; width:100%; justify-content:center;border-radius:5px 5px 0 0;}	
	.loginBox .formLabel {border:1px solid #CCC; border-bottom:none;}	
	.loginBox .formLabel > span.pwd {width:5em; padding:0;}
	.loginBox .formLabel > span.account,
	.loginBox .formLabel > span.password,
	.loginBox .formLabel > span.captcha,
	.loginBox .formLabel > span.mail,
	.loginBox .formLabel > span.subscribe {width:calc(4em + 25px);padding:0 0 0 25px;}
	.loginBox .formLabel > span.account:before,
	.loginBox .formLabel > span.password:before,
	.loginBox .formLabel > span.captcha:before,
	.loginBox .formLabel > span.mail:before,
	.loginBox .formLabel > span.subscribe:before {left:0;}
	.loginBox fieldset {
		width:100% !important;
		padding:0;
		margin-top:10px;
	}
	.loginBox .inputTxt {
		width:100% !important;
		text-align:center;
		border:1px solid #CCC;
		border-top:none;
		-webkit-border-radius:0 0 5px 5px;
		   -moz-border-radius:0 0 5px 5px;
				border-radius:0 0 5px 5px;
	}
}
@media screen and (min-width:991px) {
	.loginBox .mbTex {
		min-height:100px;
		padding-left:150px;
	}
	.loginBox .mbTex:before {
		left:25px;
		width:100px;
		height:100px;
	}
	.loginBox .formLabel {
		width:150px;
		height:55px;
		line-height:55px;
	}
	.loginBox .formLabel > span {min-height:55px;}
	.loginBox .formLabel > span.pwd {width:calc(5em + 27.5px); padding:0 0 0 27.5px;}
	.loginBox .formLabel > span.account,
	.loginBox .formLabel > span.password,
	.loginBox .formLabel > span.captcha,
	.loginBox .formLabel > span.mail,
	.loginBox .formLabel > span.subscribe {width:calc(4em + 50px); padding:0 0 0 50px;}
	.loginBox .formLabel > span.account:before,
	.loginBox .formLabel > span.password:before,
	.loginBox .formLabel > span.captcha:before,
	.loginBox .formLabel > span.mail:before,
	.loginBox .formLabel > span.subscribe:before {
		left:18px;
		width:23px;
		height:23px;
		margin:-11.5px 0 0 0;
	}
	.loginBox fieldset {width:calc(100% - 150px);}
	.loginBox .radionote input[type="radio"] + label {line-height:53px;}
	.loginBox .inputTxt {
		width:calc(100% - 150px);
		height:55px;
		line-height:55px;
		padding:0 15px;
	}
	.loginBox .inputTxt.w1 {width:calc(100% - 150px - 240px);}		
	.loginBox .verification .btnVoice,
	.loginBox .verification .btnReload {width:55px; height:55px;}
	.loginBox .loginBot {width:100%; justify-content:center; margin-top:20px;}
	.loginBox .loginBot a + a {margin-left:25px;}
	.loginBox .login-list + .login-list {margin-top:20px;}	
}
@media screen and (min-width:1200px) {
	.memberBox {padding:40px;}
	.loginBox .mbTex {font-size:1.9em;}
	.loginBox .formLabel {font-size:1.9em;}
	.loginBox .radionote {font-size:1.9em;}
	.loginBox .inputTxt {font-size:1.9em;}
	.loginBox .loginBot a {font-size:1.9em;}
}


/* ----- formBtn ----- */
.formBtn {
	width:100%;
	text-align:center;
	margin:15px auto 10px;
}
.formBtn .box {
	margin:-5px;
}
.formBtn a,
.formBtn button {
	position:relative;	
	display:inline-block;
	width:calc(100% - 10px);
	color:#fff;
	font-family:"PingFang TC Semibold", "微软雅黑", "Microsoft YaHei";
	font-size:1.9em;
	font-weight:bold;
	line-height:25px;
	padding:15px 0;
	margin:5px auto;
	border:none;
	cursor:pointer;
	background:#40633f;
	box-sizing:border-box;
	-webkit-border-radius:5px;
	   -moz-border-radius:5px;
            border-radius:5px;
}
.formBtn a:hover,
.formBtn a:focus,
.formBtn button:hover,
.formBtn button:focus {
	background:#D14600;
}
.formBtn a span,
.formBtn button span {
	position:relative;
	display:inline-block;
	padding:0 30px 0 0;
}
.formBtn a span:before,
.formBtn button span:before {
	content:"";
	display:block;
	position:absolute;
	top:1px;
	right:0;
	width:25px;
	height:25px;
	background-repeat:no-repeat;
	background-position:50% 50%;
	background-size:cover;
	z-index:1;
	-webkit-border-radius:100px;
	   -moz-border-radius:100px;
            border-radius:100px;
}
.formBtn .btnSend span:before {background-image:url(../images/btnSend.svg);}
.formBtn .btnNext span:before {background-image:url(../images/btnNext.svg);}
.formBtn .btnMail span:before {background-image:url(../images/btnMail.svg);}
.formBtn .btnBack span:before {background-image:url(../images/btnBack.svg);}
@media screen and (max-width:360px) {
	.formBtn a span:after,
	.formBtn button span:after{ display:none;}
}
@media screen and (min-width:991px){
	.formBtn {margin-top:20px;}
}
@media screen and (min-width:1200px) {
	.formBtn a,
	.formBtn button {font-size:2.1em; padding:20px 0;}
}