/**
 * Page name
 * Copyright 2018
 * Author
 * Licensed 
 */
/*------------------------------------*\
    Content
\*------------------------------------*/
/**
 * Content............You're reading it!
 * Globel...............Set common style
 * Layout...........Set grid
 * Components...........Set components styles
 */
 
 
/*------------------------------------*\
    Globel
\*------------------------------------*/
@charset 'UTF-8';

*{
	position: relative;
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
}
html, body{
	font-family: "Raleway",'Arial','微軟正黑體', sans-serif;
}

.cursor-type{
	cursor: 
	-webkit-image-set( url(../images/Common/cursor-1.png) 1x) 24 24, auto;
}
.cursor-type:active{
	cursor: -webkit-image-set( url(../images/Common/cursor-2.png) 1x) 24 24, auto;
}

h1,h2,h3,h4,h5,h6,p{
	font-family: "Raleway",'Arial','微軟正黑體', sans-serif;
	margin: 0;
	padding: 0;
}
ul{
	list-style: none;
	margin: 0;
	padding: 0;
}
a{
	text-decoration: none;
	color: #333;
	-webkit-user-drag: none;
	-webkit-user-select: none;
	   -moz-user-select: none;
	    -ms-user-select: none;
	        user-select: none;
	outline: none;
}
/*Typography*/
h1{
	font-size: 72px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 5px;
}
h2{
	font-size: 48px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 5px;
}
h3{
	font-size: 26px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 3px;
}
h4{
	font-size: 20px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: 3px;
}
h5{
	font-size: 18px;
	font-weight: 500;
	line-height: 1;
	/*letter-spacing: 2px;*/
}
h6{
	font-size: 14px;
	font-weight: 500;
	line-height: 1;
	/*letter-spacing: 1px;*/
}
p{
	font-size: 20px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: normal;
}

.color--white{
	color: #F3F4F5;
}
.color--light-grey-1{
	color: #BFBFBF;
}
.color--light-grey-2{
	color: #999999;
}
.color--black{
	color: #1A1A1A;
}
.color--dark-grey-1{
	color: #333333;
}
.color--dark-grey-2{
	color: #808080;
}

.bg-black{
	background-color: #191919;
}
.bg-white{
	background-color: #fefefe;
}


/*------------------------------------*\
    Layout
\*------------------------------------*/


/*hero*/
.hero{
	padding-top: 100px;
	padding-bottom: 100px;
	overflow: hidden;
}
.hero-npb{
	padding-bottom: 0 !important;
}
.hero.hero-bg-white{
	background-color: #fefefe;
}
.hero.hero-bg-grey{
	/*background-color: #D8D8D8;*/
	background-color: #D9D9D9;
}
.hero.hero-bg-dark{
	background-color: #191919;
}
@media (max-width: 800px){
	.hero{
		padding-top: 80px;
		padding-bottom: 80px;
	}
}
@media (max-width: 600px){
	.hero{
		padding-top: 80px;
		padding-bottom: 80px;
	}
}

/*contianer*/
.container{
	/*width: 1200px;*/
	max-width: 1200px;
	/*width: 70%;*/
	margin: 0 auto;
	padding-left: 16px;
	padding-right: 16px;
	/*border: 1px solid #ccc;*/

	overflow: hidden;
}

.nav{
	width: 50%;
	/*border: 1px solid #000000;*/
}

.row,.row-portfolio{
	/*border: 1px solid #000;*/
/*	margin-left: -16px;
	margin-right: -16px;*/
}
.row:after,
.row-portfolio:after{
	content: '';
	display: block;
	clear: both;
}
.row-nm{
	margin: 0;
}

.col-1-1,.col-1-2,.col-1-3,.col-2-3,.col-1-4,.col-1-6,.col-1-12,.col-40,
.col-md-2,.col-md-4,
.col-sm-6,.col-sm-12,
.col-sm-about-12{
	/*border: 1px solid red;*/
	float: left;
	/*padding: 2px 2px;*/
/*	padding-left: 4px;
	padding-right: 4px;*/
	-webkit-transition: all 0.5s;
	-o-transition: all 0.5s;
	transition: all 0.5s;
}

.col-1-1{
	width: 100%;
}
.col-1-2{
	width: 50%;
}
.col-1-3{
	width: 33.3333333%;
}
.col-2-3{
	width: 66.6666666%;
}
.col-1-4{
	width: 25%;
}
.col-1-6{
	width: 16.6666666%;
}
.col-1-12{
	width: 8.3333333%;
}
.col-40{
	width: 40%;
}

.row-portfolio .col-1-4.col-lg-active{
	width: 25%;
}
.row-portfolio .col-1-4.col-md-active{
	width: 12.5%;
}
.row-portfolio .col-1-4.col-sm-active{
	width: 8.3333333%;
}

@media (max-width: 900px){
	.col-sm-about-12{
		width: 100%;
	}
}

@media (max-width: 800px){
	.col-md-2{
		width: 16.6666666%;
	}
	.col-md-4{
		width: 33.3333333%;
	}
	.row-portfolio .col-1-4.col-lg-active{
		width: 33.3333333%;
	}
	.row-portfolio .col-1-4.col-md-active{
		width: 16.6666666%;
	}
	.row-portfolio .col-1-4.col-sm-active{
		width: 11.1111111%;
	}
}

@media (max-width: 600px){
	.col-sm-6{
		width: 50%;
	}
	.col-sm-12{
		width: 100%;
	}
	.row-portfolio .col-1-4.col-lg-active{
		width: 50%;
	}
	.row-portfolio .col-1-4.col-md-active{
		width: 25%;
	}
	.row-portfolio .col-1-4.col-sm-active{
		width: 16.6666666%;
	}
}


/*col padding*/
.col-p-2{
	padding: 2px;
}
.col-p-10{
	padding: 10px;
}


/*------------------------------------*\
    Components
\*------------------------------------*/

/*btn*/
.btn{
	display: inline-block;
	vertical-align: middle;
	font-size: 16px;
	line-height: 24px;
	padding: 4px 16px;
	/*border: 1px solid #fff;*/

	border-radius: 4px;
	cursor: pointer;

	-webkit-transition: all 0.3s;

	-o-transition: all 0.3s;

	transition: all 0.3s;
}

.btn-position{
	margin-top: 16px;
}

/*主要按鈕*/
.btn.btn-primary{
	background-color: #F3F4F5;
	/*border: 1px solid #d5a26f;*/
	color: #1A1A1A;
}
.btn.btn-primary:hover{
	background-color: #1A1A1A;
	/*border: 1px solid #b2875c;*/
	color: #F3F4F5;
}
/*2nd按鈕*/
.btn.btn-secondary{
	background-color: #1A1A1A;
	/*border: 1px solid #d5a26f;*/
	color: #F3F4F5;
}
.btn.btn-secondary:hover{
	background-color: #F3F4F5;
	color: #1A1A1A;
}
/*3rd按鈕*/
.btn.btn-third{
	background-color: #4D4D4D;
	/*border: 1px solid #d5a26f;*/
	color: #F3F4F5;
}
.btn.btn-third:hover{
	background-color: #1A1A1A;
	color: #F3F4F5;
}
/*4rd按鈕 for travel ver*/
.btn.btn-four{
	background-color: #4D4D4D;
	/*border: 1px solid #d5a26f;*/
	color: #F3F4F5;
}
.btn.btn-four:hover{
	background-color: #F3F4F5;
	color: #1A1A1A;
}

@media (max-width: 900px){
	.btn.btn-primary:hover{
		background-color: #F3F4F5;
		color: #1A1A1A;
	}
	.btn.btn-secondary:hover{
		background-color: #1A1A1A;
		color: #F3F4F5;
	}
	.btn.btn-four:hover{
		background-color: #4D4D4D;
		color: #F3F4F5;
	}
}
/*input按鈕*/
.input-btn{
	display: block;
	margin: 0 auto;
	padding: 12px 24px;
	
	font-family: 'Raleway', sans-serif;
	font-size: 16px;
	line-height: 16px;
	color: #F3F4F5;

	background-color: transparent;
	border: 1px solid #808080;
	border-radius: 4px;
	cursor: not-allowed;

	-webkit-transition: all 0.3s;

	-o-transition: all 0.3s;

	transition: all 0.3s;
}
.input-btn:focus{
	outline:none;
}
.input-btn:hover{
	background-color: rgba(0,0,0,0.5);
}

/*按鈕大小設定*/
.btn.btn-lg{
	padding: 4px 32px;
}

@media (max-width: 600px){
	.btn{
		font-size: 12px;
		line-height: 16px;
		padding: 4px 12px;
	}
	.btn-position{
		margin-top: 10px;
	}
	.input-btn{
		font-size: 12px;
	}
}

/*Return top btn*/
.sup-item{
	position: fixed;
	right: 15px;
	bottom: 15px;
	width: 40px;
	height: 40px;
	border-radius: 4px;
	z-index: 399;
	background-color: rgba(0,0,0,0.2);
	opacity: 0;
	visibility: hidden;
	-webkit-transition: all 0.3s;
	-o-transition: all 0.3s;
	transition: all 0.3s;
}
.sup-item:hover{
	background-color: rgba(0,0,0,0.3);
}
.sup-item.active{
	opacity: 1;
	visibility: visible;
}
.sup-link{
	background-image: url(../images/Common/arrow-U-W.png);
	display: block;
	width: 60%;
	height: 60%;
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%,-50%);
	    -ms-transform: translate(-50%,-50%);
	        transform: translate(-50%,-50%);
}


 /*------------------------------------*\
 	NAVBAR
 \*------------------------------------*/
.navbar{
	/*border: 1px solid #FF0000;*/
	/*background-color: #000000;*/
	width: 100%;
	height: 64px;

	/*固定導覽列*/
	position: fixed;
	top: 0;
	left: 0;
	z-index: 500;
	width: 100%;

	/*box-shadow: 0 4px 10px rgba(0,0,0,0.5), 0 2px 6px rgba(0,0,0,0.5);*/
	/*opacity: 0.95;*/
	-webkit-transition: all 0.3s;
	-o-transition: all 0.3s;
	transition: all 0.3s;
}

.navbar.active-black{
	background-color: #000000;
	-webkit-box-shadow: 0 4px 10px rgba(0,0,0,0.5), 0 2px 6px rgba(0,0,0,0.5);
	        box-shadow: 0 4px 10px rgba(0,0,0,0.5), 0 2px 6px rgba(0,0,0,0.5);
	/*opacity: 0.95;*/
}
.navbar.active-white{
	background-color: #FFFFFF;
	-webkit-box-shadow: 0 4px 10px rgba(0,0,0,0.5), 0 2px 6px rgba(0,0,0,0.5);
	        box-shadow: 0 4px 10px rgba(0,0,0,0.5), 0 2px 6px rgba(0,0,0,0.5);
	/*opacity: 0.95;*/
}

.navbar h1{
	color: #FFFFFF;
	font-size: 24px;
}

.nav-center{
	text-align: center;
}

.nav-right{
	padding-right: 20px;
	/*width: */
}

.nav-right .nav-item{
	float: right;
}

