@charset "utf-8";
/* CSS Document */
@import url("rwd.css");
@import url("nav.css");
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+TC:wght@400;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif:ital,wght@0,400;0,700;1,400;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap');

*{
	margin:0;
	padding:0;
}

body{
	font-family:'Noto Serif TC', serif;
	background:rgba(251, 254, 251, 1);
}

::-moz-selection{ /* Firefox */
    color:rgba(255, 255, 255, 1);
    background: rgba(0, 0, 0, 1);
}

::selection{
    color:rgba(255, 255, 255, 1);
    background: rgba(0, 0, 0, 1);
}

/*main*/
main{
	display:flex;
	flex-direction: column;
	height:100vh;	
}

#main2{
	display:flex;
	flex-direction: column;
}

/*header*/
header{
	position:relative;
	width:100%;
	z-index:1000;
}

/* section */
section{
	width:80%;
	margin:auto;
}

#indexpg{
	width:77%;
	margin: auto;
	
	display:flex;
	flex-direction: column;
	align-items: center;
  	justify-content: center;
}

#indexpg h1{
	font-size:90px;
	font-family:'Lato', sans-serif;
	font-weight:300;
	font-style:italic;
	line-height:1em;
}

#indexpg h1 span{
	font-size:80px;
	font-style: normal;
}

#indexpg h2{
	font-size:25px;
	font-family:'Lato', sans-serif;
	font-weight:300;
	font-style:italic;
	align-self: flex-start;
}

#indexpg h2 span{
	font-size:20px;
	font-style: normal;
}

#indexpg h3{
	display:block;
}

#con, #dcon, #arr{
	width:85%;
	margin:auto;
}

/*conpg setting*/
#conpg{
	width:85%;
	margin: auto;
	padding:80px 0px 40px;
}

#conpg h1{
	font-size:40px;
	font-family:'Noto Serif TC', serif;
	font-weight:700;
	line-heigt:1em;
}

#conpg h1 span{
	font-size:35px;
	font-style: normal;
}

#conpg h2{
	font-size:24px;
	font-family:'Lato', sans-serif;
	font-weight:400;
	font-style:italic;
	align-self: flex-start;
}

#conpg h2 span{
	font-size:20px;
	font-style: normal;
}

#conpg h3{
	font-size:24px;
	line-height:2em;
}

#conpg p{
	line-height:2em;
	color:rgba(0,0,0,.6);
	font-weight:400;
}

#conpg h4{
	display:block;
}

#conpg a{
	color:rgba(255, 255, 255, 1);
	background:rgba(0, 0, 0, 1);
	text-decoration:none;
}

#conpg a:hover{
	color:rgba(0, 0, 0, 1);
    background: rgba(255, 255, 255, 1);
	text-decoration:none;
}

/*aconpg setting*/
#aconpg{
	width:85%;
	margin: auto;
	padding:80px 0px;
}

#aconpg h1{
	/*font-size:70px;*/
	font-size:max(2vw, 70px);
	font-family:'Noto Serif TC', serif;
	font-weight:700;
	line-height:1.2em;
}

#aconpg h1 span{
	/*font-size:60px;*/
	font-size:max(2vw, 70px);
}

#aconpg h2{
	font-size:25px;
	font-family:'Lato', sans-serif;
	font-weight:300;
	font-style:italic;
	align-self: flex-start;
}

#aconpg h2 span{
	font-size:20px;
	font-style: normal;
}

#aconpg h3{
	font-size:24px;
	line-height:2em;
}

#aconpg p{
	line-height:2em;
	color:rgba(0,0,0,.6);
	font-weight:400;
	padding-top:40px;
}

#aconpg mark{
	font-weight:700;
	background:none;
}

#aconpg h4{
	display:block;
}

#aconpg a{
	color:rgba(255, 255, 255, 1);
	background:rgba(0, 0, 0, 1);
	text-decoration:none;
}

#aconpg a:hover{
	color:rgba(0, 0, 0, 1);
    background: rgba(255, 255, 255, 1);
	text-decoration:none;
}

svg{
	height:30px;	
}

#msvg{
	display: block;	
}

#psvg{
	display: none;	
}

/*box setting*/

.box{
	display: inline-table;
	box-sizing:border-box;
	width:100%;
	color:rgba(124, 124, 124, 1);
	margin:5px;
	padding-bottom:20px;
	cursor: pointer;
}

.sbox{
	box-sizing:border-box;
	width:100%;
	color:rgba(124, 124, 124, 1);
	cursor: pointer;
}

