@font-face {
  font-family: dfyuanstd-w5;
  src: url('https://www.suncolor.com.tw/event/fonts/dfyuanstd-w5.otf');
  }
body{ 
    margin:0 auto; 
    padding:0;
    background-position:top center; 
    background-repeat:no-repeat;  	
	position:relative;
	background-color: #fffded;
    }
.question{
	clear: both;
	width: 100%;
	margin: 5px 0;
}
.question-in{}
.question-in h1{
	font-family:  dfyuanstd-w5;
	font-size: 105px;
	line-height: 180px;
	color: #ffa492;
	padding: 0px;
	margin: 0px;
}
.question-in p{
	padding: 0px;
	margin: 0px;
	font-family:  dfyuanstd-w5;
	font-size: 28px;
	line-height: 50px;
	font-weight: bold;
	color: #606062;
}
.copyright {
	position:fixed;
	bottom: 0px;
	padding: 0px 0 0 0px;
	margin:  0 auto;
	text-align: center;
	width: 100%;
	z-index: 995;
	
}
.copyright p{
	font-size: 12px;
    color: #999999; 
	font-family: 微軟正黑體;
	}
.copyright2 {
	position:relative;
	bottom: 0px;
	padding-bottom: 00px;
	margin:  0 auto;
	text-align: center;
	width: 100%;
}
.copyright2 p{
	font-size: 12px;
    color: #999999; 
	font-family: 微軟正黑體;
	}
.copyright3 {
    position:fixed;
	bottom: 0px;
	padding: 0px 0 0 0px;
	margin:  0 auto;
	text-align: center;
	width: 100%;
	z-index: 995;
}
.copyright3 p{
	font-size: 12px;
    color: #999999; 
	font-family: 微軟正黑體;
	}
#gotop { display: none; position: fixed; right: 20px; bottom: 20px; padding: 10px 15px; cursor: pointer;}
img{ border:0;
    }

.logo { 
	display: block;
	float: right;
	position: absolute;
	top:15px;
	right: 30px;
	height: auto;	
}
.logo img{
	width: 70px;
	height: auto;
}

#intro{
	background: url("intro-bg.jpg") no-repeat top center;
	width: 100%;
	background-size: auto;	
	text-align: center;
}
#intro2{
	background: url("intro-bg2.jpg") no-repeat fixed top center;
	width: 100%;
	background-size: auto;	
	text-align: center;
}
#intro3{
	z-index: 999;
	clear: both;
	width: 100%;
	text-align: center;
	background-color: #fffded;
}
#intro4{	
	background: url("book-bg.jpg") no-repeat  bottom center;
	width: 100%;
	text-align: center;
	background-color: #fff0a1;
	padding-bottom:100px;
	padding-top: 20px;
}

#intro5{
	
	width: 100%;
	text-align: center;
	height: auto;
}

#block-bg1{
	width:1000px;
	margin: 0 auto;
	text-align: center;
	display: block;
	position: relative;
}

#block-bg2{
	width:600px;
	margin: 0 auto 0;
	text-align: center;
	padding-top: 00px;
}

#block-bg3{
	width:600px;
	margin: 00px auto 0;
	text-align: center;
	padding: 0px auto 50px auto !important;
	}
#block-bg5{
	width:600px;
	margin: 00px auto 0;
	text-align: center;
	padding: 0px auto 00px auto !important;
}