.navbar .nav-diagram .nav.nav-center .nav-item{
	/*區塊內以左往右排列*/
	/*float: right;*/
	display: inline-block;
}

.nav-diagram{
	float: right;
	/*margin: 0 auto;*/
	width: 66.6666666%;
}

.nav-diagram .nav.nav-right{
	float: right;
	/*margin: 0 auto;*/
}
/*brand logo*/
.navbar .brand{
	display: inline-block;
	width: 48px;
	height: 48px;
    margin-top: 8px;
    margin-left: 32px;
    margin-right: 12px;

    background-image: url(../images/Common/brand-logo-dark.png);

	white-space: nowrap;
	text-indent: 100%;
	overflow: hidden;

	-webkit-transition: all 0.3s;

	-o-transition: all 0.3s;

	transition: all 0.3s;
}
.navbar .brand.active-white{
    background-image: url(../images/Common/brand-logo-light.png);
}


/*nav-link*/
.nav-link{
	display: block;
	/*border: 1px solid red;*/
	/*line-height: 24px;*/

	line-height: 24px;
	padding: 20px 16px;
	font-size: 16px;

	/*color: #808080;*/
	color: #1A1A1A;

	-webkit-transition: all 0.3s;

	-o-transition: all 0.3s;

	transition: all 0.3s;
}
.nav-link.active{
	color: #808080;
}
.nav-link.active-black{
	color: #1A1A1A;
}

.nav-link:hover{
	color: #F3F4F5;
}
/*JS*/
.nav-item.shift .nav-link,
.nav-item.shift .nav-link.active{
	color: #F3F4F5;
}
.nav-item.shift-W .nav-link,
.nav-item.shift-W .nav-link.active{
	color: #BFBFBF;
}
/*///*/
.nav-link.active-black:hover{
	color: #BFBFBF;
}

.nav-link.active:after,
.nav-link.active-black:after{
	content: '';
	display: inline-block;
	width: 0px;
	height: 5px;
	background-color: #000000;
	
	position: absolute;
	bottom: 0;
	right: 0;

	-webkit-transition: all 0.01s;

	-o-transition: all 0.01s;

	transition: all 0.01s;
}
.nav-link.active:hover:after{
	width: 100%;
	background-color: #F3F4F5;
}
.nav-link.active-black:hover:after{
	width: 100%;
	background-color: #BFBFBF;
}


.nav-link-web{
	/*border: 1px solid red;*/
	display: inline-block;
	vertical-align: top;
	width: 24px;
	height: 24px;
	margin: 20px 12px;
    /*padding: 0px 32px;*/

	white-space: nowrap;
	text-indent: 100%;
	overflow: hidden;

	-webkit-transition: all 0.3s;

	-o-transition: all 0.3s;

	transition: all 0.3s;
}


.nav-link-web.FB{
	background-image: url('../images/Common/Facebook logo-B.png');
}
.nav-link-web.Pin{
	background-image: url('../images/Common/Pinterest logo-B.png');
}
.nav-link-web.Be{
	background-image: url('../images/Common/Behance logo-B.png');
}

.nav-link-web.active.FB{
	background-image: url('../images/Common/Facebook logo-G.png');
}
.nav-link-web.active.Pin{
	background-image: url('../images/Common/Pinterest logo-G.png');
}
.nav-link-web.active.Be{
	background-image: url('../images/Common/Behance logo-G.png');
}

.nav-link-web.color-dark.FB{
	background-image: url('../images/Common/Facebook logo-B.png');
}
.nav-link-web.color-dark.Pin{
	background-image: url('../images/Common/Pinterest logo-B.png');
}
.nav-link-web.color-dark.Be{
	background-image: url('../images/Common/Behance logo-B.png');
}

.nav-link-web.color-light.FB{
	background-image: url('../images/Common/Facebook logo-G.png');
}
.nav-link-web.color-light.Pin{
	background-image: url('../images/Common/Pinterest logo-G.png');
}
.nav-link-web.color-light.Be{
	background-image: url('../images/Common/Behance logo-G.png');
}

.nav-link-web.FB:hover{
	background-image: url('../images/Common/Facebook logo-W.png');
}
.nav-link-web.Pin:hover{
	background-image: url('../images/Common/Pinterest logo-W.png');
}
.nav-link-web.Be:hover{
	background-image: url('../images/Common/Behance logo-W.png');
}
.nav-link-web.color-dark.FB:hover{
	background-image: url('../images/Common/Facebook logo-G.png');
}
.nav-link-web.color-dark.Pin:hover{
	background-image: url('../images/Common/Pinterest logo-G.png');
}
.nav-link-web.color-dark.Be:hover{
	background-image: url('../images/Common/Behance logo-G.png');
}

/*.nav.nav-popup{
	position: fixed;
	width: 100%;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
	display: flex;
	flex-direction: column;

	justify-content: center;
	text-align: center;
	opacity: 0;
	visibility: hidden;
}*/

@media (max-width: 1200px){
	.navbar{
		height: 56px;
	}
	.navbar .brand{
		width: 32px;
		height: 32px;
	    margin-top: 12px;
	    margin-left: 12px;
	}
	.nav-center{
		width: 44%;
	}
	
	.nav-right{
		width: 28%;
	}
	.navbar .nav .nav-link{
		line-height: 18px;
		padding: 19px 6px;
		font-size: 12px;
	}
	.nav-link-web{
		width: 18px;
		height: 18px;
		margin: 19px 12px;
		/*padding: 16px;*/
	}
}
@media (max-width: 900px){
	.navbar{
		height: 64px;
	}
	.navbar .brand{
		width: 40px;
		height: 40px;
	    margin-top: 12px;
	    margin-left: 12px;
	}

	.navbar .nav-diagram{
		/*display: none;*/
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		padding: 0;
		background-color: black;
		z-index: 500;

		opacity: 0;
		visibility: hidden;
		-webkit-transition: all 0.3s;
		-o-transition: all 0.3s;
		transition: all 0.3s;
	}

	.navbar .nav-diagram.active{
		opacity: 1;
		visibility: visible;
	}
	.navbar .nav-diagram.active .nav-link{
		color: #808080;
	}
	.navbar .nav-diagram.active .nav-link:hover{
		color: #F3F4F5;
    }
    /*for design*/
    .navbar .nav-item.shift .nav-link.active,
    .navbar .nav-item.shift .nav-link{
    	color: #F3F4F5;
    }
    /*for travel*/
    .navbar .nav-item.shift-W .nav-link.active,
    .navbar .nav-item.shift-W .nav-link{
    	color: #F3F4F5;
    }

	.nav-right{
		position: fixed;
		padding: 0;
		width: 100%;
		height: 100%;
		left: 0%;
		top: 0%;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: horizontal;
		-webkit-box-direction: reverse;
		    -ms-flex-direction: row-reverse;
		        flex-direction: row-reverse;
		-webkit-box-pack: center;
		    -ms-flex-pack: center;
		        justify-content: center;
	}

	.navbar .nav.nav-right .nav-item{
		top: 85%;
	}
	.navbar .nav.nav-center{
		position: fixed;
		width: 100%;
		left: 50%;
		top: 50%;
		-webkit-transform: translate(-50%,-50%);
		    -ms-transform: translate(-50%,-50%);
		        transform: translate(-50%,-50%);

		display: -webkit-box;

		display: -ms-flexbox;

		display: flex;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		    -ms-flex-direction: column;
		        flex-direction: column;
	}
	
	.navbar .nav .nav-link{
		font-size: 20px;
		margin: 10px 0;
	}

	.navbar .nav-diagram .nav.nav-center .nav-link:after{
		display: none;
	}
	
	/*utility*/
	.nav-link-web{
		width: 28px;
		height: 28px;
		/*margin: 0 12px;*/
		/*padding: 24px;*/
	}
}


/*menu toggle*/
.menu-toggle{
	display: none;
	width: 48px;
	height: 48px;
	/*border: 1px solid white;*/
	float: right;
	margin-top: 8px;
	margin-right: 4px;
	/*position: */
	z-index: 600;
	cursor: pointer;
}

@media (max-width: 900px){
	.menu-toggle{
		display: block;
	}
}

.menu-toggle span{
	display: block;
	width: 32px;
	height: 2px;
	background-color: #1A1A1A;
	position: absolute;
	left: 50%;
	-webkit-transform: translate(-50%,0);
	    -ms-transform: translate(-50%,0);
	        transform: translate(-50%,0);
	-webkit-transition: all 0.3s;
	-o-transition: all 0.3s;
	transition: all 0.3s;
}

.menu-toggle.color-light span{
	background-color: #BFBFBF;
}
.menu-toggle.color-dark span{
	background-color: #1A1A1A;
}

.menu-toggle.active span{
	background-color: #BFBFBF;
}

.menu-toggle span:nth-child(1){
	top: 12px;
}
.menu-toggle.active span:nth-child(1){
	top: 50%;
	-webkit-transform: translate(-50%,-50%) rotate(45deg);
	    -ms-transform: translate(-50%,-50%) rotate(45deg);
	        transform: translate(-50%,-50%) rotate(45deg);
}
.menu-toggle span:nth-child(2){
	top: 22px;
}
.menu-toggle.active span:nth-child(2){
	opacity: 0;
}
.menu-toggle span:nth-child(3){
	top: 32px;
}
.menu-toggle.active span:nth-child(3){
	top: 50%;
	-webkit-transform: translate(-50%,-50%) rotate(-45deg);
	    -ms-transform: translate(-50%,-50%) rotate(-45deg);
	        transform: translate(-50%,-50%) rotate(-45deg);
}

/*close btn*/
.close-btn{
	display: none;
	width: 48px;
	height: 48px;
	/*border: 1px solid white;*/
	position: absolute;
	top: 8px;
	right: 4px;
}
@media (max-width: 900px){
	.close-btn{
		display: block;
	}
}

.close-btn span{
	width: 40px;
	height: 2px;
	position: absolute;
	background-color: #BFBFBF;
	top: 50%;
	left: 50%;
}
.close-btn span:nth-child(1){
	-webkit-transform: translate(-50%, -50%) rotate(45deg);
	    -ms-transform: translate(-50%, -50%) rotate(45deg);
	        transform: translate(-50%, -50%) rotate(45deg);
}
.close-btn span:nth-child(2){
	-webkit-transform: translate(-50%, -50%) rotate(-45deg);
	    -ms-transform: translate(-50%, -50%) rotate(-45deg);
	        transform: translate(-50%, -50%) rotate(-45deg);
}

 /*------------------------------------*\
 	JUMBOTRON
 \*------------------------------------*/
.jumbotron{
	width: 100%;
	height: 100vh;
	/*background-color: #A8A8A8;*/
    overflow: hidden;
}

.jumbotron-video{
	opacity: 0;
}
.ani-jbt-video{
	-webkit-animation: jumbotron-video 3s 2.5s forwards;
	        animation: jumbotron-video 3s 2.5s forwards;
}
@-webkit-keyframes jumbotron-video{
	0%{opacity: 0;}
	100%{opacity: 1;}
}
@keyframes jumbotron-video{
	0%{opacity: 0;}
	100%{opacity: 1;}
}

