@charset "utf-8";

* { 
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;   
 box-sizing: border-box;    
}

.clearfix:before, .clearfix:after {
	content: '';
	display: table;
}
.clearfix:after {
	clear: both;
}
html {
	width: 100%;
	font-size: 62.5%;
	overflow-x: hidden;
}
body {
	width: 100%;
	margin: 0;
	font-family: '微軟正黑體', Arial, Helvetica, sans-serif;
	font-size: 17px;
	color: #fff;
  	position: relative;
  	background-color: #fff;
  	overflow: hidden;
}
p, li, a{
	font-size: 16px;
	line-height: 1.5;
}
a {
	color: #f4f4f4;
	text-decoration: underline;
}
a:hover {
	color: #C10000;
}
h2{
	color: #333;
	font-size: 30px;
	line-height: 150%;
	margin-bottom: 20px;
}
.wrapper {
	width: 100%;
	max-width: 1000px;
	padding: 50px 0;
	margin: 0 auto;
	overflow: hidden;
}
.btn {
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	padding: 10px 25px;
	border: 1px solid #444;
	background: #666;
	text-decoration: none;
	color: #fff;
	display: inline-block;
	box-shadow: 0 2px 5px rgba(0,0,0, 0.3);
}
.btn:hover {
	background: #c8770a;
	text-decoration: none;
	color: #fff;
}
.hide-text{
	white-space: nowrapper;
	overflow: hidden;
	text-indent: -1000%;
}
.ellipsis {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
#img-preload{
	height: 0px;
}
.green{
	color: rgb(253, 141, 11);
  	font-size: 20px;
}
.green2{
	color: rgb(132, 255, 91);
}
.highlight{
	color: #fff;
}
.note{
	font-size: 14px;
}
/* ----------------------------------------------------------------------*/
/* ----------------------------------------------------------------------*/
.mobiletop-wp{
	width: 100%;
	height: 50px;
	background-color: #111111;
	position: relative;
	display: none;
}
.mobilemenu{
	width: 106px;
	height: 50px;
	background: url(../images/mobile-menu.png) center no-repeat;
	margin-left: 15px;
	cursor: pointer;
	
}
.submenu{
	width:210px;
	height:240px;
	background-color: rgba(255,255,255,.5);
	padding-bottom:15px;
	position:absolute;
	top: 50px;
	left: 3px;	
	z-index: 10;
	display: none;
}
.submenu ul{
	padding:25px 20px 20px 25px;
	color:#000000;	
}
.submenu li{
    margin-left: 20px;
}
.submenu li a{
	font-size:18px;
	display:block;
	line-height:45px;
	text-align:justify;
	text-justify:inter-word;
	color:#000000;
	text-decoration:none;
	margin-bottom:-1px;
	font-weight:bold;
}
.submenu li a:hover{
	color:#1A41F1;
}
/* ----------------------------------------------------------------------*/
/* ----------------------------------------------------------------------*/
.section-one{
	width: 100%;
	height: 669px;
	background-color: #020409;
}
.section-one .one-bg{
	width: 1920px;
	height: 669px;
	background: url(../images/tls-bg1.jpg) no-repeat;
	position: absolute;
	left: 50%;
	margin-left: -960px;
	z-index: 1;
}
.one-wp{
	width: 100%;
	height: 669px;
	position: absolute;
	overflow: hidden;
	z-index: 2;
}
.wrapper2{
	width: 100%;
	max-width: 1000px;
	height: 669px;
	position: relative;
	margin: 0 auto;
}
.wrapper2 img{
	position: absolute;
	z-index: -1;
}
.day1{
	width: 330px;
	height: 100px;
	background: url(../images/day1.png) no-repeat;
	margin: 0 auto;
}
.day2{
	width: 330px;
	height: 100px;
	background: url(../images/day2.png) no-repeat;
	margin: 0 auto;
}
/* -----------*/
.hs-logo{
	display: block;
	width: 204px;
	height: 87px;
	background: url(../images/hs-logo.png) no-repeat;
	margin: 54px auto 0;
}
.tls-logo{
	display: block;
	width: 229px;
	height: 155px;
	background: url(../images/tls-logo.png) no-repeat;
	margin: 33px auto 0;
}
.logo-wp{
	width: 100%;
	height: 55px;
	margin: 15px auto 0;
	text-align: center;
}
.lh-logo{
	display: inline-block;
	width: 136px;
	height: 55px;
	background: url(../images/lh-logo.png) no-repeat;
}
.touch-logo{
	display: inline-block;	
	width: 78px;
	height: 55px;
	background: url(../images/touch-logo.png) no-repeat;
	margin-left: 5px;
}
/* -----------*/
.nav{
	margin: 47px auto 0;
    width: 100%;
    height: 82px;
    text-align: center;	
}
.tsl-btn1,.tsl-btn2,.tsl-btn3,.tsl-btn4{
	width: 160px;
	height: 82px;
	display: inline-block;
	margin: 0 2px;
	white-space: nowrapper;
	overflow: hidden;
	text-indent: -1000%;	
}
.tsl-btn1{
	background: url(../images/btn1.png) no-repeat;
}
.tsl-btn2{
	background: url(../images/btn2.png) no-repeat;
}
.tsl-btn3{
	background: url(../images/btn3.png) no-repeat;
}
.tsl-btn4{
	background: url(../images/btn4-1.png) no-repeat;
}
.tsl-btn1:hover{
	background: url(../images/btn1-h.png) no-repeat;
}
.tsl-btn2:hover{
	background: url(../images/btn2-h.png) no-repeat;
}
.tsl-btn3:hover{
	background: url(../images/btn3-h.png) no-repeat;
}
.tsl-btn4:hover{
	background: url(../images/btn4-1-h.png) no-repeat;
}
/* ----------------------------------------------------------------------*/
/* ----------------------------------------------------------------------*/
.section-two{
	width: 100%;
	height: 761px;
	background-color: #020409;
}
.section-two .two-bg{
	width: 1920px;
	height: 761px;
	background: url(../images/tls-bg2.jpg) no-repeat;
	position: absolute;
	left: 50%;
	margin-left: -960px;
	z-index: 1;
}
.two-wp{
	width: 100%;
	height: 761px;
	position: absolute;
	overflow: hidden;
	z-index: 2;
}
.wrapper2-2{
	width: 100%;
	max-width: 1000px;
	height: 647px;
	position: relative;
	margin: 0 auto;
}
h2.h2-2{
	width: 450px;
	height: 54px;
	background: url(../images/h2.png) no-repeat;
	background-position: 0 0;
	margin-top: 96px;
	overflow: hidden;
}
.wrapper2-2 .text-box{
	max-width: 586px;
	margin: 90px 0 0 320px;	
}
.wrapper2-2 h3{
	display: block;
	font-size: 30px;
	font-weight: 600;
	text-shadow:3px 3px 3px #00192D;
	color: #4BF5F0;
}
.wrapper2-2 p{
	display: block;
	font-size: 20px;
	color: #d7d7d7;
	text-shadow:3px 3px 3px #00192D;	
}
/* ----------------------------------------------------------------------*/
/* ----------------------------------------------------------------------*/
.section-three{
	width: 100%;
	height: 611px;
	background-color: #020409;
}
.section-three .three-bg{
	width: 1920px;
	height: 611px;
	background: url(../images/tls-bg3.jpg) no-repeat;
	position: absolute;
	left: 50%;
	margin-left: -960px;
	z-index: 1;
}
.three-wp{
	width: 100%;
	height: 611px;
	position: absolute;
	overflow: hidden;
	z-index: 2;
}
.wrapper2-3{
	width: 100%;
	max-width: 1000px;
	height: 496px;
	position: relative;
	margin: 0 auto;
}
h2.h2-3{
	width: 450px;
	height: 54px;
	background: url(../images/h2.png) no-repeat;
	background-position: 0 -59px;
	margin-top: 96px;
	overflow: hidden;
}
.wrapper2-3 p{
	display: block;
	font-size: 20px;
	color: #d7d7d7;
	text-shadow:3px 3px 3px #00192D;	
    margin-top: 25px;	
}
.wrapper2-3 .text-box{
/*	max-width: 520px;*/
	margin-right: 20px;
	padding-left: 8px;
	float: left;
}
.movie{
	width: 420px;
	height: 315px;
	float: left;
    margin-top: 25px;	
}
/* ----------------------------------------------------------------------*/
/* ----------------------------------------------------------------------*/
.section-four{
	width: 100%;
	height: 2900px;
	background-color: #020409;
}
.four-wp{
	width: 100%;
	height: 2900px;
	position: absolute;
	overflow: hidden;
	z-index: 2;
}
.wrapper2-4{
	width: 100%;
	max-width: 1000px;
	position: relative;
	margin: 0 auto;
}
h2.h2-4{
	width: 450px;
	height: 54px;
	background: url(../images/h2.png) no-repeat;
	background-position: 0 -118px;
	margin-top: 96px;
	overflow: hidden;
}
.wrapper2-4 p{
	display: block;
	font-size: 20px;
	color: #d7d7d7;
	text-shadow:3px 3px 3px #00192D;	
    margin-top: 30px;	
}
.guest-link{
	margin-left: 70px;
}
.guest-link a{
	font-size: 20px;
}
.guest-link a:hover{
	color: #7DFFFF;
}
.guest-box{
	width: 905px;
	height: 271px;
	background: url(../images/guest-bg2.png) no-repeat;
	position: relative;
	margin-top: 35px;
}
.guest-box img{
	width: 205px;
	height: 259px;
	position: absolute;
	left: 90px;
}
.guest-box .name{
	font-size: 28px;
	position: absolute;
	top: 13px;
	left: 321px;
	margin-top: 0;
}
.guest-box .name span{
	font-size: 20px;
}
.guest-box .name span.team1{
    color: #11D268;	
}
.guest-box .name span.team2{
    color: #11A6D2;	
}
.guest-box .intro{
	max-width: 530px;
	font-size: 20px;
	color: #d7d7d7;
	position: absolute;
	top: 89px;
	left: 321px;
	margin-top: 0;	
}
.link-wp{
	width: 100%;
	height: 100px;
	position: relative;
}
hr{
	width: 100%;
	border:0;
	height: 1px;
	background-color: #5A5A5A;
	margin: 0 auto;
}
.back{
	display: inline-block;
	width: 45px;
	height: 10px;
	background: url(../images/icon-back.png)no-repeat;
}
.icon-top{
	display: block;
	width: 44px;
	height: 17px;
	background: url(../images/icon-top.png)no-repeat;
	position: absolute;
	right: 10px;
	bottom: 10px;
}
.hr-style{
	width: 100%;
	height: 18px;
	background-color: rgb(19, 22, 31);
	display: none;
}
.foot-top-wp{
	width: 100%;
	height: 18px;
	margin: 0 auto;
	background-color: #020409;
}
.foot-icon{
	width: 100%;	
	max-width: 1000px;
	height: 18px;
	position: relative;
	margin: 0 auto;
}
@media screen and (max-width: 1000px) and (min-width: 320px){
	h2.h2-3 {
	    margin-top: 60px;
	}
	.wrapper2-2 .text-box {
	    max-width: 586px;
	    margin: 90px auto 0;
	}
	.wrapper2-3{
		padding: 0 30px;
	}
	.wrapper2-3 p{
		display: block;
		font-size: 18px;
		color: #d7d7d7;
		text-shadow:3px 3px 3px #00192D;	
	    margin-top: 25px;	
	}
	.wrapper2-3 .text-box{
	/*	max-width: 50%;	*/	
		margin-right: 0px;
		padding-left: 0px;
	}
	.movie{
		width: 400px;
		height: 300px;
	    margin-top: 25px;
	    margin-left: 10px;	
	}

	/*
	.wrapper2-3 p{
		display: block;
		font-size: 18px;
		color: #d7d7d7;
		text-shadow:3px 3px 3px #00192D;	
	    margin-top: 25px;	
	}
	.wrapper2-3 .text-box{
		max-width: 90%;
		margin-right: 0px;
		margin: 0 auto;
		padding-left: 0px;
		float: none;
	}
	.movie{
		width: 400px;
		height: 300px;
		float: none;
	    margin-top: 0px;	
	    margin: 0 auto;
	}	*/
}
@media screen and (max-width: 905px) and (min-width: 320px){
	.guest-box .intro {
	    max-width: 500px;
	    font-size: 18px;
	    color: #d7d7d7;
	    position: absolute;
	    top: 89px;
	    left: 321px;
	    margin-top: 0;
	}
}

