:root {
	--body-color:#ffffff;
	--main-color:#FAB8A1;
	--sub-color:#e4eff1;
	--third-color:#92aaac;
	--main-color-dark:#038fa5;
	--cata-color:#526366;
	--sectionpd:3.5em;/*112px*/
	--rowpd:1.5em;
	--titlepd:1em;/*32px*/
	--ppd:0.5em;
   }
@media screen and (min-width: 768px){
	:root {
	--sectionpd:8em;
	--rowpd:2em;
	--titlepd:2em;
	--ppd:1em;
	}
 }
ul,li{
	list-style: none;
	}
dd{
	padding-left: 0px;
	float: left;
	margin-left: 0px;
}
* {
	margin: 0;
	padding: 0;
  }
@font-face {
	font-family: 'Noto Serif TC';
	src: url("../font/Noto_Serif_TC/NotoSerifTC-Bold.otf") format("opentype"); }
.ch{font-family: 'Noto Serif TC', serif;}
 /*body------------------------------
------------------------------------*/
body {
    font-size: 1.1rem;
    line-height: 1.6;
	min-height: 100vh;
	overflow-y: auto;
	font-weight: normal;
}
.fixedbg{
	background-image:url(../img/bgs.jpg);
    background-repeat:no-repeat;
    background-position:top center ;
    background-size:cover;
    background-attachment:fixed ; 
	z-index: 0;
	transform: translateZ(0);
	will-change: transform;
	width: 100VW;
	height: 100VH;
	top:0;
	left: 0;
}
.bodywrapper{
	width: 100%;
	max-width: 100%;
	height: auto;
	overflow: hidden;
	position: relative;
}
.section-bigpt{
	z-index: 2;
    margin-bottom: var(--sectionpd)*2;
    margin-top: var(--sectionpd)*2;
}
.pc{
	display: none;
}
.mobile{
	display: block;
}
@media screen and (min-width: 768px){
body {
    font-size: 1.2rem;
    line-height: 1.8;
}
.fixedbg{
	background-image:url(../img/bg.jpg);
	background-size: cover;
	background-attachment:fixed ;
}

.pc{
	display: block;
}
.mobile{
	display: none;
}

}
/* ---------------------------------------------------------
  Header (.site-header[-*])
----------------------------------------------- */
.site-header{
	padding:0.75em 1em ;
	position:fixed;
	top:0;
	left: 0;
	z-index: 1000;
	width: 100%;
	max-width: 100%;
}
.site-header.active{
	background-color: rgba(0,0,0,1);
}
.site-header_logo{
	max-width:none;
	
}
.site-header_nav{
	margin-left: auto;
}
.site-heade_in{
	position: relative;
	z-index: 100;
}
.site-header_navcontent{
	min-width: 200px;
	max-width: 100%;
	position: absolute;
	right: -200px;
	top: 0;
	background-color: rgba(0,0,0,.8);
	height: 100vh;
	z-index: 99;
	overflow-y: auto;
	opacity: 0;
}
.site-header_navcontent.active{
	-webkit-animation: ani-right 0.5s forwards; 
	-moz-animation:    ani-right 0.5s forwards;
	-o-animation:      ani-right 0.5s forwards;
	animation:         ani-right 0.5s forwards;

}
.site-header_ul{
	padding: 2em 1em;
	flex-direction: column;
	gap: 1.5em 1em;
}
.site-header_li{
	width: 100%;
	color: #ffffff;
	border-bottom:solid 1px rgba(255,255,255,.1);
	padding-bottom: 5px;
	position: relative;
	cursor: pointer;
	text-align: center;
}
.site-header_li:after{
	content:"";
	display: block;
	height: 1px;
	width: 0%;
	background-color: var(--main-color);
	position: absolute;
	bottom: 0px;	
}
.site-header_li:hover:after{width: 100%;}
.site-overlay{
width:100vw;
height:100vh;
background-color: rgba(0,0,0,.5);
position:fixed;
top: 0;
left: 0;
z-index: 4;
display: none;}
.site-overlay.active{
	display: block;
}
.site-gotop{
	width: 40px;
	height: 40px;
	position: fixed;
	right: 0.75em;
	bottom: 1em;
	background-color: var(--main-color);
	cursor: pointer;
	font-size: 0.8em;
	color: #000;
	overflow: hidden;
	display: none;
	z-index: 10;
	}
