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

/*-----css基本設定---------*/
*, body, h1, h2, h3, h4, h5, h6, a, p, select  {
	font-family: "微軟正黑體", "Microsoft JhengHei", sans-serif, Arial, Helvetica;
}
/*文字反選顏色*/
::selection, ::-moz-selection {
	background: #e78d09;
	color: #ffffff;
}

/*a:focus {
	background-color: #F7AD00 !important;
}*/
a {
	transition: .5s;
}
/*a:hover {
	filter:brightness(110%);
	transition: .5s;
}*/
/*a:focus img {
	-webkit-filter:saturate(0.2);
}*/


/*--行動版隱藏--*/
.mob {
	display: none !important;
}


html {
	height: 100%;
	margin: 0;
}
body {
	margin: 0;
	min-height: 100%;
}

/*清除格式*/
.CleanFormat { 
	clear: both;
}
#article::after, section::after, header::after, footer::after, .fscShareList li::after, .KvImg::after, .VideoPBg::after {
	content: "";
	display: block;
	clear: both;
}

/*分隔線*/
.Dividers {
	margin: 10px auto;
	width: 100%;
	height: 1px;
	border-bottom: 1px dotted #373b80;
}

/*------------------------WebStart----------------------*/
#wrap {
	display: block;
	position: relative;
}


/*-------------------------Header 頁首 //放選單按鈕的地方-----------------------*/
header {
	position: fixed;
	width: 100%;
	z-index: 50;
}

div#Logo {
    display: block;
    position: absolute;
    top: 10px;
    left: 10px;
    width: 10%;
    max-width: 80px;
    min-width: 80px;
    height: auto;
    border-radius: 70px;
}

div#Logo a, div#Logo img {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 70px;
}

/*---------------------------Menu-----------------------*/
#Menu {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    background: rgba(255, 255, 255, .8);
    padding: 5px 30px 5px 60px;
    border-radius: 0 0 0 100px;
}

nav ul {
	font-size: 0;
	text-align: center;
	list-style: none;
}

nav li {
    display: inline-block;
    transition: .5s;
    margin-right: 20px;
    vertical-align: middle;
}

nav a {
    font-size: 1.2rem;
    color: #3E6E64;
    text-decoration: none;
	transition: .5s;
}

nav li.active {
	
}

nav li.active a, nav li a:hover {
    
}
/*-------手機版選單---------*/
.MMenu {
    display: none;
    width: 50px;
    height: 50px;
    position: fixed;
    z-index: 10;
    right: 10px;
    top: 10px;
}

.MMenu a {
    display: block;
    width: 100%;
    height: 100%;
}

.MMenu a span {
    display: block;
    position: absolute;
    width: 80%;
    height: 2px;
    background: #fff;
    border-radius: 10px;
    left: 10%;
    box-shadow: 0 0 2px 0 #989898;
    transition: .5s;
}

.MMenu a span:first-child {top: 10px;}

.MMenu a span:last-child {
    bottom: 10px;
}

.MMenu a span:nth-child(2) {
    top: calc(50% - 1px);
}

.MMenu.active a span:nth-child(2) {
    opacity: 0;
}

.MMenu.active a span:first-child {
    top: calc(50% - 1px);
    transform: rotate(45deg);
}

.MMenu.active a span:last-child {
    top: calc(50% - 1px);
    transform: rotate(
-45deg);
}

.MMenu.active a span {
    box-shadow: none;
}

/*-------------------------BODY 區塊-------------------------*/
article {
	position: relative;
}
section {
	position: relative;
}
/*-------------------------FOOTER 頁尾-----------------------*/
footer {
	padding: 20px 0;
	color: #ffffff;
	background: #005D4A;
}

/*#footer, .copyright {
	width: 95%;
	max-width: 800px;
	margin: 0 auto;
}*/


/*調整，可能移除↓↓↓*/
#footer {
    float: left;
    padding-left: 20px;
}

.copyright {
    float: right;
    padding-right: 20px;
}
/*調整，可能移除↑↑↑*/

#footer span {
    display: inline-block;
    vertical-align: middle;
    font-size: 1.1rem;
}

#footer img {
    display: inline-block;
    vertical-align: middle;
}

.copyright img {
    display: inline;
    vertical-align: middle;
    margin-right: 10px;
}

.copyright span {
    display: inline;
    vertical-align: middle;
    font-size: 1.1rem;
}


/*-----固定按鈕-----*/
/*.MSign {
    display: block;
    position: fixed;
    right: 70px;
    bottom: 25px;
    background: url(../images/signBtnBg.png);
    background-size: 100% auto;
    z-index: 5;
}

.MSign a {
    display: block;
    width: 160px;
    height: 97px;
    text-align: center;
}

.MsignImg {
    padding-left: 50px;
    padding-top: 10px;
}

.MsignImg img {
    display: block;
    margin: 0 auto;
    width: 40px;
    height: auto;
}

.MsignTxt {
    color: #3B6FA0;
    font-size: 1.4rem;
    font-weight: bold;
	letter-spacing: 5px;
}


.TopBtn {
    display: block;
    right: 10px;
    bottom: 25px;
    position: fixed;
    z-index: 5;
}

.TopBtn img {
    display: block;
    width: 40px;
    height: auto;
}*/


/*--------------------------共用項目-------------------------------*/
/*所有標題*/
.fscR {
	display: inline !important;
    font-size: 0.5em !important;
    vertical-align: super !important;
}

/*--------------------------內容開始-------------------------------*/
/*---------------首頁---------------*/
/*-----背景-----*/
.IndexBg {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: url(../images/index_Sky.png) no-repeat top 20px center, #DEF2FF;
    /* background-size: 95% auto; */
}

/*-----KV-----*/
#KVBk {
	background: url("../images/KV_BG_A.png") no-repeat top center;
	min-height: 100vh;
    background-size: cover;
}

.KvContent {
    display: block;
    position: relative;
    padding-top: 180px;
    margin: 0 auto;
    width: 95%;
    max-width: 1000px;
}

.WebTitle img {
    display: block;
    margin: 0 auto;
    max-width: 100%;
    height: auto;
}

.KvImg {
    display: block;
    position: relative;
    width: 100%;
    max-width: 780px;
    margin: 0 auto;
    padding-bottom: 150px;
}

.KvTxt {
    display: block;
    position: absolute;
    right: 0;
}

.KvTetra {
    display: block;
    position: relative;
    padding-top: 90px;
}