.intro-p{
    top:  360px;
	left: 31%;
	height: auto;
	display: block;
	z-index: 150;
	margin: 0 auto;
	width:40%;
	position: absolute;
}
.intro-button{
	top:  535px;
	left: 380px;
	height: auto;
	display: block;
	z-index: 180;
	margin: 0 auto;
	width:27%;
	position: absolute;
}
.name{
	top:  35px;
	left: 38%;
	height: auto;
	display: block;
	z-index: 181;
	margin: 0 auto;
	width:24%;
	position: absolute;
}
.intro-pic2{
	top:  75px;
	left: 545px;
	height: auto;
	display: block;
	z-index: 182;
	margin: 0 auto;
	width:6%;
	position: absolute;
}
.intro-pic3{
	top:  115px;
	left: 640px;
	height: auto;
	display: block;
	z-index: 183;
	margin: 0 auto;
	width:12%;
	position: absolute;
}
.intro-pic4{
	top:  405px;
	left: 200px;
	height: auto;
	display: block;
	z-index: 184;
	margin: 0 auto;
	width:8%;
	position: absolute;
}
.intro-pic5{
	top:  445px;
	left: 718px;
	height: auto;
	display: block;
	z-index: 185;
	margin: 0 auto;
	width:11%;
	position: absolute;
}
.intro-pic6{
	top:  535px;
	left: 260px;
	height: auto;
	display: block;
	z-index: 186;
	margin: 0 auto;
	width:6%;
	position: absolute;
}
.intro-pic7{
	top:  817px;
	left: 750px;
	height: auto;
	display: block;
	z-index: 187;
	margin: 0 auto;
	width:5%;
	position: absolute;
}
.intro-pic8{
	top:  607px;
	left: 300px;
	height: auto;
	display: block;
	z-index: 188;
	margin: 0 auto;
	width:43%;
	position: absolute;
}
.intro-pic9{
	top:  985px;
	left: 250px;
	height: auto;
	display: block;
	z-index: 189;
	margin: 0 auto;
	width:15%;
	position: absolute;
}
.result, .author-pic{
	display: block;
	clear: both;
	margin: 00px auto 10px auto !important;
	padding-top: 0px !important; 
	width: auto;
	height: auto;	
}
.cover{
	display: block;
	clear: both;
	margin: 00px auto 00px auto !important;
	height: auto;	
}
.cover2{
	display: block;
	clear: both;
	margin: 00px auto 00px auto !important;
	height: auto;	
}
.botton{
	display: block;
	clear: both;
	margin:0px auto 00px auto !important;
	width: auto;
	height: auto;	
}
.author-w{
	display: block;
	clear: both;
	margin: 20px auto 0px auto !important;
	width: auto;
	height: auto;	
}
.yt-search{
	display: block;
	clear: both;
	margin: 00px auto 00px auto;
	width: auto;
	height: auto;	
}
.cover-p{
	display: block;
	clear: both;
	margin: 00px auto 00px auto;
	width: 510px;
	height: auto;	
	
	border-radius:20px;
	padding: 50px 0 00px 0;
	
}
.cover-p p{
    display: inline-block;
    font-size: 22px;
    line-height: 2.8rem;  
	font-weight: bold !important;
	margin: 30px 35px 20px 35px;
	text-align: center !important;
	color: #585858;
}
.result-p{
	display: block;
	clear: both;
	margin:00px auto 00px auto;
	width: 390px;
	height: auto;	
	background-color: #01b5e6;	
	border-radius:50px;
	padding:30px 35px;
}
.result-p p{
    display: inline-block;
    font-size: 26px;
    line-height: 3rem;  
	font-weight: bold !important;
	margin: 15px 0 10px 0;
	text-align:justify;
	color: #fff;
}
.p-s{
   
    font-size: 16px !important;
	font-weight: normal !important;
	line-height: 30px !important;
}
.note-s{
    width: 390px;
	margin:  10px auto 0 auto;
    font-size: 12px !important;
	font-weight: normal !important;
	line-height: 20px !important;
	text-align: left;
	}
