/*
 * cwTeXMing (Chinese Traditional) http://www.google.com/fonts/earlyaccess
 */
@font-face {
  font-family: 'cwTeXMing';
  font-style: normal;
  font-weight: 500;
  src: url(//fonts.gstatic.com/ea/cwtexming/v3/cwTeXMing-zhonly.eot);
  src: url(//fonts.gstatic.com/ea/cwtexming/v3/cwTeXMing-zhonly.eot?#iefix) format('embedded-opentype'),
       url(//fonts.gstatic.com/ea/cwtexming/v3/cwTeXMing-zhonly.woff2) format('woff2'),
       url(//fonts.gstatic.com/ea/cwtexming/v3/cwTeXMing-zhonly.woff) format('woff'),
       url(//fonts.gstatic.com/ea/cwtexming/v3/cwTeXMing-zhonly.ttf) format('truetype');
}
@font-face {
  font-family: 'cwTeXHei';
  font-style: normal;
  font-weight: 500;
  src: url(//fonts.gstatic.com/ea/cwtexhei/v3/cwTeXHei-zhonly.eot);
  src: url(//fonts.gstatic.com/ea/cwtexhei/v3/cwTeXHei-zhonly.eot?#iefix) format('embedded-opentype'),
       url(//fonts.gstatic.com/ea/cwtexhei/v3/cwTeXHei-zhonly.woff2) format('woff2'),
       url(//fonts.gstatic.com/ea/cwtexhei/v3/cwTeXHei-zhonly.woff) format('woff'),
       url(//fonts.gstatic.com/ea/cwtexhei/v3/cwTeXHei-zhonly.ttf) format('truetype');
}

/* ---reset.css--- */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
/* ---reset.css--- */


@charset "utf-8";

html {-webkit-text-size-adjust:none;}

body{
	background-image:url(img/what-the-hex-dark.png);
	}

#bttop {
	position: fixed;
    right: 50px;
    bottom: 100px;
    cursor: pointer;}


/* ----------------電腦版型---------------- */
#WRAPPER{
	width:1000px;
	_zoom:1;overflow:hidden;
	background-color:;
	box-shadow: 
		0 3px 30px 1px rgba(0, 0, 0, 0.7), 
		0 0 200px 1px rgba(255, 255, 255, 0.2);
	margin:0 auto;}
#MAIN_I{
	width:1000px;
	height:700px;
	background-image:url(img/bgbg.png);
	background-position:top center;
	background-repeat:no-repeat;}
#MAIN{
	width:1000px;
	_zoom:1;overflow:hidden;
	background-image:url(img/bgbg-.png);
	background-position:top center;
	background-repeat:no-repeat;
	background-color:#d8c6ba;}
#CONTENT_I{
	float:right;
	width:800px;
	height:700px;
	background-image:url(img/index_main.png);
	background-position:bottom center;
	background-repeat:no-repeat;}
#CONTENT{
	float:right;
	width:720px;
	_zoom:1;overflow:hidden;
	background-image:url(img/logo_main.png);
	background-position:top center;
	background-repeat:no-repeat;
	padding-top:0px;
	padding-left:30px;
	padding-right:50px;
	padding-bottom:50px;}
#CONTENT p{
	font-family:Verdana, Geneva, sans-serif;
	font-size:15px;
	line-height:2;
	padding-bottom:20px;}
#CONTENT h3{font-size:24px;
	font-family:'cwtexhei', serif;
	line-height:2;
	padding-top:10px;
		padding-bottom:5px;
	font-weight:bold;
	color:#FF0066;
	}
#CONTENT h4{font-size:18px;
	font-family:'cwTeXMing', serif;
	line-height:2;
	background-color:#FF0066;
	margin-top:10px;
	padding-left:5px;
	padding-top:10px;
	padding-bottom:5px;
	font-weight:bold;
	color:#ffffff;
	}
#CONTENT a:hover{font-weight:bold;}
#CONTENT img{height: auto;	max-width:80%;}
#nav-icon4{display:none;}
#NAV{
	display:;
	float:left;
	padding-left:30px;
	padding-top:30px;
	width:150px;
	_zoom:1;overflow:hidden;}	

#NAV ul li a{
	font-family: 'cwTeXMing', serif;
	font-weight:bold;
	color:#74574d;
	line-height:2.2;
	margin-bottom:15px;
	text-decoration:none;}
#NAV ul li a:hover{
	color: #e61673;
	font-weight:bolder;}

