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

/*思源宋體*/
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+TC:wght@200;300;400;500;600;700;900&display=swap');
/*font-family: 'Noto Serif TC';*/

/*-----↓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, .BFHBSetIn li::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 {
	background: rgba(255, 255, 255, .8);
	padding: 10px;
	display: block;
	position: fixed;
	top: -80px;
	width: calc(100% - 20px);
    z-index: 5;
    transition: .5s;
}

header.active {
	top: 0px;
}

#Menu {
    display: block;
    position: absolute;
    right: 10px;
    top: calc(50% - 0.6vw);
}

#Menu > div, #Menu > nav {
	
}

.Logo {
    display: block;
    position: relative;
    height: 100%;
}

.Logo img {
    display: block;
    height: 60px;
    width: auto;
}

/*---------------------------↓Menu↓-----------------------*/
nav {
	display: block;
}

nav ul {
	font-size: 0;
	display: block;
	position: relative;
}

nav li {
    display: inline-block;
    margin-left: 20px;
    height: 1.2vw;
}

nav li:first-child {
    margin-left: 0;
}

nav a {
    font-size: 0.85vw;
    color: #000;
    line-height: 1vw;
    font-family: 'Noto Serif TC';
}

nav a.active {
    color: #6e8753;
    text-decoration: underline;
}

nav a:hover, nav a.active {
    
}

/*-------↓手機版選單↓---------*/
.MMenu {
    display: none !important;
    position: absolute;
    top: 10px;
    right: 10px;
    width: 30px;
    height: 30px;
}

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

.MMenu span {
    display: block;
    width: 80%;
    height: 2px;
    position: absolute;
    background: #1b1412;
    left: 10%;
	transition: .5s;
}

.MMenu span:first-child {
    top: calc(20% - 1px);
}

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

.MMenu span:last-child {
    bottom: calc(20% - 1px);
}

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

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

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

/*-------------------------↓BODY 區塊↓-------------------------*/
article {
	
}
section {
	display: block;
    position: relative;
}
/*-------------------------↓FOOTER 頁尾↓-----------------------*/
footer {
    background: #6E8753;
    padding: 30px 0;
    position: relative;
}

#footer {
    display: block;
    width: 64.253%;
    max-width: 1260px;
    margin: 0 auto;
    font-size: 0;
    position: relative;
}

.footLogo {
    display: inline-block;
    vertical-align: middle;
    width: 44%;
    font-size: 0;
    margin-right: 3.142%;
}

.footLogo img {
    display: inline-block;
    vertical-align: middle;
    height: auto;
}

.footLogo img:first-child {
    width: 39%;
    margin-right: 6.884%;
}

.footLogo img:last-child {
    width: 54.116%;
}

.copyright {
    display: inline-block;
    width: 52.858%;
    vertical-align: middle;
    color: #fff;
}
.copyright span {
    font-size: 0.95vw;
    display: inline-block;
}
.copyright div {
    display: inline-block;
    border-bottom: 1px solid #fff;
    font-size: 0;
}
.copyright div span {
    margin-right: 13px;
}
.copyright div span:last-child {
    margin-right: 0;
}
.copyright a {
    font-size: inherit;
    color: #fff;
}

.ADTxt {
    display: block;
    position: absolute;
    right: 5%;
    border: 1px solid #fff;
    padding: 5px;
    font-size: 0.75vw;
    color: #fff;
    font-family: 'Noto Serif TC';
    bottom: 15%;
}

/*--------------------------↓共用項目↓-------------------------------*/
/*-----項目標題-----*/
.BlockTItle {
    text-align: center;
    font-size: 2.35vw;
    font-family: 'Noto Serif TC';
    font-weight: 700;
    padding: 2.628% 0;
    letter-spacing: 5px;
    padding-left: 5px;
}

.BlockTItle span {
    font-size: inherit;
    font-family: inherit;
    font-weight: inherit;
    color: #6E8753;
}