.KvTetra img {
    display: block;
    filter: drop-shadow(0px 0px 2px #ffffff);
}

.KVBg2 {
    display: block;
    position: absolute;
    background: url("../images/KV_BG_C.png");
    background-position: right top;
    background-repeat: no-repeat;
    width: 18%;
    padding-top: 550px;
    bottom: 0;
    left: 0;
}

.KVBg3 {
    display: block;
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 180px;
    background: url("../images/KV_BG_B.png") bottom center;
}


/*-----包材永續-----*/
.RenBg {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}


.RenTop {
    display: block;
    position: relative;
    width: 100%;
}

.RenBg1 {
    width: 100%;
    height: 100%;
}

.RenBg1_1 {
    background: url(../images/Ren_BG_A.png) no-repeat bottom center;
    padding-top: 280px;
}

.RenBg1_2 {
    background: #d6db58;
    width: 100%;
    height: calc(100% - 280px);
}

.RenBg2 {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    background: url(../images/Ren_BG_B_L.png) no-repeat top right;
	background-size: 100% auto;
    height: 100%;
    width: 32.3%;
}

.RenBg3 {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    background: url(../images/Ren_BG_B_R.png) no-repeat top left;
    background-size: 100% auto;
    height: 100%;
    width: 22.4%;
}

.RenBg4 {
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    background: url(../images/Ren_BG_C.png) no-repeat bottom center;
    height: 122px;
    width: 100%;
}


.RenContent {
    display: block;
    position: relative;
    width: 95%;
    max-width: 800px;
    margin: 0 auto;
}

.BkTitle {
    display: block;
    padding: 50px 0 107px;
}

.BkTitle img {
    display: block;
    margin: 0 auto;
    width: 29.637%;
	max-width: 326px;
	height: auto;
    min-width: 200px;
}

.RenSlider {
    padding-bottom: 90px;
}

.RenSliderImg {
    width: 58%;
    max-width: 800px;
    margin: 0 auto;
}
.RenSliderImg img {
    width: 100%;
    height: auto;
}

.RenImg_W {
	display: block;
}

.RenImg_M {
	display: none !important;
}

.RenBottom {
    background: url(../images/Ren_BG_D.jpg) no-repeat bottom center, #d6db58;
    position: relative;
    border-bottom: 5px solid #005D4A;
    padding-bottom: 50px;
}

.RenBottomTitle {
    position: absolute;
    top: -13%;
    background: url(../images/Ren_ActTitleBg.png) no-repeat right center;
    background-size: auto 100%;
    padding: 50px 0 50px;
    color: #ffffff;
    font-size: 2.5rem;
    font-weight: bold;
    text-align: center;
    width: 45%;
    max-width: 700px;
}

.RenBottomSecTitle {
    text-align: center;
    padding: 50px 0 30px;
}

.RenBottomIcon img {
    display: block;
    margin: 0 auto;
}

.RenBottomSecTitleTxt {
    font-size: 2.5rem;
    font-weight: bold;
    color: #005D4A;
}

.RenBottomTxt {
    width: 95%;
    max-width: 800px;
    margin: 0 auto 50px;
    font-size: 1.43rem;
    text-align: justify;
    color: #005D4A;
}

.RenBtnList {
    display: block;
}

.RenBtnList ul {
    font-size: 0;
    text-align: center;
}

.RenBtnList li {
    display: inline-block;
    margin-right: 30px;
}

.RenBtnList li:last-child {
    margin-right: 0;
}

.RenBtnList a {
    display: block;
    position: relative;
    background: #005D4A;
    width: 200px;
    color: #ffffff;
    padding: 10px 0;
    border-radius: 20px;
    box-shadow: 5px 5px 0 #6FAD41;
}

.RenBtnList a:hover {
    box-shadow: -5px -5px 0 #00342a;
}

.BtnTxt span {
    font-size: 1.4rem;
    display: block;
    font-weight: bold;
}

.BtnIcon {
    display: block;
    position: absolute;
    left: 140px;
    bottom: 20px;
}

.BtnIcon img {
    display: block;
}

/*-----節能減碳-----*/
.RedBg {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}


.RedBg_1 {
    background: url(../images/Red_Bg.png) no-repeat bottom center;
    padding-top: 280px;
}

.RedBg_2 {
    background: #ffffff;
    width: 100%;
    height: calc(100% - 280px);
}

.RedContent {
    display: block;
    position: relative;
    margin: 0 auto;
    padding-bottom: 50px;
}

.RedContentBk {
    width: 95%;
    max-width: 800px;
    margin: 0 auto;
}

.RedInfo_1 {
    color: #E97B11;
    text-align: center;
    display: block;
    margin-bottom: 20px;
}

.RedInfo_1 span {
    font-size: 1.5rem;
    font-weight: bold;
    display: block;
    text-align: center;
}

.RedInfo_2 {
    margin-bottom: 20px;
    display: block;
}

.RedInfo_2 p {
    color: #005D4A;
    font-size: 1.4rem;
    text-align: justify;
}

.RedInfo_3 {
    display: block;
    text-align: center;
    color: #023F88;
    font-weight: bold;
    font-size: 1.5rem;
    margin-bottom: 50px;
}

.RedAniView {
    display: block;
}

.RedAniBtn {
    display: block;
    position: relative;
    width: 100%;
}

.RedAniBtn a {
    display: block;
}

.RedAniBtn a img {
    display: block;
    width: 100%;
    height: auto;
}

/*碳排放動態*/
.RedAniContent {
	display: none;
}

.RedAniContent ul {
    font-size: 0;
}

.RedAniContent li {
    display: inline-block;
    width: 50%;
    vertical-align: bottom;
    font-size: 0;
	margin-bottom: 20px;
}

.RedAniContent li > div {
    display: inline-block;
    vertical-align: bottom;
}

.BottleImg {margin-right: 10px;width: 50px;}

.BottleImg img {
    display: block;
}

.RankImg {
    display: block;
    height: 50px;
}

.BottleInfo {
    display: block;
    width: calc(100% - 60px);
}

.RankImg img {
    display: block;
	opacity: 0;
}

.BottleName {
    font-size: 1.4rem;
    font-weight: bold;
    color: #023F88;
}

.BottleInfo span {
    font-size: 1.1rem;
    color: #023F88;
    display: block;
}

.BottleCoNum {
    font-size: 1.799rem;
    color: #0A2725;
    font-weight: bold;
    width: 45px;
}

.BottleCoAni {
    font-size: 0;
}

.BottleCoAni > div {
    vertical-align: middle;
    display: inline-block;
}

.BottleCoBar {
	width: 0;
    height: 42px;
    background: #929292;
    margin-right: 5px;
	transition: 1.5s;
}

/*碳排放備註*/
.RedNote {
    background: #509534;
    font-size: 1.2rem;
    display: block;
    position: relative;
    color: #ffffff;
    padding: 20px 0;
    border-bottom: 5px solid #75BEE9;
}

.RedNote p {
    width: 95%;
    max-width: 1222px;
    font-size: 1rem;
    margin: 0 auto;
    text-align: justify;
}

/*-----回收再生-----*/
.RecBg {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.RecContent {
    position: relative;
    padding-bottom: 100px;
}

.RecBg_1 {
    display: block;
    width: 100%;
    height: 100%;
}

.RecBg_1_1 {
    background: url(../images/Rec_BG_A.png) no-repeat bottom center;
    padding-top: 280px;
}

.RecBg_1_2 {
    background: #a9d77d;
    width: 100%;
    height: calc(100% - 280px);
}

.RecBg_2 {
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 400px;
    height: 374px;
    background: url(../images/Rec_BG_C.png) no-repeat right top;
}

.RecImg {
    width: calc(95% - 40px);
    max-width: 1160px;
    border: 30px solid #ffffff;
    margin: 0 auto;
    border-radius: 20px;
    overflow: auto;
    box-shadow: 0 0 20px 0 #797979;
}

.RecImg img {
    display: block;
    width: 220%;
    height: auto;
}

.RecBg_3_1 {
    position: absolute;
    background: url(../images/Rec_BG_B_L.png) no-repeat;
    background-size: 100% auto;
    width: 18.1%;
    padding-top: 18.5%;
    top: 24%;
    right: 73%;
}

.RecBg_3_2 {
    position: absolute;
    background: url(../images/Rec_BG_B_R.png) no-repeat;
    background-size: 100% auto;
    width: 18.1%;
    padding-top: 18.5%;
    top: 50%;
    left: 80%;
}

.RecBg_3 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.Rec_terImg {
    position: absolute;
    bottom: 20px;
    right: 66%;
    width: 35%;
    max-width: 395px;
}

.Rec_terImg img {
    display: block;
    width: 100%;
    height: auto;
}

/*-----教育按鈕-----*/
.EduBg_1 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.EduBg_1_1 {
    background: url(../images/index_LastBK_BG_A_L.png);
	top: 40%;
    left: 8%;
    width: 14.9%;
    padding-top: 4%;
    position: absolute;
	background-size: 100% auto;
}

.EduBg_1_2 {
    background: url(../images/index_LastBK_BG_A_R.png);
    top: 11%;
    right: 17%;
    width: 16.1%;
    padding-top: 4%;
    position: absolute;
	background-size: 100% auto;
}

.EduBg {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.EduBg_2_1 {
    background: url(../images/index_LastBK_BG_B_A.png);
    background-position: right top;
    background-size: auto 100%;
    display: block;
    width: 15%;
    height: 100%;
}

.EduBg_2_2 {
    position: absolute;
    right: 69.5%;
    top: 0;
    background: url(../images/index_LastBK_BG_B_B.png) no-repeat;
    background-size: 100% auto;
    background-position: right 70% top;
    display: block;
    width: 16.5%;
    padding-top: 15.7%;
}

.EduContent {
    display: block;
    position: relative;
    height: 520px;
}

.EduBg_3 {
    display: block;
    position: absolute;
    right: 0;
    bottom: 0;
    width: 16.816%;
    height: 500px;
    background: url(../images/index_LastBK_BG_B_C.png);
}

.EduBg_4 {
    background: url(../images/index_LastBK_BG_C.png);
    background-position: top center;
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 164px;
    background-size: cover;
}

.EduBg_4 img {
    display: block;
    position: absolute;
    bottom: 15px;
    left: calc(50% - 136.5px);
}

.EduBtn {
    padding-top: 150px;
}

.EduBtn a {
    display: block;
    margin: 0 auto;
    background: #005D4A;
    color: #ffffff;
    padding: 20px;
    position: relative;
    border-radius: 10px;
    box-shadow: 5px 5px 0 #6FAD41;
    width: 200px;
    text-align: center;
}

.EduBtnTxt {
    font-size: 1.4rem;
    font-weight: bold;
}

.EduBtnImg {
    display: block;
    position: absolute;
    left: 80%;
    bottom: 10%;
}



/*-----------------------紙回收教育推廣-------------------------*/
.eduCate {
	background: #E8F1D0;
}

.eduKv {
    padding: 30vh 0 50px;
    min-height: calc(70vh - 50px);
    background: url(../images/edu/kvBg.png), url(../images/edu/kvBg_L.png), url(../images/edu/kvBg_R.png);
    background-size: auto 60.5%, 20% auto, 20% auto;
    background-position: top center, bottom left, bottom right;
    background-repeat: no-repeat;
}

.EduPageTitle img {
    margin: 0 auto;
    width: 95%;
    height: auto;
    max-width: 1000px;
}

.eduPageTitleW {
    display: block;
}

.eduPageTitleM {
    display: none;
}

.EduPageTitle, .EduPageKv {margin-bottom: 20px;}

.EduPageKv img {
    display: block;
    margin: 0 auto;
    width: 90%;
    height: auto;
    max-width: 392px;
}

.EduKvTxt {
    padding: 40px;
    width: calc(95% - 80px);
    background: rgba(255, 255, 255, .8);
    max-width: 820px;
    margin: 0 auto;
    border-radius: 20px;
    font-size: 1.7rem;
    text-align: justify;
}



.eduInfo {
	background: #4E6B45;
	padding: 50px 0;
}



.eduInfoTop {
    display: block;
    width: 90%;
    margin: 0 auto 30px;
    max-width: 900px;
    font-size: 0;
}

.eduInfoTop > div {
    display: inline-block;
    vertical-align: middle;
}

.eduInfoTxt {
    font-size: 1.4rem;
    color: #ffffff;
    width: calc(100% - 334px);
    margin-right: 50px;
    text-align: justify;
}

.eduInfoImg {
    width: 284px;
}

.eduInfoImg img {
    display: block;
    width: 100%;
    height: auto;
}

.eduSlogan {
    text-align: center;
    color: #D6DB58;
    font-size: 2.3rem;
    font-weight: bold;
    width: 95%;
    margin: 0 auto;
}




.eduEven {
    background: url(../images/edu/bkImg_even.png) no-repeat top 50px center, url(../images/edu/bkImg_download_01.png) no-repeat bottom center, #E8F1D0;
    padding: 50px 0 100px;
    min-height: 300px;
}

.EduSubTitle {
    text-align: center;
    margin-bottom: 50px;
}

.EduSubTitle img {
    display: block;
    margin: 0 auto 10px;
}

.EduSubTitleTxt {
    font-size: 2.5rem;
    font-weight: bold;
    color: #005D4A;
}


.EvenList {
    display: block;
    max-width: 1000px;
    width: 90%;
    margin: 0 auto 100px;
}

.EvenList img {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
}



.EvenAlbumCover {
    display: block;
    width: 95%;
    max-width: 1200px;
    margin: 0 auto;
}

.EvenAlbumCover li {
    width: 50%;
}

.EvenAlbumCover li img {
    display: block;
    width: 100%;
    height: auto;
}

.EvenAlbumCoverTitle {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap; 
    font-size: 1.4rem;
    font-weight: bold;
    color: #000;
    text-align: center;
}

.EvenAlbum {
    display: none;
}



.eduDownload {
    background: url(../images/edu/bkImg_even.png) no-repeat top 50px center, url("../images/edu/bkImg_download_02.png") no-repeat bottom center, #def2ff;
    padding: 50px 0 0;
    min-height: 300px;
}

.eduDownloadList {
    display: block;
    width: 95%;
    max-width: 1000px;
    margin: 0 auto 50px;
}

.eduDownloadList li {
    text-align: center;
}

.eduDownloadList li img {
    display: block;
    margin: 0 auto 10px;
    width: 100%;
    height: auto;
    max-width: 330px;
    filter: drop-shadow(0px 0px 2px #cccccc);
}

.eduDownloadType {
    background: #E6BC53;
    display: block;
    margin: 0 auto 5px;
    font-size: 1.5rem;
    color: #ffffff;
    font-weight: bold;
    width: 100%;
    max-width: 200px;
    border-radius: 20px;
}

.eduDownloadTxt {
    font-size: 1.2rem;
    color: #5C5C5C;
}



.eduBottomImg {
    background: url("../images/edu/bkImg_download_03.png") no-repeat bottom center;
    padding-bottom: 20px;
    position: relative;
    display: block;
}

.eduImg_A {
    position: relative;
    display: block;
    margin: 0 auto;
    width: 95%;
    height: auto;
    max-width: 517px;
}

.eduImg_B {
    position: absolute;
    display: block;
    bottom: 3%;
    left: 10%;
    width: 35%;
    height: auto;
    max-width: 264px;
}

.eduImg_C {
    position: absolute;
    display: block;
    bottom: 3%;
    right: 2%;
    width: 35%;
    height: auto;
    max-width: 188px;
}

/*--------------------------FSC 頁面----------------------------------*/
.fscPage {
    background: url(../images/fsc_Bg.png) no-repeat top center, #DEF2FF;
    display: block;
    position: fixed;
    width: 100%;
    height: 100vh;
}

.fscBtn {
    padding: 100px 0 0;
    text-align: center;
}

.fscBtn ul {
    font-size: 0;
}

.fscBtn li {
    display: inline-block;
    margin-right: 20px;
}

.fscBtn li:last-child {
    margin-right: 0;
}

.fscBtn a {
    display: block;
    background: #005D4A;
    color: #fff;
    padding: 5px 10px;
    border-radius: 10px;
    box-shadow: 5px 5px 0 #6FAD41;
}

.fscBtn a:hover {
    box-shadow: -5px -5px 0 #00342a;
}

.fscBtn a span {
    font-size: 1.2rem;
    font-weight: bold;
    display: block;
    text-align: center;
    width: 120px;
    line-height: 1.5rem;
}

.fscBtn li.active a {
    background: #6FAD41;
    box-shadow: 5px 5px 0 #005d4a;
}

.FscTitle {
    text-align: center;
    padding: 20px 0;
}

.FscTitle img {
    display: inline-block;
    margin-right: 10px;
    vertical-align: bottom;
}

.FscTitle span {
    display: inline-block;
    vertical-align: bottom;
    color: #6fad41;
    font-size: 2.5rem;
    font-weight: bold;
}

.FscInfo {
    display: block;
    margin: 0 auto;
    width: 95%;
    max-width: 760px;
    margin-bottom: 50px;
}

.FscInfo p {
    color: #005D4A;
    font-size: 1.4rem;
    text-align: justify;
}

.fscBk {
    display: block;
    border: 2px dashed #509534;
    width: calc(95% - 4px);
    max-width: 896px;
    margin: 0 auto 50px;
    background: #ffffff;
    padding: 20px 0;
    border-radius: 10px;
}

.fscSecTitle {
    font-size: 2rem;
    font-weight: bold;
    color: #509534;
    text-align: center;
    padding: 20px 0;
}

.fscColorBox {
    background: #dacf79;
}

.fscShareList li {
	margin-bottom: 20px;
}

.fscShareList li:last-child {
	margin-bottom: 0;
}

.fscColorBg img {
    display: block;
    width: 100%;
    height: auto;
}

.fscShareContent {
    background-size: 100% 100% !important;
    padding: 20px;
    width: calc(100% - 130px);
    position: relative;
}

.fscShareList li:nth-child(odd) .fscShareContent {
    background: url(../images/fsc_txtBg_A_1.png);
    float: right;
    bottom: 10px;
}

.fscShareList li:nth-child(odd) .fscShareTail {
    background: url(../images/fsc_txtBg_A_2.png);
    left: 0;
}

.fscShareList li:nth-child(even) .fscShareContent {
    background: url(../images/fsc_txtBg_B_1.png);
    float: left;
}

.fscShareList li:nth-child(even) .fscShareTail {
    background: url(../images/fsc_txtBg_B_2.png);
    right: 0;
}

.fscShareList li:nth-child(odd) .fscShareQHead {
    float: left;
}
.fscShareList li:nth-child(even) .fscShareQHead {
    float: right;
}

.fscShareTail {
    display: block;
    position: absolute;
    width: 22px;
    height: 33px;
    bottom: 0;
}

.fscShareList {
    display: block;
    width: 95%;
    max-width: 700px;
    margin: 0 auto;
}

.fscShareTxt {
    font-size: 1.2rem;
    color: #ffffff;
}


/*相簿*/
.fsc_Album_A {
    display: block;
    width: 95%;
    max-width: 760px;
    margin: 0 auto 30px;
}

.fsc_Album_A ul a {
    display: block;
    width: 100%;
    padding-top: 56.25%;
    background-size: cover !important;
    background-position: center !important;
    filter: brightness(0.8);
}

.fsc_Album_A .slick-track li {
    padding: 10px;
}

.fsc_Album_A ul a:hover {
    filter: brightness(1);
}

/*-----到校教育,大專營-----*/
.fscVideo {
    display: block;
    margin: 0 auto;
    width: 95%;
    max-width: 700px;
    position: relative;
}

.fscVideo > div {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
}

.fscVideo iframe {
    display: block;
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
}

.fscSecTitle {
    font-size: 2rem;
    font-weight: bold;
    color: #509534;
    text-align: center;
    padding: 20px 0;
}

.fscLesson {
    display: block;
    margin: 0 auto;
    width: 95%;
    max-width: 650px;
    margin-bottom: 20px;
}

.fscLesson > ul {
    font-size: 0;
}

.fscLesson > ul > li {
    font-size: 0;
    margin-bottom: 10px;
}

.fscLesson > ul > li > div {
    display: inline-block;
}

.fscLessonStep {
    width: 105px;
    margin-right: 10px;
    vertical-align: middle;
}

.fscLessonStep img {
    display: block;
}

.fscLessonTxt {
    display: block;
    font-size: 1.2rem;
    width: calc(100% - 115px);
    vertical-align: middle;
    color: #5C5C5C;
}

ul.fscLessonList {
    display: block;
    list-style: disc;
    padding-left: 30px;
}

ul.fscLessonList li {
    font-size: 1.4rem;
}

.fscEduLessonNote {
    background: #005D4A;
    color: #ffffff;
    font-size: 1.2rem;
    text-align: center;
    width: 95%;
    max-width: 500px;
    padding: 10px 0;
    font-weight: bold;
    margin: 0 auto;
}

/*-----種子教師-----*/
.fsc_Album_B {
    width: 95%;
    max-width: 700px;
    margin: 0 auto 30px;
}

.fsc_Album_B ul {
    display: block;
    font-size: 0;
}

.fsc_Album_B li {
    display: inline-block;
    width: 48%;
    margin-right: 4%;
    margin-bottom: 10px;
}

.fsc_Album_B li:nth-child(even) {
    margin-right: 0;
}

.fsc_Album_B a {
    display: block;
    width: 100%;
    padding-top: 56.25%;
    background-size: cover !important;
    background-position: center !important;
    filter: brightness(0.8);
}

.fsc_Album_B a:hover {
    filter: brightness(1);
}



/*-----影音資源-----*/
article.media {
    background: url(../images/media_Bg.png);
    padding: 10% 0 11%;
    background-size: 100% auto;
    background-position: top center;
    min-height: calc(100vh - 350px);
}

.VideoTreeBg {
    display: block;
    position: relative;
}

.TreeL {
    background: url(../images/media_Tree_L.png);
    background-size: 100% auto;
    display: block;
    position: absolute;
    width: 25.2%;
    padding-top: 33.5%;
    top: -55px;
    right: 65.3%;
}

.TreeR {
    background: url(../images/media_Tree_R.png);
    background-size: 100% auto;
    display: block;
    position: absolute;
    width: 24.7%;
    padding-top: 29.4%;
    top: 0;
    left: 72.3%;
}


.VideoList {
    position: relative;
    padding: 30px;
    background: #6b4876;
    border-radius: 30px;
    display: block;
    margin: 0 auto 3%;
    width: calc(45% - 60px);
    /* max-width: 800px; */
}

.VideoList ul {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
}

.VideoList ul li {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.VideoList ul li.active {
	display: block;
}

.VideoList ul li a {
    display: block;
    width: 100%;
    height: 100%;
    background-size: cover !important;
    background-position: center !important;
}

.VideoList ul li a img {
    position: relative;
    display: block;
    width: 12.559%;
    height: auto;
    margin: 0 auto;
    top: 43.72%;
}

.VideoBtnList {
    display: block;
}

.VideoBtnList ul {
    font-size: 0;
    text-align: center;
}

.VideoBtnList li {
    display: inline-block;
    margin-right: 20px;
}

.VideoBtnList li:last-child {
    margin-right: 0;
}

.VideoBtnList a {
    background: #005D4A;
    display: block;
    padding: 5px 0;
    width: 150px;
    color: #ffffff;
    border-radius: 10px;
    box-shadow: 5px 5px 0 #6FAD41;
}

.VideoBtnList a span {
    display: block;
    text-align: center;
    font-size: 1.2rem;
    line-height: 1.6rem;
    font-weight: bold;
}

.VideoBtnList li.active a {
    background: #6fad41;
    box-shadow: 5px 5px 0 #005D4A;
}

.channelLink {
    text-align: center;
    padding-top: 20px;
}

.channelLink a {
    display: inline;
    color: #005D4A;
    background: none;
    box-shadow: none;
    font-weight: bold;
    text-decoration: underline;
    width: auto;
    padding: 0;
}


.VideoPBg {
    display: block;
    position: relative;
}

.PL {
    display: block;
    position: absolute;
    background: url(../images/media_P_L.png);
    background-size: 100% auto;
    width: 26.4%;
    padding-top: 10%;
    left: 10%;
}

.PR {
    display: block;
    position: absolute;
    background: url(../images/media_P_R.png);
    background-size: 100% auto;
    width: 20.7%;
    padding-top: 8.4%;
    right: 10%;
}



/*-----關於利樂-----*/
.AboutTop {
	margin-bottom: 50px;
}

.AboutBgL {
    background: url(../images/about/about_Bg_L.png) no-repeat;
    background-size: auto 100%;
    background-position: right center;
    width: 21%;
    height: 100vh;
    position: absolute;
    top: 0;
    left: 0;
}

.AboutBgR {
    background: url(../images/about/about_Bg_R.png) no-repeat;
    background-size: auto 100%;
    background-position: left center;
    position: absolute;
    top: 0;
    right: 0;
    width: 18.82%;
    height: 100vh;
}

.AboutBgAni {
    /* display: none; */
    position: absolute;
    width: 12%;
    padding-top: 8.9%;
    background: url(../images/about/about_Bg_Ani.png);
    background-size: 100% auto;
    bottom: 25%;
    left: 8.5%;
    animation-name: think;
    animation-duration: 3s;
    animation-iteration-count: infinite;
}

@keyframes think {
	0% {opacity: 0;}
	30%{opacity: 1;}
	80%{
		opacity: 1;
	}
	100%{opacity: 0;}
}



.AboutTitle {
    padding: 8% 0 50px;
}

.AboutTitle img {
    display: block;
    width: 95%;
    height: auto;
    margin: 0 auto;
    max-width: 710px;
}

.AboutInfoTxt {
    width: 95%;
    max-width: 710px;
    margin: 0 auto 50px;
    text-align: justify;
}

.AboutInfoTxt p {
	font-size: 1.5rem;
	margin-bottom: 20px;
}

.AboutInfoVideo {
    display: block;
    position: relative;
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
}

.AboutInfoVideo > div {
    display: block;
    margin-bottom: 10px;
    position: relative;
    width: 100%;
    padding-top: 56.25%;
}

.AboutInfoVideo iframe {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/*.AboutInfoVideo svg {
    display: inline;
    height: 25px;
    vertical-align: middle;
}

.AboutInfoVideo span {
    font-size: 1.3rem;
    line-height: 25px;
    vertical-align: middle;
	text-decoration: underline;
}

.AboutInfoVideo a {
    
    color: #000000;
}*/

.AboutInfoVideo > div:last-child {
    margin-bottom: 0;
}


.AboutImgBk {
    display: block;
    position: relative;
    width: 90%;
    margin: 0 auto;
}

.AboutImg_A {
    display: block;
    width: 100%;
    max-width: 675px;
    margin: 0 auto;
    position: relative;
}

.AboutImg_A img, .AboutImg_A_1 img, .AboutImg_A_2 img {
    display: block;
    width: 100%;
    height: auto;
}

.AboutImg_A div {
	transition: .5s;
}
.AboutImg_A_1 {
    display: block;
    position: absolute;
    top: 35%;
    left: 18%;
    width: 28.89%;
	transform: rotate(-90deg);
	opacity: 0;
	transform-origin: bottom;
}

.AboutImg_A_2 {
    display: block;
    position: absolute;
    top: 30%;
    right: 10%;
    width: 26.076%;
	transform: rotate(90deg);
	opacity: 0;
	transform-origin: bottom;
}

.active .AboutImg_A_1, .active .AboutImg_A_2 {
	transform: rotate(0);
	opacity: 1;
}

.AboutImgSecTitle {
    display: block;
}

.AboutImgSecTitle img {
    display: block;
    width: 95%;
    height: auto;
    margin: 50px auto;
    max-width: 868px;
}


.AboutImg_B {
    display: block;
    margin: 0 auto;
    width: 90%;
    max-width: 1000px;
    position: relative;
}


.AboutImg_B_M {
    display: none;
}
.AboutImg_B_M img {
    display: block;
	width: 100%;
	height: auto;
}

.AboutImg_B_BgAni {
    display: block;
    position: relative;
    width: 100%;
    padding-top: 100.524%;
}

.AboutImg_B_BgAni img {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
}

.AboutImg_B_1 {
    display: block;
    position: absolute;
    top: 10%;
    right: 10%;
    width: 43.244%;
    opacity: 0;
    transition: .5s;
}

.AboutImg_B_2 {
    display: block;
    position: absolute;
    bottom: 30%;
    left: 0;
    width: 51.265%;
    opacity: 0;
    transition: .5s;
}

.AboutImg_B img {
    display: block;
    width: 100%;
    height: auto;
    transition: .5s;
}

.AboutImg_B_1.active {
    top: 5%;
    opacity: 1;
}

.AboutImg_B_2.active {
    bottom: 35%;
    opacity: 1;
}

.AboutImg_B_BgAni img:last-child {
    opacity: 0;
}

.AboutImg_B_BgAni.active img:last-child {
    opacity: 1;
}

/*關於利樂下方*/
.AboutBottom {
    background: #FDECE4;
    padding: 50px 0;
}

.AboutBottomTitle {
    display: block;
    position: relative;
    margin-bottom: 50px;
}

.AboutBottomTitle img {
    display: block;
    width: 95%;
    margin: 0 auto;
    height: auto;
    max-width: 1660px;
}

.About_Box {
    display: block;
    position: absolute;
    bottom: 50px;
    left: 13%;
    width: 28.797%;
    z-index: 1;
}

.About_Box_Txt {
    display: block;
    padding-top: 15%;
    padding-bottom: 12.3%;
    padding-left: 39%;
    background: url(../images/about/about_Box_Bg.png) no-repeat;
    background-size: 100% auto;
    background-position: right bottom 64%;
    position: relative;
}

.AboutBoxBtn {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
}

.AboutBoxBtn > div {
    display: block;
    position: absolute;
}

.About_Box > img {
    display: block;
    width: 100%;
}

.About_Box_Txt img {
    display: block;
    width: 92.089%;
    height: auto;
}

.About_Box > img {
    display: block;
    width: 100%;
    height: auto;
}

.About_Box > div {
    display: block;
    position: absolute;
}

.AboutBtnPoint {
    display: block;
    background: #FFEE00;
    border-radius: 50px;
    position: absolute;
	animation-name: pointStar;
    animation-duration:3s;
	animation-iteration-count:infinite;
}

@keyframes pointStar {
	0% {
		opacity: 0;
		transform: scale(0);
	}
	80%{
		opacity: .5;
		transform: scale(1);
	}
	100%{
		opacity: 0;
		transform: scale(1.1);
	}
}

.AboutBtnImg img {
    display: block;
    position: relative;
    z-index: 1;
    width: 100%;
    height: auto;
}

#AboutBtn_1 {
    top: 18%;
    left: -5%;
    width: 12.41%;
}

#AboutBtn_1 .AboutBtnPoint {
    right: -50%;
    top: -35%;
    width: 117.67%;
    padding-top: 117.67%;
}

#AboutBtn_2 {
    bottom: 4%;
    left: -9%;
    width: 23.256%;
}

#AboutBtn_2 .AboutBtnPoint {
    right: -34%;
    top: -35%;
    width: 72.08%;
    padding-top: 72.08%;
}

#AboutBtn_3 {
    top: 25%;
    right: 21%;
    width: 12.41%;
}

#AboutBtn_3 .AboutBtnPoint {
    left: -55%;
    top: -35%;
	width: 117.67%;
    padding-top: 117.67%;
}