.site-gotop.active{
	display: flex;
}
.site-gotop span:after{
	content: "Top";
	color:var(--main-color);
	width: 0px;
    height: 0px;
	line-height: 40px;
	text-align: center;
	background-color: #000;
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 0;
	border-radius: 50%;

}
.site-gotop:hover span:after{
	width: 40px;
	height: 40px;
	top: 0%;
    left: 0%;
}
.site-footer{
	width: 100%;
	position: relative;
	overflow: hidden;
}
.site-footer_bg{
	width: 100%;
	position: absolute;
	bottom: 0;
	left: 0;
	z-index: 1;
}
.site-footer_in{	
	position: relative;
	z-index: 2;
	left: 0;
	top: 0;
	gap: 1em;
	font-size: 1em;
	padding-top: 18em;
	padding-left: 2.5em;
	padding-right: 2.5em;
}
.site-footer_col--units{
	gap: 2em;
	margin-bottom:2em;
}

.col-unit-logo{
	max-width: 250px;
}
.col-unit-logo.logo-indie{
	max-width: 180px;
}
.site-social{
	gap: 1em;

}
.site-social_li{
	font-size: 1.5em;
}
.site-content{
	position: relative;
	width: 100%;
	max-width: 100%;
	overflow-x: hidden;
}
.site-content_bg{
	position: fixed;
	background-color: rgba(0,0,0,.7);
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	transition: all 0.3s;
	opacity: 0;	
	z-index: 1;
}
.site-content_bg.active{opacity: 1;	}
.site-content_mask1{
	position: fixed;
	top: 0;
	right: 0;
	max-width: 150px;
}
.site-content_mask2{
	position: fixed;
	bottom: 0;
	left: 0;
	max-width: 80%;
	z-index: 0;
}
.site-paragraph{
	padding-bottom: var(--rowpd);
}
.site-title{
	font-family: 'Noto Serif TC', serif;
	margin-bottom: var(--titlepd);
	font-weight: 700;
}
.container.site-container{
	padding-left: 2.5em;
    padding-right: 2.5em;
	max-width: 1200px;
}
@media screen and (min-width: 400px){

.col-unit-logo{
	max-width: 300px;
}
.col-unit-logo.logo-indie{
	max-width: 180px;
}
}

@media screen and (min-width: 576px){
.col-unit-logo.logo-indie{
	max-width: 150px;
}
.site-content_mask1{
	max-width: 250px;
}

}
@media screen and (min-width: 768px){
	.site-header_logo{
		max-width:300px;
	}
.site-footer_col--units{
		gap: 5em;
		margin-bottom:2em;
}
.site-content_mask1{
	max-width: 40%;
}

}
@media screen and (min-width: 1440px){
	.site-footer_col--units{
		gap: 10em;
		margin-bottom: var(--sectionpd);
	}
	.site-footer_in{	
		gap: 10em;
	}
	
	
	}
	
/* ---------------------------------------------------------
  Mag
----------------------------------------------- */
#mag{
	margin-top:-10px;
	width: 40px;
	height: 40px;
	background-color: #000;
}
#mag >*{
	border: none;
	outline: none;

}
#mag div {
    background-color: var(--main-color);
    width: 30px;
    height: 2px;
    position: relative;
	border: none;
	outline: none;
	margin-left: -6px;
	margin-top:12px;
}
#mag div:before {
    background-color: var(--main-color);
    width: 30px;
    height: 2px;
    content: "";
    display: block;
    position: absolute;
    top: 5px;
}
#mag div:after {
    background-color: var(--main-color);
    width: 30px;
    height: 2px;
    content: "";
    display: block;
    position: absolute;
    bottom: 5px;
}
#mag.active div {
    transform: rotate(45deg);
}
#mag.active div:before {
    transform: rotate(-90deg);
    margin-top: -5px;
}
#mag.active div:after {
	display: none;
}
/*前言----------------------------------
------------------------------------------*/
.section-word{	
	max-width: 1000px;
	padding: var(--sectionpd) 2.5em;
}
#word{
	z-index: 2;
}
/*選書主題----------------------------------
------------------------------------------*/
#readtopic{z-index:2;
	margin-bottom: var(--sectionpd);
	margin-top: var(--sectionpd);}