/*--------------------------↓內容開始↓-------------------------------*/
/*-----主視覺-----*/
#Block1 {
    background: #EAF0E9;
    padding: 4.0445vw 0;
}

.KvInfo {
    text-align: center;
    color: #ffffff;
}

.WebLogo {
    display: block;
    position: absolute;
    left: 5%;
    width: 8.6%;
    max-width: 168px;
    z-index: 1;
}

.WebLogo img {
    display: block;
    height: auto;
}

.WebLogo img:first-child {
    width: 72.62%;
    margin-bottom: 20px;
}

.WebLogo img:last-child {
    width: 100%;
}

.WebTitle {
    display: block;
    margin: 0 auto;
    width: 25%;
    max-width: 478px;
    margin-bottom: 1.5167vw;
    position: relative;
    z-index: 1;
}

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

.KvMenu {
    text-align: center;
    position: relative;
    z-index: 1;
}

.KvMenu ul {
    font-size: 0;
}

.KvMenu li {
    display: inline-block;
    margin-right: 3%;
}

.KvMenu a {
    font-size: 1.08vw;
    color: #1a1311;
}

.KvMenu a:hover {
    color: #6E8753;
}

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

.WebBook {
    position: relative;
    z-index: 1;
    display: block;
    width: 24.5%;
    max-width: 480px;
    margin: 0 auto;
}

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

.KvInfo {
    position: relative;
    z-index: 1;
}

.KvInfoTitle {
    margin-bottom: 20px;
}

.KvInfoTitle p {
    font-family: 'Noto Serif TC';
    font-size: 1.415vw;
    letter-spacing: 2px;
    font-weight: 600;
}

.KvInfoContent p {
    font-size: 1vw;
}

.BgImg {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    z-index: 0;
    padding-top: 33.6399%;
}

.BgImg div {
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    background-size: cover !important;
    background-position: top left !important;
}

.BlueBg {
    background: -moz-linear-gradient(top,  rgba(18,90,135,0) 0%, rgba(18,90,135,1) 100%);
    background: -webkit-linear-gradient(top,  rgba(18,90,135,0) 0%,rgba(18,90,135,1) 100%);
    background: linear-gradient(to bottom,  rgba(18,90,135,0) 0%,rgba(18,90,135,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00125a87', endColorstr='#125a87',GradientType=0 );
    z-index: 1;
    opacity: 0.5;
}

.BgA {
    background: url(../images/webKVImg_A.jpg);
}

.BgB {
    background: url(../images/webKVImg_B.jpg);
    animation-name: BgAnimate;
    animation-duration: 10s;
    animation-iteration-count: infinite;
}

@keyframes BgAnimate {
    0% {
        opacity: 0;
    }
    25% {
        opacity: 100%
    }
    50% {
        opacity: 100%
    }
    75% {
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}

/*-----名人推薦-----*/
#Block2 {
    padding: 0 0 120px;
    background: url(../images/background03.png) no-repeat center;
    background-size: cover !important;
    background-position: center !important;
    background-attachment: fixed;
}

#Block2 .BlockTItle {
    margin-bottom: 30px;
}

.recoContent {
    width: 60%;
    max-width: 1150px;
    margin: 0 auto;
    font-size: 0;
}

.recoMphoto {
    display: none;
}

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

.recoLeft {
    width: 60%;
    margin-right: 6%;
}

.recoContent > div.recoMphoto {
    display: none;
    width: 80%;
    margin: 0 auto;
    max-width: 392px;
    margin-bottom: 20px;
}

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

.recoRight {
    width: 34%;
}

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

.recoTitle {
    display: block;
    font-size: 1.83vw;
    font-weight: bold;
    color: #6e8753;
    margin-bottom: 10px;
}

.recoName {
    border-left: 5px solid #6e8753;
    padding-left: 10px;
    margin-bottom: 15px;
}

.recoName div {
    font-size: 0.9vw;
}

.recoName div:last-child {
    color: #707070;
}

.recoInfo {
    display: block;
    height: 18vw;
    overflow: auto;
}

.recoInfo::-webkit-scrollbar {
    width: 5px;    
}

.recoInfo::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px grey; 
  border-radius: 10px;
}