#AboutBtn_4 {
    bottom: 19%;
    right: 6%;
    width: 27.82%;
}

#AboutBtn_4 .AboutBtnPoint {
    left: -25%;
    top: -35%;
    width: 58.83%;
    padding-top: 58.83%;
}


/*連結*/

.Link {
    background: #D6DB58;
    padding: 50px 0;
}

.Link ul {
    display: block;
    text-align: center;
    font-size: 0;
    width: 95%;
    margin: 0 auto;
    max-width: 600px;
}

.Link li {
    display: inline-block;
    width: 20%;
    margin-right: calc(20% / 3);
}

.Link li:last-child {
    margin-right: 0;
}

.Link a {
    display: block;
    width: 100%;
    padding: 10px 0;
    background: #005D4A;
    color: #ffffff;
    font-weight: bold;
    font-size: 1.2rem;
    border-radius: 10px;
    box-shadow: 5px 5px 0 #6fad41;
}

.Link a:hover {
    box-shadow: -5px -5px 0 #004033;
}



/*--彈跳視窗--*/
.PupWindows {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    background: #ffffff;
    width: 100%;
    height: 100vh;
    z-index: 50;
}

.CloseBtn {
    display: block;
    position: absolute;
    top: 10px;
    right: 10px;
    width: 50px;
    height: 50px;
    z-index: 1;
}