.jumbotron-video .video-setting{
	/*width: 100%;*/
	height: 100vh;


    display: block;
    margin: 0 auto;
}

.jumbotron-image-block{
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
}

.jumbotron-image{
	z-index: 400;
	
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.ani-jbt-image{
	-webkit-animation: jumbotron-image 3s 0.5s ease both;
	        animation: jumbotron-image 3s 0.5s ease both;
}
@-webkit-keyframes jumbotron-image{
	0%{opacity: 0;-webkit-transform: scale(2);transform: scale(2);}
	100%{opacity: 1;-webkit-transform: scale(1);transform: scale(1);}
}
@keyframes jumbotron-image{
	0%{opacity: 0;-webkit-transform: scale(2);transform: scale(2);}
	100%{opacity: 1;-webkit-transform: scale(1);transform: scale(1);}
}

.jumbotron-image_design{
	background-image: url(../images/Common/design-jumbotron-T80.png);
}
.jumbotron-image_travel{
	background-image: url(../images/Common/travel-jumbotron-T85.png);
}

.jumbotron-intro-container{
	/*border: 1px solid black;*/
	width: 60%;
	height: 100%;
	z-index: 450;

	position: absolute;
	top: 0;
	left: 20%;
}

.jumbotron-intro{
	position: absolute;
	bottom: 60px;
	left: 0px;
	width: 100%;
	/*height: 100%;*/

	z-index: 400;
}
.jumbotron-intro-right{
	position: absolute;
	bottom: 60px;
	left: 0;
	width: 100%;
	/*height: 100%;*/
	text-align: right;

	z-index: 400;
}

.jumbotron-intro .title,
.jumbotron-intro-right .title{
	text-indent: -5px;
}
.ani-jbt-title{
	-webkit-animation: jumbotron-title 2s ease-in-out 1s both;
	        animation: jumbotron-title 2s ease-in-out 1s both;
}
/*.jumbotron-intro-right .title{
	margin-left: 10px;
}*/
@-webkit-keyframes jumbotron-title{
	0%{opacity: 0;top: 200px;}
	30%{opacity: 0;}
	100%{opacity: 1;top: 0;}
}
@keyframes jumbotron-title{
	0%{opacity: 0;top: 200px;}
	30%{opacity: 0;}
	100%{opacity: 1;top: 0;}
}

.jumbotron-intro .title-sub{
	/*animation: jumbotron-sub-title 2s ease-in-out 1.3s both;*/
}
.jumbotron-intro-right .title-sub{
	/*animation: jumbotron-sub-title-travel 2s ease-in-out 1.3s both;*/
}
.ani-jbt-title-sub{
	-webkit-animation: jumbotron-sub-title 2s ease-in-out 1.3s both;
	        animation: jumbotron-sub-title 2s ease-in-out 1.3s both;
}
@-webkit-keyframes jumbotron-sub-title{
	0%{opacity: 0;left: -300px;}
	30%{opacity: 0;}
	100%{opacity: 1;left: 0;}
}
@keyframes jumbotron-sub-title{
	0%{opacity: 0;left: -300px;}
	30%{opacity: 0;}
	100%{opacity: 1;left: 0;}
}
@-webkit-keyframes jumbotron-sub-title-travel{
	0%{opacity: 0;right: -300px;}
	30%{opacity: 0;}
	100%{opacity: 1;right: 0;}
}
@keyframes jumbotron-sub-title-travel{
	0%{opacity: 0;right: -300px;}
	30%{opacity: 0;}
	100%{opacity: 1;right: 0;}
}

.jumbotron-intro .btn,
.jumbotron-intro-right .btn{
	/*animation: jumbotron-btn 2s ease 2s both;*/
}
.ani-jbt-btn{
	-webkit-animation: jumbotron-btn 2s ease 2s both;
	        animation: jumbotron-btn 2s ease 2s both;
}
@-webkit-keyframes jumbotron-btn{
	0%{opacity: 0;}
	30%{opacity: 0;}
	100%{opacity: 1;}
}
@keyframes jumbotron-btn{
	0%{opacity: 0;}
	30%{opacity: 0;}
	100%{opacity: 1;}
}

.jumbotron-intro .title-sub,
.jumbotron-intro-right .title-sub{
	padding-top: 10px;
	font-weight: 500;
}

.jumbotron .arrow-R{
	display: block;
	position: absolute;
	top: 50%;
	right: 40px;
	-webkit-transform: translate(0,50%);
	    -ms-transform: translate(0,50%);
	        transform: translate(0,50%);
	width: 60px;
	height: 60px;
	
	background-image: url(../images/Common/arrow-R-B.png);
	z-index: 400;
	-webkit-transition: all 0.3s;
	-o-transition: all 0.3s;
	transition: all 0.3s;

	-webkit-animation: 
		jumbotron-arrow 4s both,
		shake-kym 8s infinite;

	        animation: 
		jumbotron-arrow 4s both,
		shake-kym 8s infinite; /*anicollection.css*/
}

@-webkit-keyframes jumbotron-arrow{
	0%{opacity: 0;}
	30%{opacity: 0;}
	100%{opacity: 1;}
}

@keyframes jumbotron-arrow{
	0%{opacity: 0;}
	30%{opacity: 0;}
	100%{opacity: 1;}
}

.jumbotron .arrow-L{
	display: block;
	position: absolute;
	top: 50%;
	left: 40px;
	-webkit-transform: translate(0,50%);
	    -ms-transform: translate(0,50%);
	        transform: translate(0,50%);
	width: 60px;
	height: 60px;
	
	background-image: url(../images/Common/arrow-L-B.png);
	z-index: 400;
	-webkit-transition: all 0.3s;
	-o-transition: all 0.3s;
	transition: all 0.3s;

	-webkit-animation: 
		jumbotron-arrow 4s both,
		shake-kym 8s infinite;

	        animation: 
		jumbotron-arrow 4s both,
		shake-kym 8s infinite; /*anicollection.css*/
}

.jumbotron .arrow-R:hover{
	background-image: url(../images/Common/arrow-R-W.png);
}
.jumbotron .arrow-L:hover{
	background-image: url(../images/Common/arrow-L-W.png);
}

@media (max-width: 900px){
	.jumbotron .arrow-R{
		right: 14px;
	}
	.jumbotron .arrow-L{
		left: 14px;
	}
}
@media (max-width: 800px){
	.jumbotron{
		/*height: 800px;*/
	}
	.jumbotron-video .video-setting{
		/*height: 800px;*/
	}
	.jumbotron-intro-container{
		width: 100%;
		left: 0;
	}
	.jumbotron-intro,
	.jumbotron-intro-right{
		bottom: 30px;
		text-align: center;
	}

	.jumbotron-intro .title,
	.jumbotron-intro-right .title{
		font-size: 60px;
		text-indent: 0;
	}
	.jumbotron-intro .title-sub,
	.jumbotron-intro-right .title-sub{
		font-size: 16px;
		color: #1A1A1A;
	}
	.jumbotron .arrow-R,
	.jumbotron .arrow-L{
		width: 50px;
		height: 50px;
		z-index: 450;
	}
	/*進場動畫*/
	@-webkit-keyframes jumbotron-sub-title{
		0%{opacity: 0;bottom: -300px;}
		30%{opacity: 0;}
		100%{opacity: 1;bottom: 0;}
	}
	@keyframes jumbotron-sub-title{
		0%{opacity: 0;bottom: -300px;}
		30%{opacity: 0;}
		100%{opacity: 1;bottom: 0;}
	}
	@-webkit-keyframes jumbotron-sub-title-travel{
	0%{opacity: 0;bottom: -300px;}
	30%{opacity: 0;}
	100%{opacity: 1;bottom: 0;}
}
	@keyframes jumbotron-sub-title-travel{
	0%{opacity: 0;bottom: -300px;}
	30%{opacity: 0;}
	100%{opacity: 1;bottom: 0;}
}
}
@media (max-width: 600px){
	.jumbotron{
		/*height: 500px;*/
	}
	.jumbotron-video .video-setting{
		/*height: 500px;*/
	}
	.jumbotron-intro,
	.jumbotron-intro-right{
		bottom: 30px;
		text-align: center;
	}
	.jumbotron-intro .title,
	.jumbotron-intro-right .title{
		font-size: 40px;
		text-indent: 0;
	}
	.jumbotron-intro .title-sub{
		font-size: 12px;
		color: #1A1A1A;
	}
	.jumbotron-intro-right .title-sub{
		font-size: 12px;
		color: #F3F4F5;
		font-weight: 300;
	}
	.jumbotron .arrow-R,
	.jumbotron .arrow-L{
		width: 30px;
		height: 30px;
	}
}

/*section-intro*/
.section-intro{
	text-align: center;
	margin-bottom: 24px;
}

.section-intro .title{
	margin-bottom: 24px;
}

.section-intro .para{
	line-height: 32px;
	margin-bottom: 24px;
	letter-spacing: 3px;
}

@media (max-width: 800px){
	.section-intro{
		margin-bottom: 20px;
	}
	.section-intro .title{
		font-size: 36px;
		margin-bottom: 20px;
	}
	.section-intro .para{
		font-size: 14px;
		margin-bottom: 20px;
	}
}
@media (max-width: 600px){
	.section-intro{
		margin-bottom: 18px;
	}
	.section-intro .title{
		font-size: 24px;
		margin-bottom: 18px;
	}
	.section-intro .para{
		font-size: 12px;
		margin-bottom: 18px;
	}
}
@media (max-width: 500px){
	.section-intro .para.portfolio{
		width: 330px;
		margin: 0 auto;
		padding-bottom: 18px;
	}
}

 /*------------------------------------*\
 	Image-container
 \*------------------------------------*/
/*image-container    for Normal*/
.image-container{
	/*border: 1px solid #000;*/
	width: 100%;
	overflow: hidden;
}

/*image-p-container   for PORTIFOLIO*/ 
.image-p-container{
	width: 100%;
	overflow: hidden;
	cursor: pointer;
}

/*image-t-container   for TRAVEL PHOTO*/ 
.image-t-container{
	width: 100%;
	overflow: hidden;
}

.image-container,
.image-p-container:before{
	content: '';
	display: block;
	width: 100%;
	padding-top: 100%;
}

.image-t-container:before{
	content: '';
	display: block;
	width: 100%;
	padding-top: 200%;
}

.image-container .image,
.image-p-container .image,
.image-t-container .image{
	position: absolute;
	left: 0;
	top: 0;
	/*transform: translate(-50%, -50%);*/

	width: 100%;
	height: 100%;
	/*border: 1px solid yellow;*/
}

/*container style*/
.image-container-r{
	border-radius: 10px;
}
.image-container-lbt{
	position: absolute;
	left: 0;
	bottom: 0;
}

.image-container-rbt{
	position: absolute;
	right: 0;
	bottom: 0;
}

@media (max-width: 800px){
	.image-container-r{
		border-radius: 6px;
	}
}
@media (max-width: 600px){
	.image-container-r{
		border-radius: 4px;
	}
}

/*background image setting*/
.bgst-cover,.bgst-contain{
	background-position: center;
	background-repeat: no-repeat;
}
.bgst-cover{
	background-size: cover;
}
.bgst-contain{
	background-size: contain;
}

 /*------------------------------------*\
 	PORTFOLIO & TRAVEL PHOTO
 \*------------------------------------*/

/*filter*/
.filter-block{
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	font-size: 20px;
	font-weight: 500;
	line-height: 32px;
	letter-spacing: 3px;
	margin-bottom: 24px;
}
.filter-block .filter{
	margin: 0 20px;
	cursor: pointer;
}
.filter:hover{
	color: #1A1A1A;
	font-weight: 800;
}
.filter.active{
	color: #1A1A1A;
	font-weight: 800;
	border-bottom: 2px solid #1A1A1A;
}

@media (max-width: 800px){
	.filter-block{
		font-size: 14px;
		margin-bottom: 20px;
	}
}
@media (max-width: 600px){
	.filter-block{
		font-size: 12px;
		margin-bottom: 18px;
	}
}
@media (max-width: 400px){
	.filter-block .filter{
		margin: 0 10px;
	}
}


/*view-btn*/
.view-size{
	text-align: center;
	margin-bottom: 24px;
}

@media (max-width: 800px){
	.view-size{
		margin-bottom: 20px;
	}
}
@media (max-width: 600px){
	.view-size{
		margin-bottom: 18px;
	}
}

.view-size .btn-view{
	display: inline-block;
	width: 30px;
	height: 30px;
	margin: 0 5px;
	cursor: pointer;

	-webkit-transition: all 0.3s;

	-o-transition: all 0.3s;

	transition: all 0.3s;
}
.view-size .btn-view.btn-view-lg,
.view-size .btn-view.btn-view-lg-travel{
	background-image: url(../images/Common/view-1-G.png);
}
.view-size .btn-view.btn-view-md,
.view-size .btn-view.btn-view-md-travel{
	background-image: url(../images/Common/view-2-G.png);
}
.view-size .btn-view.btn-view-sm,
.view-size .btn-view.btn-view-sm-travel{
	background-image: url(../images/Common/view-3-G.png);
}

.view-size .btn-view.btn-view-lg.active{
	background-image: url(../images/Common/view-1-B.png);
}
.view-size .btn-view.btn-view-md.active{
	background-image: url(../images/Common/view-2-B.png);
}
.view-size .btn-view.btn-view-sm.active{
	background-image: url(../images/Common/view-3-B.png);
}

.view-size .btn-view.btn-view-lg:hover{
	background-image: url(../images/Common/view-1-B.png);
}
.view-size .btn-view.btn-view-md:hover{
	background-image: url(../images/Common/view-2-B.png);
}
.view-size .btn-view.btn-view-sm:hover{
	background-image: url(../images/Common/view-3-B.png);
}
/*traver-ver*/
.view-size .btn-view.btn-view-lg-travel.active{
	background-image: url(../images/Common/view-1-W.png);
}
.view-size .btn-view.btn-view-md-travel.active{
	background-image: url(../images/Common/view-2-W.png);
}
.view-size .btn-view.btn-view-sm-travel.active{
	background-image: url(../images/Common/view-3-W.png);
}

.view-size .btn-view.btn-view-lg-travel:hover{
	background-image: url(../images/Common/view-1-W.png);
}
.view-size .btn-view.btn-view-md-travel:hover{
	background-image: url(../images/Common/view-2-W.png);
}
.view-size .btn-view.btn-view-sm-travel:hover{
	background-image: url(../images/Common/view-3-W.png);
}

/*Window-toggle*/
.window-toggle{
	/*border: 1px solid black;*/
	text-align: center;
	margin-bottom: 24px;
}
@media (max-width: 800px){
	.window-toggle{
		margin-bottom: 12px;
	}
}
@media (max-width: 600px){
	.window-toggle{
		margin-bottom: 10px;
	}
}
.travel-photo.window-toggle .btn.active{
	color: #1A1A1A;
	background-color: #F3F4F5;
}

.window-slide{
	/*background-color: #BFBFBF;*/
	width: 100%;
	/*border-top: 1px solid #BFBFBF;*/
	/*border-bottom: 1px solid #BFBFBF;*/
	overflow: hidden;
}

.travel-photo .window-slide.slide-open{
	/*opacity: 0;*/
}

.slide-close{
	height: 0;
	max-height: 0;
	max-height: 0;
	margin-top: 0;
	padding: 0;

	-webkit-transition: all 1s;

	-o-transition: all 1s;

	transition: all 1s;
}

.slide-open{
	height: 0;
	height: 100%;
	max-height: 4000px;
	margin-top: 16px;
	padding: 8px 0px;

	-webkit-transition: all 1000ms cubic-bezier(0.800, 0.155, 0.970, 0.685); 
	     -o-transition: all 1000ms cubic-bezier(0.800, 0.155, 0.970, 0.685); 
	        transition: all 1000ms cubic-bezier(0.800, 0.155, 0.970, 0.685); /* custom */
-webkit-transition-timing-function: cubic-bezier(0.800, 0.155, 0.970, 0.685); 
     -o-transition-timing-function: cubic-bezier(0.800, 0.155, 0.970, 0.685); 
        transition-timing-function: cubic-bezier(0.800, 0.155, 0.970, 0.685); /* custom */
}

@media (max-width: 800px){
	.slide-open{
		margin-top: 12px;
	}
}
@media (max-width: 600px){
	.slide-open{
		margin-top: 10px;
	}
}

.window-slide.slide-close.active{
	height: 600px;
	max-height: 600px;
	/*padding: 0;*/
	/*background-color: #BFBFBF;*/
	overflow: hidden;

	-webkit-transition: all 1s;

	-o-transition: all 1s;

	transition: all 1s;
}
.window-slide.slide-open.active{
	height: 0;
	max-height: 0;
	margin-top: 0;
	padding: 0;
	/*background-color: #BFBFBF;*/
	/*margin-top: 24px;*/
	overflow: hidden;

	-webkit-transition: all 1s;

	-o-transition: all 1s;

	transition: all 1s;
}

.window-slide .owl-carousel .country-menu{
	top: 0;
	cursor: pointer;
	-webkit-transition: all 0.3s;
	-o-transition: all 0.3s;
	transition: all 0.3s;

}
.window-slide .owl-carousel .country-menu:hover .image-t-container{
	-webkit-box-shadow: 0 4px 10px rgba(0,0,0,0.5), 0 2px 6px rgba(0,0,0,0.5);
	        box-shadow: 0 4px 10px rgba(0,0,0,0.5), 0 2px 6px rgba(0,0,0,0.5);
	/*top: -8px;*/
}

.country-name{
	background-color: rgba(0,0,0,0.5);
	position: absolute;
	width: 100%;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%,-50%);
	    -ms-transform: translate(-50%,-50%);
	        transform: translate(-50%,-50%);
	padding: 400px 0;

	-webkit-transition: all 0.3s;

	-o-transition: all 0.3s;

	transition: all 0.3s;
}