.recoInfo::-webkit-scrollbar-thumb {
  background: #6E8753;
  border-radius: 10px;
}

.recoInfo p {
    font-size: 0.9vw;
    line-height: 1.8vw;
    margin-bottom: 1.8vw;
}

.recoInfo p:last-child {
    margin-bottom: 0;
}


.MRead {
    display: none;
    text-align: right;
}

.MRead a {
    font-size: 1.3rem;
    color: #6e8753;
    display: inline-block;
    vertical-align: middle;
    width: 60px;
}

.MRead::before {
    content: "";
    height: 1px;
    display: inline-block;
    vertical-align: middle;
    width: calc(100% - 65px);
    background: #6e8753;
    margin-right: 5px;
}



/*-----精華影音-----*/
#Block3 .BlockTItle, #Block4 .BlockTItle {
    background: #fff;
}

.VideoList {
    display: block;
    width: 100%;
    font-size: 0;
}

.VideoList > div {
    position: relative;
    display: inline-block;
    width: 50%;
    background-size: 100% !important;
    background-position: center !important;
    background-repeat: no-repeat;
    padding-top: 28.2%;
    transition: .5s;
}

#Video_1 {
    background: url(../images/VideoBackground01.png);
}

#Video_2 {
    background: url(../images/VideoBackground02.png);
}

.VideoList a {
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    font-size: 0;
    text-align: center;
    background: rgba(0, 0, 0, .5);
}

.VideoList a::after {
    content: "";
    display: inline-block;
    width: 0;
    height: 100%;
    vertical-align: middle;
}

.VideoList a img {
    display: inline-block;
    vertical-align: middle;
    width: 23.328%;
    height: auto;
    max-width: 130px;
}

.VideoList div:hover {
    background-size: 105% !important;
}

.VideoList div:hover a {
    background: rgba(0, 0, 0, 0);
}

/*--coming Soon--*/
.comingSoonTxt {
    display: inline-block;
    vertical-align: middle;
    font-size: 1.8vw;
    font-weight: bold;
    color: #ffffff;
    padding: 5px 25px;
    border: 2px solid #fff;
}


/*-----精彩故事-----*/
.StoryList {
    display: block;
}

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

.StoryList li {
    display: inline-block;
    width: calc(100% / 3);
    position: relative;
    padding-top: 41.408%;
    background-size: auto 100% !important;
    background-position: center !important;
    transition: .5s;
}

.StoryList li:hover {
    background-size: auto 110% !important;
}

#Story1 {
    background: url(../images/story01.jpg);
}

#Story2 {
    background: url(../images/story02.jpg);
}

#Story3 {
    background: url(../images/story03.jpg);
}

.sotryBg {
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 20px 5%;
    background: rgba(110, 135, 83, 0.75);
    width: 90%;
    height: 4.035vw;
    transition: height 0.5s;
    color: #fff;
    font-size: 0;
}

.sotryBg::after {
    content: "";
    display: inline-block;
    width: 0;
    height: 100%;
    vertical-align: bottom;
}

li:hover .sotryBg {
    background: rgba(26, 19, 17, .8);
    height: calc(100% - 40px);
}

.StoryBox {
    display: inline-block;
    vertical-align: bottom;
    width: 100%;
}

.StoryName {
    font-size: 1.6vw;
    font-weight: 700;
    font-family: 'Noto Serif TC';
    line-height: 2.2vw;
}

.StoryTitle {
    font-size: 1.2vw;
    font-weight: 700;
    font-family: 'Noto Serif TC';
    line-height: 1.835vw;
}

.StoryContent {
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.5s cubic-bezier(0, 1, 0, 1);
}