.CloseBtn a {
    display: block;
    width: 100%;
    height: 100%;
}

.CloseBtn span {
    width: 100%;
    height: 3px;
    background: #000;
    display: block;
    border-radius: 5px;
    position: absolute;
    top: calc(50% - 1.5px);
}

.CloseBtn span:first-child {
    transform: rotate(45deg);
}

.CloseBtn span:last-child {
    transform: rotate(
-45deg);
}

.PubBk {
    padding: 1%;
    height: 96%;
}

.PupTitle {
    display: block;
    position: absolute;
    padding-top: 1%;
    padding-left: 1%;
    width: 98%;
    top: 0;
    left: 0;
}

.PupTitle img {
    display: block;
    max-width: 100%;
    height: auto;
}

.PupContent img.PupImgM {
    display: none;
}

.PupContent img {
    display: inline-block;
    vertical-align: middle;
    margin: 0 auto;
    max-width: 100%;
    height: auto;
}

.PupContent {
    height: 100%;
    text-align: center;
    font-size: 0;
    overflow: auto;
}

.PupContent::after {
    content: "";
    display: inline-block;
    vertical-align: middle;
    height: 100%;
}





/*PUP1*/
.PupA {
    display: none;
    width: 100%;
    height: 100%;
}

#PupA_1 {
    display: block;
}

