@charset "UTF-8";
/*!
* Start Bootstrap - Grayscale v6.0.3 (https://startbootstrap.com/theme/grayscale)
* Copyright 2013-2020 Start Bootstrap
* Licensed under MIT (https://github.com/StartBootstrap/startbootstrap-grayscale/blob/master/LICENSE)
*/
@import url(https://fonts.googleapis.com/earlyaccess/notosanstc.css);

*,::before,::after{box-sizing:border-box}
html{font-family: 'Noto Sans TC', sans-serif;line-height:1.15;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0,0,0,0)}
article,aside,figcaption,figure,footer,header,hgroup,main,nav,section{display:block}
body{margin:0;font-family: 'Noto Sans TC', sans-serif;font-size:1.2rem;font-weight:400;line-height:1.8;color:#212529;background-color:#fff}
[tabindex="-1"]:focus:not(:focus-visible){outline:0!important}
hr{box-sizing:content-box;height:0;overflow:visible}
h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:.5rem}
p{margin-top:0;margin-bottom:1rem}
abbr[title],abbr[data-original-title]{text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;cursor:help;border-bottom:0;-webkit-text-decoration-skip-ink:none;text-decoration-skip-ink:none}
address{margin-bottom:1rem;font-style:normal;line-height:inherit}
ol,ul,dl{margin-top:0;margin-bottom:1rem}
ol ol,ul ul,ol ul,ul ol{margin-bottom:0}
dt{font-weight:700}
dd{margin-bottom:.5rem;margin-left:0}
blockquote{margin:0 0 1rem}
b,strong{font-weight:bolder}
small{font-size:80%}
sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline}
sub{bottom:-.25em}
sup{top:-.5em}
a{color:#64a19d;text-decoration:none;background-color:transparent}
a:hover{color:#467370;text-decoration:underline}
a:not([href]):not([class]){color:inherit;text-decoration:none}
a:not([href]):not([class]):hover{color:inherit;text-decoration:none}
pre,code,kbd,samp{font-family: 'Noto Sans TC', sans-serif;font-size:1em}
pre{margin-top:0;margin-bottom:1rem;overflow:auto;-ms-overflow-style:scrollbar}
figure{margin:0 0 1rem}
img{vertical-align:middle;border-style:none}
svg{overflow:hidden;vertical-align:middle}
table{border-collapse:collapse}
caption{padding-top:.75rem;padding-bottom:.75rem;color:#6c757d;text-align:left;caption-side:bottom}
th{text-align:inherit;text-align:-webkit-match-parent}
label{display:inline-block;margin-bottom:.5rem}
button{border-radius:0}
button:focus{outline:1px dotted;outline:5px auto -webkit-focus-ring-color}
input,button,select,optgroup,textarea{margin:0;font-family:inherit;font-size:inherit;line-height:inherit}
button,input{overflow:visible}
button,select{text-transform:none}
[role=button]{cursor:pointer}
select{word-wrap:normal}
button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button}
button:not(:disabled),[type=button]:not(:disabled),[type=reset]:not(:disabled),[type=submit]:not(:disabled){cursor:pointer}
button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{padding:0;border-style:none}
input[type=radio],input[type=checkbox]{box-sizing:border-box;padding:0}
textarea{overflow:auto;resize:vertical}
fieldset{min-width:0;padding:0;margin:0;border:0}
legend{display:block;width:100%;max-width:100%;padding:0;margin-bottom:.5rem;font-size:1.5rem;line-height:inherit;color:inherit;white-space:normal}
progress{vertical-align:baseline}
[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}
[type=search]{outline-offset:-2px;-webkit-appearance:none}
[type=search]::-webkit-search-decoration{-webkit-appearance:none}
::-webkit-file-upload-button{font:inherit;-webkit-appearance:button}
output{display:inline-block}
summary{display:list-item;cursor:pointer}
template{display:none}
[hidden]{display:none!important}
h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6{margin-bottom:.5rem;font-weight:500;line-height:1.2}
h1,.h1{font-size:2.0rem}
h2,.h2{font-size:1.75rem}
h3,.h3{font-size:1.75rem}
h4,.h4{font-size:1.5rem}
h5,.h5{font-size:1.25rem}
h6,.h6{font-size:1rem}
.lead{font-size:1.25rem;font-weight:300}
.display-1{font-size:6rem;font-weight:300;line-height:1.2}
.display-2{font-size:5.5rem;font-weight:300;line-height:1.2}
.display-3{font-size:4.5rem;font-weight:300;line-height:1.2}
.display-4{font-size:3.5rem;font-weight:300;line-height:1.2}
hr{margin-top:1rem;margin-bottom:1rem;border:0;border-top:1px solid rgba(0,0,0,0.1)}
small,.small{font-size:80%;font-weight:400}
mark,.mark{padding:.2em;background-color:#fcf8e3}
.list-unstyled{padding-left:0;list-style:none}
.list-inline{padding-left:0;list-style:none}
.list-inline-item{display:inline-block}
.list-inline-item:not(:last-child){margin-right:.5rem}
.initialism{font-size:90%;text-transform:uppercase}
.blockquote{margin-bottom:1rem;font-size:1.25rem}
.blockquote-footer{display:block;font-size:80%;color:#6c757d}
.blockquote-footer::before{content:"— "}
.img-fluid{max-width:100%;height:auto}
.img-thumbnail{padding:.25rem;background-color:#fff;border:1px solid #dee2e6;border-radius:.25rem;max-width:100%;height:auto}
.figure{display:inline-block}
.figure-img{margin-bottom:.5rem;line-height:1}
.figure-caption{font-size:90%;color:#6c757d}
code{font-size:87.5%;color:#e83e8c;word-wrap:break-word}
a > code{color:inherit}
kbd{padding:.2rem .4rem;font-size:87.5%;color:#fff;background-color:#212529;border-radius:.2rem}
kbd kbd{padding:0;font-size:100%;font-weight:700}
pre{display:block;font-size:87.5%;color:#212529}
pre code{font-size:inherit;color:inherit;word-break:normal}
.pre-scrollable{max-height:340px;overflow-y:scroll}
.container,.container-fluid,.container-xl,.container-lg,.container-md,.container-sm{width:100%;padding-right:.75rem;padding-left:.75rem;margin-right:auto;margin-left:auto}
@media (min-width: 576px) {
.container-sm,.container{max-width:540px}
}
@media (min-width: 768px) {
.container-md,.container-sm,.container{max-width:720px}
}
@media (min-width: 992px) {
.container-lg,.container-md,.container-sm,.container{max-width:960px}
}
@media (min-width: 1200px) {
.container-xl,.container-lg,.container-md,.container-sm,.container{max-width:1140px}
}

.row{display:flex;flex-wrap:wrap;margin-right:-.75rem;margin-left:-.75rem}
.no-gutters{margin-right:0;margin-left:0}
.no-gutters > .col,.no-gutters > [class*=col-]{padding-right:0;padding-left:0}
.col-xl,.col-xl-auto,.col-xl-12,.col-xl-11,.col-xl-10,.col-xl-9,.col-xl-8,.col-xl-7,.col-xl-6,.col-xl-5,.col-xl-4,.col-xl-3,.col-xl-2,.col-xl-1,.col-lg,.col-lg-auto,.col-lg-12,.col-lg-11,.col-lg-10,.col-lg-9,.col-lg-8,.col-lg-7,.col-lg-6,.col-lg-5,.col-lg-4,.col-lg-3,.col-lg-2,.col-lg-1,.col-md,.col-md-auto,.col-md-12,.col-md-11,.col-md-10,.col-md-9,.col-md-8,.col-md-7,.col-md-6,.col-md-5,.col-md-4,.col-md-3,.col-md-2,.col-md-1,.col-sm,.col-sm-auto,.col-sm-12,.col-sm-11,.col-sm-10,.col-sm-9,.col-sm-8,.col-sm-7,.col-sm-6,.col-sm-5,.col-sm-4,.col-sm-3,.col-sm-2,.col-sm-1,.col,.col-auto,.col-12,.col-11,.col-10,.col-9,.col-8,.col-7,.col-6,.col-5,.col-4,.col-3,.col-2,.col-1{position:relative;width:100%;padding-right:.75rem;padding-left:.75rem}
.col{flex-basis:0;flex-grow:1;max-width:100%}
.row-cols-1 > *{flex:0 0 100%;max-width:100%}
.row-cols-2 > *{flex:0 0 50%;max-width:50%}
.row-cols-3 > *{flex:0 0 33.3333333333%;max-width:33.3333333333%}
.row-cols-4 > *{flex:0 0 25%;max-width:25%}
.row-cols-5 > *{flex:0 0 20%;max-width:20%}
.row-cols-6 > *{flex:0 0 16.6666666667%;max-width:16.6666666667%}
.col-auto{flex:0 0 auto;width:auto;max-width:100%}
.col-1{flex:0 0 8.3333333333%;max-width:8.3333333333%}
.col-2{flex:0 0 16.6666666667%;max-width:16.6666666667%}
.col-3{flex:0 0 25%;max-width:25%}
.col-4{flex:0 0 33.3333333333%;max-width:33.3333333333%}
.col-5{flex:0 0 41.6666666667%;max-width:41.6666666667%}
.col-6{flex:0 0 50%;max-width:50%}
.col-7{flex:0 0 58.3333333333%;max-width:58.3333333333%}
.col-8{flex:0 0 66.6666666667%;max-width:66.6666666667%}
.col-9{flex:0 0 75%;max-width:75%}
.col-10{flex:0 0 83.3333333333%;max-width:83.3333333333%}
.col-11{flex:0 0 91.6666666667%;max-width:91.6666666667%}
.col-12{flex:0 0 100%;max-width:100%}

@media (min-width: 576px) {
.col-sm-1{flex:0 0 8.3333333333%;max-width:8.3333333333%}
.col-sm-2{flex:0 0 16.6666666667%;max-width:16.6666666667%}
.col-sm-3{flex:0 0 25%;max-width:25%}
.col-sm-4{flex:0 0 33.3333333333%;max-width:33.3333333333%}
.col-sm-5{flex:0 0 41.6666666667%;max-width:41.6666666667%}
.col-sm-6{flex:0 0 50%;max-width:50%}
.col-sm-7{flex:0 0 58.3333333333%;max-width:58.3333333333%}
.col-sm-8{flex:0 0 66.6666666667%;max-width:66.6666666667%}
.col-sm-9{flex:0 0 75%;max-width:75%}
.col-sm-10{flex:0 0 83.3333333333%;max-width:83.3333333333%}
.col-sm-11{flex:0 0 91.6666666667%;max-width:91.6666666667%}
.col-sm-12{flex:0 0 100%;max-width:100%}
}
@media (min-width: 768px) {
.col-md-1{flex:0 0 8.3333333333%;max-width:8.3333333333%}
.col-md-2{flex:0 0 16.6666666667%;max-width:16.6666666667%}
.col-md-3{flex:0 0 25%;max-width:25%}
.col-md-4{flex:0 0 33.3333333333%;max-width:33.3333333333%}
.col-md-5{flex:0 0 41.6666666667%;max-width:41.6666666667%}
.col-md-6{flex:0 0 50%;max-width:50%}
.col-md-7{flex:0 0 58.3333333333%;max-width:58.3333333333%}
.col-md-8{flex:0 0 66.6666666667%;max-width:66.6666666667%}
.col-md-9{flex:0 0 75%;max-width:75%}
.col-md-10{flex:0 0 83.3333333333%;max-width:83.3333333333%}
.col-md-11{flex:0 0 91.6666666667%;max-width:91.6666666667%}
.col-md-12{flex:0 0 100%;max-width:100%}
}
@media (min-width: 992px) {
.col-lg-1{flex:0 0 8.3333333333%;max-width:8.3333333333%}
.col-lg-2{flex:0 0 16.6666666667%;max-width:16.6666666667%}
.col-lg-3{flex:0 0 25%;max-width:25%}
.col-lg-4{flex:0 0 33.3333333333%;max-width:33.3333333333%}
.col-lg-5{flex:0 0 41.6666666667%;max-width:41.6666666667%}
.col-lg-6{flex:0 0 50%;max-width:50%}
.col-lg-7{flex:0 0 58.3333333333%;max-width:58.3333333333%}
.col-lg-8{flex:0 0 66.6666666667%;max-width:66.6666666667%}
.col-lg-9{flex:0 0 75%;max-width:75%}
.col-lg-10{flex:0 0 83.3333333333%;max-width:83.3333333333%}
.col-lg-11{flex:0 0 91.6666666667%;max-width:91.6666666667%}
.col-lg-12{flex:0 0 100%;max-width:100%}
}


/********BTN*********/

.btn{display:inline-block;font-weight:400;color:#212529;text-align:center;vertical-align:middle;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;background-color:transparent;border:1px solid transparent;padding:.375rem 1.75rem;line-height:1.5;border-radius:.25rem;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out}
@media (prefers-reduced-motion: reduce) {
.btn{transition:none}
}

.btn-primary{color:#fff;background-color:#ea5413;border-color:#ea5413; font-size: 29px;}
.btn-primary:hover{color:#fffc00;background-color:#c43b00;border-color:#c43b00; text-decoration: none;}


/**********masthead***********/
.goodnight{ background-image: url(../img/bg-goodnight.jpg); background-position: top center; background-attachment: fixed; background-size: cover;}
.goodmorning{ background-image: url(../img/bg-morning.jpg); background-position: top center; background-attachment: fixed; background-size: cover;}
.hug{ background-image: url(../img/bg-hug.jpg); background-position: top center; background-attachment: fixed; background-size: cover;}


.masthead{position:relative;width:100%;height:auto;min-height:60rem; background-image: url(../img/0.jpg); background-position: 50% 50%; /*background:linear-gradient(to bottom,rgba(0,0,0,0.3) 0%,rgba(0,0,0,0.7) 75%,#000 100%);*/ color: #fff; text-shadow: 0px 0px 10px #000, 0px 0px 10px #000, 0px 0px 10px #000;}
.masthead2{position:relative;width:100%;height:auto; /*background:linear-gradient(to bottom,rgba(0,0,0,0.3) 0%,rgba(0,0,0,0.7) 75%,#000 100%);*/ color: #fff; text-shadow: 0px 0px 10px #000, 0px 0px 10px #000, 0px 0px 10px #000;}

.masthead p{ margin:2rem auto; font-size:1.2rem;}
.masthead p strong{ color: #FFF5A3;}

.masthead .form-inline input{box-shadow:0 .1875rem .1875rem 0 rgba(0,0,0,0.1)!important;padding:0.8rem 2rem;height:auto;font-family: 'Noto Sans TC', sans-serif;font-size:80%;text-transform:lowercase;letter-spacing:.15rem;border:0}

.logo{ max-height: 40px; margin: 1.5rem auto 2rem auto;}
.slo{}
.kv-text{ max-width:30rem;}


.kv-top{ position: relative; z-index: 9;}
.kv-slider{ position: relative; z-index: 1;}
.kv-slider ul, .kv-slider li{ list-style: none;}


.text-index{ width: 50%;}
.text-goodnight{ width: 50%;}


/**********online-section***********/
.online-section{ padding-top:8rem; background: url(../img/bg-online.png);background-position:top center;background-repeat:no-repeat;background-attachment:scroll;background-size:cover;/*background:linear-gradient(to bottom,#000 0%,rgba(0,0,0,0.9) 75%,rgba(0,0,0,0.8) 100%);*/color: #fff; position: relative; z-index: 10;}
.online-section p{margin-bottom:3rem;}
.online-section p strong{ color: #FFF5A3;}


/**********code-section***********/
.code-section{padding:0;}


/**********mp3-section***********/
.mp3-section{ color: #fff; position: relative; z-index: 10;}
.mp3list{ display: block; text-align: center; margin: 3rem auto;}
.mp3list h4{ color: #000000; margin: 1rem auto;}

.mp3list-block{ padding-bottom: 1rem; background-color: #FFFFFF; border-radius: 10px; width: 90%; margin: 0 auto 2rem auto; border: 5px #FFFFFF solid; box-shadow:3px 3px 9px #000;}
.mp3list-block img{ border-top-right-radius: 10px; border-top-left-radius: 10px;}

.col-md-4{ float: left;}
.clear{ clear: both;}


.youtube-section{padding:3rem 0; text-shadow: 0px 0px 10px #000, 0px 0px 10px #000, 0px 0px 10px #000;}
.youtube-section h2{ padding:0.5rem 0; color: #FFED00;}
.youtube-section p{margin-bottom: 2rem;}
.youtube-section iframe{ border-radius: 10px;}



/**************form************************/
.form-control{display:block;width:100%;color:#495057;background-color:#fff;background-clip:padding-box;border:1px solid #ced4da;border-radius:.25rem;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}
.form-inline{display:block;flex-flow:row wrap;align-items:center; margin: 1.5rem auto; text-align: center;font-size: 1.6rem; line-height: 1rem; padding: 0;}

.form-inline .form-control{display:inline-block;width:40%; margin: 1rem auto; vertical-align:middle;}


@media (max-width: 576px) {
.form-inline label{display:flex;align-items:center;justify-content:center;margin-bottom:0}
.form-inline .form-control{display:block;width:90%; margin: 1rem auto; vertical-align:middle;}
.form-inline{ font-size: 1.2rem;}
.masthead .form-inline input{padding:0.8rem 1.5rem;}
}


/**********other***********/
.text-left{text-align:left!important}
.text-right{text-align:right!important}
.text-center{text-align:center!important}

.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%;} 
.embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

.footer{font-size:14px; background: #060c11; position: relative; z-index: 10; padding:1rem 0; color: #676767;}


.lg-hidden{ display: block;}
.sm-hidden{ display: none;}
.br-hidden{ display: none;}


@media (max-width: 992px) {
	body{ font-size:0.8rem;}
	.footer{font-size:12px;}
	.logo{ max-height: 30px; margin: 1rem 0;}
	.slo{ margin: 1.5rem 0;}
	.btn-primary{font-size: 20px;}
	
	
	
	.masthead{min-height:50rem;}
	.masthead2{min-height:0rem;}
	.masthead p{ margin:2rem auto; font-size:1.0rem;}
	.masthead h1{ font-size:1.5rem; padding-bottom: 0; margin-bottom: 0; line-height: 100%;}
	.masthead h2{ font-size:1.5rem;}
	
	.text-index{ width: 100%;}
	.text-goodnight{ width: 100%;}
	
	.online-section{ padding-top:5rem; background: url(../img/bg-online-s.png);background-position:top center;background-repeat:no-repeat;background-attachment:scroll;background-size:cover;}
	.online-section h1{ font-size:1.5rem;}
	.online-section h2{ font-size:1.5rem;}
	.online-section p{margin-bottom:2rem}
	
	.mp3-section{ padding-top:3rem;}
	.mp3list{ margin: 0rem auto;}
	
	.lg-hidden{ display: none;}
	.sm-hidden{ display: block;}
	.br-hidden{ display: block;}
}

@media (max-width: 576px) { 
	.masthead{min-height:45rem;}
	.goodnight{ background-image: url(../img/bg-goodnight-s.jpg); background-position: top center;  background-attachment: fixed; background-size: 100%;}
}