li:hover .StoryContent {
    max-height: 600px;
    transition: max-height 1s ease-in-out;
}

.StoryInfo {
    padding: 20px 0;
}

.StoryInfo p {
    font-size: 0.8vw;
    text-align: justify;
}

.ReadBtn {
    display: block;
    width: 39%;
}

.ReadBtn a {
    display: block;
    border: 1px solid #fff;
    color: #fff;
    padding: 10px;
    font-size: 0;
    position: relative;
}

.ReadBtn a div {
    display: inline-block;
    vertical-align: middle;
    position: relative;
    transition: .5s;
}

.ReadBtn a div:first-child {
    font-size: 1.6vw;
    font-weight: 700;
    font-family: 'Noto Serif TC';
    margin-right: 5px;
}

.ReadBtn a div:last-child {
    border-top: 1px solid #fff;
    width: calc(90% - 6.4vw - 5px);
}

.ReadBtn a:hover div:first-child {
    color: #000;
}

.ReadBtn a:hover div:last-child {
    border-top: 1px solid #000;
}

.ReadBtn a::before {
    content: "";
    display: block;
    width: 0;
    position: absolute;
    height: 100%;
    left: 0;
    top: 0;
    background: #fff;
    transition: .5s;
    z-index: 0;
}

.ReadBtn a:hover::before {
    width: 100%;
}




/*-----新書分享會-----*/
#Block5 {
    background: #EBF0EA;
    padding-bottom: 50px;
}

.DateTime {
    text-align: center;
    margin-bottom: 20px;
}

.DateTime span {
    color: #6e8753;
    display: inline-block;
    vertical-align: middle;
    margin-right: 5px;
}

.DateTime span:nth-child(1) {
    font-size: 2.2rem;
}

.DateTime span:nth-child(2) {
    width: 30px;
    height: 30px;
    font-size: 1.2rem;
    font-weight: bold;
    color: #fff;
    line-height: 30px;
    background: #6e8753;
    border-radius: 15px;
}

.DateTime span:nth-child(3), .DateTime span:nth-child(4) {
    font-size: 1.6rem;
    font-weight: 600;
}

.DateTime span:last-child {
    margin-right: 0;
}

.Place {
    text-align: center;
    margin-bottom: 20px;
}

.Place span {
    display: block;
}

.Place span:first-child {
    font-size: 1.4rem;
    /* font-weight: bold; */
    margin-bottom: 10px;
}

.Place span:last-child {
    font-size: 1.2rem;
}

.EventTable {
    display: block;
    margin: 0 auto;
    width: 100%;
    max-width: 550px;
}

.EventTable > ul > li {
    background: #fff;
    margin-bottom: 5px;
    padding: 10px 5px;
    font-size: 0;
}

.EventTable > ul > li > div {display: inline-block;vertical-align: middle;}

.EventTable > ul > li > div:first-child {
    color: #6e8753;
    font-size: 1.2rem;
    text-align: right;
    width: 110px;
    padding-right: 10px;
}

.EventTable > ul > li > div:last-child {
    padding-left: 10px;
    border-left: 2px solid #6e8753;
    font-size: 1.2rem;
}

.EventTitle {
    font-size: inherit;
}

.EventJoing span {
    display: inline-block;
    color: #6e8753;
    font-size: 1.1rem;
}

.EventName {
    font-weight: bold;
    margin-right: 5px;
}



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

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

}