#PupA_2 .PupContent {
    height: 80%;
    padding-top: 7%;
}

.PupA_history {
    display: inline-block;
    vertical-align: middle;
    overflow: auto;
    height: 100%;
    width: 60%;
    max-width: 900px;
}


.PupA_history {
    display: inline-block;
    vertical-align: middle;
    overflow: auto;
    height: 100%;
    width: 60%;
    max-width: 900px;
}

#PupA_1 .PupTitle img {
    width: 24.773%;
}

#PupA_2 .PupTitle img {
    width: 48.474%;
}

#PupA_3 .PupTitle img {
    width: 44.506%;
}
.PupAPageChange {
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 1%;
    width: 98%;
}
.PrePage {
    float: left;
}
.NextPage {
    float: right;
}

.PrePage img, .NextPage img {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
}

/*PUP2*/
#Pup_2 .PupImgW {
    width: 69.707%;
}

/*PUP3*/
#Pup_3 .PupTitle img {
    width: 44.506%;
}
#Pup_3 .PupImgW {
    width: 81.074%;
}

/*PUP4*/
#Pup_4 .PupImgW {
    width: 62.468%;
}

/*---------------------------自適應內容----------------------------*/
/*--高--*/
@media only screen and (max-height: 820px) {

}
@media only screen and (max-height: 600px) {

}