.window-slide .owl-carousel .country-menu:hover .country-name{
	padding: 10px 0;
}

.country-title{
	font-size: 36px;
	color: #FFFFFF;
}
.country-subtitle{
	font-size: 18px;
	color: #CCCCCC;
}


.no-display{
	/*display: none;*/
	width: 0 !important;
	padding: 0;
	opacity: 0;
	visibility: hidden;
}

.select{
	/*background-color: rgba(0,0,255,0.3);*/
	/*background-color: #1A00FF;
	opacity: 0.3;*/
	color: #00D3FF;
}

@media (max-width: 1400px){
	.country-title{
		font-size: 26px;
	}
	.country-subtitle{
		font-size: 14px;
	}
}
@media (max-width: 1000px){
	.country-title{
		font-size: 18px;
	}
	.country-subtitle{
		font-size: 12px;
	}
}
@media (max-width: 600px){
	.country-title{
		font-size: 12px;
		padding-bottom: 4px;
	}
	.country-subtitle{
		font-size: 8px;
	}
}

/*owl-carousel*/
.owl-theme .owl-dots{
	/*border: 1px solid #000;*/
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	margin-top: 32px;
}
@media (max-width: 800px){
	.owl-theme .owl-dots{
		margin-top: 20px;
	}
}
@media (max-width: 600px){
	.owl-theme .owl-dots{
		margin-top: 18px;
	}
}
.owl-theme .owl-dots .owl-dot{
	display: inline-block;
	vertical-align: top;
	width: 30px;
	height: 4px;
	border-radius: 2px;
	background-color: #999999;
	margin: 0 4px;
	outline: 0;
}
.owl-theme .owl-dots .owl-dot.active{
	background-color: #F3F4F5;
}

.owl-theme .owl-nav{
	/*border: 1px solid red;*/
	width: 120%;
	position: absolute;
	top: calc((100% - 36px) / 2);
	left: 50%;
	-webkit-transform: translate(-50%,0);
	    -ms-transform: translate(-50%,0);
	        transform: translate(-50%,0);
	-webkit-transition: all 0.3s;
	-o-transition: all 0.3s;
	transition: all 0.3s;
}
.owl-theme:hover .owl-nav{
	width: 99%;
}

.owl-theme .owl-nav button.owl-prev,
.owl-theme .owl-nav button.owl-next{
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background-color: #999999;
	outline: 0;
	-webkit-box-shadow: 0 3px 5px rgba(0,0,0,0.5);
	        box-shadow: 0 3px 5px rgba(0,0,0,0.5);
	color: #fff;
	position: absolute;
	top: 0;
	-webkit-transform: translate(0,-50%);
	    -ms-transform: translate(0,-50%);
	        transform: translate(0,-50%);
	opacity: 0.3;
	-webkit-transform: all 0.3s;
	    -ms-transform: all 0.3s;
	        transform: all 0.3s;
}

.owl-theme:hover .owl-nav button.owl-prev,
.owl-theme:hover .owl-nav button.owl-next{
	opacity: 0.8;
}

.owl-theme .owl-nav button.owl-next span.next-photo,
.owl-theme .owl-nav button.owl-prev span.prev-photo{
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%,-50%);
	    -ms-transform: translate(-50%,-50%);
	        transform: translate(-50%,-50%);
	width: 10px;
	height: 10px;
}
.owl-theme .owl-nav button.owl-next span.next-photo{
	background-image: url(../images/Common/travel-slider-next.png);
}
.owl-theme .owl-nav button.owl-prev span.prev-photo{
	background-image: url(../images/Common/travel-slider-prev.png);
}

@media (max-width: 900px){
	.owl-theme .owl-nav{
		top: calc((100% - 36px));
		width: 99%;
	}
	.owl-theme .owl-nav button.owl-prev,
	.owl-theme .owl-nav button.owl-next{
		opacity: 0.8;
	}
}
@media (max-width: 800px){
	.owl-theme .owl-nav{
		top: calc((100% - 36px));
	}
}


.owl-theme .owl-nav button.owl-prev{
	left: 0px;
}
.owl-theme .owl-nav button.owl-next{
	right: 0px;
}