/*--寬--*/
@media only screen and (min-width: 1920px) {
    #Menu {
        top: 27.5px;
    }
    
    nav li {
        height: auto;
        margin-left: 20px;
    }

    nav a {
        font-size: 1.2rem;
        line-height: 25px;
    }
    
    #Block1 {
        padding: 80px 0;
    }
    
    .WebTitle {
        margin-bottom: 30px;
    }
    
    .KvMenu a {
        font-size: 1.5rem;
    }
    
    .KvInfoTitle p {
        font-size: 2rem;
    }
    
    .KvInfoContent p {
        font-size: 1.4rem;
    }
    .BlockTItle {
        font-size: 3.2rem;
        padding: 2.628% 0;
    }
    .recoTitle {
        font-size: 2.5rem;
    }

    .recoName div {
        font-size: 1.2rem;
    }
    
    .recoInfo {
        height: 22rem;
    }
    .recoInfo p {
        font-size: 1.2rem;
        line-height: 2.2rem;
        margin-bottom: 2.2rem;
    }
    
    .comingSoonTxt {
        font-size: 2.2rem;
    }
    
    
    
    .sotryBg {
        height: 5.5rem;
    }
    
    .StoryName {
        font-size: 2rem;
        line-height: 3rem;
    }

    .StoryTitle {
        font-size: 1.7rem;
        line-height: 2.5rem;
    }
    .StoryInfo p {
        font-size: 1rem;
    }
    
    .ReadBtn a div:first-child {
        font-size: 1.7rem;
    }
    
    .copyright span {
        font-size: 1.33rem;
    }
    
    .ADTxt {
        font-size: 1rem;
    }
}

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

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

}
@media only screen and (max-width: 1000px) {
    .Logo img {
        height: 30px;
    }
    
    #footer {
        width: 90%;
    }

    .footLogo {
        width: 28%;
        margin-right: 2%;
    }

    .copyright {
        width: 70%;
    }
}


@media only screen and (max-width: 800px) {
    /*--字級與間距--*/
    * {
        font-size: 12px;
    }
    #Menu {
        top: 14px;
    }
    
    nav li {
        height: auto;
        margin-left: 20px;
    }

    nav a {
        font-size: 1.2rem;
        line-height: 25px;
    }
    
    #Block1 {
        padding: 80px 0;
    }
    
    .WebTitle {
        margin-bottom: 30px;
    }
    
    .KvMenu a {
        font-size: 1.5rem;
    }
    
    .KvInfoTitle p {
        font-size: 1.5rem;
    }
    
    .KvInfoContent p {
        font-size: 1.2rem;
    }
    .BlockTItle {
        font-size: 3.2rem;
        padding: 2.628% 0;
    }
    .recoTitle {
        font-size: 2.2rem;
    }

    .recoName div:first-child {
        font-size: 1.5rem;
    }
    
    .recoName div:last-child {
        font-size: 1.2rem;
    }
    
    .recoInfo {
        height: auto;
        max-height: 22rem;
        overflow: hidden;
        transition: max-height 0.5s cubic-bezier(0, 1, 0, 1);
    }
    
    .recoInfo.active {
        max-height: 2200px;
        transition: max-height 1s ease-in-out;
    }
    
    .recoInfo p {
        font-size: 1.25rem;
        line-height: 2.2rem;
        margin-bottom: 2.2rem;
    }
    
    .comingSoonTxt {
        font-size: 2.2rem;
    }
    
    
    
    .sotryBg {
        height: 5.5rem;
    }
    
    .StoryName {
        font-size: 2rem;
        line-height: 3rem;
    }

    .StoryTitle {
        font-size: 1.7rem;
        line-height: 2.5rem;
    }
    .StoryInfo p {
        font-size: 1.2rem;
    }
    
    .ReadBtn a div:first-child {
        font-size: 1.5rem;
    }
    
    .copyright span {
        font-size: 1.33rem;
    }
    
    .ADTxt {
        font-size: 1rem;
    }
}