/*--寬--*/
@media only screen and (max-width: 1650px) {

}

@media only screen and (max-width: 1300px) {

}

@media only screen and (max-width: 1235px) {

}

@media only screen and (max-width: 1100px) {
.RenBg1_1, .RedBg_1, .RecBg_1_1 {
    background-size: 100% auto;
    padding-top: 200px;
}
.RenBg1_2, .RedBg_2, .RecBg_1_2 {
    height: calc(100% - 200px);
}

.BkTitle {
    padding: 20px 0 40px;
}
	
.RenBottomTitle {
    width: 50%;
    top: -8%;
    min-width: 380px;
    padding: 31px 0;
    font-size: 2rem;
}	
	
.RecImg {
    border: 15px solid #ffffff;
    width: calc(95% - 30px);
}
	
	
.PL, .PR {
    position: relative;
    left: 0;
    right: 0;
}

.PR {
    width: 35.91%;
    padding-top: 14.546%;
    float: right;
}

.PL {
    float: left;
    width: 37%;
    padding-top: 16.5%;
}

article.media {
    padding: 10% 0 5%;
}

.VideoList {
    width: calc(70% - 30px);
    padding: 15px;
}

.TreeL {top: 0;left: 0;width: 15%;background-size: auto 100%;background-position: left 20% top;}

.TreeR {
    top: 70px;
    right: 0;
    left: auto;
    width: 15%;
    background-size: auto 100%;
    background-position: right 97% top;
}

.VideoBtnList {
    margin-bottom: 50px;
}	
	
}