.author{
	display: block;
	clear: both;
	margin: 50px auto 00px auto;
	width: 502px;
	height: auto;	
	background-color: #ffffff;	
	border-radius:20px;
	border: solid 4px #222222;
	padding-bottom: 20px;
	
}
.author p{
    display: inline-block;
    font-size: 26px;
    line-height: 2.8rem;  
	font-weight: bold !important;
	margin: 30px 40px 20px 40px;
	text-align:justify;
	color: #000000;
}
.social-media{
	margin: 0 auto;
	padding: 0 auto;
	
}
.social-media img{
	margin: 15px 7px 5px 7px;
	
}
.process{
	display: block;
	clear: both;
	margin: 0 auto;
	width: auto;
	height: auto;	
}
.intro-title{
	display:inline-block;
	clear: both;
	margin: 35px auto 50px auto;
	width:24%;
	height: auto;	
}
.q-title{
	display:inline-block;
	clear: both;
	margin: 35px auto 50px auto;
	width: 40%;
	height: auto;	
}
.for-d{
	display: block;
	margin: 0 auto;
}
.for-m{
	display:none;
}
.button--medium { 
    letter-spacing: 0;
}
.button--white {
    background-color: #fff025;
    color: #000;
}
.button {
	width: 200px;
	height: 200px;
    background-color: #01b5e6;    
    color: #fff;
	padding: 20px !important;
    display: inline-block;
    font-size: 40px;
    letter-spacing: 0;
    line-height: 200px;  
    position: relative;
    text-align: center;
    text-decoration: none;
	font-weight: bold !important;
	margin: 20px 20px 20px 20px ;
	font-family: dfyuanstd-w5;
	border-radius:50%;	
	
}
.button__arrow {
    display: inline-block;
    height: 0.6rem;
    margin-left: 1.5rem;
    overflow: hidden;
    position: relative;
    top: -0.3rem;
    width: 1.9rem;
}
.button:hover {	
	background-color: #fff025;
	color: #000000;
	opacity: 0.5;
    transition-duration: 1s; /*動畫持續時間為2秒*/
    transition-timing-function: ease; /*動畫速度曲線為急加速後減速*/
}

.button--white .button__arrow:after, .button--white .button__arrow:before {
    background-color: #fff025;
}
.button__arrow:before {
    width: 100%;
}
.button__arrow:after, .button__arrow:before {
    background-color: #4f545a;
    bottom: 0;
    content: "";
    display: block;
    height: 1px;
    position: absolute;
    right: 0;
}




@media screen and (max-width: 1049px) {
	
#intro{
	background: url("intro-bg_m.jpg") no-repeat fixed top center;
	width: 100%;
	height: auto;
	background-size:cover;
	background-color: #fff0a1;
	}
#intro2{
	background: url("intro-m_bg2.jpg") no-repeat fixed top center;
	width: 100%;
	height: auto;
	background-size:cover;	
	}
#intro3{

	width: 100%;
	height: auto;
	background-size:cover;	
	}
	
#intro4{	
	background: url("book-bg.jpg") no-repeat  bottom center;
	width: 100%;
	height: auto;
	background-color: #fff0a1;
	padding-bottom: 150px;
}	
	
	
#intro5{

	width: 100%;
	}
 #block-bg1{
	height: auto;
	 padding: 50px 00 0  0;
	 
	position:static !important;
	}
 #block-bg2{
	height: 100% !important;
	margin:0 auto 0;
	width: 100%;
	padding-top: 50px !important;
	}
 #block-bg3{
	height: 100% !important;
	margin: 50px auto 50px auto;
	width: 100%;
	}
 #block-bg5{
	padding-bottom:0px;
	margin: 00px auto 0;
	width: 95%;
	}
.intro-p{
	height: auto;
	display: block;
	z-index: 150;
	margin: 150px auto 0 auto;
	width:75%;
	position:static !important;
}
.intro-button{
	top:  900px;
	left: 280px;
	height: auto;
	display: block;
	z-index: 180;
	margin: 0 auto;
	width:45%;
	position: absolute;
}
.name{
	position:static;
	height: auto !important;
	margin: 0 auto !important;
	width:40% !important;
}
.intro-pic2{
	top:  120px;
	left: 570px;
	height: auto;
	display: block;
	z-index: 182;
	margin: 0 auto;
	width:11%;
	position: absolute;
}
.intro-pic3{
	top:  180px;
	left: 710px;
	height: auto;
	display: block;
	z-index: 183;
	margin: 0 auto;
	width:21%;
	position: absolute;
}
.intro-pic4{
	top:  665px;
	left: -30px;
	height: auto;
	display: block;
	z-index: 184;
	margin: 0 auto;
	width:16%;
	position: absolute;
}
.intro-pic5{
	top:  745px;
	left: 805px;
	height: auto;
	display: block;
	z-index: 185;
	margin: 0 auto;
	width:19%;
	position: absolute;
}
.intro-pic6{
	top:  900px;
	left: 70px;
	height: auto;
	display: block;
	z-index: 186;
	margin: 0 auto;
	width:10%;
	position: absolute;
}
.intro-pic7{
	top:  1290px;
	left: 870px;
	height: auto;
	display: block;
	z-index: 187;
	margin: 0 auto;
	width:9%;
	position: absolute;
}
.intro-pic8{
	top: 980px;
	left: 19% !important;
	height: auto;
	display: block;
	z-index: 188;
	margin: 0 auto;
	width:63%;
	position: absolute;
}
.intro-pic9{
	top:  1590px;
	left: 75px;
	height: auto;
	display: block;
	z-index: 189;
	margin: 0 auto;
	width:28%;
	position: absolute;
}	
	