.section-readtopic{
	z-index: 1;
	margin-bottom: var(--sectionpd);
}
.readtopic-paragraph{
	text-align: left;
}
.readtopic-index_word{
	width:calc(100% - 0px);
	text-align: left;
}
.readtopic-index_navi{
	width: 100%;
}
.readtopic-index_navi--cols{
	gap: 0em;
	overflow-x: auto;
}
.readtopic-index_navi--ul{
	margin-top: 0px;
	margin-bottom: 10px;
	border-left:none;
	margin-right: 10px;
	gap:10px ;

}
.readtopic-index_navi--btn{
	position: relative;
	z-index: 1;	
	width: calc(80px - 0px);
	height:50px;
	overflow: hidden;
	color: #000;
	cursor: pointer;
	line-height: normal;
	font-size: 0.9em;
	font-weight: bold;
}
.readtopic-index_navi--btn span{
	padding-left: 10px;
	text-align: center;
}
.readtopic-index_navi--btn span br{
	display: none;
}
.readtopic-index_navi--btn:after{
	content: "";
	position: absolute;
	background-color: rgba(250,184,161,0.5);
	top:0;
	left: 0px;
	width: 80px;
	height: 50px;
	z-index:-1;
	border-radius: 5px 5px 0px 0px;	
	transform: scale(1);
}
.readtopic-index_navi--btn.active:after{
	background-color: rgba(250,184,161,1);
	transform: scale(1);

}

#readtopic .site-paragraph br{
	display: none;
}
@media screen and (min-width: 768px){
	.readtopic-paragraph{
		text-align: center;
	}
	
	#readtopic .site-paragraph br{
		display: block;
	}
	.readtopic-index_word{
		width:calc(100% - 200px);
		text-align: cneter;
	}
	.readtopic-index_navi{
		width: 200px;
	}
	.readtopic-index_navi--cols{
		gap: 2em;
		overflow-x: hidden;
	}
	
	.readtopic-index_navi--ul {
		margin-bottom: 0px;
		margin-right: 0px;
		border-left:rgba(255,255,255,0.2) 1px solid;
		
	}
	.readtopic-index_navi--ul.readtopic-index_navi--ul-2{
		margin-top: calc(var(--titlepd) * 1.2);
	}
	.readtopic-index_navi--btn{
		position: relative;
		z-index: 1;	
		width: calc(100px - 30px);
		height: 100px;
		overflow: hidden;
		color: #000;
		cursor: pointer;
		line-height: normal;
		font-size: 0.9em;
		font-weight: bold;
	}
	.readtopic-index_navi--btn span{
		padding-left: 10px;
	}
	.readtopic-index_navi--btn span br{
		display: block;
	}
	.readtopic-index_navi--btn:after{
		left: -30px;
		width: 100px;
		height: 100px;
		border-radius: 50%;	
		background-color: rgba(250,184,161,0.2);
		transform: scale(0.9);
		
	}
	
}


/*readlife-cols----------------------------------
------------------------------------------*/
.articlept{
	margin: var(--sectionpd) 0px;
	padding-bottom:var(--sectionpd) ;
	clear: both;
	}