.pink{color:#FF0066;}
.coffee{color:#6D5938;}
.gray{color:#666666;font-size:13px;line-height:1.6;}

.IN{width:720px;
_zoom:1;overflow:hidden;}

#TOL3{float:left;display:inline-block;width:320px;_zoom:1;
	margin:0 0;
	padding-bottom:0px;}
#TOL7{float:left;display:inline-block;width:400px;_zoom:1;
	margin:0 0;
	padding-bottom:0px;}
#TOR3{float:right;display:inline-block;width:320px;_zoom:1;
	margin:0 0;
	padding-bottom:0px;}
#TOR7{float:right;display:inline-block;width:400px;_zoom:1;
	margin:0 0;
	padding-bottom:0px;}
.TOL5{float:left;display:inline-block;width:50%;_zoom:1;
	margin:0 0; padding-bottom:0px;}
  
/* -------------------------------- 

                超連結動畫

   -------------------------------- */


.cool-link {
    color: #e61673;
    text-decoration: none;}

.cool-link::after {
    content: '';
    display: block;
    width: 0;
    height: 2px;
    background: #e61673;
    transition: width .6s;}

.cool-link:hover::after {
    width:120px;
    //transition: width .3s;}



/* -------------------------------- 

               議程 時間軸

   -------------------------------- */



#timeline {
	width:720px;
	margin:0px auto;
	}

#timeline   li{}
  
#timeline   li div{
    display: inline-block;
    margin:5px 0;
    vertical-align: top;
  }
 

 /* 
  .bullet {
    width: 12px;
    height: 12px;
    box-sizing: border-box;
    border-radius: 50%;
    background: #666666;
    z-index: 1;
    margin-right: 10px;
}
*/
  
  .time {
    width: 130px;
    font-size:15px; 
	color:#6D5938;
	font-weight:bold;
	font-family: Arial, Helvetica, sans-serif;
	line-height:1.6;
	}
  
  .desc {
    width: 560px;
	font-size:15px; 
	line-height:1.6;
	font-family: Arial, Helvetica, sans-serif;
	color:#000000;
  }
  .speak {
    width: 270px;
	font-size:15px;
	
	font-family: Arial, Helvetica, sans-serif;
	color:#000000;
  }


/* -------------------------------- 

                版權及其他

   -------------------------------- */

#FOOTER{
	width:100%;
	_zoom:1;overflow:hidden;
	padding-top:20px;
	
	text-align:center;}
#FOOTER p{font-size:13px;
	line-height:1.6;
	font-family:Arial, Helvetica, sans-serif;
	color:#ffffff;}
#FOOTER a{text-decoration:none; color:#CC9900;}
#FOOTER a:hover{font-weight:bold;}
.topsh {box-shadow: 0 -5px 7px -5px #666666;}


/* ----------------手機版型---------------- */

@media screen and (max-width: 736px) {
	
*{box-sizing:border-box;} /* 讓 padding 與 width 解除關係 */
html,body{-webkit-text-size-adjust:none;
	background-image:url(img/what-the-hex-dark.png);} /* iPhone 旋轉後 文字不要放大 */

#WRAPPER{
	width:100%;
	_zoom:1;overflow:hidden;
	background-color:;
	box-shadow: ;
	margin:0 auto;}
#MAIN_I{
	width:100%;
	_zoom:1;overflow:hidden;
	background-image:url(img/bgbg.png);
	background-position:top center;
	background-repeat:no-repeat;}
#MAIN{
	width:100%;
	_zoom:1;overflow:hidden;
	background-image:url(img/bgbg-.png);
	background-position:top center;
	background-repeat:no-repeat;}
#CONTENT_I{
	float:none;
	width:100%;
	background-size: cover;
	_zoom:1;
	background-image:url(img/index_main1.png);
	}
#CONTENT{
	float:none;
	width:100%;
	_zoom:1;overflow:hidden;
	background-image:url(img/logo_main.png);
	background-position:top center;
	background-repeat:no-repeat;
	padding-top:0px;
	padding-left:30px;
	padding-right:30px;
	padding-bottom:50px;}
#CONTENT img{height: auto;	max-width:80%;}
	
.IN{width:100%;
_zoom:1;overflow:hidden;}
#TOL3,#TOL7,#TOR3,#TOR7
	{float:none;display:inline-block;width:100%;_zoom:1;
	margin:0 auto;	padding-bottom:20px;}
.TOL5
	{float:none;display:inline-block;width:100%;_zoom:1;
	margin:0 auto;	padding-bottom:20px;}
	
/* ----------------漢堡icon---------------- */
#nav-icon3{
  display:block;
  width: 40px;
  height: 45px;
  position: relative;
  float:right;
  margin-right:20px;
  margin-top:20px;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .5s ease-in-out;
  -moz-transition: .5s ease-in-out;
  -o-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
  cursor: pointer;}