.imgbox{
	width:100%;
	overflow:hidden;
}

.box .imgbox img{
	float:left;
	width:100%;
	
	transform: scale(1,1); /* Standard syntax */
	-ms-transform: scale(1,1); /* IE 9 */
    -webkit-transform: scale(1,1); /* Safari */
	
	transition: transform 1s;
	-webkit-transition: transform 1s;
	
	transition-timing-function: ease-in-out;
	-webkit-transition-timing-function: ease-in-out;/* Safari */
}

.box:hover .imgbox img{
	transform: scale(1.1,1.1); /* Standard syntax */
	-ms-transform: scale(1.1,1.1); /* IE 9 */
    -webkit-transform: scale(1.1,1.1); /* Safari */
}

.sbox .imgbox img{
	float:left;
	width:100%;
	
	transform: scale(.9,.9);
	
	transition: transform 1.5s;
	-webkit-transition: transform 1.5s;
	
	transition-timing-function: ease-in-out;
	-webkit-transition-timing-function: ease-in-out;/* Safari */
}

.sbox:hover .imgbox img{
	transform: scale(1,1);
}

.box h3, .sbox h3{
	box-sizing:border-box;
	padding:0px;
	font-size:18px;
	font-weight:700;
	text-align:center;
}

.box p, .sbox p{
	box-sizing:border-box;
	font-size:13px;
	padding:0px;
	text-align:center;
}



/*con+dcon content*/
#con p{
	font-size:16px;
	color:rgba(0,0,0,.3);	
}

#con .imgbox{
	width:100%;
	padding:20px 0px;	
}

#con img{
	width:100%;
}

#dcon .imgbox{
	width:100%;
	padding:20px 0px;	
}

#dcon img{
	width:100%;
}

#arr{
	font-size:20px;	
}

#arr a{
	color:rgba(0, 0, 0, 1);
	background:rgba(255, 255, 255, 1);
	text-decoration:none;
}

#arr a:hover{
	color:rgba(255, 255, 255, 1);
    background: rgba(0, 0, 0, 1);
	text-decoration:none;
}

.arr_l{
	/*float:left;*/
	position:fixed;
	left:0;
	top:50%;
	padding:15px;
}

.arr_r{
	/*float:right;*/
	position:fixed;
	right:0;
	top:50%;
	padding:15px;
}

/*footer*/
footer{
	width:80vw;
	font-size:16px;
	margin:auto;
	padding:20px 0px;
	text-align:center;
	color:rgba(0,0,0,.5);
}

.copy{
	padding:50px 0px 50px;
	font-size:13px;
	color:rgba(0,0,0,.5);
}

/*===============rwd details===============*/

/* For tablets */
@media only screen and (min-width: 768px) { 
section{
	width:76%;
}

#indexpg h1{
	font-size:120px;
	font-weight:700;
}

#indexpg h1 span{
	font-size:105px;
	font-style: normal;
}

#indexpg h2{
	font-size:25px;
	font-weight:400;
	align-self: flex-end;
	
}

#indexpg h2 span{
	font-size:20px;
}

/*aconpg setting*/

#aconpg h1{
	/*font-size:110px;*/
	font-size:max(2vw, 110px);
	font-weight:700;
	line-height:1.2em;
}

#aconpg h1 span{
	/*font-size:105px;*/
	font-size:max(2vw, 110px);
}

#aconpg h2{
	font-size:30px;
	font-weight:400;
	align-self: flex-end;
}

#aconpg h2 span{
	font-size:23px;
}

#msvg{
	display:none;	
}

#psvg{
	display:block;	
}

}

/* For desktop */
@media only screen and (min-width: 1200px) {
#indexpg h1{
	font-weight:900;
}

#indexpg h2{
	font-weight:700;
}

#con, #dcon, #arr{
	width:100%;
}

#main2{
	flex-direction: row;
}

#content{
	flex:4;	
}

#conpg{
	flex:2;
	width:65%;
	padding:40px 20px 40px 80px;
}

#conpg h4{
	display:none;
}

/*aconpg setting*/

#aconpg{
	display:flex;
	width:100%;
	padding:0px 0px;
}

#aconpg h1{
	font-weight:900;
}

#aconpg h2{
	font-weight:700;
}

.aconpg_l{
	flex:2;
	padding:20px 0px 40px 80px;
}

.aconpg_r{
	flex:4;
	padding:0px 40px;
}

}