/*===========================*/
.row-portfolio .col-1-4 .image-p-container .image{
	position: absolute;
	left: 50%;
	top: 50%;
	-webkit-transform: translate(-50%, -50%);
	    -ms-transform: translate(-50%, -50%);
	        transform: translate(-50%, -50%);


	width: 100%;
	height: 100%;
	/*border: 1px solid yellow;*/

	-webkit-transition: all 0.3s;

	-o-transition: all 0.3s;

	transition: all 0.3s;
}

.row-portfolio .col-1-4 .image-p-container .image:hover{
	width: 150%;
	height: 150%;
}

/*portfolio Black mask*/

.row-portfolio .col-1-4 .image-p-container .image:before{
	content: '';
	display: block;
	width: 100%;
	height: 100%;

	background-color: black;
	opacity: 0;
	-webkit-transition: all 0.3s;
	-o-transition: all 0.3s;
	transition: all 0.3s;
}

.row-portfolio .col-1-4 .image-p-container .image:hover:before{
	opacity: 0.4;
}

/*portfolio Black mask w/ text*/
.mask-text-diagram{
	/*display: inline-block;*/
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
}
.mask-text-diagram.display-none{
	display: none;
}

.mask-text-diagram .text-info{
	/*display: inline-block;*/
	width: 100%;
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%,-50%);
	    -ms-transform: translate(-50%,-50%);
	        transform: translate(-50%,-50%);
	margin: 0;
	/*font-size: 34px; */
	text-align: center;

	opacity: 0;
	-webkit-transition: all 0.3s;
	-o-transition: all 0.3s;
	transition: all 0.3s;	
}
@media (max-width: 1024px){
	.mask-text-diagram .text-info{
		display: none;
	}
}
.text-info .title{
	font-size: 34px;
	padding-bottom: 10px;
}
.text-info .category{
	font-size: 18px;
	padding-bottom: 10px;
}
.text-info .date{
	font-size: 16px;
}
.row-portfolio .col-1-4 .image-p-container .image:hover .text-info{
	opacity: 1;
}


/*js - fancybox*/
.innerbox{
	display: none;
	/*width: 100%;*/
	/*height: 100%;*/
	/*max-width: 80%;*/
	text-align: center;
}


.innerbox_bg{
	/*width: 100%;
	text-align: center;
	overflow: hidden;*/
}

.innerbox-intro{
	margin: 10px 0;
}

.innerbox-title,
.innerbox-category,
.innerbox-date,
.innerbox-link{
	display: block;
	font-weight: 300;
	padding-bottom: 4px;
}
.innerbox-title{
	font-size: 40px;
}
.innerbox-category,
.innerbox-date,
.innerbox-link{
	font-size: 18px;
}
.innerbox-link{
	display: inline-block;
	color: #1A1A1A;
	text-decoration: none;
	padding: 8px 20px;
	background-color: #F3F4F5;
	border-radius: 10px;
}
.innerbox-link:hover{
	color: #00FFFF;
}


.innerbox-image{
	display: block;
	max-width: 100vw;
	max-height: 100vh;

	padding-bottom: 6px;
	margin: 0 auto;
}
.innerbox-image-full{
	display: block;
	max-width: 100%;
	/*max-height: 100vh;*/
	padding-bottom: 6px;
	margin: 0 auto;
}
.innerbox-video{
	display: block;
	width: 100%;
	height: 100vh;
	/*max-width: 1300px;*/
	padding-bottom: 6px;
	margin: 0 auto;
}


 /*------------------------------------*\
 	ABOUT
 \*------------------------------------*/
 .vertical-line{
 	width: 50%;
 	height: 76px;
 	/*background-color: #FF3030;*/
 	border-right: 1px solid #BFBFBF;
 	margin-bottom: 24px;
 }
.about-name{
	text-align: center;
	padding-bottom: 50px;
}

.about-sign{
	/*border: 1px solid black;*/
	display: block;
	width: 25%;
	padding-top: 25%;
	margin: 0 auto;

	background-image: url(../images/Common/about-sign.png);
}

.about-para{
	font-size: 18px;
	font-weight: 600;
	padding-top: 100px;
	line-height: 24px;
	color: #333333;
}
.display-off-on{
	display: none;
}

@media (max-width: 1100px){
	.vertical-line{
	 	height: 60px;
	}
	.about-para{
		font-size: 16px;
		padding-top: 84px;
	}
}
@media (max-width: 1000px){
	.vertical-line{
	 	height: 50px;
	}
	.about-name{
		font-size: 24px;
	}
	.about-para{
		font-size: 14px;
		padding-top: 74px;
	}
}
@media (max-width: 900px){
	.display-none{
		display: none;
	}
	.display-off-on{
		display: block;
		/*text-align: center;*/
	}
	.image-container-sm,
	.image-container-sm-travel{
		position: relative;
		width: 30%;
		height: 30%;
		left: 50%;
		-webkit-transform: translate(-50%,0);
		    -ms-transform: translate(-50%,0);
		        transform: translate(-50%,0);
	}

	.vertical-line{
	 	display: none;
	}
	.about-name{
		padding-top: 20px;
		padding-bottom: 20px;
	}
	.about-sign{
		width: 10%;
		padding-top: 10%;
	}
	.about-para{
		width: 70%;
		position: relative;
		left: 50%;
		-webkit-transform: translate(-50%,0);
		    -ms-transform: translate(-50%,0);
		        transform: translate(-50%,0);

		font-size: 14px;
		text-align: center;
		padding-top: 20px;
		padding-bottom: 100px;
	}
}
@media (max-width: 900px){
	.about-para{
		padding-bottom: 80px;
	}
}
@media (max-width: 600px){
	.about-name{
		font-size: 16px;
	}
	.about-sign{
		width: 60px;
		padding-top: 60px;
	}
	.about-para{
		font-size: 12px;
		line-height: 22px;
	}
}

 /*------------------------------------*\
 	SKILLS
 \*------------------------------------*/
.software{
	text-align: center;
}

.card{
	/*border: 1px solid red;*/
	background-color: #fefefe;
	text-align: center;
	-webkit-transition: all 0.3s;
	-o-transition: all 0.3s;
	transition: all 0.3s;
}

.card:hover{
	background-color: #D9D9D9;
}

.radius-L{
	border-top-left-radius: 15px;
	border-bottom-left-radius: 15px;
}
.radius-R{
	border-top-right-radius: 15px;
	border-bottom-right-radius: 15px;
}

.card-diagram{
	padding: 15px;
}

.card-diagram .title{
	font-weight: 600;
	margin-top: 15px;
}

.card-diagram .para{
	font-size: 16px;
	line-height: 25px;
	font-weight: 500;

	margin-top: 15px;
	/*margin-bottom: 15px;*/

	height: 100px;
}

.software .Sketch-icon,
.software .Flinto-icon,
.software .PS-icon,
.software .AI-icon,
.software .Sublime-icon{
	display: inline-block;
	width: 50px;
	height: 50px;
	margin: 0 4px;
	/*margin-bottom: 25px;*/
	-webkit-transition: all 0.3s;
	-o-transition: all 0.3s;
	transition: all 0.3s;
}

.Sketch-icon{
	background-image: url(../images/Common/design-skill-sketch-G.png);
}
.Flinto-icon{
	background-image: url(../images/Common/design-skill-flinto-G.png);
}
.PS-icon{
	background-image: url(../images/Common/design-skill-PS-G.png);
}
.AI-icon{
	background-image: url(../images/Common/design-skill-AI-G.png);
}
.Sublime-icon{
	background-image: url(../images/Common/design-skill-sublime-G.png);
}

.card:hover .Sketch-icon{
	background-image: url(../images/Common/design-skill-sketch-C.png);
}
.card:hover .Flinto-icon{
	background-image: url(../images/Common/design-skill-flinto-C.png);
}
.card:hover .PS-icon{
	background-image: url(../images/Common/design-skill-PS-C.png);
}
.card:hover .AI-icon{
	background-image: url(../images/Common/design-skill-AI-C.png);
}
.card:hover .Sublime-icon{
	background-image: url(../images/Common/design-skill-sublime-C.png);
}

@media (max-width: 800px){
	.software .Sketch-icon,
	.software .Flinto-icon,
	.software .PS-icon,
	.software .AI-icon,
	.software .Sublime-icon{
		width: 40px;
		height: 40px;
		margin: 0 4px;
	}
	.card-diagram .title{
		font-size: 16px;
	}
	.card-diagram .para{
		font-size: 14px;
		line-height: 22px;
		margin-top: 15px;
		height: 88px;
	}
}
@media (max-width: 600px){
	.software .Sketch-icon,
	.software .Flinto-icon,
	.software .PS-icon,
	.software .AI-icon,
	.software .Sublime-icon{
		width: 40px;
		height: 40px;
		margin: 0 4px;
	}
	.card-diagram{
		/*border-bottom: 1px solid black;*/
	}
	.card-diagram .title{
		font-size: 16px;
		margin-top: 15px;
	}
	.card-diagram .para{
		font-size: 14px;
		line-height: 20px;
		margin-top: 15px;
		height: 100%;
	}
	.radius-L{
		border-radius: 0;
	}
	.radius-R{
		border-radius: 0;
	}
}

/*image-show*/
.image-show-R,.image-show-L,.image-show-ML,.image-show-MR{
	/*background-color: #68DFFF;*/
	width: 0%;
	height: 100%;

	position: absolute;
	top: 0;
	z-index: 160;

	-webkit-transition: all 1s;

	-o-transition: all 1s;

	transition: all 1s;
	opacity: 0;
}
.image-show-R,.image-show-MR{
	left: 100%;
}

.image-show-L,.image-show-ML{
	-webkit-transform: translate(-100%,0);
	    -ms-transform: translate(-100%,0);
	        transform: translate(-100%,0);
	left: 0;
}

.card:hover .image-show-R,
.card:hover .image-show-L,
.card:hover .image-show-MR,
.card:hover .image-show-ML{
	opacity: 1;
	z-index: 100;
}
.card:hover .image-show-R,.card:hover .image-show-L{
	width: 200%;
}
.card:hover .image-show-MR,.card:hover .image-show-ML{
	width: 100%;
}

.image-show-R .image,
.image-show-L .image,
.image-show-ML .image,
.image-show-MR .image{
	display: inline-block;
	width: 100%;
	height: 100%;
}
.image-show-R .image{
	background-image: url(../images/Design/skill/UIUX-cover.jpg);
}

.image-show-L .image{
	background-image: url(../images/Design/skill/WEB-cover.jpg);
}

.image-show-ML .image{
	background-image: url(../images/Design/skill/LOGO-COVER.jpg);
}

.image-show-MR .image{
	background-image: url(../images/Design/skill/POSTER-cover.jpg);
}

@media (max-width: 600px){
	.image-show-R,.image-show-L,.image-show-ML,.image-show-MR{
		display: none;
	}
}

 /*------------------------------------*\
 	ACIEVEMENT for Travel page
 \*------------------------------------*/
.achieve-bg{
	/*border: 1px solid #0600FF;*/
	background-color: #333333;
	display: inline-block;
	width: 100%;
	padding-top: 50%;
}