#nav-icon3 span{
  display: block;
  position: absolute;
  height: 3px;
  width: 100%;
  background: #ffffff;
  border-radius: 0px;
  opacity: 1;
  left: 0;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .25s ease-in-out;
  -moz-transition: .25s ease-in-out;
  -o-transition: .25s ease-in-out;
  transition: .25s ease-in-out;}


#nav-icon3 span:nth-child(1) {
  top: 0px;}

#nav-icon3 span:nth-child(2),#nav-icon3 span:nth-child(3) {
  top: 12px;}

#nav-icon3 span:nth-child(4) {
  top: 24px;}
  
/* Icon 3 動畫 ------------------------------

#nav-icon3.open span:nth-child(1) {
  top: 12px;
  width: 0%;
  left: 50%;}

#nav-icon3.open span:nth-child(2) {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);}

#nav-icon3.open span:nth-child(3) {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);}

#nav-icon3.open span:nth-child(4) {
  top: 12px;
  width: 0%;
  left: 50%;}

*/

#nav-icon4{
		display:block;
		width:40px;
		height:40px;
		color:#ffffff;
		position:absolute;
		right:20px;
		top:20px;
		text-align:center;
		line-height:40px;
		font-family:Verdana, Geneva, sans-serif;
		font-weight:normal;
		font-size:50px;
		cursor:pointer;
		background-image:url(img/x__nav-icon4.png);
		text-indent:-9999px;}	

#NAV{
	display:block;
	float:none;
	padding-left:0;
	padding-top:60px;
	border:20px solid #e61673;
	background:rgba(255,255,255,0.9);
	text-align:center;
	width:100%;
	height:100%;
	top:0;
	z-index:9999;
	position:fixed;
	transform:translate3d(-1000px,0px,0px);} 
	/*先把選單先推出去 -1000 營幕之外*/	


	#NAV.goIN{
		transition:all 1s ease; /* 1s 代表產生動畫時間 */
		transform:translate3d(0px,0px,0px); /*讓選單回到 0 營幕之內*/
	}
	
	#NAV.goOUT{
		transition:all 1s ease; /* 1s 代表產生動畫時間 */
		transform:translate3d(-1000px,0px,0px); }
		/*把選單先推出去 -1000 營幕之外*/

#NAV ul li a{
	font-family: 'cwTeXMing', serif;
	font-size:18px;
	font-weight:500;
	color:#333333;
	display:block;
	line-height:2.5;
	margin-top:0;
	margin-bottom:5px;
	text-decoration:none;}
#NAV ul li a:hover{
	color:#e61673;
	font-size:20px;
	line-height:3;
	font-weight:800;}
	
	

/* -------------------------------- 

               議程 時間軸

   -------------------------------- */


#timeline {
	width:100%;
	margin:0px auto;
	}

#timeline   li{}
  
#timeline   li div{
    display: inline-block;
    margin:5px 0;
    vertical-align: top;
  }
 

 /* 
  .bullet {
    width: 12px;
    height: 12px;
    box-sizing: border-box;
    border-radius: 50%;
    background: #666666;
    z-index: 1;
    margin-right: 10px;
}
*/
  
 .time {
    width: 120px;
    font-size:15px; 
	color:#6D5938;
	font-weight:bold;
	font-family: Arial, Helvetica, sans-serif;
	line-height:1.2;
	}
  
  .desc {
    width: 450px;
	font-size:15px; 
	line-height:1.6;
	font-family: Arial, Helvetica, sans-serif;
	color:#000000;
  }
  .speak {
    width: 270px;
	font-size:15px;
	
	font-family: Arial, Helvetica, sans-serif;
	color:#000000;
  }
 
 
/* -------------------------------- 

                超連結動畫

   -------------------------------- */


.cool-link {
    color: #e61673;
    text-decoration: none;}

.cool-link::after {
    content: ;
    display: block;
    width: 0;
    height: 2px;
    background: #e61673;
    transition: width .6s;}

.cool-link:hover::after {
    width:100%;
    //transition: width .3s;}


	

/* -------------------------------- 

                版權及其他

   -------------------------------- */

#FOOTER{
	width:100%;
	_zoom:1;overflow:hidden;
	padding:30px 30px;
	text-align:center;}

#FOOTER p{font-size:13px;
	line-height:1.6;
	font-family:Arial, Helvetica, sans-serif;
	color:#ffffff;}
#FOOTER a{text-decoration:none; color:#CC9900;}
#FOOTER a:hover{font-weight:bold;}
.topsh {box-shadow: 0 -5px 7px -5px #666666;}