@charset "UTF-8";
@import url(https://fonts.googleapis.com/earlyaccess/notosanstc.css);
body {
 line-height:1;
}
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section { 
 display:block;
}
nav ul {
 list-style:none;
}
blockquote, q {
 quotes:none;
}
blockquote:before, blockquote:after,
q:before, q:after {
 content:'';
 content:none;
}
a {
 margin:0;
 padding:0;
 font-size:100%;
 vertical-align:baseline;
 background:transparent;
}
ins {
 background-color:#ff9;
 color:#000;
 text-decoration:none;
}
mark {
 background-color:#ff9;
 color:#000; 
 font-style:italic;
 font-weight:bold;
}
del {
 text-decoration: line-through;
}
abbr[title], dfn[title] {
 border-bottom:1px dotted;
 cursor:help;
}
table {
 border-collapse:collapse;
 border-spacing:0;
}
hr {
 display:block;
 height:1px;
 border:0; 
 border-top:1px solid #cccccc;
 margin:1em 0;
 padding:0;
}
input, select {
 vertical-align:middle;
}
/*--- reset.css ---end---*/
*{
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
header, section, footer{
	width: 100vw;
}
* a{
	text-decoration: none;
}
.wrapper > .left{
	width: 100%;
	max-width: 1170px;
	margin-left: auto;
	margin-right: auto;
	clear: both;
	position: relative;
}




	.colorBar{
		width: 100%;
	}
	.colorBar>div{
		width: 33.33%;
		float: left;
		height: .5em;
	}
	.colorBar>div:nth-child(1){ background: #E8BC63; }
	.colorBar>div:nth-child(2){ background: #2DA4D6; }
	.colorBar>div:nth-child(3){ background: #4673A9; }
header{
	left: 0;
	top: 0;
	width:100%;
	height:80px;
	z-index: 999;
	background: #FFF;
	box-shadow: 5px 5px 5px -5px #333;
}

header > .wrapper {
	width: 100%;

}
	header > #mailNav{
		display: inline-block;
	}

	header .logo-url{
		position: relative;
		left: 60px;
		top: 20px;
		z-index: 5000;
		width: 140px;
		height: 50px;
		background: url(https://hosting.url.com.tw/upload_images/20161222/url-logo.svg) no-repeat left top;
		background-size: contain;
		cursor: pointer;
		display: inline-block;
	}
	header .logo-10m2016{
		position: absolute;
		left: 45%;
		width: 10%;
		display: inline-block;
	}
	header .logo-10m2016 img{
		width: 100%;
		background: #FFF;
		border-radius: 50%;
		padding: 5%;
	}
	
	header nav {
		float: right;
		display:inline-block
	}
	
	header nav>ul{
		list-style: none;
		padding: .5em 0;
	}
	header nav>ul>li{
		display: inline-block;
		padding: 1.1em .5em;
	}
	header nav>ul>li{ color: #333; }
		header nav>ul>li:last-child{
			position: relative;
			padding-left: 23px;
		}
		header nav>ul>li:last-child>a{
			color: #EA5504;
		}
		header nav>ul>li:last-child::before{
			display: block;
			position: absolute;
			content:" ";
			width: 20px;
			height: 20px;
			left: 0;
			margin: 0 .2em 0 0;
			background: url(https://hosting.url.com.tw/upload_images/20161222/icon/shopping-cart.svg) no-repeat top center;
		}
	header nav>ul>li:hover{
		color: #FFF;
		cursor: pointer;
	}
	header nav>ul>li:nth-child(1):hover{
		background: #E8BC63;
	}
	header nav>ul>li:nth-child(2):hover{
		background: #2DA4D6;
	}
	header nav>ul>li:nth-child(3):hover{
		background: #4673A9;
	}
	header nav>ul>li:last-child:hover{
		color: #EA5504;
	}
	header .logo-10m2016, header .logo-10m2016 img, header nav>ul, header .logo-url, .s1 .goTos1, .s1>ol>li, .s3 .joinUs-btn, footer h6, footer .goTop, .s1>ul>li:nth-child(1){
		transition: all .1s ease;
	}
	
	header.sticky{
		height:55px;
	}
	
	header.sticky .logo-10m2016{
		left: 47.5%;
		width: 5%;
	}
	header.sticky .logo-10m2016 img{
		padding: .2em 0 0 0;
	}
	header.sticky nav>ul{
		padding: 0;
	}
	header.sticky .logo-url{
		top: 12px;
	}
/*section 1-3*/
	/*-wildBg-*/
	.s1{
		width: 100%;
		height: 100vh;
		background: url(https://hosting.url.com.tw/upload_images/20161222/bg/OB824U0.jpg) no-repeat top center; /*-Photo from: http://www.freepik.com"=>Designed by Jcomp / Freepik-*/
		background-size: cover;
		padding-top: 30vh;
		text-align: center;
	}
		.s1 h1, h2{
			font-size: 3em;
			line-height: 1.3em;
			letter-spacing: 3px;
			color: #FFF;
			text-shadow: 2px 2px 5px #333;
		}
		.s1 h2{
			border-top: 1px solid #FFF;
			border-bottom: 1px solid #FFF;
			width: 310px;
			margin-left: auto;
			margin-right: auto;
		}
		.s1 .goTos1{
			margin-top: 2em;
			width: 40px;
			height: 40px;
			margin-left: auto;
			margin-right: auto;
			padding: 10px;
			border: 2px solid #FFF;
			border-radius: 50%;
			cursor: pointer;
			box-shadow: 5px 5px 5px -5px #333;
		}
		.s1 .goTos1:hover{
			transform: scale(1.25);
		}
		.s1 .goTos1>svg{
			width: 100%;
			fill: #FFF;
		}
		.s1>ul{ 
			display: block;
			width: 50%;
			max-width: 800px;
			height: auto;
			margin-top: 5em;
			margin-left: auto;
			margin-right: auto;
			list-style: none;
		}
		.s1>ul>li:nth-child(1){
			padding: 1em;
			border-radius: .5em;
			box-shadow: 5px 5px 5px -5px #333;
			background: #FFF;
		}
		.s1>ul>li:nth-child(1):hover{
			cursor: pointer;
			transform: scale(1.1);
		}
		.s1>ul>li:nth-child(1)>img{
			width: 100%;
		}
		.s1 ul>li:nth-child(2){ 
			display: none; 
		}
	.s2, .s3{
		width: 100%;
		padding: 1.5em 0;
	}
	/*-listBlock-*/
	.s2{
		box-shadow: 0 -5px 5px -5px #333;
	}
	.s2 ul{
		width: 100%;
		list-style: none;
	}
		ul.standard{}
			ul.standard>li>.head{ background: #E8BC63; }
			ul.standard>li>ul>li:nth-child(1)>button{ background: #E8BC63; }
		ul.advanced{}
			ul.advanced>li>.head{ background: #2DA4D6; }
			ul.advanced>li>ul>li:nth-child(1)>button{ background: #2DA4D6; }
		ul.customized{}
			ul.customized>li>.head{ background: #4673A9; }
			ul.customized>li>ul>li:nth-child(1)>button{ background: #4673A9; }
	.s2 ul>li{
		display: block;
		float: left;
		width: 25%;
		padding: .5em 1em 1em;
	}
	.s2 ul>li:hover > figure>img{
		transform: scale(1.5);
		opacity: .9;
	}
	.s2 ul>li:hover > figure>figcaption a{
		text-shadow: 2px 2px 5px #333;
	}
		.s2 ul>li:nth-child(4n+1){
			clear: both;
		}
	.s2 ul>li>.head{
		width: 100%;
		height: 3em;
		position: relative;
		color: #FFF;
	}
	.s2 ul>li>.head>.title, .s2 ul>li>.head>.number{
		position: absolute;
		top: 1em;
	}
		.s2 ul>li>.head>.title{ left: 1em; }
		.s2 ul>li>.head>.number{ right: 1em; }
			.s2 ul>li>.head>.number::before{
				display: inline-block;
				content: "No.";
			}
			.s2 ul.customized>li>.head>.number::before{
				display: none;
			}
			.s2 ul.customized>li>.head>.number{
				border: 1px solid #FFF;
				border-radius: .5em;
				padding: .5em;
				font-size: .8em;
			}
	.s2 ul>li>figure{
		position: relative;
		display: block;
		width: 100%;
		height: 9em;
		background: #000;
		overflow: hidden;
	}
	.s2 ul>li>figure>img{
		width: 100%;
		opacity: .5;
		transition: all 1s ease;
	}
	.s2 ul>li>figure>figcaption{
		position: absolute;
		left: 0;
		top: 38%;
		width: 100%;
		text-align: center;
		letter-spacing: 1px;
		font-size: 1.2em;
	}
	.s2 ul>li>figure>figcaption a{
		width: 100%;
		padding: .5em;
		color: #FFF;
	}
	.s2 ul>li>figure>h5{
		position: absolute;
		right: 0;
		bottom: 0;
		color: #666;
		font-size: .7em;
		font-weight: normal;
		padding: .5em;
		margin: .5em;
		background: #EEE;
	}
	.s2 ul>li>.discrption{
		width: 100%;
		height: auto;
		background: #FFF;
		padding: 1.1em 1em .5em;
	}
	.s2 ul>li>.discrption p{
		font-size: .9em;
		line-height: 1.3em;
		text-align: justify;
		text-justify:inter-ideograph;
	}
	.s2 ul>li>ul{
		width: 100%;
		height: 3em;
		background: #FFF;
	}
	.s2 ul>li>ul>li{
		margin: 0;
		padding: 0;
		display: inline-block;
		width: 49%;
		padding: .5em 0 0 0;
	}
	.s2 ul>li>ul>li>button{
		display: block;
		width: 88%;
		margin-left: auto;
		margin-right: auto;
		height: 2em;
		border-radius: 1em;
		outline: none;
		cursor: pointer;
	}
		.s2 ul>li>ul>li:nth-child(1)>button{
			/*background: #E8BC63;*/
			border: 0;
			color: #FFF;
		}
		.s2 ul>li>ul>li:nth-child(2)>button{
			background: #FFF;
			border: 1px solid #333;
			color: #333;
		}
	/*-contribute-*/
	.s3{
		clear: both;
		padding: 3em 0;
	}
	.s3 .joinUs-btn{
		width: 30%;
		max-width: 400px;
		margin-left: auto;
		margin-right: auto;
		text-align: center;
		background: #E95504; 
		opacity: .8;
		border-radius: .5em;
	}
	.s3 .joinUs-btn:hover{
		opacity: .9;
		box-shadow: 5px 5px 5px -5px #333;
	}
	.s3 .joinUs-btn>h6>a{
		color: #FFF;
		line-height: 3em;
	}
	.s3 .joinUs-btn:hover, footer .goTop:hover{
		transform: scale(1.2);
	}
footer{
	background: #FFF;
	text-align: center;
	line-height: 1.5em;
	position: relative;
}
footer h6{
	padding: 3em 0;
}
footer h6>a{
	font-size: 1.5em;
	color: #333;
}
footer h6>a:hover{
	color: #E95504;
}
footer h6::before{
	display: block;
	content: " ";
	width: 200px;
	height: 100px;
	margin-left: auto;
	margin-right: auto;
	background: url(https://hosting.url.com.tw/upload_images/20161222/icon/customer-service.svg) no-repeat top center;
}
footer .goTop{
	position: absolute;
	right: 0;
	top: -50px;
	width: 50px;
	height: 50px;
	background: #FFF;
	padding: 15px;
	fill: #333;
	cursor: pointer;
}
footer .goTop svg{
	width: 100%;
}
footer .goTop:hover{
	fill: #E95504;
}

@media (min-width: 970px) and (max-width: 1169px) {
	.wrapper{
		max-width: 970px;
	}
	header .logo-10m2016{
		position: absolute;
		top:7%;
		left: 45%;
		width: 10%;
	}
	header .logo-10m2016 img{
		padding: 0;
	}
	header.sticky .logo-10m2016{
		position: absolute;
		left: 46%;
		width: 8%;
		top:6.5%;
	}
	.s2 ul>li{
		width: 33.33%;
	}
		.s2 ul>li:nth-child(4n+1){
			clear: none;
		}
		.s2 ul>li:nth-child(3n+1){
			clear: both;
		}
}

@media (min-width: 801px) and (max-width: 969px) {
	.wrapper{
                max-width: 750px;
        }
        header .logo-url{
                top: 22px;
                width: 100px;
        }
        header .logo-10m2016{
                position: absolute;
                top: 6%;
                left: 45%;
                width: 10%;
        }
        header .logo-10m2016 img{
                padding: 0;
        }
	header.sticky .logo-10m2016{
                position: absolute;
                top: 5.5%;
                left: 46%;
                width: 8%;
        }
        header nav>ul>li{
                font-size: .9em;
                padding: 1.1em .5em;
        }
        header nav>ul>li:last-child{
                display: none;
        }
        .s1{
                height: 100vh;
        }
        .s1 h1, h2{
                font-size: 2em;
        }
        .s1 h2{
                width: 215px;
        }
        .s1 .goTos1{
                margin-top: 1em;
                width: 30px;
                height: 30px;
                padding: 5px;
        }
        .s1>ul{
                width: 100%;
                max-width: 500px;
                margin-top: 4em;
        }
	.s1>ul>li:nth-child(2){
                display: block;
                width: 45%;
                margin-left: auto;
                margin-right: auto;
                margin-top: 2em;
                background: rgba(0,0,0,.4);
                line-height: 2.5em;
                border: 1px solid #FFF;
                border-radius: 1.5em;
        }
        .s1>ul>li:nth-child(2) a{
                color: #FFF;
        }
        .s2 ul>li{
                width: 50%;
        }
                .s2 ul>li:nth-child(4n+1){
                        clear: none;
                }
                .s2 ul>li:nth-child(2n+1){
                        clear: both;
                }
        .s3 .joinUs-btn{
                width: 50%;
                max-width: 400px;
        }
}

@media (min-width: 750px) and (max-width: 800px) {
	.wrapper{
		max-width: 750px;
	}
	header .logo-url{
		top: 22px;
		width: 100px;
	}
	header .logo-10m2016{
		position: absolute;
		top: 4.3%;
		left: 45%;
		width: 10%;
	}
	header .logo-10m2016 img{
		padding: 0;
	}
	header.sticky .logo-10m2016{
		position: absolute;
		top: 3.7%;
		left: 46%;
		width: 8%;
	}
	header nav>ul>li{
		font-size: .9em;
		padding: 1.1em .5em;
	}
	header nav>ul>li:last-child{
		display: none;
	}
	.s1{
		height: 100vh;
	}
	.s1 h1, h2{
		font-size: 2em;
	}
	.s1 h2{
		width: 215px;
	}
	.s1 .goTos1{
		margin-top: 1em;
		width: 30px;
		height: 30px;
		padding: 5px;
	}
	.s1>ul{ 
		width: 100%;
		max-width: 500px;
		margin-top: 4em;
	}
	.s1>ul>li:nth-child(2){
		display: block;
		width: 45%;
		margin-left: auto;
		margin-right: auto;
		margin-top: 2em;
		background: rgba(0,0,0,.4);
		line-height: 2.5em;
		border: 1px solid #FFF;
		border-radius: 1.5em;
	}
	.s1>ul>li:nth-child(2) a{
		color: #FFF;
	}
	.s2 ul>li{
		width: 50%;
	}
		.s2 ul>li:nth-child(4n+1){
			clear: none;
		}
		.s2 ul>li:nth-child(2n+1){
			clear: both;
		}
	.s3 .joinUs-btn{
		width: 50%;
		max-width: 400px;
	}
}
@media (max-width: 749px) {
	.wrapper{
		max-width: 100vw;
	}
		.colorBar>div{
			height: .3em;
		}
		header .logo-url{
			left: 5px;
			top: -2px;
			width: 22px;
			height: 50px;
			background-size: 90px 50px; 
		}
		header .logo-10m2016{
			left: 42%;
			top:2.8%;
			width: 16%;
		}
		header .logo-10m2016 img{
			background: #FFF;
			padding: .1em;
		}
		header nav>ul{
			padding: .5em 0 1em;
			font-size: .9em;
		}
		header nav>ul>li{
			padding: .6em .3em;
		}
			header nav>ul>li:last-child{
				display: none;
			}
		header {
			height:70px;
		}
		
		header.sticky .logo-10m2016{
			left: 44%;
			top:2.5%;
			width: 12%;
		}
		header.sticky .logo-10m2016 img{
			padding: 0;
		}
		header.sticky nav>ul{
			padding: 0 0 1.5em;
		}
		header.sticky .logo-url{
			top: -7px;
		}
	/*section 1-3*/
		/*-wildBg-*/
		.s1{
			height: 100vh;
		}
			.s1 h1, h2{
				font-size: 2em;
			}
			.s1 h2{
				width: 215px;
			}
			.s1 .goTos1{
				margin-top: 1em;
				width: 30px;
				height: 30px;
				padding: 5px;
			}
			.s1>ul{ 
					width: 100%;
					max-width: 400px;
					margin-top: 2em;
				}
				.s1>ul>li:nth-child(1){
					padding: .3em;
				}
				.s1>ul>li:nth-child(2){
					display: block;
					width: 45%;
					margin-left: auto;
					margin-right: auto;
					margin-top: 2em;
					background: rgba(0,0,0,.4);
					line-height: 2.5em;
					border: 1px solid #FFF;
					border-radius: 1.5em;
				}
				.s1>ul>li:nth-child(2) a{
					color: #FFF;
				}
		/*-listBlock-*/
		.s2 ul>li{
			float: none;
			width: 100%;
			padding: .5em 2em 1em;
		}
		/*-contribute-*/
		.s3{
			padding: 1em 0;
		}
		.s3 .joinUs-btn{
			width: 100%;
			max-width: 300px;
		}
	footer h6>a{
		font-size: 1.2em;
	}
	footer .goTop{
		position: absolute;
		right: 10px;
		top: 10px;
		width: 50px;
		height: 50px;
		background: #EEE;
		padding: 15px;
		fill: #333;
		cursor: pointer;
	}
		.s2 ul>li>.discrption{
			display: none;
		}
		.s2 ul>li>ul>li{
		padding: .7em 0 0 0;
	}
}