@import url(http://fonts.googleapis.com/earlyaccess/notosanstc.css);
@import url(http://fonts.googleapis.com/earlyaccess/notosanssc.css);

body{margin:0;padding:0;font-family:'Open Sans','Arial','Noto Sans TC','Microsoft Jhenghei', '新細明體';}
body.tc{font-weight: 300;}
body.sc{font-family:'Open Sans','Arial','Noto Sans SC','Microsoft Jhenghei', '新細明體';font-weight: 300;}

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

.wrapper{max-width: 1280px;width: 100%;margin: 0 auto;position: relative;padding: 0 20px;}
.content{position: relative;}

header{padding:20px 0px;background:#FFF;position: relative;z-index: 1;}
header .logo{display:inline-block;position: relative;}
header .lang{height:40px;position: absolute;top:50%;right:20px;margin-top:-20px;font-size:0;}
header .lang a{width: 40px;height: 40px;border: 1px solid #e63956;color: #e63956;font-size: 14px;border-radius: 40px;text-transform: uppercase;display: inline-block;text-align: center;padding-top: 9px;vertical-align:middle;margin-left:5px;}
header .lang a.lang-tc{font-size: 17px;padding-top: 5px;}
header .lang a.on{background:#e63956;color:#FFF;}

.banner{position: relative;height:650px;text-align: center;font-size: 0;}
.banner:before{content:'';height:100%;display:inline-block;vertical-align: middle;}
.banner .bg-holder{position: absolute;width:100%;height:100%;top:0;left:0;/*background:url(../images/banner-bg.jpg) no-repeat;background-size:100% auto;background-position: center bottom*/overflow: hidden;}
.banner .bg-holder .bg-img{position: absolute;bottom:0;left:0;}
.banner .bg-holder .male{position: absolute;top:50%;right:10px;margin-top:-280px;}
.banner .wrapper{display:inline-block;vertical-align: middle;text-align:left}
.banner .text{font-size: 30px;font-weight: bold;margin-bottom: 40px;text-transform: uppercase;line-height: 50px;color:#FFF;}
.banner .text h1{font-size:48px;color:#e63956;}
.banner .img-holder{font-size:0;position: relative;}
.banner .img-holder .item{display:inline-block;position: relative;}
.banner .img-holder .item.item-1{left: -27px;}
.banner .img-holder .item.item-2{left: -32px;}
.banner .img-holder .item img{max-width:100%}

.home{color:#404040;}
.home .intro{background:#f5f4f0;padding:40px 0;padding-bottom:80px;} 
.home .intro .arrow{display:block;margin:0 auto;margin-bottom:20px;}
.home .intro p{font-size:16px;margin-bottom:20px;text-align: center;}
.home .introtc p{font-size:16px;margin-bottom:20px;text-align: left;}
.home .intro .btn-holder{font-size:0;position: relative;margin-top:40px;}
.home .intro .btn-holder:before{content:'';width:1px;height:100%;position: absolute;left:50%;top:0;background:#404040;opacity: 0.4;}
.home .intro .btn-holder .block{display:inline-block;vertical-align: top;width:50%;text-transform: capitalize;text-align: center;position: relative;}
.home .intro .btn-holder .block p{font-size:22px;font-weight: bold;}
.home .intro .btn-holder .block p span{display:inline-block;border-bottom:1px solid #404040;}
.home .intro .btn-holder .block .btn{display: inline-block;border: 2px solid #e63956;color: #e63956;position: relative;padding: 13px 20px;padding-right: 40px;max-width: 330px;width: 100%;}
.home .intro .btn-holder .block .btn span{font-size:16px;line-height: 21px;display: inline-block;font-weight: bold;}
.home .intro .btn-holder .block .btn:after{content:'>';position: absolute;top:50%;font-size:20px;right:15px;line-height: 20px;margin-top: -9px;font-weight: bold;}

.home .intro .btn-holder .block.left .btn{background:#e63956;color:#FFF;}

.home .promote{background:#30c5c2;padding:40px 0;color:#FFF;text-align: center;}
.home .promote h2{font-size:22px;margin-bottom:20px;}
.home .promote .item-holder{font-size:0;position: relative;margin-bottom:20px;}
.home .promote .item-holder .item{display:inline-block;vertical-align: top;padding:0 20px;width:33.33%;max-width:350px;}
.home .promote .item-holder .item img{max-width:100%;margin-bottom:10px;}
.home .promote .item-holder .item p{font-size:14px;max-width:100%;padding:0 20px;}

footer{padding:60px 0;font-size:0;}
footer .block{position: relative;display:inline-block;vertical-align: top;}
footer .block.icon{width:20%;left:80%;text-align: right;}
footer .block.icon a{display:inline-block;margin-left:10px;}
footer .block.copyright{width:80%;left:-20%;padding-right: 50px;}
footer .block.copyright p{font-size:12px;margin-bottom:10px;}

.tc .home .intro .btn-holder .block .btn span{font-weight: 400}

@media screen and (max-width: 1600px){
}
@media screen and (max-width: 1280px){
}
@media screen and (max-width: 1024px){
}
@media screen and (max-width: 768px){

	header{padding:10px 0;}
	header .logo{width:80px;vertical-align: middle;}
	header .logo img{width:100%;display:block;}
	header .lang{height:35px;margin-top:-17px;}
	header .lang a{width: 35px;height: 35px;font-size: 12px;padding-top: 8px;}
	.ios header .lang a{padding-top:10px;}
	header .lang a.lang-tc{font-size: 16px;padding-top: 3px;}

	.banner{height:500px;}
	.banner .bg-holder .male{width: 480px;top: auto;top: 25px;right: -90px;margin-top: 0;}

	.banner .text{text-align: center;font-size:25px;line-height: 30px;text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);}
	.banner .text h1 {font-size: 35px;line-height: 40px;}
	.banner .img-holder {text-align: center;}
	.banner .img-holder .item{margin-right:0;vertical-align:bottom;width:33.33%;}
	.banner .img-holder .item.item-1{}
	.banner .img-holder .item.item-2{}
	.banner .img-holder .item.item-3{left:-15px;}


	.home .intro .btn-holder{margin-top:0;}
	.home .intro .btn-holder::before{width:150px;height:1px;margin-left:-75px;top:50%;}
	.home .intro .btn-holder .block{width:100%;padding:40px 0;}
	.home .promote .item-holder .item{width:100%;max-width: auto;margin-bottom:20px;}

	footer .block.icon{width:100%;left:auto;text-align:center;margin-bottom:40px;}
	footer .block.icon a{margin:0 5px;}
	footer .block.copyright{width:100%;left:auto;padding:0px;}
}
@media screen and (max-width: 640px){
}
@media screen and (max-width: 480px){
}
@media screen and (max-width: 320px) {
}
@media screen and (orientation:landscape) and (max-width: 480px),screen and (orientation:landscape) and (max-width: 640px){
}


/**** for retina ****/
@media only screen and (-webkit-min-device-pixel-ratio: 2),
    only screen and (-o-min-device-pixel-ratio: 2),
    only screen and (min--moz-device-pixel-ratio: 2),
    only screen and (min-device-pixel-ratio:2) {

      

}