/* #readlife{z-index: 2;} */
.readlife-col_item{width:100%;}
.readlife-col_cont{width: calc(100% - 0px);}
.readlife-col_item--wrap{
	display: flex;
	flex-wrap:nowrap	
}
.readlife-titile{width: 20%;
writing-mode: vertical-rl;
color:var(--main-color);
font-weight: bold;
letter-spacing: 0.2em;
}
.readlife-subtitle{
	color:var(--main-color)
}
.readlife-titile span{
	padding: 0px;
	padding-bottom: 20px;
	position: relative;
}
.readlife-titile span:before{
	content: "";
    height:100%;
    width: 350px;
    position: absolute;
    display: block;
    top: -10px;
    left: -134px;
	background-image: url(../img/bg-read.svg);
	background-size:contain;
	background-repeat:no-repeat ;
}
.readlife-des{width: 80%;
margin-top: 0px;
text-align: left;
padding-left: 20px;}
.readlife-p{
	padding-top: var(--ppdd);	
	font-size: 0.8em;
}
.readlife-p br{
	display: none;
}

@media screen  and (min-width: 768px) {
.readlife-titile span:before{
	width: 350px;
    left: -150px;
	background-size:auto 100% ;
}
}
/*readlife-book_box---------------------------
---------------------------------------------*/
.readlife-book{position: relative;
cursor: pointer;}
.readlife-book.hrr{
	width: 100%;
}
.readlife-book_box{
	border-radius: 5px;
	overflow: hidden;
	aspect-ratio: 3 / 4.5;
	position: relative;
	}
.readlife-book_box.hrr{aspect-ratio: 4.5 / 3;}
.readlife-book_book{
	background-position: center;
	background-repeat:no-repeat;
	background-size:cover;
	z-index: 4;
	position: relative;
	width: 100%;
	height: 100%;
	perspective-origin:left;
	perspective: 250px;
	transform: rotateY(0deg) translateZ(0px);
	transition: all .5s cubic-bezier(0.25,1,.25,1);
}
.readlife-book_boxani,.readlife-book_boxani:after,.readlife-book_boxani:before{
	perspective-origin:right;
perspective: 250px;
transform: rotateY(0deg) translateZ(0px);
transition: all .5s cubic-bezier(0.25,1,.25,1);
background: rgb(237,237,237);
box-shadow:  2px 2px 2px 1px rgba(0, 0, 0, 0.2);
}
.readlife-book_boxani{
	position:absolute ;
	z-index: 3;
	width: 100%;
	height: 100%;
	top:0;
}
.readlife-book_boxani:after{
	content:"";
	position:absolute ;
	z-index: 2;
	width: 100%;
	height: 100%;
	top:0;
}
.readlife-book_boxani:before{
	content:"";
	position:absolute ;
	z-index: 1;
	width: 100%;
	height: 100%;
	top:0;
}

.readlife-book:hover .readlife-book_book{
	transform: rotateY(-30deg) translateZ(30px);
	margin-left: -2px;
}
.readlife-book:hover .readlife-book_book.hrr{
	margin-left: -13px;
}

.readlife-book:hover .readlife-book_boxani{
	transform: rotateY(-10deg) translateZ(10px);
}
.readlife-book:hover .readlife-book_boxani:after{
	transform: rotateY(-20deg) translateZ(20px);
}
.readlife-book:hover .readlife-book_boxani:before{
	transform: rotateY(-15deg) translateZ(15px);
}

@media screen and (min-width: 768px){
	.readlife-book.hrr{
		width: 66.666%;
	}
	
	.readlife-titile span{
		padding: 30px;
	}
	
	.readlife-col_item{width:200px;}
	.readlife-col_cont{width: calc(95% - 200px);margin-left:5%;
}
	.readlife-col_item--wrap{
		flex-wrap:wrap
	}
	.readlife-titile{width: 100%;}
	.readlife-des{width: 100%;
	margin-top: 50px;
	text-align: right;
	padding-left: 0px;
	}
}
@media screen and (min-width: 1200px){
	.readlife-col_item{width:300px;}
	.readlife-col_cont{width: calc(90% - 300px);margin-left:10%;}
	.readlife-p br{display: block;}
}

/*years讀字十年----------------------------------
------------------------------------------*/
#years {
    z-index: 2;
    margin-bottom: var(--sectionpd);
    margin-top: var(--sectionpd);
}
.years-cols{
	gap:1em	
}
.years-col__pics{
	max-width: none;
	width: 100%;
	}