@media only screen and (max-width: 800px) {    
    .WebBook {
        width: 60%;
    }
    
    .WebTitle {
        width: 70%;
    }

    .WebLogo {
        display: none;
    }
    
    .BgImg {
        padding-top: 120%;
    }
    
    #Block2 {
        background: none;
    }
    
    .recoContent {
        width: 90%;
    }

    .recoContent > div.recoRight {
        display: none;
    }

    .recoContent > div.recoMphoto {
        display: block;
    }
    
    .recoTitle {
        text-align: center;
    }

    .recoLeft {
        width: 100%;
        margin-right: 0;
    }

    .recoName {
        border: none;
        text-align: center;
        padding-left: 0;
    }
    
    .MRead {
        display: block;
    }
    
    
    .VideoList > div {
        display: block;
        width: 100%;
        padding-top: 56.25%;
    }
    
    .StoryList li {
        display: block;
        width: 100%;
        padding-top: 80%;
        background-size: 115% auto !important;
    }

    .StoryList li:hover {
        background-size: 125% auto !important;
    }
    
    .ReadBtn a div:last-child {
        width: 30%;
    }

    .ReadBtn {
        width: 50%;
    }

    .ReadBtn a div:first-child {
        font-size: 1.2rem;
    }

    .ReadBtn a {
        padding: 5px;
    }

    .ReadBtn {
        width: 100%;
        text-align: center;
    }

    .ReadBtn a div:last-child {
        display: none;
    }
    
    .sotryBg {
        padding: 10px;
        width: calc(100% - 20px);
    }

    li:hover .sotryBg {
        height: calc(100% - 20px);
    }
    
    .footLogo {
        display: block;
        width: 100%;
        text-align: center;
        margin: 0 auto 20px;
        max-width: 300px;
    }
    
    .copyright {
        width: 100%;
        text-align: center;
        margin-bottom: 20px;
    }

    .ADTxt {
        position: relative;
        width: 40px;
        margin: 0 auto;
        bottom: auto;
        right: auto;
        text-align: center;
        font-size: 1rem;
        padding: 0 5px;
    }
    
    
    
    .AllBg {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        z-index: -1;
        background: url(../images/background03.png) no-repeat center;
        background-size: cover !important;
        background-position: center !important;
    }
    
}

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

}

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

}

@media only screen and (max-width: 620px) {
.copyright span {
    font-size: 1rem;
}
    
.copyright div {
    padding-bottom: 10px;
}
}

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

}

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

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

}

@media only screen and (max-width: 460px) {
    .MMenu {
        display: block !important;
    }
    
    .Logo {
        height: 30px;
    }
    
    header {
        height: 30px;
    }
    
    header.Mactive {
        height: calc(100vh - 20px);
    }
    
    #Menu {
        position: relative;
        width: 100%;
        right: auto;
        top: auto;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.5s cubic-bezier(0, 1, 0, 1);
    }
    
    .Mactive #Menu {
        max-height: 100vh;
        transition: max-height 1s ease-in-out;
    }
    
    nav li {
        display: block;
        text-align: center;
        margin-left: 0;
        margin-bottom: 25px;
    }

    nav a {
        font-size: 2.5rem;
        line-height: normal;
        font-weight: bold;
    }

    #Menu > nav {
        padding: 40% 0;
    }

    nav a.active {
        text-decoration: none;
    }
}

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

@media only screen and (max-width: 400px) {
    #Block1 {
        padding: 70px 0;
    }

    .WebTitle {
        margin-bottom: 20px;
    }
    
    .KvInfoContent p {
        font-size: 1.08rem;
    }

    .recoName div:last-child {
        font-size: 1.1rem;
    }
    
    .StoryName {
        font-size: 1.5rem;
        line-height: 2rem;
    }

    .StoryTitle {
        font-size: 1.25rem;
        line-height: 2rem;
    }

    .StoryInfo {
        padding: 10px 0 15px;
    }
}

@media only screen and (max-width: 350px) {
    .StoryList li {
        padding-top: 94%;
        background-size: 135% auto !important;
    }

    .StoryList li:hover {
        background-size: 145% auto !important;
    }
    
    .EventTable > ul > li > div:first-child {
        width: 90px;
    }
    
    .EventTable > ul > li > div:last-child {
        width: calc(100% - 112px);
    }
}