.achieve-block{
	position: absolute;
	top: 50%;
	left: 0;
	-webkit-transform: translate(0%,-50%);
	    -ms-transform: translate(0%,-50%);
	        transform: translate(0%,-50%);
	padding: 0 10px;
}

.achieve-block .title{
	font-weight: 300;
	font-size: 18px;
}
.achieve-block .sub-title{
	font-weight: 300;
	font-size: 16px;
	padding-top: 20px;
}

.achieve-block .date{
	font-size: 14px;
	padding-top: 20px;
}

@media (max-width: 900px){
	.achieve-block .title{
		font-size: 16px;
	}
	.achieve-block .sub-title{
		font-size: 14px;
		padding-top: 15px;
	}
	.achieve-block .date{
		font-size: 12px;
		padding-top: 15px;
	}
}
@media (max-width: 800px){
	.achieve-block .title{
		font-size: 14px;
	}
	.achieve-block .sub-title{
		font-size: 12px;
		padding-top: 10px;
	}
	.achieve-block .date{
		font-size: 10px;
		padding-top: 10px;
	}
}
@media (max-width: 700px){
	.achieve-block .title{
		font-weight: 500;
		font-size: 10px;
	}
	.achieve-block .sub-title{
		font-size: 8px;
	}
	.achieve-block .date{
		font-size: 8px;
	}
}
@media (max-width: 600px){
	.achieve-block .title{
		font-weight: 300;
		font-size: 16px;
	}
	.achieve-block .sub-title{
		font-size: 14px;
		padding-top: 15px;
	}
	.achieve-block .date{
		font-size: 12px;
		padding-top: 15px;
	}
}

/*parameter*/
.bgc-black{
	background-color: #1A1A1A;
}
.padding-lr{
	padding-left: 6px;
	padding-right: 6px;
}
.padding-bt{
	padding-bottom: 6px;
}
.padding-lr-remove{
	margin-left: -6px;
	margin-right: -6px;
}

/*Footprint*/
@media (max-width: 900px){
	.footprint{
		display: none;
	}
}
.footprint.window-toggle{
	margin-bottom: 0;
	cursor: pointer;
}

.location-diagram{
	display: block;
	margin-top: 94px;
	margin-bottom: 0;

	-webkit-transition: all 1s;

	-o-transition: all 1s;

	transition: all 1s;
}
.location-diagram.active{
	margin-bottom: 50px;
}

.location-mark{
	display: block;
	margin: 0 auto;
	width: 60px;
	height: 60px;

	background-image: url(../images/Common/travel-location-mark-G.png);
	-webkit-transition: all 1s;
	-o-transition: all 1s;
	transition: all 1s;
}
.location-diagram:hover .location-mark{
	background-image: url(../images/Common/travel-location-mark-W.png);
}

.footprint.window-toggle.active .location-mark{
	background-image: url(../images/Common/travel-location-mark-W.png);
}

.location-diagram .title{
	display: block;
	padding-top: 10px;
	/*修正置中問題 bug?*/
	text-indent: 2px;
	-webkit-transition: all 1s;
	-o-transition: all 1s;
	transition: all 1s;
}
.location-diagram .hint{
	font-size: 14px;
	padding-top: 5px;
	/*transition: all 0.3s;*/
}
.hint .hint-open{
	opacity: 1;
	visibility: visible;
	-webkit-transition: all 1s;
	-o-transition: all 1s;
	transition: all 1s;
}
.hint .hint-close{
	position: absolute;
	top: 5px;
	left: 50%;
	-webkit-transform: translate(-50%,0);
	    -ms-transform: translate(-50%,0);
	        transform: translate(-50%,0);
	color: #F3F4F5;
	display: none;
	opacity: 0;
	visibility: hidden;
	-webkit-transition: all 1s;
	-o-transition: all 1s;
	transition: all 1s;
}

.location-diagram:hover .title,
.location-diagram:hover .hint{
	color: #F3F4F5;
}

.footprint.window-toggle.active .title{
	color: #F3F4F5;
}

.footprint.window-toggle.active .hint .hint-open{
	/*display: none;*/
	opacity: 0;
	visibility: hidden;
}
.footprint.window-toggle.active .hint .hint-close{
 	display: block;
	opacity: 1;
	visibility: visible;
}

.window-slide.slide-close.window-map.active{
	height: 800px;
	max-height: 800px;
}

.worldmap-diagram{
	width: 100%;
	cursor: initial;
}
.worldmap{
	position: absolute;
	top: 0;
	left: 50%;
	-webkit-transform: translate(-50%,0);
	    -ms-transform: translate(-50%,0);
	        transform: translate(-50%,0);
	width: 1500px;
	/*height: 100vw;*/
	/*background-image: url(../images/Common/travel-worldmap.png);*/
}

/*mark-diagram*/
.mark-diagram{
	position: absolute;
	top: 0;
	left: 50%;
	-webkit-transform: translate(-50%,0);
	    -ms-transform: translate(-50%,0);
	        transform: translate(-50%,0);
	width: 1500px;
	height: 800px;
}

.footprint-mark{
	background-image: url(../images/Common/travel-location-mark-RG.png);
	width: 15px;
	height: 20px;
	-webkit-transition: all 0.3s;
	-o-transition: all 0.3s;
	transition: all 0.3s;
}
.footprint-mark:hover{
	background-image: url(../images/Common/travel-location-mark-R.png);
	z-index: 50;
}
/*///////////////Country mark////////////////////*/
.JAPAN-OSAKA.footprint-mark{
	position: absolute;
	top: 41%;
	left: 41%;
}
.JPN-HOKAIDO.footprint-mark{
	position: absolute;
	top: 36%;
	left: 42.5%;
}
.JPN-TOKYO.footprint-mark{
	position: absolute;
	top: 40.5%;
	left: 42%;
}
.NZD-S.footprint-mark{
	position: absolute;
	top: 87%;
	left: 50.5%;
}
.USA-SF.footprint-mark{
	position: absolute;
	top: 41%;
	left: 71%;
}
.THAILAND-BANGKOK.footprint-mark{
	position: absolute;
	top: 53%;
	left: 31.5%;
}
.THAILAND-SAMUI-Island.footprint-mark{
	position: absolute;
	top: 55.5%;
	left: 31.5%;
}
.MALAYSIA-KL.footprint-mark{
	position: absolute;
	top: 59%;
	left: 31.7%;
}
.CHINA-XIAMEN.footprint-mark{
	position: absolute;
	top: 47.5%;
	left: 36%;
}
.CHINA-DALIAN.footprint-mark{
	position: absolute;
	top: 38%;
	left: 37.5%;
}
.CHINA-CHANGCHUN.footprint-mark{
	position: absolute;
	top: 36%;
	left: 38%;
}
.CHINA-HARBIN.footprint-mark{
	position: absolute;
	top: 34%;
	left: 38.5%;
}

/*///////////////////////////////////////////////*/
.text-mark{
	position: absolute;
	top: 0;
	left: 50%;
	-webkit-transform: translate(-50%,-100%);
	    -ms-transform: translate(-50%,-100%);
	        transform: translate(-50%,-100%);
	width: 300px;
	color: red;
	opacity: 0;
	visibility: hidden;
	-webkit-transition: all 0.3s;
	-o-transition: all 0.3s;
	transition: all 0.3s;
}

.footprint-mark:hover .text-mark{
	opacity: 1;
	visibility: visible;
}

@media (max-width: 1600px){
	.window-slide.slide-close.window-map.active{
		height: 570px;
		max-height: 570px;
	}
	.worldmap,
	.mark-diagram{
		width: 1100px;
	}
	.JAPAN-OSAKA.footprint-mark{
		top: 29.5%;
	}
	.JPN-HOKAIDO.footprint-mark{
		top: 25%;
	}
	.JPN-TOKYO.footprint-mark{
		top: 28.9%;
		left: 41.7%;
	}
	.NZD-S.footprint-mark{
		top: 63%;
	}
	.USA-SF.footprint-mark{
		top: 29.5%;
	}
	.THAILAND-BANGKOK.footprint-mark{
		top: 38%;
		left: 31.2%;
	}
	.THAILAND-SAMUI-Island.footprint-mark{
		top: 40%;
		left: 31.2%;
	}
	.MALAYSIA-KL.footprint-mark{
		top: 42.5%;
	}
	.CHINA-XIAMEN.footprint-mark{
		top: 34%;
	}
	.CHINA-DALIAN.footprint-mark{
		top: 27%;
	}
	.CHINA-CHANGCHUN.footprint-mark{
		top: 25%;
	}
	.CHINA-HARBIN.footprint-mark{
		top: 24%;
	}
}
@media (max-width: 1200px){
	.window-slide.slide-close.window-map.active{
		height: 470px;
		max-height: 470px;
	}
	.worldmap,
	.mark-diagram{
		width: 900px;
	}
	.JAPAN-OSAKA.footprint-mark{
		top: 23.5%;
	}
	.JPN-HOKAIDO.footprint-mark{
		top: 20%;
	}
	.JPN-TOKYO.footprint-mark{
		top: 23.3%;
		left: 41.5%;
	}
	.NZD-S.footprint-mark{
		top: 51%;
	}
	.USA-SF.footprint-mark{
		top: 23.5%;
	}
	.THAILAND-BANGKOK.footprint-mark{
		top: 31%;
	}
	.THAILAND-SAMUI-Island.footprint-mark{
		top: 33%;
	}
	.MALAYSIA-KL.footprint-mark{
		top: 34.5%;
	}
	.CHINA-XIAMEN.footprint-mark{
		top: 27.5%;
	}
	.CHINA-DALIAN.footprint-mark{
		top: 21.5%;
	}
	.CHINA-CHANGCHUN.footprint-mark{
		top: 20.5%;
	}
	.CHINA-HARBIN.footprint-mark{
		top: 20%;
	}
}

 /*------------------------------------*\
 	CONTACTS
 \*------------------------------------*/
.mask-dark{
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,0.7);
}

.contact-image_design,
.contact-image_travel{
	display: block;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-attachment: fixed;
}
@media (max-width: 1024px){
	.contact-image_design,
	.contact-image_travel{
		background-attachment: initial;
	}
}
.contact-image_design{
	background-image: url(../images/Common/design-contact-bgi.jpg);
}
.contact-image_travel{
	background-image: url(../images/Common/travel-contact-bgi.JPG);
}


/*contact-diagram*/
.contact-diagram{
	width: 100%;
	/*border: 1px solid black;*/
	margin-top: 50px;
	padding-bottom: 100px;
}

.contact-item.item-1{
	padding-right: 6px;
}
.contact-item.item-2{
	padding: 0 6px;
}
.contact-item.item-3{
	padding-left: 6px;
}
.contact-item.item-4{
	padding-top: 25px;
}
.contact-btn.item-5{
	padding-top: 25px;
}

.contact-input,
.contact-message-input{
	display: block;
	width: 100%;

	font-family: 'Raleway', sans-serif;
	text-align-last: left;
	font-size: 16px;
	line-height: 16px;
	color: #F3F4F5;

	background-color: transparent;
	border: 1px solid #808080;
	border-radius: 4px;

	padding: 12px 12px;
	cursor: not-allowed;
}