.years-col__ul{
	background-image: url(../img/years/bg-ul.jpg);
	background-repeat: repeat-y;
	background-position: 5px top;
	}
.year-col__li{
	margin-bottom: var(--ppd);
}
.year-col__li--title-dot{
	background-color: var(--main-color);
	width: 10px;
	height: 10px;
	border-radius: 50%;
	margin-top: 10px;
}
.year-col__li--title{
	font-weight: 600;
}
.year-col__li--title-time{
	color:var(--main-color)
}
.boxYearPic{
	overflow: hidden;
    aspect-ratio: 3 / 4.5;
    position: relative;
	width: 150px;
}
@media screen and (min-width: 576px){
	.years-col__pics{
		max-width: 200px;
		margin-left: auto;
	}	
	.years-cols{
		gap:2em	
	}
	.boxYearPic{
		width: 100px;
	}	

}

@media screen and (min-width:768px){
	.years-cols{
		gap:5em	
	}
	
	.years-col__pics{
		max-width: 300px;
	}	
}
@media screen and (min-width:1200px){
	.years-cols{
		gap:10em	
	}
	
	.years-col__pics{
		max-width: 300px;
	}	
}
/*citizen讀力公民----------------------------------
------------------------------------------*/
#citizen{
    z-index: 2;
    margin-bottom: var(--sectionpd);
    margin-top: var(--sectionpd);
}
.citizen-box{
	display: flex;
	gap: 1em;
}
.citizen-box__step--num{
	--citizensize:30px;
	background-color: var(--main-color);
	color: #000;
	width: var(--citizensize);
	height: var(--citizensize);
	text-align: center;
	line-height:var(--citizensize);
	font-weight: 600;
	font-size: 1em;
}
.citizen-box__des--title{
	color: var(--main-color);
	font-weight: 600;
}
.citizen-box__des--des{
	font-size: 0.8em;
}
@media screen and (min-width:1200px){
.citizen-box__step--num{
	--citizensize:60px;		
	font-size: 1.5em;
}
}
/*lecture----------------------------------
------------------------------------------*/
#lecture{
	z-index: 2;
    margin-bottom: var(--sectionpd);
    margin-top: var(--sectionpd);
}
.lecture-Sessions{
	margin-bottom:1em;
}

.lecture-Sessions.session2{
	margin-top:3em;
}
.lecture-Sessions span{position: relative;}
.lecture-Sessions span:after{
	content:"";
	background-color: var(--main-color);
	height: 4px;
	width: 100%;
	display: block;
	position: absolute;
	bottom: 0px;	
}
.lecture-info-col_place > *,.lecture-info-col_date>*{display:inline-block; margin-right: 10px;}
.lecture-info-col_date{
	color:var(--main-color);
	font-size: 1.2em;
	font-weight: bold;
}
.lecture-info-col_date .en{font-size: 1.3em;
margin-top: -5px;}
.lecture-info-col_date .ch{
	margin-top: -20px;
}
.icon-calendar{
	background-image: url(../img/icons/icon_calendar.svg);
	background-repeat:no-repeat ;
	background-size: 30px auto;
	background-position:left center;
	padding-left: 40px;
}
.icon-flag{
	background-image:url(../img/icons/icon_flag.svg);
	background-repeat:no-repeat ;
	background-size: 30px auto;
	background-position:left center;
	padding-left: 40px;
}
.lecture-box-title{
	font-size: 1.1em;
	font-weight: bold;
}
.lecture-box-des{
	color: var(--main-color);
}
.lecture-article{

}
.lecture-article__tab{
	border-bottom: solid 1px rgba(255,255,255,.2);
	gap:0.3em	
}
.lecture-article__des{
	display: none;
}
.lecture-article__des.active{display: flex;}
.lecture-article__icon{
	border-radius: 5px 5px 0px 0px;
	padding: 0.2em 1.5em;
	position: relative;
}
.lecture-article__icon.btn.active{
	background-color: #ffffff;
	border-color: #ffffff;
}
.lecture-article__icon.btn.active:after{
	content:"";
	width: 20px;
	height: 20px;
	background-image: url(../img/icon-arrowdown.svg);
	background-repeat:no-repeat;
	background-position: center bottom;
	background-size:20px auto ;
	position: absolute;
	left: 50%;
	bottom: -10px;
	margin-left: -10px;

}
.lecture-article__des--cols{
	display: flex;
	flex-direction: column;
	gap: 2em;
}
.lecture-article__des--pic{
	--picwidth:150px;
	width: var(--picwidth);
}
.lecture-article__des--des{}
.box-lecture-pic{
	width: var(--picwidth);
	height: var(--picwidth);
	border: var(--main-color) 5px solid;
	border-radius: 50%;
	background-repeat:no-repeat ;
	background-size:cover;
	background-position:center ;
}
.box-lecture-name{
	margin-bottom: var(--ppd);
	font-weight: bold;
	color:var(--main-color)
}
.box-lecture-name span{
	color: var(--main-color);
	padding-right: 0em;
	font-size: 1.1em;
}
.box-lecture-name span:after{
	content:"│";
}
.lecture-pre,.sfont{
	font-size: 0.8em;
}
@media screen  and (min-width: 1200px) {
	.lecture-box-title{
		font-size: 1.2em;
		font-weight: bold;
	}

	.lecture-article__des--cols{
		flex-direction:row;
	}
	
	
}