@media screen and (max-width: 840px) and (min-width: 320px){
	.guest-box{
		width: 750px;
		height: 225px;
		background: url(../images/guest-bg2.png) no-repeat;
		background-size: 750px 225px;
		position: relative;
		margin-top: 35px;
	}
	.guest-box img{
		width: 169px;
		height: 215px;
		position: absolute;
		left: 75px;
	}
	.guest-box .name{
		font-size: 26px;
		top: 5px;
		left: 260px;
	}
	.guest-box .name span{
		font-size: 20px;
	}
	.guest-box .intro{
		max-width: 480px;
		font-size: 18px;
		top: 70px;
		left: 260px;
	}
	.section-four,.four-wp{
		height: 2500px;
	}

}
@media screen and (max-width: 770px) and (min-width: 320px){
	.wrapper2-3 .text-box{
		max-width: 88%;		
		margin-right: 0px;
		padding-left: 0px;
		float: none;
		margin: 0 auto;
	}
	.movie{
		width: 360px;
		height: 270px;
	    float: none;
	    margin: 20px auto 0;
	}
	.section-three{
		width: 100%;
		height: 560px;
		background-color: #020409;
	}
	.section-three .three-bg{
		width: 900px;
		height: 560px;
		background: url(../images/tls-bg3-2.jpg) no-repeat;
		position: absolute;
		left: 50%;
		margin-left: -450px;
		z-index: 1;
	}
	.three-wp{
		width: 100%;
		height: 560px;
		position: absolute;
		overflow: hidden;
		z-index: 2;
	}
	.wrapper2-3{
		width: 100%;
		max-width: 1000px;
		height: 490px;
		position: relative;
		margin: 0 auto;
	}
	.hr-style{
		display: block;
	}
	.guest-box{
		width: 750px;
		height: 241px;
		background: url(../images/guest-bg2-2.png) no-repeat;
		background-size: 750px 241px;
		position: relative;
		margin-top: 35px;
	}
	.guest-box img {
	    width: 169px;
	    height: 215px;
	    left: 30px;
	}
	.guest-box .name {
	    font-size: 26px;
	    top: 5px;
	    left: 220px;
	}
	.guest-box .intro {
	    max-width: 480px;
	    font-size: 17px;
	    top: 70px;
	    left: 220px;
	}
	.section-four,.four-wp{
		height: 2650px;
	}
	.guest-link {
	    margin-left: 30px;
	}
	.guest-link a {
	    font-size: 18px;
	}
}
@media screen and (max-width: 720px) and (min-width: 320px){
	.guest-box .intro {
	    max-width: 450px;
	    font-size: 17px;
	    top: 70px;
	    left: 220px;
	}
}
@media screen and (max-width: 700px) and (min-width: 320px){
	.hs-logo {
	    display: block;
	    width: 180px;
	    height: 77px;
	    background-size: 180px 77px;
	    margin: 30px auto 0;
	}	
	.nav{
		height: 61px;
		margin: 47px auto 0;
	}	
	.tsl-btn1,.tsl-btn2,.tsl-btn3,.tsl-btn4{
		width: 120px;
		height: 61px;
		background-size: 120px 61px;
		display: inline-block;
		margin: 0 2px;
	}
	.tsl-btn1:hover,.tsl-btn2:hover,.tsl-btn3:hover,.tsl-btn4:hover{
		width: 120px;
		height: 61px;
		background-size: 120px 61px;
	}	
	.wrapper2-2,.wrapper2-3{
		padding: 0 30px;
	}
	.wrapper2-2 h3 {
	    font-size: 28px;
	}
	.wrapper2-2 p{
		font-size: 18px;
	}

}
@media screen and (max-width: 680px) and (min-width: 320px){
	.guest-box{
		width: 100%;
		height: 400px;
		background: transparent;
		position: relative;
		margin-top: 35px;
	}
	.guest-box img {
	    width: 169px;
	    height: 215px;
		display: block;
	    position: relative;
	    margin: 0 auto;
	    top: 0;
	    left: 0;
	}
	.guest-box .name {
	    font-size: 26px;
	    position: relative;
	    display: block;
	    margin: 0 auto;
	    top: 10px;
	    left: 0;
	    text-align: center;
	}
	.guest-box .intro {
		width: 80%;
	    max-width: 500px;
	    font-size: 17px;
	    position: relative;
	    display: block;
	    margin: 0 auto;
	    top: 10px;
	    left: 0;
	    text-align: center;
	}
	.section-four,.four-wp{
		height: 3900px;
	}
}
@media screen and (max-width: 580px) and (min-width: 320px){
	.mobiletop-wp{
		width: 100%;
		height: 50px;
		background-color: #111111;
		position: relative;
		display: block;
	}	
	.nav{
		width: 100%;
		height: auto;
		margin: 0;
	}		
	.tsl-btn1,.tsl-btn2,.tsl-btn3,.tsl-btn4{
		display: none;
	}
	.tsl-btn1:hover,.tsl-btn2:hover,.tsl-btn3:hover,.tsl-btn4:hover{
		display: none;
	}	
	.section-one{
		width: 100%;
		height: 500px;
		background-color: #020409;
	}
	.section-one .one-bg{
		width: 900px;
		height: 500px;
		background: url(../images/tls-bg1-2.jpg) center bottom no-repeat;
		position: absolute;
		left: 50%;
		margin-left: -450px;
		z-index: 1;
	}
	.one-wp{
		width: 100%;
		height: 500px;
		position: absolute;
		overflow: hidden;
		z-index: 2;
	}
	.wrapper2{
		width: 100%;
		max-width: 1000px;
		height: 470px;
		position: relative;
		margin: 0 auto;
	}		
	.wrapper2 img{
		display: none;
	}	
}
@media screen and (max-width: 550px) and (min-width: 320px){
	.wrapper2-4 p {
	    display: block;
	    font-size: 18px;
	    margin-top: 0;
	}
	.link-wp {
	    height: 130px;
	}
}
@media screen and (max-width: 520px) and (min-width: 320px){
	.section-two{
		width: 100%;
		height: 620px;
		background-color: #020409;
	}
	.section-two .two-bg{
		width: 900px;
		height: 620px;
		background: url(../images/tls-bg2-2.jpg) center bottom no-repeat;
		position: absolute;
		left: 50%;
		margin-left: -450px;
		z-index: 1;
	}
	.two-wp{
		width: 100%;
		height: 620px;
		position: absolute;
		overflow: hidden;
		z-index: 2;
	}
	.wrapper2-2{
		width: 100%;
		max-width: 1000px;
		height: 540px;
		position: relative;
		margin: 0 auto;
	}
	.wrapper2-2 h3 {
	    font-size: 24px;
	}	
	h2.h2-2 {
	    width: 350px;
	    height: 43px;
	    background: url(../images/h2.png) no-repeat;
	    background-size: 350px 134px;
	    background-position: 0 0;
	    margin-top: 55px;
	    overflow: hidden;
	}	
	h2.h2-3 {
	    width: 350px;
	    height: 43px;
	    background: url(../images/h2.png) no-repeat;
	    background-size: 350px 134px;
	    background-position: 0 -46px;
	    margin-top: 55px;
	    overflow: hidden;
	}	
	h2.h2-4 {
	    width: 350px;
	    height: 43px;
	    background: url(../images/h2.png) no-repeat;
	    background-size: 350px 134px;
	    background-position: 0 -91px;
	    margin-top: 55px;
	    overflow: hidden;
	}		
	.wrapper2-2 .text-box {
	    max-width: 586px;
	    margin: 40px auto 0;
	}

}
@media screen and (max-width: 465px) and (min-width: 320px){
	.submenu{
		background-color: rgba(255,255,255,.7);
	}	
	.section-three,.section-three .three-bg,.three-wp{
		height: 650px;
	}
	.wrapper2-3{
		height: 590px;
	}
	.guest-box{
		height: 450px;
	}
	.section-four,.four-wp{
		height: 4200px;
	}
}
@media screen and (max-width: 520px) and (min-width: 320px){
	.section-two,.section-two .two-bg,.two-wp{
		height: 680px;
	}
	.wrapper2-2{
		height: 600px;
	}
	.movie{
		width: 100%;
		max-width: 360px;
	}
}	
@media screen and (max-width: 400px) and (min-width: 320px){
	.submenu{
		background-color: rgba(255,255,255,.9);
	}	
}
@media screen and (max-width: 386px) and (min-width: 320px){
	.wrapper2-2 .text-box h3 span{
		display: none;
	}
	.wrapper2-2 .text-box h3{
		margin: 0 auto;
		text-align: center;
	}	
	.section-two,.section-two .two-bg,.two-wp{
		height: 750px;
	}
	.wrapper2-2{
		height: 680px;
	}
}