.contact-message-input{
	max-width: 100%;
	min-width: 100%;
	/*height: 100%;*/
    -webkit-appearance: none;
}

.contact-input:focus,
.contact-message-input:focus{
	background-color: rgba(0,0,0,0.25);
	outline:none;
	border: 1px solid #F3F4F5;
}


/*placeholder setting*/
::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color:    #F3F4F5;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
   color:    #F3F4F5;
}
::-ms-input-placeholder { /* Microsoft Edge */
   color:    #F3F4F5;
}

::placeholder { /* Most modern browsers support this now. */
   color:    #F3F4F5;
}


/*contact-icon*/

.phone-icon,.mail-icon{
	width: 50px;
	height: 50px;
	margin: 0 auto;
	margin-bottom: 25px;
}

.phone-icon{
	background-image: url(../images/Common/phone-W.png);
}

.mail-icon{
	background-image: url(../images/Common/mail-W.png);
}

.phone-number,.mail-address{
	/*font-weight: 300;*/
}

@media (max-width: 600px){
	.contact-diagram{
		margin-top: 20px;
		padding-bottom: 50px;
	}
	.contact-item.item-1{
		padding: 0;
	}
	.contact-item.item-2,
	.contact-item.item-3{
		padding: 0;
		padding-top: 25px;
	}
	.contact-input,
	.contact-message-input{
		font-size: 12px;
	}
	.phone-icon,.mail-icon{
		width: 30px;
		height: 30px;
	}
	.phone-number,.mail-address{
		font-size: 12px;
	}
}

 /*------------------------------------*\
 	FOOTERS
 \*------------------------------------*/
.photo-wall{
	text-align: center;
}

.col-np{
	padding: 0;
}

/*photo-wall*/
.photo-wall .para{
	margin-bottom: 15px;
}

/*white mask*/
.photo-wall .row .col-1-12 .image-container .image:before{
	content: '';
	display: block;
	width: 100%;
	height: 100%;

	background-color: white;
	opacity: 0.3;
	-webkit-transition: all 0.3s;
	-o-transition: all 0.3s;
	transition: all 0.3s;
}

.photo-wall .row .col-1-12 .image-container .image:hover:before{
	opacity: 0;
}
/*photo-wall btn*/
.btn-diagram .btn.btn-third,
.btn-diagram .btn.btn-four{
	position: absolute;
	top: 0;
	left: 50%;
	-webkit-transform: translate(-50%,-50%);
	    -ms-transform: translate(-50%,-50%);
	        transform: translate(-50%,-50%);
}

/*link-diagram*/
.link-diagram{
	margin-top: 100px;
}

.link-diagram .brand,
.link-diagram .brand-travel{
	display: block;
	margin: 0 auto;
	width: 80px;
	height: 80px;
}
.link-diagram .brand{
	background-image: url(../images/Common/brand-logo-dark.png);
}
.link-diagram .brand-travel{
	background-image: url(../images/Common/brand-logo-light.png);
}

.community{
    margin-top: 30px;
}

.community-link,
.community-link-travel{
	display: inline-block;
	width: 36px;
	height: 36px;
    margin-left: 12px;
    margin-right: 12px;

	white-space: nowrap;
	text-indent: 100%;
	overflow: hidden;

	-webkit-transition: all 0.3s;

	-o-transition: all 0.3s;

	transition: all 0.3s;
}

.community-link.FB{
	background-image: url('../images/Common/Facebook logo-B.png');
}
.community-link.Pin{
	background-image: url('../images/Common/Pinterest logo-B.png');
}
.community-link.Be{
	background-image: url('../images/Common/Behance logo-B.png');
}
.community-link.FB:hover{
	background-image: url('../images/Common/Facebook logo-G.png');
}
.community-link.Pin:hover{
	background-image: url('../images/Common/Pinterest logo-G.png');
}
.community-link.Be:hover{
	background-image: url('../images/Common/Behance logo-G.png');
}
/*travel ver*/
.community-link-travel.FB{
	background-image: url('../images/Common/Facebook logo-G.png');
}
.community-link-travel.Pin{
	background-image: url('../images/Common/Pinterest logo-G.png');
}
.community-link-travel.Be{
	background-image: url('../images/Common/Behance logo-G.png');
}
.community-link-travel.FB:hover{
	background-image: url('../images/Common/Facebook logo-W.png');
}
.community-link-travel.Pin:hover{
	background-image: url('../images/Common/Pinterest logo-W.png');
}
.community-link-travel.Be:hover{
	background-image: url('../images/Common/Behance logo-W.png');
}




.footer .copyright h6{
	/*background-color: #191919;*/
	/*color: black;*/
	line-height: 24px;
	padding: 30px 0;
	text-align: center;
	font-size: 14px;
	font-weight: 300;
}

@media (max-width: 800px){
	.photo-wall .para{
		font-size: 16px;
	}
	.link-diagram .brand{
		width: 70px;
		height: 70px;
	}
	.community-link{
		width: 30px;
		height: 30px;
	}
	.footer .col-1-12.col-md-2.mb-no-display{
		display: none;
	}
}
@media (max-width: 600px){
	.photo-wall .para{
		font-size: 14px;
	}
	.link-diagram .brand{
		width: 60px;
		height: 60px;
	}
	.link-diagram{
		margin-top: 60px;
	}
	.community{
	    margin-top: 20px;
	}
	.community-link{
		width: 20px;
		height: 20px;
	}
	.footer .copyright h6{
		font-size: 12px;
		padding: 15px 0;
	}
}




 /*------------------------------------*\
 	COVER html
 \*------------------------------------*/
 .wrapper-cover{
 	width: 100%;
 	height: 100%;
 	position: fixed;
 	background-color: black;
 	display: none;
}

.cover-mask-dark{
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,0.7);

	-webkit-transition: all 0.5s;

	-o-transition: all 0.5s;

	transition: all 0.5s;
}

.cover-top{
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 50%;
	padding: 0;
	background-color: #FFFFFF;
	overflow: hidden;
}

.cover-top:hover .cover-mask-dark,
.cover-bot:hover .cover-mask-dark{
	background-color: rgba(0,0,0,0);
}

.ani-cv-top{
	-webkit-animation: fadeInDown-top 1.5s 0.8s both;
	        animation: fadeInDown-top 1.5s 0.8s both;
}
@-webkit-keyframes fadeInDown-top{
	0%{top: -50%;opacity: 0;}
	20%{opacity: 0;}
	100%{top: 0;opacity: 1;}
}
@keyframes fadeInDown-top{
	0%{top: -50%;opacity: 0;}
	20%{opacity: 0;}
	100%{top: 0;opacity: 1;}
}

@media (max-width: 1024px){
	.cover-mask-dark{
		display: none;
	}
	.cover-top{
		background-color: #9A9A9A;
	}
}



.cover-mid{
	position: fixed;
	width: 100px;
	height: 100px;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%,-50%);
	    -ms-transform: translate(-50%,-50%);
	        transform: translate(-50%,-50%);

	background-color: #000000;
	/*border: 1px solid #BFBFBF;*/
	border-radius: 10px;
	z-index: 500;
	overflow: hidden;

	-webkit-transition: all 0.5s;

	-o-transition: all 0.5s;

	transition: all 0.5s;
}

.cover-mid:hover{
	width: 100%;
	border-radius: 0;
	border-top: 1px solid #BFBFBF;
	border-bottom: 1px solid #BFBFBF;
}
.ani-cv-mid{
	-webkit-animation: fadeIn-mid 1.5s ease-in both;
	        animation: fadeIn-mid 1.5s ease-in both;
}
@-webkit-keyframes fadeIn-mid{
	0%{opacity: 0;}
	100%{opacity: 1;}
}
@keyframes fadeIn-mid{
	0%{opacity: 0;}
	100%{opacity: 1;}
}

@media (max-width: 1200px){
	.cover-mid{
		width: 80px;
		height: 80px;
		border-radius: 10px;
	}
}
@media (max-width: 1024px){
	.cover-mid{
		width: 100%;
		border-radius: 0;
	}
}
@media (max-width: 800px){
	.cover-mid{
		height: 70px;
	}
}
@media (max-width: 600px){
	.cover-mid{
		height: 50px;
	}
}



.cover-bot{
	position: fixed;
	left: 0;
	top: 50%;
	width: 100%;
	height: 50%;
	padding: 0;
	background-color: #E3E3E3;
	overflow: hidden;
}
.ani-cv-bot{
	-webkit-animation: fadeInUp-bot 1.5s 0.8s both;
	        animation: fadeInUp-bot 1.5s 0.8s both;
}
@-webkit-keyframes fadeInUp-bot{
	0%{top: 100%;opacity: 0;}
	20%{opacity: 0;}
	100%{top: 50%;opacity: 1;}
}
@keyframes fadeInUp-bot{
	0%{top: 100%;opacity: 0;}
	20%{opacity: 0;}
	100%{top: 50%;opacity: 1;}
}
@media (max-width: 1024px){
	.cover-bot{
		background-color: #9A9A9A;
	}
}


/*brand*/
.cover-brand{
	/*display: block;*/
	/*margin: 0 auto;*/
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%,-50%);
	    -ms-transform: translate(-50%,-50%);
	        transform: translate(-50%,-50%);
	width: 80px;
	height: 80px;
	
	background-image: url(../images/Common/brand-logo-light.png);
	-webkit-transition: all 0.5s;
	-o-transition: all 0.5s;
	transition: all 0.5s;
}

.cover-mid:hover .cover-brand{
	-webkit-transform: translate(-50%,-50%) rotate(90deg);
	    -ms-transform: translate(-50%,-50%) rotate(90deg);
	        transform: translate(-50%,-50%) rotate(90deg);
}

.ani-cv-brand{
	-webkit-animation: bounceIn-brand 1s ease-in both;
	        animation: bounceIn-brand 1s ease-in both;
}
@-webkit-keyframes bounceIn-brand{
	0%{width: 0;height: 0;opacity: 0;}
	80%{width: 90px;height: 90px;}
	100%{width: 80px;height: 80px;opacity: 1;}
}
@keyframes bounceIn-brand{
	0%{width: 0;height: 0;opacity: 0;}
	80%{width: 90px;height: 90px;}
	100%{width: 80px;height: 80px;opacity: 1;}
}


@media (max-width: 1200px){
	.cover-brand{
		width: 70px;
		height: 70px;
	}
	@-webkit-keyframes bounceIn-brand{
		0%{width: 0;height: 0;opacity: 0;}
		80%{width: 80px;height: 80px;}
		100%{width: 70px;height: 70px;opacity: 1;}
	}
	@keyframes bounceIn-brand{
		0%{width: 0;height: 0;opacity: 0;}
		80%{width: 80px;height: 80px;}
		100%{width: 70px;height: 70px;opacity: 1;}
	}
}
@media (max-width: 800px){
	.cover-brand{
		width: 60px;
		height: 60px;
	}
	@-webkit-keyframes bounceIn-brand{
		0%{width: 0;height: 0;opacity: 0;}
		80%{width: 68px;height: 68px;}
		100%{width: 60px;height: 60px;opacity: 1;}
	}
	@keyframes bounceIn-brand{
		0%{width: 0;height: 0;opacity: 0;}
		80%{width: 68px;height: 68px;}
		100%{width: 60px;height: 60px;opacity: 1;}
	}
}