@media only screen and (max-width: 990px) {
#footer, .copyright {
    float: none;
    padding: 0;
    width: 95%;
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}
	#footer {
    margin-bottom: 10px;
}
	.copyright span {
		display: inline-block;
	}
}

@media only screen and (max-width: 920px) {
.RenBtnList li {
    margin-right: 15px;
}
.BtnTxt span {
    font-size: 1.2rem;
}

.RenBtnList a {
    width: 150px;
    padding: 5px 0;
}

.BtnIcon {
    width: 50px;
    left: 110px;
}

.BtnIcon img {
    width: 100%;
    height: auto;
}
}

@media only screen and (max-width: 900px) {
    .eduImg_C {
        display: none;
    }
}

@media only screen and (max-width: 850px){


}
	
@media only screen and (max-width: 800px){
.IndexBg {
    background-size: 90%;
}
	
#Menu {
	display: none;
    width: 100%;
    height: 100vh;
    padding: 0;
    border-radius: 0;
    background: #0A2725;
    text-align: center;
}

#Menu::after {
    display: inline-block;
    content: "";
    height: 100%;
    vertical-align: middle;
}
	
.MMenu {
    display: block;
}

nav {
    display: inline-block;
    vertical-align: middle;
}	

nav li {
    display: block;
    margin-bottom: 20px;
}

nav a {
    color: #ffffff;
    font-size: 1.5rem;
    font-weight: bold;
}

}

