@charset "utf-8";
/* CSS Document */
/************************************************************************************
RESET
*************************************************************************************/
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, font, 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, figure, mark, video {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    /*vertical-align: baseline;*/
    background: transparent;
}
body {line-height: 1; -webkit-text-size-adjust: none;/*防止allpe的safari瀏覽器字體變大*/}
/*ol, ul { list-style: none;}*/
ul { list-style: none;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after,q:before, q:after {content: ''; content: none;}
/* remember to define focus styles! */
:focus {outline: 0;}
/* remember to highlight inserts somehow! */
ins {text-decoration: none;}
del {text-decoration: line-through;}
/* tables still need 'cellspacing="0"' in the markup */
table {
   /* border-collapse: collapse;*/
    border-spacing: 0;
}
a img {border: none;}
img {max-width: 100%;image-rendering: -webkit-optimize-contrast;}
.clean { clear:both;}
a {color: #333333; text-decoration: none; blr:expression(this.onFocus=this.blur()); outline: none; /* for Firefox */hlbr:expression(this.onFocus=this.blur());}
a:hover {}
a:focus{ -moz-outline-style: none;}
.b-box{
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
body {
	margin: 0;
	padding: 0;
	font-size:15px;	
}

/*wow*/
.wow:first-child {
visibility: hidden;
visibility:visible \9;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}

/* remember to define focus styles! */
:focus {
    outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
    text-decoration: none;
}
del {
    text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
   /* border-collapse: collapse;*/
    border-spacing: 0;
}

a img {
	border: none;
}

.clean { clear:both;}

img { max-width:100%;}

/************************************************************************************
STRUCTURE 主要區塊
*************************************************************************************/

/*#backtop { z-index: 9999; position: relative;}*/

body {   
	-webkit-text-size-adjust: none;/*防止allpe的safari瀏覽器字體變大*/
	background-color: #fff;
}

h1 {
    text-indent: 101%;
    overflow: hidden;
    white-space: nowrap;
    position: absolute;
	width: 100%;
} 


#web-outer{	
	clear: both;
	overflow: hidden;	
}

.header{clear: both; overflow: hidden;}
.header-md{display: none;max-width: 1500px;}

.block-main {
	width: 100%;	
	background-color: #fff;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	padding: 35px 0 0 0;
	background: url("../img/header_bg.png") bottom no-repeat;
}

.block-main .block-center {
	display: flex;
	align-items: flex-start;
}

.main-menu {
	width: 28%;	
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	padding: 0;
	display: flex;
    flex-wrap: wrap;
    flex-direction: column;	
}
.block-menu {max-width: 250px;margin-left: 50%;background-color: rgba(255,255,255,0.9);border-radius: 10px;padding: 5px;}
.block-menu .link{border-bottom: 1px #e4e4e4 solid;}

.block-menu .end{
	display: inline-block;
	clear: both;
	margin: 5px 0 5px 0;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	padding: 10px 0;
	border-radius: 50px;	
	color: #333;
	font: bold 16px "微軟正黑體";
	position: relative;
	text-decoration: none;}

.block-menu .end span{
	display: inline-block;
	margin: 0 0 0 5px;
	color: #949494;
	font: 400 13px "微軟正黑體";	
	line-height: 1.2em;}

.block-menu a {
	display: inline-block;
	clear: both;
	margin: 5px 0 5px 0;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	padding: 10px 0;
	border-radius: 50px;
	color: #333;
	font: bold 16px "微軟正黑體";
	position: relative;
	text-decoration: none;	
}

.block-menu a span {
	display: inline-block;
	margin: 0 0 0 5px;
	color: #949494;
	font: 400 13px "微軟正黑體";	
	line-height: 1.2em;
}

.block-menu a:before {
	content: '';
	width:10px;
	height: 10px;
	border-radius: 50px;
	background: #797979;	
    position: absolute;
	opacity: 0;
}

.block-menu a:hover {
	background: #ededed;
	color: #333;
	padding:10px;
	text-decoration: none;	
}

.block-menu a.jp:hover {
	background: #c3e8ff;
}
.block-menu a.kr:hover {
	background: #c2e9c6;
}
.block-menu a.as:hover {
	background: #f7e8c7;
}

.block-menu a.eu:hover {
	background: #efd0d2;
}
.block-menu a.aa:hover {
	background: #e4d9d5;
}
.block-menu a.tw:hover {
	background: #bbefeb;
}


.main-top{
	width: 72%;
	background: url("../img/header_bg2.png") left 100px top no-repeat;
}
.main-top .big-img{float: right;width: 75%;max-width: 1300px;}
.big-img img{ border-radius: 0 0 0 80px;} 
.main-top .big-title{float: left;width: 25%;text-align: center;padding-top: 2%;}
.big-title img{padding: 10px;}


.block_menu { width:100%; position: fixed; top:40px; z-index:900; background: #f0f0f0; display: none; padding:0px;}
	
/*導覽列*/
.block_menu ul {
	width: 100%;
    clear: both;
    max-width: 960px;
    text-align: center;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

.block_menu li {
	display: inline-block;
	margin:0px 7px;
}
.block_menu a {
	display: block;
	color:#333;
	width: 100%;
	height: 65px;
	text-align: center;
	font-size: 20px;
	line-height: 65px;
	font-weight: bold;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	padding: 0 12px;
	text-decoration: none;
	
}

.sticky {
	top: 40px;
    z-index: 900 !important;
}

.block_menu a:hover,.menu-active a {color:#333;text-decoration: none;}
.block_menu a:hover,.block_menu a.active{color:#333;text-decoration: none;}

.block_menu li.menu01 a {text-decoration: none;}
.block_menu li.menu01 a:hover{background-color: #fff;text-decoration: none;}
.block_menu li.menu01 a.active{background-color: #c3e8ff;text-decoration: none;}

.block_menu li.menu02 a {text-decoration: none;}
.block_menu li.menu02 a:hover{background-color: #fff;text-decoration: none;}
.block_menu li.menu02 a.active{background-color: #c2e9c6;text-decoration: none;}

.block_menu li.menu03 a {text-decoration: none;}
.block_menu li.menu03 a:hover{background-color: #fff;text-decoration: none;}
.block_menu li.menu03 a.active{background-color: #f7e8c7;text-decoration: none;}

.block_menu li.menu04 a {text-decoration: none;}
.block_menu li.menu04 a:hover{background-color: #fff;text-decoration: none;}
.block_menu li.menu04 a.active{background-color: #efd0d2;text-decoration: none;}

.block_menu li.menu05 a {text-decoration: none;}
.block_menu li.menu05 a:hover{background-color: #fff;text-decoration: none;}
.block_menu li.menu05 a.active{background-color: #e4d9d5;text-decoration: none;}

.block_menu li.menu06 a {text-decoration: none;}
.block_menu li.menu06 a:hover{background-color: #fff;text-decoration: none;}
.block_menu li.menu06 a.active{background-color: #bbefeb;text-decoration: none;}





/*錨點*/
.block-first{overflow: hidden;padding-top: 50px;margin-top: -50px;}

.min-title{width: 95%;float: right;border-radius: 10px 0 0 10px;margin: 50px 0 0 0;padding: 10px;font: 600 45px "微軟正黑體";}
.min-title span{line-height: 55px;margin-top: 10px; background: url("../img/icon_circle.png") top left no-repeat;display: inline-block;margin-left: 5px;}
.min-title em{font-style:normal;font: 600 25px "微軟正黑體";color: #fff;margin-left: 5px;}

.t-jp{background-color: #c3e8ff; border-left: #186ac7 8px solid;}
.t-kr{background-color: #c2e9c6; border-left: #26812f 8px solid;}
.t-as{background-color: #f7e8c7; border-left: #e5a323 8px solid;}
.t-eu{background-color: #efd0d2; border-left: #b7585f 8px solid;}
.t-aa{background-color: #e4d9d5; border-left: #835e51 8px solid;}
.t-tw{background-color: #bbefeb; border-left: #0a8f85 8px solid;}

#japan{padding: 50px 0;}
.jp-main{position: relative;clear: both;overflow: hidden;padding-top: 30px; padding-bottom: 30px;}
.jp-main::before{content: '';width: 98%;height: 100%;right: 0;top:15%; background: #eef8ff;right: 0px;z-index: 1;position: absolute;border-radius: 30px 0 30px 0;}

#korea{padding: 50px 0;}
.kr-main{position: relative;clear: both;overflow: hidden;padding-top: 30px; padding-bottom: 30px;}
.kr-main::before{content: '';width: 98%;height: 100%;right: 0;top:15%; background: #ebf8ee;right: 0px;z-index: 1;position: absolute;border-radius: 30px 0 30px 0;}

#asia{padding: 50px 0;}
.as-main{position: relative;clear: both;overflow: hidden;padding-top: 30px; padding-bottom: 30px;}
.as-main::before{content: '';width: 98%;height: 100%;right: 0;top:15%; background: #f8f4eb;right: 0px;z-index: 1;position: absolute;border-radius: 30px 0 30px 0;}

#europe{padding: 50px 0;}
.eu-main{position: relative;clear: both;overflow: hidden;padding-top: 30px; padding-bottom: 30px;}
.eu-main::before{content: '';width: 98%;height: 100%;right: 0;top:15%; background: #fceff0;right: 0px;z-index: 1;position: absolute;border-radius: 30px 0 30px 0;}

#america{padding: 50px 0;}
.aa-main{position: relative;clear: both;overflow: hidden;padding-top: 30px; padding-bottom: 30px;}
.aa-main::before{content: '';width: 98%;height: 100%;right: 0;top:15%; background: #f2e8e5;right: 0px;z-index: 1;position: absolute;border-radius: 30px 0 30px 0;}

#taiwan{padding: 50px 0;}
.tw-main{position: relative;clear: both;overflow: hidden;padding-top: 30px; padding-bottom: 30px;}
.tw-main::before{content: '';width: 98%;height: 100%;right: 0;top:15%; background: #dff5f3;right: 0px;z-index: 1;position: absolute;border-radius: 30px 0 30px 0;}

.jp-box,.kr-box,.as-box,.eu-box,.aa-box,.tw-box{	
	width: 100%;
	height:auto;	
	margin: 0 auto;
	position: relative;
	z-index: 2;	
	float: left;
	z-index: 30;
}

.ct-box { max-width: 1600px; margin:0 auto;text-align: center; clear:both; overflow: hidden; }
.ct-box2 { max-width: 1200px; margin:0 auto;text-align: center; clear:both; overflow: hidden; }

.ct30 {  width:31%;  display: inline-block; vertical-align: top; margin: 1% 1%;}
.ct30 a { text-decoration: none; display:block; }
.ct30 a:hover { text-decoration: none; }

.ct50 {  width:45%;  display: inline-block; vertical-align: top; margin: 1% 1%;}
.ct50 a { text-decoration: none; display:block; }
.ct50 a:hover { text-decoration: none; }



/*鐵道*/
.flex-box{
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-between;
}

/*鐵道內容*/
.train-box{
	width: 100%;
	position: relative;
	overflow: hidden;
	cursor: pointer;	
}
.train-box {border-radius: 0 50px 0 0;}
.train-box img{border-radius: 0 50px 0 0;}

.train-box:hover img{
	opacity: 0.8;
}
.train-box .list-content {
	text-align: left;
	width: 100%;
    position: absolute;
    bottom: -120px;
    background-color: #333;
    padding: 1.5rem;
    color: #fff;   
	transition: all 0.3s linear;
}

.top-border01{border-top: #c3e8ff 3px solid;}
.top-border02{border-top: #c2e9c6 3px solid;}
.top-border03{border-top: #f7e8c7 3px solid;}
.top-border04{border-top: #efd0d2 3px solid;}
.top-border05{border-top: #e4d9d5 3px solid;}
.top-border06{border-top: #bbefeb 3px solid;}

.train-box:hover .list-content{
	bottom: 0;
	background-color: #333;
}
.list-content .title {    
	font: 600 28px "微軟正黑體";
	margin-top: -3px;
	margin-bottom: 20px;
    display: inline-flex;
    flex-direction: row;
    /*flex-wrap: wrap;*/
    align-items: center;
}

.list-content .title em {font-style: normal; display: block;font-size: 18px;line-height: 1.5em;}
.color01{color: #c3e8ff;}
.color02{color: #c2e9c6;}
.color03{color: #f7e8c7;}
.color04{color: #efd0d2;}
.color05{color: #e4d9d5;}
.color06{color: #bbefeb;}

.train-box .list-content p{
	display: block;
	width: 90%;
	font: 400 18px "微軟正黑體";
	line-height: 1.5em;		
	transition: all 0.3s linear;
	min-height: 60px;
}


.train-bun{float: right; display: inline-block;border-radius: 25px;font: 600 18px "微軟正黑體";color: #333;padding: 5px 10px;margin-right: 10%;margin-top: 5px;}
.train-bun:hover {background-color: #fff;}
.bun01{background-color: #c3e8ff;}
.bun02{background-color: #c2e9c6;}
.bun03{background-color: #f7e8c7;}
.bun04{background-color: #efd0d2;}
.bun05{background-color: #e4d9d5;}
.bun06{background-color: #bbefeb;}
.train-bun-no{height: 35px;}

@media only screen and ( max-width:1400px) {
	.main-menu{width: 25%;}
	.main-top{width: 75%;}
	.block-menu {margin-left: 5%;}	
}

@media only screen and ( max-width:1200px) {	
	.jp-main::before{top:5%;}
	.min-title{width: 95%;}
	.ct-box{width: 95%;margin: 0 0 0 4%;}
	.ct-box2{width: 95%;margin: 0 0 0 4%;}
	.ct30 {width:47%;}
	.ct50 {width:47%;}
	.list-content .title { font: 600 22px "微軟正黑體";}

}

@media only screen and ( max-width:1000px) {
	.main-menu{width: 35%;}
	.main-top{width: 75%;}
	.block-menu {margin-left: 0%;}
}


@media only screen and ( max-width:959px){
	.main-menu{width: 30%;}
	.main-top{width: 70%;}
	.block-menu {margin-left: 1%;}	
	.train-box .list-content {
	position: inherit;
	bottom: 0;
	position: inherit;
	text-align: left;
	padding-bottom: 50px;	
}
	
.list-content .title { font: 600 18px "微軟正黑體";}	
	
.train-bun-no{height: inherit;}
}



/*---平板-----*/

@media only screen and ( max-width:768px) 
{ 
	.block_menu {display: none;}
	#menu {display: none;}
	
	#sticky-footer-push {
	display:none;}	
	.block-main{display: none;}
	.header-md{display: block;margin-top: 40px;}
	.list-content .title {margin-bottom: 10px;}
	.train-box .list-content p{	
	font: 400 15px "微軟正黑體";	
}
	
}

@media only screen and ( max-width:650px) 	
{
	.jp-main::before{top:1%;}
	.ct-box{max-width: inherit;width: 95%;margin: 0 auto;text-align: center;}
	.ct30 {width:85%;margin: 0 auto 30px auto;}	
	.ct50 {width:85%;margin: 0 auto 30px auto;}	
	.min-title em{font-style:normal;font: 600 15px "微軟正黑體";}
	.min-title span{font: 600 30px "微軟正黑體";}
	.list-content .title { font: 600 22px "微軟正黑體";}	
	.train-box .list-content p{
	text-align: left;		
	min-height: inherit;	
}
}
/*---手機版-----*/

@media only screen and (max-width:480px) 
{  
	.min-title{width: 98%;}
   .ct30 {  width:95%;}	
	.ct50 {  width:95%;}	
   
}
@media only screen and (max-width:480px) 
{ 
}