.button {
    padding: 80px 0 !important;
    font-size: 63px;	
	width: 360px;
	height: 200px;	
}
.cover{
	margin: 50px auto 0;
	width:100% !important;
}
.cover2{
	margin: 80px auto 0 !important;
	width:80% !important;
}	
 .social-media_img3{
	margin: 50px auto 0;
	width:100% !important;
}
.botton{
	margin: 20px auto 00px !important;
	width:100%;
}
.author-w{	
	margin: 50px auto 0;
	width:85%;
}
.yt-search{
	margin: 0 auto;
	width:89%;
}

.result{	
	margin: 0 auto;
	width:95%;
}
 .author-pic{	
	margin: 0 auto;
	width:90%;
}
.cover-p{
	display: block;
	clear: both;
	margin: 50px auto 00px auto;
	width: 90%;
	border-radius:50px;
	
}
.cover-p p{
    font-size: 44px;
    line-height:4.5rem;  
	margin: 40px 60px 30px 60px;
}

.result-p{
	display: block;
	clear: both;
	margin: -1px auto 00px auto;
	width: 78%;
	border-radius:50px;	
	padding:30px 35px;
}
.author{
	display: block;
	clear: both;
	margin: 50px auto 00px auto;
	width: 82%;
	border-radius:50px;
	padding-top:70px;
	border: solid 6px #222222;
}
.author p{
    font-size: 44px;
    line-height:4.5rem;  
	margin: 50px 60px 60px 60px;
	color: #666666;
}
.result-p p{
    font-size: 50px;
    line-height:5rem;  
	margin: 30px 35px 20px 35px;
}
	
.p-s{   
    font-size: 30px !important;	
	line-height: 50px !important;
}
.note-s{   
    font-size: 28px !important;
	line-height: 40px !important;
	width: 78%;
}
.social-media{
	margin: 5px 0 0 0;
	
}
.social-media img{
	margin: 25px 15px 0px 15px;
	width: 150px;
	height: auto;
}
.social-media_img2{
	margin: 25px 15px;
	width: 250px !important;
	height: auto;
}
.social-media_img3{
	margin:00px 15px !important;
	width: 70% !important;
	height: auto;
}
.process{
	
	margin: 0 auto;
	width: 60%;
}
.intro-title{
	display: block;	
	margin: 0px auto 00px  auto !important;
	width:40%;
}	
	
.q-title{
	display: block;
	
	margin: 0px auto 20px;
	width:40%;
}	
.logo { 
	top:15px;
	right: 30px;
}	
.logo img{
	width: auto;
	height: auto;
}
.copyright2 {
	
	padding-bottom: 5px;
}
.copyright2 p{
	font-size: 22px;
   
	padding-bottom: 0px;
	}
.copyright3 {
	position: static;
	
	padding-bottom: 5px;
}
.copyright3 p{
	font-size: 22px;
   
	padding-bottom: 0px;
	}
.copyright p{
	font-size:25px;
    color: #999999; 
	padding-bottom: 0px;
	}
.question{
	
	margin: 00px 0 30px !important;
}
.question-in{
	width: 85%;
	margin: 0 auto;
	}
.question-in h1{
	font-size:180px;
	line-height: 180px;
	padding: 100px 0 50px  0;	
	font-weight:normal !important;
}
.question-in p{
	font-family:  dfyuanstd-w5;
	font-size: 60px;	
	font-weight:normal !important;
	line-height: 100px;
}
}