@media only screen and (max-width: 750px){
.RenImg_W {
    display: none !important;
}

.RenImg_M {
    display: block !important;
}

.RenBg2, .RenBg3 {
    display: none;
}

.RenBg1_1, .RedBg_1, .RecBg_1_1 {
    padding-top: 140px;
}

.BkTitle {
    padding: 10px 0 40px;
}

.RenBg1_2, .RedBg_2, .RecBg_1_2 {
    height: calc(100% - 140px);
}

.RenSliderImg {
    width: 95%;
    max-width: 500px;
}
	
	
	
.Rec_terImg {
    position: relative;
    bottom: 0;
    right: auto;
    width: 95%;
    margin: 0 auto;
    padding-bottom: 50px;
}

.RecImg {
    border: 5px solid #ffffff;
    width: calc(95% - 10px);
}

.RecImg img {
    width: 2200px;
}

.RecContent {
    padding-bottom: 30px;
}
	
	
	
article.media {
    padding: 120px 0 50px;
    min-height: calc(100vh - 293px);
    background-size: auto 100%;
    background-position: center;
}	
    
    
    
    
    
.eduInfoTop > div {
    display: block;
    margin: 0 auto 20px;
}

.eduInfoTxt {width: 100%;}
    
.eduSlogan {
    font-size: 2rem;
}
}

@media only screen and (max-width: 670px){
.RenBtnList {
    max-width: 360px;
    margin: 0 auto;
}

.RenBtnList li {
    margin-right: 30px;
}

.RenBtnList li:nth-child(even) {
    margin-right: 0;
}

.RenBtnList li:nth-child(1), .RenBtnList li:nth-child(2) {
    margin-bottom: 50px;
}
}

@media only screen and (max-width: 650px) {
.IndexBg {
    background-size: 180%;
    background-position: left -3% top 6%;
}

.KvContent {
    padding-top: 120px;
}

.KvTxt {
    position: relative;
    width: 90%;
    max-width: 545px;
    float: right;
}

.KvTxt img {
    display: block;
    width: 100%;
    height: auto;
}

.KvTetra {
    float: left;
    padding-top: 0;
    margin-top: -13%;
    width: 70%;
}

.KvTetra img {
    width: 100%;
    height: auto;
}

.WebTitle {
    margin-bottom: 25px;
}
	
.EduBg_2_2 {
    width: 30%;
    padding-top: 28.7%;
}	
	
	
section.fscBtn {
    display: none;
}

.fscHead {
    padding-top: 100px;
}	
	
}

@media only screen and (max-width: 640px) {
.AboutBgL, .AboutBgR, .AboutBgAni {
    display: none;
}

.AboutTitle {
    padding: 90px 0 30px;
}

.AboutImgBk {
    width: 100%;
}
	
	
	
.AboutImg_B {
    display: none;
}

.AboutImg_B_M {
    display: block;
    width: 95%;
    margin: 0 auto;
}

.About_Box {
    position: relative;
    width: 82%;
    bottom: 0;
}

.About_Box_Txt {
    padding-left: 0;
    background-position: right bottom;
    background-size: auto 100%;
}

.About_Box_Txt img {
    margin: 0 auto;
}

.AboutBottom {
    padding-bottom: 0;
}	
	
.PupContent img.PupImgM {
    display: block;
}

.PupContent img.PupImgW {
    display: none;
}
	
.PupTitle img {
    width: auto !important;
    max-width: calc(100% - 60px) !important;
}	
	
.PupTitle img {
    width: auto !important;
    max-width: calc(100% - 60px) !important;
}

.PupContent {
    height: auto !important;
    padding-bottom: 10px;
}

.PupTitle {
    position: relative;
}

.PupWindows {
    overflow: auto;
}

.PupContent img {
    width: 95%;
    max-width: 500px;
}	
	
.PupA_history {
    display: block;
    width: 100%;
    height: auto;
}
	
#Pup_4 .PupImgM {
    padding-top: 50px;
}	
}

@media only screen and (max-width: 600px) {
.EduBg_4 img {
    width: 44.465%;
    height: auto;
    left: 42%;
}
	
	
.AboutImg_B {
    display: none;
}

.AboutImg_B_M {
    display: block;
    width: 95%;
    margin: 0 auto;
}
    
 .eduEven {
    background-size: 150% auto, 120% auto;
}

.eduDownload {
    background-size: 150% auto, 350% auto;
    background-position: top 50px center, center bottom 100px !important;
}
}

@media only screen and (max-width: 560px) {
.RedInfo_3 {
    font-size: 1.1rem;
}
    
    
    

    
.EduKvTxt {
    padding: 20px;
    font-size: 1.4rem;
}

.EduPageTitle img {
    max-width: 420px;
}
    
.eduPageTitleW {
    display: none;
}

.eduPageTitleM {
    display: block;
} 

.eduKv {
    padding: 20vh 0 50px;
    background-size: auto 50%, 36% auto, 36% auto;
}  
    
    
    
    
    
.Link li {
    width: 24%;
    margin-right: calc(4% / 3);
}
    
    
    
}
	
@media only screen and (max-width: 530px) {
.Link a {
    font-size: 1.1rem;
}
}
@media only screen and (max-width: 510px) {
article.media {
    padding: 120px 0 50px;
    min-height: calc(100vh - 293px);
    background-size: auto 100%;
    background-position: center;
}

.VideoBtnList li:last-child {
    margin-right: 0;
}

.VideoList {
    width: calc(95% - 30px);
    margin-bottom: 50px;
}

.VideoBtnList a {
    width: 100px;
}

.VideoBtnList li {margin-right: 10px;}	
}
@media only screen and (max-width: 500px) {
.BkTitle {
    padding: 20px 0 40px;
}
}

@media only screen and (max-width: 460px) {
.BottleName {
    font-size: 1.2rem;
}
}

@media only screen and (max-width: 420px) {
.fscShareContent {
    width: calc(90% - 40px);
}
	
.fscShareQHead {
    margin-top: -37px;
    z-index: 5;
    position: relative;
}	
    
.Link li {
    width: 49%;
    margin-right: 2%;
    vertical-align: top;
}

.Link li:nth-child(even) {
    margin-right: 0;
}

.Link li:first-child {
    margin-bottom: 10px;
}    
    
}

@media only screen and (max-width: 410px) {
.RedAniContent li {
    display: block;
    width: 300px;
    margin: 0 auto;
    margin-bottom: 30px;
}

.BottleCoNum {
    font-size: 1.5rem;
}

.BottleCoBar {
    height: 30px;
}
	
.RecBg_2 {
    width: 70%;
    height: auto;
    padding-top: 99%;
}	
}

@media only screen and (max-width: 380px) {
.RenBottomTitle {
    width: calc(95% - 20px);
    min-width: auto;
    text-align: left;
    padding: 30px 0 20px 20px;
    top: -6%;
    font-size: 1.85rem;
}
	
}


@media only screen and (max-width: 350px) {
.RenBtnList li {
    display: block;
    margin: 0 auto 50px auto;
}

.RenBtnList li:last-child {
    margin-bottom: 0;
}

.RenBtnList a {
    margin: 0 auto;
}
}