@charset "UTF-8";
/* =============================================================================
      ____    __  __  __  _____
    /\  _ _`\/\ \/\ \/\ \/ ____/
    \ \ \  \ \ \ \ \ \ \ \ \_____
     \ \ \  \ \ \ \ \ \ \ \_____ \
      \ \ \__\ \ \ \/  \/ / ____\ \
       \ \_____/\ \______/ /\_____/
        \/____/  \/_____/  \/____/
        
    Don't Worry Never Crash
   ========================================================================== */
/* =============================================================================
   BASIC
   ========================================================================== */
/*---DEFAULT---*/
html, body { height: 100%; -webkit-text-size-adjust: none; text-size-adjust: none;}
body { background: url(../images/bg.jpg) no-repeat center center fixed; background-size: cover;}
body, th, td, input { font-size: 100%; }
a { text-decoration: none; }
p { font-size: 1em; line-height: 1.5em; margin-bottom: 0.6em; color: #555; }
p strong{ color: #333;}
li { font-size: 1.125em;; line-height: 1.5em; color: #333; }
h1, h2, h3, h4, h5, h6 { font-weight: 700;}
h1 { font-size: 2.142em; line-height: 1.1333em; margin-bottom: .2666em; }
h2 { font-size: 1.714em; line-height: 1.1666em; margin-bottom: .4555em; }
h3 { font-size: 1.3em; line-height: 1.4em; margin-bottom: .4em; }
h4 { font-size: 1.143em; line-height: 1.5em; margin-bottom: .4555em; }
h5 { font-size: 1em; line-height: 1.5em; margin-bottom: .5em; }
h6 { font-size: 0.857em; line-height: 1.5em; margin-bottom: .4555em; }
	a:link, a:visited { text-decoration: none;}
	::selection { background: #111; color: #FFF;}
	/*SCROLL BAR*/
	body.pc::-webkit-scrollbar{ width:8px; }
	body.pc::-webkit-scrollbar-track{ background:#FFF;}
	body.pc::-webkit-scrollbar-thumb{ background:#482D8C; }
	body.pc::-webkit-scrollbar-thumb:hover{ background:#482D8C; }
/*------*/

@media only screen and (max-width: 992px) {
	h3 { font-size: 1.2em;}
	p { font-size: 1em;}
}
.fc1{ color: #482D8C;}

/*---IMG LOAD---*/
.imgLiquidCenter, .imgLiquidFill{ opacity: 0; transition: opacity 1000ms ease, transform 500ms ease; }
.imgLiquidCenter img, .imgLiquidFill img{ display: none;}
.imgLiquid_ready { opacity: 1; }
div.lazy{ opacity: 0; transition: opacity 1000ms ease, transform 500ms ease; }
div.lazy.imgLiquid_ready{ opacity: 1;}
img.lazy{ opacity: 0; transition: opacity 1000ms ease, transform 500ms ease; }
img.lazy.ed{ opacity: 1;}
/*------*/

/*---ELEMENT---*/
.ie { position: fixed; width: 100%; height: 100%; padding: 20% 20%; text-align: center; left: 0; top: 0; background: #f2f2f2; z-index: 9999; }
.ie .title { color: #333 !important; font-size: 2em; margin-bottom: 10px;}
.ie p { text-align: center; color: #333 !important; font-size: 0.9375em; }
.ie a { color: #F36; }
/*------*/

/*---loading_box---*/
.loading_box{ position: fixed; top: 0; left: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; z-index: 9999;}
.loading_box::after{ display: block; content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1;  background: url(../images/loading.gif) no-repeat center center; background-size: 60px; }
.loading_box::before{ display: block; content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; background: #FF8978;}
.loading_box .icon{ width: 60px; margin-top: 0;}
.loading_box .icon img{ display: block; width: 100%;}
/*------*/

/* =============================================================================
   BASIC END
   ========================================================================== */


/* =============================================================================
   MODULE
   ========================================================================== */

/*---page width---*/
.xl-width { position: relative; max-width:1100px; margin: auto;}
.inner-width { position: relative; max-width:960px; margin: auto;}
.txt-width { position: relative; max-width:900px; margin: auto; }
@media only screen and (max-width: 1200px) {
	.xl-width { margin: auto 50px; max-width: inherit;}
	.inner-width { margin: auto 50px; max-width: inherit;}
}
@media only screen and (max-width: 992px) {
	.xl-width { margin: auto 30px; max-width: inherit;}
	.inner-width { margin: auto 30px; max-width: inherit;}
	.txt-width { margin: auto 30px; max-width: inherit;}
}
@media only screen and (max-width: 576px) {
	.xl-width { margin: auto 20px; }
	.inner-width { margin: auto 20px;}
	.txt-width { margin: auto 20px;}
}
/*------*/

/*---title_bar---*/
.title_bar{ position: relative; text-align: left; padding: 0;}
.title_bar.left{ text-align: left; }
.title_bar.right{ text-align: right; }
.title_bar.center{ text-align: center; }
.title_bar .title{ position: relative; display: block; margin: 0 0 20px 0; }
.title_bar .title b{ display: block; font:900 50px/1em 'Inter', 'Noto Sans TC', sans-serif; color: #482D8C; margin-bottom: 6px;}
.title_bar .title span{ display: block; font:900 20px/1.2em 'Inter', 'Noto Sans TC', sans-serif; color: #482D8C;}
.title_bar.w .title b{ color: #FFF;}
.title_bar.w .title span{ color: #FFF;}
.title_bar .super_title{ position: relative; display: block; margin: 0 0 20px 0; }
.title_bar .super_title b{ display: block; font:900 60px/1em 'Inter', 'Noto Sans TC', sans-serif; color: #FFF; margin-bottom: 6px;}
.title_bar .super_title span{ display: block; font:700 24px/1.2em 'Inter', 'Noto Sans TC', sans-serif; color: #FFF;}
.title_bar .cou_title{ display: block; font:700 50px/1.2em 'Inter', 'Noto Sans TC', sans-serif; color: #482D8C; margin-bottom: 6px;}
.title_bar .con{ font-size: 1.125rem; color: #666; font-weight: 700;}
@media only screen and (max-width: 1200px) {
	.title_bar .cou_title{font-size: 40px;}
	.title_bar .con{ font-size: 1rem; }
}
@media only screen and (max-width: 992px) {
	.title_bar .title b{ font-size: 40px;}
	.title_bar .super_title b{ font-size: 40px;}
	.title_bar .super_title span{ font-size: 20px;}
}
@media only screen and (max-width: 576px) {
	.title_bar .title b{ font-size: 28px;}
	.title_bar .title span{ font-size: 20px;}
	.title_bar .super_title b{ font-size: 30px;}
	.title_bar .super_title span{ font-size: 18px;}
	.title_bar .cou_title{font-size: 30px;}
}
/*------*/

/*---button---*/
.btns .btn_more{ margin: 5px;}
.btn_more{ position: relative; display: block; color: #FFF; background: #482D8C; min-width: 120px; text-align: right; padding: 0 20px; border-radius: 20px;
	font:400 20px/40px 'Inter', 'Noto Sans TC', sans-serif;
	transition: 200ms ease;
}
.btn_more .icon{ position: absolute; top: 0; left: 10px; width: 40px; height: 40px; line-height: 40px; text-align: center;}
.btn_more .icon i{ font-size: 20px;}
.btn_more:hover, .btn_more:focus{ background: #FFF; color: #482D8C;}
.btn_more.s1{ background: #FF8978; font-size: 15px; padding-left: 60px;}
.btns .btn_send{ margin: 5px;}
.btn_send{ position: relative; display: block; color: #FFF; min-width: 120px; text-align: center; padding: 0 30px; border-radius: 0.375rem; background: #CCC; border: solid 1px #CCC; box-sizing: border-box;
	font: 400 20px/40px 'Roboto', sans-serif;
	transition: 200ms ease;
}
.btn_send.w200{ width: 200px; margin: auto;}

.btn_send.c1-1{ background: #FF8978; border: solid 1px #FF8978;}
.btn_send.c1-1:hover, .btn_send.c1-1:focus{ filter: brightness(1.2); color: #FFF;}
.btn_send.c1-2{ background: #FFF; color: #FF8978; border: solid 1px #FF8978;}
.btn_send.c1-2:hover, .btn_send.c1-2:focus{ background: #ffaa9d; color: #FFF;}

.btn_send.c2-1{ background: #482D8C; border: solid 1px #482D8C; color: #FFF;}
.btn_send.c2-1:hover, .btn_send.c2-1:focus{ filter: brightness(1.4);}
.btn_send.c2-2{ background: #FFF; color: #482D8C; border: solid 1px #482D8C;}
.btn_send.c2-2:hover, .btn_send.c2-2:focus{ background: #6d5c9a; color: #FFF;}

.btn_send.c3{ background: #FFF; border: solid 1px #FFF; color: #FF8978;}
.btn_send.c3:hover, .btn_send.c3:focus{ background: #ff715b; border: solid 1px #FFF; color: #FFF;}
.btn_send.c3-2{ background: transparent; color: #FFF; border: solid 1px #FFF;}
.btn_send.c3-2:hover, .btn_send.c3-2:focus{ background: #ffaa9d; color: #FFF;}

.form-control{font-size:20px;line-height:28px;border:solid 1px #FF8978;}
.form-control:disabled{background-color:#FFD8D2;}

.item_pw{ position: relative;}
.pwch{ position: absolute; top: 3px; right: 0; padding: .375rem .75rem; color: #333;}
.pwch:hover{ color: #482D8C;}

@media only screen and (max-width: 1200px) {
	.btn_more{ padding: 0 20px;}

}
@media only screen and (max-width: 576px) {
	.btn_more{ min-width: 100px; }
	.form-control { font-size: 15px;}
	.btn_send{ font-size: 15px;}
	.btn_send.w200{ min-width: inherit; width: auto;}
}
/*------*/

/*---to_top---*/
.to_top{ position: fixed; cursor: pointer; bottom: -50px; right: 20px; width: 40px; height: 40px; line-height: 40px; text-align: center; background: #482D8C; border: solid 1px #FDEBD7; border-radius: 24px; color: #FFF; font-size: 16px; z-index: 100;
	transition: 300ms ease;
}
.to_top:hover{ background: #FF8978; color: #FFF;}
.to_top.ed{ bottom: 20px; }
/*------*/

/*---alert_box---*/
.alert_box{ position:fixed; top:0; right:-400px; width:0%; height:0%; overflow:auto; -webkit-overflow-scrolling: touch; opacity:0; z-index: 3000;
	transition: 500ms ease;
}
.alert_box.on{ right:0; opacity:1; width:100%; height:100%; }
.alert_box .pop_txt{ position: absolute; width: 300px ; padding: 20px; z-index:10; box-sizing: border-box; color: #FFF; top: 10px; right: 10px;
	background: rgba(72, 45, 140, 0.95);
	backdrop-filter: blur(5px);
	transition: 500ms ease;
}

.alert_box.on .pop_txt::before{
	transform-origin:bottom;
	transform:skewX(-25deg);
}
.alert_box .pop_txt .info{ display: flex;}
.alert_box .fa{ font-size: 24px; margin-right: 10px;}
.alert_box.on .mask{  position: fixed; top:0%; left:0; width:100%; height:100%; z-index:1; background-size: cover; opacity:1;
	transition: 800ms ease;
}
/*------*/

/*---progress---*/
.progress {
    --bs-progress-height: 2rem;
    --bs-progress-font-size: 1rem;
    --bs-progress-bg: #fff;
    --bs-progress-box-shadow:none;
    --bs-progress-bar-color: #fff;
	border: solid 1px #FFF;
	border-radius: 15px;
}

.progress-bar{
	border-radius: 15px;
	background: linear-gradient(90deg, #FFCB78 0%, #FF863A 100%), #0092BC;
	text-align: right;
	padding-right: 5px;
}
/*------*/

/* =============================================================================
   MODULE END
   ========================================================================== */

/* =============================================================================
   BLOCK
   ========================================================================== */
#wrapper { position: relative; z-index: 1; width: 100%; margin:auto; top:0; overflow:hidden;}
#content { position: relative; }
/* =============================================================================
   BLOCK END
   ========================================================================== */

/* =============================================================================
   HEADER
   ========================================================================== */
#header { position:fixed; z-index:1000; width:100%; left:0; }
#header::before { position:absolute; display: block; content: ''; z-index:-1; width:100%; top:0; left:0; height: 60px;
	background: rgba(255, 255, 255, 0.5); 
	-webkit-backdrop-filter: blur(20px) saturate(150%);
	backdrop-filter: blur(20px) saturate(150%);
	transition: 300ms ease;
}
#header.bg_0::before { 
	background: none; 
	-webkit-backdrop-filter: blur(0) saturate(100%);
	backdrop-filter: blur(0) saturate(100%);
}
#header.bg_1::before { 
	background: rgba(255, 255, 255, 0.90); 
}
#header>.inner-width{ display: flex; justify-content: flex-start; align-items: center; height: 60px;
	transition: 300ms ease;
}

/*---logo---*/
.logo { position: fixed; top: 0; left: 0;
	transition: 300ms ease;
}
.logo a { width: 154px; display: flex; justify-content: space-between; transition: 500ms ease;}
.logo b { display: block;}
.logo b img { width: 100%;}

/*------*/

/*---header title---*/
#header .title{ position: relative; display: flex; }
#header .title .lesson{ font:800 20px/40px 'Inter', 'Noto Sans TC', sans-serif; color: #482D8C; display: flex; align-items: center;}
#header .title .lesson::after{ content: ''; display: inline-block; width: 8px; height: 8px; margin: 0 10px; background: #FF8978; border-radius: 4px;}
#header .title .name{ position: relative; font:700 18px/40px 'Inter', 'Noto Sans TC', sans-serif; color: #FF8978; min-width: 200px; margin-right: 10px; max-width: 280px;
	display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:1; line-clamp:1; overflow: hidden;
}
#header .title .name::before{ content: ''; display: block; width: 1px; height: 120%; position: absolute; top: -10%; left: -30px; background: #482D8C;
	transform-origin: bottom;
    transform: skewX(-25deg);
}
/*------*/

/*---nav---*/
.nav{ display: flex; list-style:none; margin:0; box-sizing: border-box; position: absolute; top: 10px; right: 10px;
	transition: top 300ms ease;
}
.nav>li{ position: relative;}
.nav>li>a{ position: relative; display: flex; height: 40px; line-height: 40px; margin: 0 2px; padding: 0 5px; border-radius: 4px; transition: 300ms ease; font-size: 22px; justify-content: center; align-items: center; }
.nav>li>a i{ margin-right: 5px; color: #482D8C;}
.nav>li>a img{ width: 20px; }
.nav>li>a span{ display: none;}
.nav>li>a b{ font-size: 14px; color: #482D8C;}
.nav>li>a.info:hover{  background: none; color: #482D8C;}
.nav>li>a.info:hover b{ color: #482D8C;}
.nav>li>a:hover{ background: #482D8C; color: #FFF;}
.nav>li>a:hover b{ color: #FFF;}
/*------*/

/*---select---*/
.select{ display: flex; list-style:none; margin:0; box-sizing: border-box; position: absolute; top: 10px; right: 140px;}
.select>li{ position: relative; margin: 0 20px;}
.select>li+li::after{ content: ''; display: inline-block; width: 8px; height: 8px; margin: 0 10px; background: #FF8978; border-radius: 4px; position: absolute; top: 15px; left: -30px;}
.select>li>a{ position: relative; display: flex; height: 40px; line-height: 40px; margin: 0 2px; padding: 0 5px 0 0; font-size: 1rem; font-weight: 700; justify-content: center; align-items: center; color: #482D8C;
	transition: 300ms ease;
}
.select>li>a.right{ padding: 0 0 0 5px;}
.select>li>a::before{ content: ''; display: none; width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: -1; border-radius: 4px; background: #FFF;
	transform-origin: bottom;
}
.select>li>a i{ width: 20px; text-align: center; color: #482D8C;}
.select>li>a img{ width: 20px; }
.select>li>a:hover::before{ background: #482D8C;  display: block;}
.select>li>a:hover{ color: #FFF;}
.select>li>a:hover b{ color: #FFF;}
.select>li>a:hover i{ color: #FFF;}
/*------*/

/*---header progress_item---*/
#header .progress_item{ display: flex; align-items: center;}
#header .progress_item .item{ display: flex; margin-right: 10px;}
#header .progress_item .item>*{ margin-right: 4px; color: #482D8C;  font-size: 1rem; font-weight: 700; display: flex; align-items: center;}
#header .progress_item .item i{ color: #482D8C; font-size: 16px; margin: 0 2px;}
#header .progress_item .item img{  filter: invert(20%) sepia(77%) saturate(1333%) hue-rotate(235deg) brightness(90%) contrast(101%); height: 16px;}
/*------*/

@media only screen and (max-width: 1280px) {
	.logo a { width: 130px;}
}

@media only screen and (max-width: 1200px) {
	.logo a { width: 130px;}
	#header>.inner-width{ margin-left:150px;}
	#header .title .name{ min-width: inherit; max-width: 180px;}
}

@media only screen and (max-width: 992px) {
	.logo a { width: 120px;}
	#header.bg_1:after { position:absolute; display: block; content: ''; z-index:-1; width:100%; top:60px; left:0; height: 40px;
		background: rgba(240, 240, 240, 0.8); 
		-webkit-backdrop-filter: blur(20px) saturate(150%);
		backdrop-filter: blur(20px) saturate(150%);
		transition: 300ms ease;
	}
	#header .progress_item { position: absolute; top: 70px; left: 0; }
	
	.select{ position: fixed; top: 60px; right: 0;}
	.select>li{ padding: 0; margin: 0;}
	.select>li+li::after{ display: none;}
	.select>li>a{ height: 40px; width: 40px; line-height: 40px; margin: 0; background: #482D8C;}
	.select>li:first-child>a{ margin-right: 1px; background: #FF8978;}
	.select>li>a::before{ display: none !important;}
	.select>li>a i{ text-indent: 0; margin: 0 !important; font-size: 24px; height: 40px; width: 40px; text-align: center; line-height: 40px; color: #FFF;}
	.select>li>a span{ display: none;}
	
}
@media only screen and (max-width: 576px) {
	.logo a { width: 90px;}
	#header>.inner-width{margin-left:100px; margin-right: 0;}
	#header .title{ display: block;}
	#header .title .lesson{ font-size: 16px; line-height: 20px;}
	#header .title .name{ font-size: 14px; line-height: 20px; margin: 0; width: 170px; min-width: inherit;}
	#header .title .name::before{ display: none;}
}

@media only screen and (max-width: 390px) {
	#header .title .name{ width: 120px; font-size: 14px;}
}
/* =============================================================================
   HEADER END
   ========================================================================== */


/* =============================================================================
   FOOTER
   ========================================================================== */
#footer { position:relative; padding: 20px 0; background: #482D8C; z-index: 200; }
#footer .info{ font-size: 14px; color: #FFF; text-align: center; padding-bottom: 20px; margin-bottom: 20px; border-bottom: solid 1px rgba(255,255,255,0.2);}
#footer .copyright { color: #FFF; text-align: center; font: 400 13px/20px 'Roboto', sans-serif; }
#footer .copyright a{ display: inline-block; color: #FFF; text-decoration: underline;}
#footer .attention {display: block; text-align: center; flex: 0 0 50%; padding: 0 0 20px 0;}
#footer .attention a{ display: inline-block; line-height: 20px; text-align: center; border-radius: 10px; font-size: 15px; color: #FFF; padding: 10px;
	transition: 300ms ease;
}
#footer .attention a i{ font-size: 16px;}
#footer .attention a img{ display: inline-block; width: 16px; vertical-align: middle; margin-top: -4px;}
#footer .attention a:hover{ color: #482D8C; background: #FFF;}
#footer .attention a:hover img{ filter: invert(49%) sepia(37%) saturate(930%) hue-rotate(42deg) brightness(97%) contrast(85%); }
@media only screen and (max-width: 992px) {
	#footer>.inner-width{ flex-wrap: wrap;}
	#footer .copyright { flex: 0 0 100%; }
	#footer .attention { flex: 0 0 100%; padding: 0 0 20px 0;}
	#footer .attention { text-align: center;}
	#footer .copyright { text-align: center;}
}
@media only screen and (max-width: 576px) {
	#footer .info span{ display: block;}
	#footer .copyright span{ display: block; font-size: 12px; line-height: 1.8em;}
}
   /* =============================================================================
	  FOOTER END
	  ========================================================================== */

/*---intro_bar---*/
.intro_bar{ position: relative; z-index: -1; color: #FFF; display: flex; margin-top: -60px; padding-top: 100px; padding-bottom: 40px;}
.intro_bar::before{ display: block; content: ''; position: absolute; top: 0; left: 0; left:-70%; width: 240%; height: 100%; border-radius: 100% 100% 0 0; background: #ff8a78;}
.intro_bar .inner{ padding: 40px 0; width: 900px;}
.intro_bar .inner .title{ font:700 50px/1.2em 'Inter', 'Noto Sans TC', sans-serif; margin-bottom: 30px;}
.intro_bar .inner .subtitle b{ display: block; font:700 40px/1.2em 'Inter', 'Noto Sans TC', sans-serif;  }
.intro_bar .inner .subtitle span{ display: block; font:700 24px/1.2em 'Inter', 'Noto Sans TC', sans-serif;  }
.intro_bar .inner li{ color: #FFF; font-size: 20px;}
.intro_bar .right{ margin-right: -240px;}
.intro_bar.s1{ min-height: 180px; padding-bottom: 0;}
@media only screen and (max-width: 1200px) {
	.intro_bar .right{ margin-right: 0;}
}	
@media only screen and (max-width:992px) {
	.intro_bar::before{ left:-150%; width: 400%;}
	.intro_bar .inner { padding: 40px 0 60px; width: 100%;}
	.intro_bar .right{ margin-right: 0;}
	.intro_bar .inner .title{ font-size: 40px; margin-bottom: 20px;}
	.intro_bar .inner .subtitle b{ font-size: 30px; }
	.intro_bar .inner .subtitle span{ font-size: 18px; }
}
@media only screen and (max-width:572px) {
	.intro_bar .inner { padding: 30px 30px 50px;}
	.intro_bar .inner .title{ font-size: 30px;}
	.intro_bar .inner .subtitle b{ font-size: 20px; }
	.intro_bar .inner .subtitle span{ font-size: 16px; }
	.intro_bar.s1{ min-height: 100px;}
}	
/*------*/

/*---cou_bar---*/
.cou_bar{ position: absolute; width: 100%; top: 450px; height: 440px; z-index: -1; color: #FFF; display: flex; }
.cou_bar::before{ display: block; content: ''; position: absolute; top: 0; left: 0; left:-100%; width: 300%; height: 100%; border-radius: 100%; background: #ff8a78;}
@media only screen and (max-width:992px) {
	.cou_bar::before{  left:-150%; width: 400%;}
}
@media only screen and (max-width:572px) {
	.cou_bar::before{  left:-300%; width: 700%;}
}	
/*------*/

/*---btn_bar---*/
.btn_bar{ max-width: 640px; margin: 40px auto 0;}
.labels{ text-align: center; color: #FFF; margin-top: 4px;}
@media only screen and (max-width:572px) {
	.btn_bar{ max-width: 320px; }
}	
/*------*/

/*---main_box---*/
.main_box{ position: relative; margin: 80px auto 0; z-index: 100;}
.main_box.cou_inner{  margin: 140px auto 0;}
.main_box.s1{ min-height: calc(100vh - 200px);}
.main_box .box{ min-height: 100%;
	padding: 50px; border-radius: 20px; background: rgba(255,255,255,0.8);
	-webkit-backdrop-filter: blur(10px) saturate(120%);
	backdrop-filter: blur(10px) saturate(120%);
}
.main_box .video{ position: relative; width: 300px; overflow: hidden;}
.main_box .video.s1{ width: 370px;}
.main_box .video::before{ content: ''; display: block; padding-bottom: 177%;}
.main_box .video video{ position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
.main_box .inner{ min-height: 100%;}
.main_box .inner .list{ position: relative;}
.main_box .inner .step{ font:700 20px/32px 'Inter', 'Noto Sans TC', sans-serif; background: #FF8978; color: #FFF; text-align: center; width: 120px; border-radius: 16px;}
.main_box .inner .step_txt{ font:400 18px/1.4em 'Inter', 'Noto Sans TC', sans-serif; color: #333; padding: 5px 0;}
.main_box .inner .schedule{ position: relative;}
.main_box .inner .schedule .up{ display: flex; color: #482D8C; font:600 18px/32px 'Inter', 'Noto Sans TC', sans-serif;}
.main_box .inner .schedule .icon{ width: 30px; text-align: center;
	filter: invert(15%) sepia(75%) saturate(2567%) hue-rotate(248deg) brightness(86%) contrast(90%);
}
.main_box .inner .schedule .name{ margin: 0 20px 0 0; font-size: 18px;}
.main_box .inner .schedule .progress{ width: 260px;}
.main_box .cou_txt{ position: relative; padding-top: 60px; color: #FFF;}
.main_box .cou_txt p{ font-size: 15px; color: #FFF;}
.main_box .cou_txt .ico_list{ display: flex; margin: 0 -10px;}
.main_box .cou_txt .ico_list .item{ margin: 10px; font-size: 14px;}
.main_box .cou_txt .tag_list{ display: flex; margin: 0 -5px; flex-wrap: wrap;}
.main_box .cou_txt .tag_list .item{ margin: 5px; font-size: 14px; line-height: 26px; padding: 0 10px; background: #FFF; color: #FF8978; border-radius: 5px; text-wrap: nowrap;}
@media only screen and (max-width:992px) {
	.main_box{ min-height: inherit;}
	.main_box .video{ width: 40vw;}
	.main_box .video.s1{ width: 40vw;}
	.main_box .box{ padding: 30px;}
	.main_box .inner .step_txt { font-size: 16px;}
}

@media only screen and (max-width:720px) {
	.main_box .video{ width: calc( 100vw - 60px); margin-top: -80px; margin-bottom: 30px; border-radius: 0 0 20px 20px;}
	.main_box .video.s1{  width: calc( 100vw - 60px); margin-top: 0; margin-bottom: 0; border-radius: 20px;}
}

@media only screen and (max-width:576px) {
	.main_box .inner .schedule .progress { width: 100%;}
	.main_box.s1{ min-height: calc(100vh - 120px);}
	.main_box .video{ width: calc( 100vw - 40px); margin-bottom: 20px;}
	.main_box .video.s1{ width: calc( 100vw - 40px); }
	.main_box .box{ padding: 30px;}
	.main_box .inner .step{ font-size: 15px; line-height: 24px; width: 80px;}
	.main_box .inner .step_txt{ font-size: 15px; padding: 2px 0;}
}
/*------*/

/*---cou_box---*/
.cou_box{ position: relative; padding: 100px 0 60px;}
.cou_box.page{ padding-top: 140px;}
.cou_box .list ul{ list-style: none; padding: 0; margin: 0;}
.cou_box .list li{ display: block;}
.cou_box .list a{ display: flex; margin-bottom: 40px; border-radius: 20px; overflow: hidden;
	transition: 300ms ease;
}
.cou_box .list a .pic{ flex: 0 0 350px;}
.cou_box .list a .pic::before{ display: block; content: ''; padding-bottom: 56.25%;}
.cou_box .list a .txt{ padding: 20px; background: #FFF; }
.cou_box .list a .name{ font-size: 20px; font-weight: 700; color: #482D8C; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:1; line-clamp:1; overflow: hidden;}
.cou_box .list a .speaker{ font-size: 14px; color: #666; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:1; line-clamp:1; overflow: hidden;}
.cou_box .list a .length{ font-size: 14px; color: #FF8978; font-weight: 700;}
.cou_box .list a .length i{ font-size: 16px; margin-right: 5px;}
.cou_box .list a .progress_item{ display: flex; margin: 0 0 5px 0;}
.cou_box .list a .progress_item .item{ display: flex; margin-right: 10px;}
.cou_box .list a .progress_item .item>*{ margin-right: 4px; color: #482D8C; font-size: 14px;}
.cou_box .list a .progress_item .item i{ color: #482D8C; font-size: 16px;}
.cou_box .list a .progress_item .item img{ filter: invert(20%) sepia(77%) saturate(1333%) hue-rotate(235deg) brightness(90%) contrast(101%);}
.cou_box .list a .con{ font-size: 14px; line-height: 20px; color: #555; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; line-clamp:2; overflow: hidden;}
.cou_box .list a:hover{ box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);}
.cou_box .list a:hover .pic{ transform: scale(1.03);}
.cou_box .view{ position: relative;}
.cou_box .view .txt p{ font-size: 1rem; color: #333;}
.cou_box .quest_bar{ position: relative; width: 100%; color: #FFF; padding: 180px 0 40px; margin-top: -140px;}
.cou_box .quest_bar::before{ display: block; content: ''; position: absolute; top: 0; left: 0; left:-70%; width: 240%; height: 100%; border-radius: 100%; background: #ff8a78;}
.cou_box .quest_bar.s1{ margin-bottom: -60px;}
.cou_box .quest_bar.s1::before{  border-radius: 100% 100% 0 0;}
.cou_box .quest_txt{ position: relative; padding: 40px 0 20px;}
.cou_box .quest_list{ position: relative; counter-reset: my-badass-counter;}
.cou_box .quest_list .q_item{ position: relative; display: flex; padding: 10px 40px 10px 10px; border: solid 2px #CCC; border-radius: 10px;
	cursor: pointer;
}
.cou_box .quest_list .q_item+.q_item{ margin-top: 15px;}
.cou_box .quest_list .a_item{ padding: 10px; margin: 10px 0 20px 0; font-size: 18px; font-weight: 700; font-style: italic; color: #0092BC;}
.cou_box .quest_list .q_item:hover{ border:solid 2px #B9B0B2}
.cou_box .quest_list .q_item.on{ background: #FF8978; color: #FFF; border: solid 2px #FF8978 !important;}
.cou_box .quest_list .q_item.on::after{ display: block; position: absolute; top: 10px; right: 10px; font-size: 16px;
	font-family: "FontAwesome"; content: "\f046";
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
}
.cou_box .quest_list .q_item.done{ pointer-events: none; color: #666;  border-radius: 0;}
.cou_box .quest_list .q_item.ca{ background: #0092BC; color: #FFF; border: solid 2px #0092BC;}
.cou_box .quest_list .q_item.ca::after{ display: block; position: absolute; top: 10px; right: 10px; font-size: 16px;
	font-family: "FontAwesome"; content: "\f00c";
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
}
.cou_box .quest_list .q_item.wa{ background: #F36; color: #FFF; border: solid 2px #F36;}
.cou_box .quest_list .q_item.wa::after{ display: block; position: absolute; top: 10px; right: 10px; font-size: 16px;
	font-family: "FontAwesome"; content: "\f00d";
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
}
.cou_box p.quest{ margin-top: 20px;}
@media only screen and (max-width:1200px) {
	.cou_box.page{ padding-top: 200px;}
}
@media only screen and (max-width:720px) {
	.cou_box.page{ padding-top: 150px;}
	.cou_box .list a{ margin-bottom: 20px; flex-wrap: wrap;}
	.cou_box .list a .pic{ flex: 0 0 100%;}
	.cou_box .list a .txt{ padding: 20px; }
	.cou_box .list a .name{ font-size: 20px; }
	.cou_box .list a .speaker{ font-size: 14px; }
	.cou_box .list a .length{ font-size: 14px; }
	.cou_box .list a .length i{ font-size: 16px; margin-right: 5px;}
	.cou_box .quest_bar{ padding: 120px 0 20px; margin-top: -100px;}
}
/*------*/

/*---video_box---*/
.video_box{ position: relative; padding: 20px 0; z-index: 100;}
.video_box .video img{ width: 100%;}
.video_box .video { position: relative; width: 100%; overflow: hidden; }
.video_box .video::before{ content: ''; display: block; padding-bottom: 56.25%;}
.video_box .video iframe{ position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%;}
.video_box .control{ position: relative; display: flex; background: #482D8C; border-radius: 0 0 20px 20px; overflow: hidden;}
.video_box .control #play{ width: 60px; height: 60px; border: none; background: #482D8C; text-indent: -9999px;
	transition: 300ms ease;
}
.video_box .control #play::before{ position: absolute; top: 0; left: 0; display: block; width: 60px; height: 60px; line-height: 60px; text-align: center; text-indent: 0; 
	font-size: 24px; color: #FFF;
	font-family: "FontAwesome"; content: "\f04b";
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
}
.video_box .control #play:hover{
	filter: brightness(1.2);
}
.video_box .control #pause{ width: 60px; height: 60px; border: none; background: #482D8C; text-indent: -9999px;
	transition: 300ms ease;
}
.video_box .control #pause::before{ position: absolute; top: 0; left: 0; display: block; width: 60px; height: 60px; line-height: 60px; text-align: center; text-indent: 0; 
	font-size: 24px; color: #FFF;
	font-family: "FontAwesome"; content: "\f04c";
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
}
.video_box .control #pause:hover{
	filter: brightness(1.2);
}
.video_box .control #current-time{ color: #FFF; line-height: 60px; font-size: 18px; padding-left: 4px;}
.video_box .control #duration{ color: #FFF; line-height: 60px; font-size: 18px;  padding-right: 4px;}
.video_box .control #fullscreen{ position: absolute; top: 0; right: 0; width: 60px; height: 60px; border: none; background: url(../images/icon_fullscreen.svg) #482D8C; background-size: cover; text-indent: -9999px;
	transition: 300ms ease;
}
.video_box .control #fullscreen:hover{
	filter: brightness(1.2);
}
.video_box .control #progress-bar{ position: absolute; top: 26px; right: 70px; width: 200px; height: 8px;}
.video_box .control #volume{ display: flex; align-items: center; margin-left: 20px;}
.video_box .control #volume #mute{ font-size: 24px; color: #FFF; width: 40px; display: flex; align-items: center; justify-content:center; height: 60px; cursor: pointer; margin-right: 4px;
	background: #482D8C;
}
.video_box .control #volume #mute::before{
	font-family: "FontAwesome"; content: "\f028";
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
}
.video_box .control #volume #mute.on::before{
	font-family: "FontAwesome"; content: "\f026";
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
}
.video_box .control #volume #mute:hover{
	filter: brightness(1.2);
}
.video_box .control #volume-bar{ width: 0; height: 8px; opacity: 0;
	transition: 300ms;
}
.video_box .control #volume-bar.on{ display: block; width: 100px; opacity: 1;}

input[type="range"]{
	-webkit-appearance: none;
	appearance: none;
	border-radius:4px;
	width:200px;
	height:3px;
	background-image:-webkit-linear-gradient(left ,#FFF 0%,#FFF 50%,#BABABA 50%, #BABABA 100%);
	outline : none;
	transition:.1s;
}
input[type="range"]::-webkit-slider-thumb{
	-webkit-appearance: none;
	width:16px;
	height:16px;
	background:#FFF;
	border-radius:50%;
	transition:.1s;
	cursor: pointer;
}
  
input[type="range"]::-webkit-slider-thumb:hover,
input[type="range"]::-webkit-slider-thumb:active{
	width:20px;
	height:20px;
}
@media only screen and (max-width: 720px) {
	.video_box .control #progress-bar{ top: 16px; right: 40px; width: 100px;}
	.video_box .control #play{ width: 40px; height: 40px; line-height: 40px;}
	.video_box .control #play::before{ width: 40px; height: 40px; line-height: 40px; font-size: 20px;}
	.video_box .control #pause{ width: 40px; height: 40px; line-height: 40px;}
	.video_box .control #pause::before{ width: 40px; height: 40px; line-height: 40px;}
	.video_box .control #current-time{ line-height: 40px; font-size: 14px; }
	.video_box .control #duration{line-height: 40px; font-size: 14px;}
	.video_box .control #fullscreen{  width: 40px; height: 40px; background-size: 40px; background-position: center;}
	.video_box .control #volume #mute{ height: 40px; width: 40px; font-size: 20px;}
	.video_box .control #volume-bar{ width: 80px; display: block; opacity: 1;}
	.video_box .control #volume-bar.on{ width: 80px;}
}	
@media only screen and (max-width: 576px) {
	.video_box .control #progress-bar{ top: 16px; right: 40px; width: 100px;}
	.video_box .control #play{ width: 40px; height: 40px; line-height: 40px;}
	.video_box .control #play::before{ width: 40px; height: 40px; line-height: 40px; font-size: 20px;}
	.video_box .control #pause{ width: 40px; height: 40px; line-height: 40px;}
	.video_box .control #pause::before{ width: 40px; height: 40px; line-height: 40px;}
	.video_box .control #current-time{ line-height: 40px; font-size: 14px; }
	.video_box .control #duration{line-height: 40px; font-size: 14px;}
	.video_box .control #fullscreen{  width: 30px; height: 40px; background-size: 40px; background-position: center;}
	.video_box .control #volume{ margin-left: 0;}
	.video_box .control #volume #mute{ height: 40px; width: 30px; font-size: 20px;}
	.video_box .control #volume-bar{ width: 50px;}
	.video_box .control #volume-bar.on{ width: 50px;}
}	
/*------*/

/*===POPUP===*/
/*---pop_box---*/
.pop_box{ position:fixed; top:0%; left:0; width:100%; height:100%; overflow:auto; -webkit-overflow-scrolling: touch; z-index:1000; display: none;}
.pop_box.on{ top:0; opacity:1;}
.pop_box .mask{  position: fixed; top:0%; left:0; width:100%; height:100%; z-index:1; background:rgba(0,0,0,.8); background-size: cover; opacity:1;
	transition: 800ms ease;
}
	/*close_btn*/
	.pop_box .close_btn{ position: relative; width:48px; text-align:center; z-index:10; margin: 20px auto; cursor: pointer; background: #333;
		transition: border-radius 300ms ease, background 300ms ease, transform 300ms ease;
	}
	.pop_box .close_btn.in{ position: absolute; top: 0; right: 0; margin: 0;}
	.pop_box .close_btn.fixed{ position: fixed; top: -44px; right: -44px; margin: 0; background: rgba(0, 0, 0, 0.2);}
	.pop_box .close_btn img{ display: block; max-width:100%; margin: 8px;}
	.pop_box .close_btn:hover{ border-radius: 24px; }
	.pop_box .close_btn.in:hover{ border-radius: 0 0 0 24px; transform: translateY(-2px);}

	.pop_box.on .close_btn.fixed{top:6px;right:8px;opacity:0.8;stroke:#4f4f4f;stroke-width:1px;fill:#f2f2f2;}
	.pop_box.on .close_btn.fixed:hover{opacity:1;fill:#FFF;}

	.form-label{ font-size: 15px; margin-bottom: 0.2rem;}

	/*pop_txt*/
	.pop_box .pop_txt{ position: relative; max-width:520px; margin:20vh auto; z-index:10; box-sizing: border-box; }
	.pop_box .pop_txt.inner{ background:#FF8978; padding: 50px; overflow: hidden; border-radius: 30px;
		-webkit-backdrop-filter: blur(10px) saturate(120%);
		backdrop-filter: blur(10px) saturate(120%);
	}
	.pop_box .pop_txt.inner2{ background:#FFF; padding: 50px; overflow: hidden; border-radius: 20px;}
	.pop_box .pop_txt.xxl{ max-width: 1200px; margin: 80px auto;}
	.pop_box .pop_txt.xl{ max-width: 900px; margin: 80px auto;}
	.pop_box .pop_txt.lg{ max-width: 720px; margin: 80px auto;}
	.pop_box .pop_txt.sm{ max-width: 480px; margin: 80px auto;}
	.pop_box .radio_bar{ background: #f2f2f2; margin-bottom: 20px;}
	.radio_bar label {display: block;}

	.form-check-input {
		border-color: #ffbdb4;
	}
	.form-check-input:checked {
		background-color: #FF8978;
		border-color: #FF8978;
	}
	/*view*/
	.pop_box .view{ position: relative; color: #333; font-size: 1.125rem;}
	.pop_box .view p{ color: #333;}

	p.quest{ font-weight: 700;}
	.pop_box .pop_txt.inner .view{ color: #FFF; }
	.pop_box .pop_txt.inner .view p{ color: #FFF;}

.pop_box .pop_txt.vi{ display: flex; align-items: center; height: calc(100vh - 160px);}
.pop_box .box{ display: block;}
.pop_box .video { position: relative; width: 100%; border-radius: 10px; overflow: hidden;}
.pop_box .video::before{ content: ''; display: block; padding-bottom: 56.25%;}
.pop_box .video iframe{ position: absolute; top: 0; left: 0; display: none; width: 100%; height: 100%;}
.pop_box.on .video iframe{ display: block;}
@media only screen and (max-width: 1200px) {
	.pop_box .pop_txt.xxl{ margin: 80px 0;}
	.pop_box .pop_txt.xxl.vi{ margin: 80px 20px;}
}
@media only screen and (max-width: 992px) {
	.pop_box .pop_txt.xl{ margin: 80px 20px;}
	.pop_box .form-check-inline{ display: block; background: #e2e2e2; margin-bottom: 4px;}
	
}@media only screen and (max-width: 720px) {
	.pop_box .pop_txt.lg{ margin: 80px 20px;}
}
@media only screen and (max-width: 576px) {
	.pop_box .pop_txt.inner{ padding: 30px; }
	.pop_box .pop_txt.inner2{ padding: 30px; }
}
@media only screen and (max-width: 480px) {
	.pop_box .pop_txt.sm{ margin: 80px 20px;}
}	
/*------*/

/* =============================================================================
   INNER LAYOUT
   ========================================================================== */

/*---EDITOR---*/
.edit img{ max-width: 100%; height: auto !important;}
.edit iframe{ max-width: 100%;}
.edit .text{ padding: 3rem;}
.edit h2{ color: #3290B5;}
.edit hr { opacity: .15;}

/*---text img---*/
.pic_br20{ display: block; overflow: hidden; border-radius: 20px;}
.pic_center{ display: block; max-width: 100%; margin: 0 auto 20px; padding: 0 0 20px 0; text-align: center; }
.pic_center img{ width: 100%; max-width: 500px; height: auto;}
.pic_center figure{ display: block; text-align: left; color: #333; padding: 10px;}
.pic_center.col2 { overflow: auto;}
.pic_center.col2 a{ width:calc(50% - 20px); max-width: none; margin: 0 10px; float: left;}
.pic_left{ display: block; float:left; margin: 0 40px 20px 0; max-width: 45%; }
.pic_left img{ display: block; width: 100%; height: auto;}
.pic_right{ display: block; float:right; margin: 0 0 20px 40px; max-width: 45%; }
.pic_right img{ display: block; width: 100%; height: auto;}
.pic_full{ display: block; max-width: 100%; margin: 0 auto 2em; text-align: center;}
.pic_full img{ width: 100%; max-width: 1600px; height: auto;}
.pic_full figure{ display: block; text-align: left; color: #333; }
.pic_2col{ position: relative; display: flex; margin: 0 -20px; padding: 0 10px;}
.pic_2col>a{ position: relative; display: block; flex: 0 1 50%; margin: 10px;}
.pic_2col>a img{ position: absolute; top: 0%; left: 0%; width: 100% !important; height: 100% !important; object-fit: cover;}
.pic_2col>a::before{ content: ''; display: block; padding-bottom: 75%;}
.pic_3col{ position: relative; display: flex; margin: 0 -20px; padding: 0 10px;}
.pic_3col>a{ position: relative; display: block; flex: 0 1 50%; margin: 10px;}
.pic_3col>a img{ position: absolute; top: 0%; left: 0%; width: 100% !important; height: 100% !important; object-fit: cover;}
.pic_3col>a::before{ content: ''; display: block; padding-bottom: 75%;}
.form-check-inline{ padding: 4px 20px 4px 40px; margin: 2px;}

@media only screen and (max-width: 992px) {
	.edit .text{ padding: 2rem;}
	.cou_box .radio_bar { padding: 4px 0;}
	.form-check-inline{ display: block; background: #f2f2f2; margin-bottom: 4px;}
}
@media only screen and (max-width: 720px) {
	.pic_right{ float:none; margin: 0 0 20px 0; max-width: 100%; width: 100%; }
	.pic_left{ float:none; margin: 0 0 20px 0; max-width: 100%; width: 100%; }
	.edit .text{ padding: 1rem;}
}
/*------*/
/* =============================================================================
   INNER LAYOUT END
   ========================================================================== */

/*---RWD---*/
.desk-show { display: block !important;}
.desk-ib-show{ display: inline-block !important;}
.mobile-show { display: none !important; }
.peload{ opacity:0; transition: opacity 2000ms 3000ms ease;}
.peload.ed{ opacity:1;}
.pehide.ed{ display:none;}
.phone_btn{ display: none;}
.mobile_menu{ display: none;}
@media only screen and (max-width: 720px) {
	.desk-show { display: none!important;}
	.desk-ib-show{ display: none !important;}
	.mobile-show { display: block!important;}
}