@media screen  and (min-width: 768px) {
	.lecture-Sessions{
		margin-bottom:2em;
	}
	
	.lecture-Sessions.session2{
		margin-top:6em;
	}
	
	.box-lecture-name{color:var(--main-color)}
	.box-lecture-name span {
		padding-right: 3em;
		font-size: 1.1em;
		font-weight: bold;
	}
	.lecture-box-title{
		font-size: 1em;
		font-weight: bold;
	}
	.lecture-article__tab{
		gap:1em	
	}
	
.lecture-info-col_place>*,.lecture-info-col_date>*{display: block; margin-right: 0;}
}

/*home----------------------------------
------------------------------------------*/
.container.home-container{
	padding-left: 2.5em;
    padding-right: 2.5em;
	max-width: 1360px;
	z-index: 3;
}

#home{
	position: relative;
	z-index: 2;
}
.home_rows{
	padding-top: 80px;
	padding-bottom: var(--sectionpd);
}
.box_vi_1{
	width: 100%;
	margin-left: -10%;
}
.box_vi_2{
	padding-left: 5%;
}
.box_vi_3{
	padding-left: 10%;
}
.home-video {
	visibility: hidden;
	width: 100%;
	height: 100%;
	top:0;
	left: 0;
	position: absolute;
	mix-blend-mode:screen;
		}

.home-canvas {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;		
	mix-blend-mode:screen;
	opacity: 0.3;
	}
.smoke-wrap{
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
}
media screen and (min-width: 576px){
	.box_vi_1{
		width: 65%;
		margin-left: 0%;
	}
	.box_vi_2{
		padding-left: 15%;
	}
	.box_vi_3{
		padding-left: 5%;
	}
	}
/*others----------------------------------
------------------------------------------*/

.transiA,a,.btn,.site-header_li:after,.site-gotop span:after,
.readtopic-index_navi--btn:after{
	transition: all 0.5s cubic-bezier(.19, 1, .22, 1);
	-moz-transition: all 0.5s cubic-bezier(.19, 1, .22, 1);
	-webkit-transition: all 0.5s cubic-bezier(.19, 1, .22, 1);
	-ms-transition: all 0.5s cubic-bezier(.19, 1, .22, 1);
	-o-webkit-transition: all 0.5s cubic-bezier(.19, 1, .22, 1);
}

.nowrap{white-space: nowrap;
display:inline-block}
/*IMG*/

img {
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: none;
    border-left-style: none;
}

.miximg {
    mix-blend-mode: multiply;
}

@media screen  and (max-width: 375px) {
/*限制縮到最小狀況*/
body,
html {
	width:375px;
	overflow-x: hidden;
}
}