@media (max-width: 600px){
	.cover-brand{
		width: 40px;
		height: 40px;
	}
	@-webkit-keyframes bounceIn-brand{
		0%{width: 0;height: 0;opacity: 0;}
		80%{width: 48px;height: 48px;}
		100%{width: 40px;height: 40px;opacity: 1;}
	}
	@keyframes bounceIn-brand{
		0%{width: 0;height: 0;opacity: 0;}
		80%{width: 48px;height: 48px;}
		100%{width: 40px;height: 40px;opacity: 1;}
	}
}

/*video*/
.cover-video-setting{
	width: 100%;
	opacity: 0;

	-webkit-transition: all 0.5s;

	-o-transition: all 0.5s;

	transition: all 0.5s;
}
.cover-top:hover .cover-video-setting,
.cover-bot:hover .cover-video-setting{
	opacity: 1;
	/*left: -600px;*/

}
@media (max-width: 1024px){
	.cover-video-setting{
		width: 130%;
		opacity: 1;
	}
}
@media (max-width: 800px){
	.cover-video-setting{
		/*width: 130%;*/
	}
}
@media (max-width: 600px){
	.cover-video-setting{
		width: 200%;
	}
}

/*image*/
.cover-top .cover-top-image{
	background-image: url(../images/Common/cover-design-T80.png);
	
	position: absolute;
	top: 0;
	right: 0;
	width: 100%;
	height: 100%;
	-webkit-transition: all 0.5s;
	-o-transition: all 0.5s;
	transition: all 0.5s;
}

.cover-bot .cover-bot-image{
	background-image: url(../images/Common/cover-travel-T80.png);
	
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	-webkit-transition: all 0.5s;
	-o-transition: all 0.5s;
	transition: all 0.5s;
}

.cover-top:hover .cover-top-image{
	width: 120%;
	height: 120%;
}

.cover-bot:hover .cover-bot-image{
	width: 120%;
	height: 120%;
}

@media (max-width: 1024px){
	.cover-top:hover .cover-top-image,
	.cover-bot:hover .cover-bot-image{
		width: 100%;
		height: 100%;
	}
}


/*title*/
.cover-title{
	position: absolute;
	top: 50%;
	/*right: -10%;*/
	-webkit-transform: translate(0%,-50%);
	    -ms-transform: translate(0%,-50%);
	        transform: translate(0%,-50%);

	font-size: 64px;
	font-weight: 300;
	color: #1A1A1A;

	opacity: 0;

	-webkit-transition: all 0.5s;

	-o-transition: all 0.5s;

	transition: all 0.5s;
}

.title-top{
	right: -10%;
}
.title-bot{
	left: -10%;
}

.cover-top:hover .cover-title{
	right: 5%;
	opacity: 1;
}

.cover-bot:hover .cover-title{
	left: 5%;
	opacity: 1;
}

@media (max-width: 1200px){
	.cover-title{
		font-size: 50px;
	}
}
@media (max-width: 1024px){
	.cover-title{
		font-size: 32px;
		opacity: 1;
	}
	.title-top{
		right: 5%;
	}
	.title-bot{
		left: 5%;
	}
}
@media (max-width: 800px){
	.cover-title{
		font-size: 24px;
	}
}
@media (max-width: 600px){
	.cover-title{
		top: 50%;
		left: 50%;
		-webkit-transform: translate(-50%,-50%);
		    -ms-transform: translate(-50%,-50%);
		        transform: translate(-50%,-50%);
		font-size: 16px;
		color: #BFBFBF;
		text-align: center;
	}
	.title-top{
		top: 0%;
		right: 50%;
		-webkit-transform: translate(50%,0);
		    -ms-transform: translate(50%,0);
		        transform: translate(50%,0);
		width: 100%;
		background-color: rgba(0,0,0,0.5);
		padding: 5px 0;
	}
	.title-bot{
		top: 100%;
		left: 50%;
		-webkit-transform: translate(-50%,-100%);
		    -ms-transform: translate(-50%,-100%);
		        transform: translate(-50%,-100%);
		width: 100%;
		background-color: rgba(0,0,0,0.5);
		padding: 5px 0;
	}
	.cover-top:hover .cover-title{
		right: 50%;
		opacity: 1;
	}
	.cover-bot:hover .cover-title{
		left: 50%;
		opacity: 1;
	}
}

.cover-md-title{
	position: absolute;
	top: 50%;
	right: 50%;
	padding-right: 10px;
	-webkit-transform: translate(0%,-50%);
	    -ms-transform: translate(0%,-50%);
	        transform: translate(0%,-50%);

	font-size: 40px;
	font-weight: 300;
	letter-spacing: initial;
	line-height: initial;
	color: #BFBFBF;
	opacity: 0;

	-webkit-transition: all 0.5s;

	-o-transition: all 0.5s;

	transition: all 0.5s;
}

.cover-mid:hover .cover-md-title{
	right: 55%;
	opacity: 1;
}


@media (max-width: 1200px){
	.cover-md-title{
		font-size: 32px;
	}
	.cover-mid:hover .cover-md-title{
		right: 57%;
	}
}
@media (max-width: 1024px){
	.cover-md-title{
		right: 57%;
		opacity: 1;
	}
	.ani-cv-mid-title{
		-webkit-animation: fadeInLeft-mid-title 1s 1.5s both;
		        animation: fadeInLeft-mid-title 1s 1.5s both;
	}
	@-webkit-keyframes fadeInLeft-mid-title{
		0%{opacity: 0;right: 50%;}
		100%{opacity: 1;right: 57%;}
	}
	@keyframes fadeInLeft-mid-title{
		0%{opacity: 0;right: 50%;}
		100%{opacity: 1;right: 57%;}
	}
}
@media (max-width: 800px){
	.cover-md-title{
		font-size: 24px;
	}
}
@media (max-width: 600px){
	.cover-md-title{
		font-size: 20px;
		right: 61%;
	}
	@-webkit-keyframes fadeInLeft-mid-title{
		0%{opacity: 0;right: 50%;}
		100%{opacity: 1;right: 61%;}
	}
	@keyframes fadeInLeft-mid-title{
		0%{opacity: 0;right: 50%;}
		100%{opacity: 1;right: 61%;}
	}
}

/*community link*/

.cover-community{
    position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(0%,-50%);
	    -ms-transform: translate(0%,-50%);
	        transform: translate(0%,-50%);

	opacity: 0;

	-webkit-transition: all 0.5s;

	-o-transition: all 0.5s;

	transition: all 0.5s;
}

.cover-mid:hover .cover-community{
	left: 55%;
	opacity: 1;
}

.cover-community-link{
	display: inline-block;
	width: 36px;
	height: 36px;
	margin-right: 24px;

	overflow: hidden;

	-webkit-transition: all 0.3s;

	-o-transition: all 0.3s;

	transition: all 0.3s;
}

@media (max-width: 1200px){
	.cover-community-link{
		width: 30px;
		height: 30px;
	}
	.cover-mid:hover .cover-community{
		left: 57%;
	}
}
@media (max-width: 1024px){
	.cover-community{
		left: 57%;
		opacity: 1;
	}
	.ani-cv-mid-community{
		-webkit-animation: fadeInRight-mid-community 1s 1.5s both;
		        animation: fadeInRight-mid-community 1s 1.5s both;
	}
	@-webkit-keyframes fadeInRight-mid-community{
		0%{opacity: 0;left: 50%;}
		100%{opacity: 1;left: 57%;}
	}
	@keyframes fadeInRight-mid-community{
		0%{opacity: 0;left: 50%;}
		100%{opacity: 1;left: 57%;}
	}
}
@media (max-width: 800px){
	.cover-community-link{
		width: 25px;
		height: 25px;
	}
}
@media (max-width: 600px){
	.cover-community{
		left: 61%;
	}
	@-webkit-keyframes fadeInRight-mid-community{
		0%{opacity: 0;left: 50%;}
		100%{opacity: 1;left: 61%;}
	}
	@keyframes fadeInRight-mid-community{
		0%{opacity: 0;left: 50%;}
		100%{opacity: 1;left: 61%;}
	}
	.cover-community-link{
		width: 20px;
		height: 20px;
	}
}

.cover-community-link.FB{
	background-image: url('../images/Common/Facebook logo-G.png');
}
.cover-community-link.Pin{
	background-image: url('../images/Common/Pinterest logo-G.png');
}
.cover-community-link.Be{
	background-image: url('../images/Common/Behance logo-G.png');
}
.cover-community-link.FB:hover{
	background-image: url('../images/Common/Facebook logo-W.png');
}
.cover-community-link.Pin:hover{
	background-image: url('../images/Common/Pinterest logo-W.png');
}
.cover-community-link.Be:hover{
	background-image: url('../images/Common/Behance logo-W.png');
}



 /*------------------------------------*\
 	Loading page
 \*------------------------------------*/
/*COVER - loading page*/
.loading-page{
	width: 100vw;
	height: 100vh;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	    -ms-flex-direction: column;
	        flex-direction: column;
	position: fixed;
	top: 0;
	left: 0;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	background: #1c1c1c;
	overflow: hidden;
	z-index: 100000;
	-o-transition: 0.6s cubic-bezier(.77,0,.18,1);
	transition: 0.6s cubic-bezier(.77,0,.18,1);
	-webkit-transition: 0.6s cubic-bezier(.77,0,.18,1);
	opacity: 1;
	visibility: visible;
}
.loaded{
	opacity: 0;
	visibility: hidden;
}

.centre {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	    -ms-flex-direction: column;
	        flex-direction: column;
}

.loader {
	background: transparent;
	width: 84px;
	height: 84px;
	border-top: 4px solid rgba(255, 255, 255, 0.3);
	border-right: 4px solid rgba(255, 255, 255, 0.3);
	border-bottom: 4px solid rgba(255, 255, 255, 0.3);
	border-left: 4px solid #fff;
	border-radius: 50%;
	-webkit-animation: spin 1s ease infinite;
	        animation: spin 1s ease infinite;
}

@-webkit-keyframes spin {
	0% {
		-webkit-transform: rotate(0);
		        transform: rotate(0);
	}
	100% {
		-webkit-transform: rotate(360deg);
		        transform: rotate(360deg);
	}
}

@keyframes spin {
	0% {
		-webkit-transform: rotate(0);
		        transform: rotate(0);
	}
	100% {
		-webkit-transform: rotate(360deg);
		        transform: rotate(360deg);
	}
}

.centre .loading-text{
	color: #fff;
	font-size: 20px;
	font-weight: 300;
	margin-top: 40px;

	-webkit-animation: word 2s infinite;

	        animation: word 2s infinite;
}

@-webkit-keyframes word {
	0% {
		opacity: 1;
	}
	50% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

@keyframes word {
	0% {
		opacity: 1;
	}
	50% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}