body {
	font-family: 'Scada', sans-serif;;
	margin: 0;
	display: inline-block;
}

.full {
	float: left;
	position: relative;
	width: 100%;
	padding: 3% 10%;
}

.full2 {
	float: left;
	position: relative;
	width: 100%;
}

.width-half {
	float: left;
	position: relative;
	width: 50%;
}

.right {
	float: right;
}

.download {
	width: 50px;
	height: 50px;
	background-color: white;
	border-radius: 50%;
}

.font-small {
	font-size: 0.5em;
	font-weight: normal;
	padding-top: 1%;
	padding-right: 1%;
}

.pointer {
	height: 40px;
	padding-top: 0.5%;
	padding-right: 3%;
	opacity: 0.4;
}

.menu-panel {
	padding: 0% 10% !important;
}

.download-link {
	display: inline-block;
	width: 170px;
	margin: 0 2%;
}

#menu-img-mobile {
	display: none;
}

/********************************************
 ** Top Nav-Bar
 **/

#top-panel {
	/*position: absolute;    NOTE: Uncomment this*/
	display: block;
	top: 0;
	background-color: #cbd6f6;
	position: fixed;
	z-index: 100;
	padding-top: 1% !important;
	font-size: 1.2em;
	font-weight: bold;
}

#top-panel p {
	display: inline-block;
}

#top-nav, #top-nav-mobile {			/* ul */
	list-style-type: none;
	margin: 0;
	padding: 0;
	overflow: hidden;
	float: right;
}

#top-nav li, #top-nav-mobile li {
	cursor: pointer;
	font-weight: normal;
	float: right;
	padding-left:10;
	padding-right:10;
	padding-bottom: 10;
}

#top-nav li.li-link, #top-nav-mobile li.li-link {
	font-weight: bold;
}

#top-nav #li-bdd-txt, #top-nav-mobile #li-bdd-txt {
	font-weight: bold;
}

.scroll-profile, .scroll-top, .scroll-contact, .scroll-resume, .scroll-project, .scroll-skills, .scroll-exp, .scroll-edu {
	cursor: pointer;
}


/******************************************
 ** Bottom Nav-bar
 **/
.bottom-nav {
	width: 100%;
	bottom: 0;
	margin: 0;
	padding: 0;
	text-align: center;

}

.bottom-nav p {
	margin: 0;
}

.bottom-nav p a {
	color: 	black;
}

.bottom-nav p a:hover {
	font-weight: bold;
	text-decoration: none;
}

/******************************************
 ** main page 
 **/
#main-page {
	padding-top: 5%;
	position: relative;
	min-height: 300px;
	text-align: center;
	background-image: url("../image/bg/bluer_bg_2.jpg");   /* NOTE: use blurred image */;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: top;
}

.sub-section {
	display: inline-block;
	padding-left: 5%;
	padding-right: 5%;
}

.width-third {
	display: inline-block;
	width: 30%;
	margin: left;
}

.menu-link  {
	text-align: center;
}

#name {
	margin-bottom: 15%;
}

#name h3 {
	font-weight:bold;
	font-size:4em;
	color: #2d436b;
	text-shadow:
		-2px -2px 0 #ffffff,
		2px -2px 0 #ffffff,
		-2px 2px 0 #ffffff,
		2px 2px 0 #ffffff;
	animation: wordColorChange 15s linear infinite 0s;
}

.icon{
	width: 150px;
	height: 150px;
	border-radius: 50%;
	background-color: #2d436b;
	margin: auto;
	left: auto;
	right: auto;
}

#rotate-icon {
	background-image: url("../image/icon/design_icon.png");
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	background-color: #2d436b;
	animation: iconAnimate 15s linear infinite 0s;
}

#rotate-item span{
	border-radius: 5px;
	position: absolute;
	margin-top:10px;
	margin-left: -53px;
    height: 40px;
    line-height: 40px;
    overflow: hidden;
    opacity: 0;
    font-weight: 900;
    text-transform: uppercase;
    font-size: 28px;
    background: white;
    color: #2d436b;
    padding: 2px 10px 2px 10px; 
    animation: rotateWordHor 15s linear infinite 0s;
}

#rotate-item span:nth-child(2) { 
	animation-delay: 5s;
	margin-left:-56px;
    color: #3f5e96;
}

#rotate-item span:nth-child(3) {
	animation-delay: 10s;
	margin-left: -52px;
	color: #1b2840;
}

#menu {
	margin-top: 15%;
	margin-bottom: 10%;
	position: relative;
	background-color: rgba(255, 255, 255, 0.5);
}

#menu::after, 
#menu::before {
	border: 0.5em solid #2d436b;
	bottom: 0;
	content: '';
	position: absolute;
	top: 0;
	width: 5%;
}

#menu::after {
	border-left: none;
	right: 0;
}

#menu::before {
	border-right: none;
	left: 0;
}

.menu-link {
	font-size: 28px;
	font-weight: bold;
}

.line::before {
	content: '';
	position: absolute;
	left: 0;
	border-left: 0.2em solid #2d436b;
	top: 3%;
	bottom: 3%;
	animation :lBorderColorChange 15s linear infinite 0s;
}

.line {
    position: relative;
}

.line::after {
    content: '';
    position: absolute;
    right: 0;
    border-right: 0.2em solid #2d436b;
    top: 3%;
    bottom: 3%;
    animation: rBorderColorChange 15s linear infinite 0s;
}

.menu-title {
	background:#2d436b;
	color: white;
	padding: 1% 5%;
	animation: bgColorChange 15s linear infinite 0s;
}

.menu-sublist {
	text-align: center;
	margin-top: 10%;
	list-style-type: none;
	padding-left: 0;
}
.menu-sublist li{
	padding-bottom: 2%;
}

.menu-sublist li a {
	font-weight: bold;
	font-size: 20px;
	color: #2d436b;
	animation: wordColorChange 15s linear infinite 0s;
}


/****************************************
 ** profile-page
 **/
#profile-page {
	display: inline-block;
	background-color: #486cac;
	min-height: 200px;
	height: 100%;
	padding: 5% 0;
	color: white;
}

#profile-photo {
	text-align: center;
	padding: 5% 0%;
}

#profile-photo img {
	width: 70%;
	border-radius: 500%;
}

#profiles {
/*	position: absolute;
	top: 28%;
	left: 50%;
	max-width: 800px;
	padding-left: 5%;
	padding-right: 6%;*/
	padding: 5%;
	width: 50%;
}

#profiles p {
	text-align: justify;
	font-size: 1.5em;
	letter-spacing: 1.2px;
	line-height: 1.6;
}

#profiles p a {
	color: #bdd0ef;
	text-decoration: underline;
}

#profiles .summary-pt-div {
	font-size: 1.4em;
	line-height: 1.2;
}

#profiles .summary-pt-div li {
	margin-bottom: 2%;
}

.linkto {
	color: #ccf0ff;
}
/*****************************************
 ** project-page
 **/
#project-page {
	background-color: black;
}

.slider-frame {
	overflow: hidden;
	position: relative;
	margin: auto;
	width: 1280px;
}

.arrow-container {
	position: absolute;
	width: 1280px;
	height: 100%;
	pointer-events: none;
}

.slider-arrow-container {
	position: relative;
	top: 50%;
	transform: translateY(-50%);
}

.slider-arrow {
	display: inline-block;
	pointer-events: all;
}

.arrow-left {
	left: 0;
	padding-left: 10px;
}
.arrow-right {
	right: 0;
	padding-right: 10px;
	position: absolute;
}

.s-arrow-img {
	cursor: pointer;
	width: 70px;
}

.slider-wrapper {
	background-color: green;
	width: 5120px;
	position: relative;
}

.slider-content {
	float:left;
	width: 1280px;
}

.slider-content.active {
	display: inline-block;
}


.proj-banner {
	width: 100%;
}

.proj-app-download {
	display: inline-block;
	padding: 15px 4px;
	width: 50%;
	position: absolute;
	top: 0;
}

.proj-app-download .download-link {
	margin: 0 1%;
}

.github-source {
	display: inline-block;
	float: right;
	position: absolute;
	top: 0;
	/*left: 830px;*/
	padding: 15px;
	font-size: 1.7em;
	vertical-align: center;
	animation: logoFlash ease-in-out 1.5s infinite 0s;
}

#fishing-snatching .github-source {
	right: 3840px;
}

#fishing-snatching2 .github-source {
	right: 0px;
}

.github-icon {
	width: 120px;
}

.dot-indicators {
	position: absolute;
	bottom: 0;
	width: 100%;
	text-align: center;
}

.dot-badge {
	background-color: rgba(17, 17, 17, 0.5);
	border: 2px solid rgb(17, 17, 17);
	border-radius: 50%;
	display: inline-block;
	width: 25px; 
	height: 25px;
	margin: 0 5px;
	cursor: pointer;
}

.dot-badge.active {
	background-color: rgba(253, 232, 255, 1);
}
/*****************************************
 ** resume page
 **/

#resume-main {
	padding-top: 1% !important;
	padding-bottom: 1% !important;
	font-size: 2.0em;
	font-weight: bold; 
	color: #484c54;
}

#resume-main p {
	display: inline-block;
	width: 30%;
	float:left;
}

#resume-page {
	display: inline-block;
	padding-top: 0%;
	background: #e2ebfb;
    background: -webkit-linear-gradient(#e2ebfb, #8eb1f1); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(#e2ebfb, #8eb1f1); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#e2ebfb, #8eb1f1); /* For Firefox 3.6 to 15 */
    background: linear-gradient(#e2ebfb, #8eb1f1); /* Standard syntax */
}

.resume-title{
	text-align: center;
	cursor: pointer;
	font-size: 1.4em;
	padding: 1% 0%;
	color: #121b2b;
	font-weight: bold;
}



/********** Sub section ***********/
#resume-page #resume-main {
	border-bottom: 2px solid #8eb1f1;
}
#resume-page .sub-section {
	border-bottom: 2px solid #80a8f0;
	padding: 0 10%;
}

.arrow {
	display: inline-block;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	vertical-align: bottom;
}

.arrow-up {
	background-image: url("../image/icon/icon_up.png");
}

.arrow-down {
	background-image: url("../image/icon/icon_down.png");
}

.content-hidden {
	display: none;
}

.resume-items {
	margin: 5% 0%;
}

/******* skills area ********/

#resume-page .sub-section#area-skills{
	padding: 0;
}

.skills-group {
	margin-bottom: 20%;
}

.skills-title {
	font-size: 1.7em;
	margin-bottom: 8%;
	margin-left: 10%;

}

.skills-lists {
	width: 1280px;
	margin: auto;
}

.skill-item {
	display: inline-block;
	border: 3px solid black;
	padding: 1%;
	border-radius: 15px;
	margin: 1%;
	font-size: 1.2em;
	vertical-align: top;
}

/* programming languages/frameworks */
.skills-title#programming {
	color: #423262;
	border-bottom: 0.2em solid #423262; 
	margin-right: 50%;
}

.skill-item#p-csharp {
	font-size: 3.0em;
	padding: 4% 10%;
	border-radius: 25px;
	margin-left: 52%;
	background-color: #a68adf;
	border-color: #9c7ddb;
	color: black;
}

.skill-item#p-c {
	font-size:2.0em;
	padding: 1% 2%;
	border-radius: 25px;
	margin-top: 8%;
	margin-left: 25%;
	background-color: #b097e2;
	border-color: #a68adf;
	color: black;

}

.skill-item#p-python {
	font-size: 2.5em;
	padding: 2%;
	border-radius: 30px;
	margin-left:3%;
	margin-top: -13px;
	background-color: #785bb0;
	border-color: #6a519d;
	color: white;
}

.skill-item#p-js {
	font-size: 3.7em;
	padding: 3%;
	border-radius: 40px;
	margin-top: 1%;
	margin-left: 7%;
	background-color: #c4b1e9;
	border-color: #baa4e6;
	color: black;
}

.skill-item#p-rest {
	margin-left: 22%;
	background-color: #cdbeed;
	border-color: #c4b1e9;
}

.skill-item#p-cpp {
	font-size: 4.0em;
	padding: 3% 5%;
	border-radius: 35px;
	margin-left: 4%;
	margin-top: -50px;
	background-color: #423262;
	border-color: #35284e;
	color: white;
}

.skill-item#p-java {
	font-size: 2.4em;
	padding: 2% 3%;
	border-radius: 25px;
	margin-left:-1%;
	margin-top: 2%;
	background-color: #9370d8;
	border-color: #8565c4;
	color: white;
}

.skill-item#p-jquery {
	font-size: 2.5em;
	padding: 1% 2%;
	border-radius: 25px;
	margin-top:2%;
	margin-left: 9%;
	background-color: #e1d8f4;
	border-color: #d7cbf0;
}

.skill-item#p-mvc {
	font-size: 1.8em;
	padding: 2% 3%;
	border-radius: 25px;
	margin-left: 26%;
	margin-top: -1%;
	background-color: #ebe5f7;
	border-color: #e1d8f4;
	color: black;
}

.skill-item#p-asp {
	font-size:1.5em;
	border-radius: 20px;
	margin-top: -1%;
	background-color: #9c7ddb;
	border-color: #9370d8;
	color: white;
}

.skill-item#p-html {
	font-size: 3.0em;
	padding: 3%;
	border-radius:30px;
	margin-top: 1%;
	background-color: #5d4789;
	border-color: #503d75;
	color: white;

}

.skill-item#p-nodejs {
	font-size: 2.2em;
	padding: 1% 3%;
	border-radius: 20px;
	margin-left: 2%;
	margin-top: 3%;
	background-color: #281e3a;
	border-color: #1a1427;
	color: white;
}

/* graphics/design */
.skills-title#graphic {
	color: #10321f;
	border-bottom: 0.2em solid #10321f;
	margin-right: 65%;
	margin-top: 12%;
}

.skill-item#g-ps {
	font-size: 2.8em;
	padding: 3%;
	border-radius: 40px;
	margin-left: 30%;
	margin-top: 3%;
	background-color: #a0cab2;
	border-color: #8dbfa3;
	color: black;
}

.skill-item#g-ill {
	font-size: 1.5em;
	border-radius: 20px;
	margin-left: 3%;
	background-color: #c6dfd1;
	border-color: #a0cab2;
	color: black;
}

.skill-item#g-3dx {
	font-size: 2.0em;
	padding: 1% 2%;
	border-radius: 25px;
	margin-left: 20%;
	margin-top: -7px;
	background-color: #2e8b57;
	border-color: #297e4f;
	color: white;

}

.skill-item#g-maya {
	font-size: 2.8em;
	padding: 2% 4%;
	border-radius: 25px;
	margin-left: 10%;
	margin-top: 3%;
	background-color: #143f27;
	border-color: #10321f;
	color: white;
}

.skill-item#g-sketchup {
	font-size: 2.5em;
	padding: 2%;
	border-radius: 35px;
	margin-left: -2px;
	margin-top: -60px;
	background-color: #21653f;
	border-color: #1d5837;
	color: white;
}

.skill-item#g-blender {
	font-size: 1.5em;
	padding: 1% 2%;
	border-radius: 25px;
	margin-left: 3%;
	margin-top: 3%;
	background-color: #137716;
	border-color: #0f6812;
	color: white;
}


/* others */
.skills-title#others {
	color: #733924;
	border-bottom: 0.2em solid #733924;
	margin-right: 70%;
	margin-top: 12%;
}

.skill-item#o-cartoon {
	font-size: 3em;
	padding: 4%;
	border-radius: 50px;
	margin-left: 35%;
	background-color: #5c2e1d;
	border-color: #452215;
	color: white;
}

.skill-item#o-qa {
	font-size: 2em;
	padding: 1% 3%;
	border-radius: 35px;
	margin-top: 10%;
	background-color: #a25032;
	border-color: #8b452b;
	color: white;
}

.skill-item#o-unity {
	font-size: 1.6em;
	padding: 2%;
	border-radius: 30px;
	margin-left: 23%;
	margin-top: -40px;
	background-color: #e77348;
	border-color: #d06741;
	color: white;
}

.skill-item#o-gamemaker {
	font-size: 1.7em;
	padding: 1% 3%;
	border-radius: 25px;
	margin-left: 7%;
	background-color: #d06741;
	border-color: #b95c3a;
	color: white;
}


/****** experience area ******/
.exp-year {
	padding: 0 5% !important;
}
.exp-year h3 {
	display: inline-block;
	text-align: center;
	color: #29428f;
	font-size: 2.5em;
	font-weight: bold;
	padding:1%;
	letter-spacing: 1.2px;
	width: 100%;
}

.exp-year h3::before {
    content: '';
    position: absolute;
    top: 70;
    border-bottom: 0.2em solid #29428f;
    left: 45%;
    right: 45%;
}

#personal-proj .company-logo, #exp-personal .company-logo,
#hothead .company-logo {
	width: 120px !important; 
}


.company-logo {
	width: 200px;
}

.company-bp-list {
	list-style-position: outside;
}

.company-bp-list li {
	font-size: 1.4em;
	padding-bottom: 2%;
}

.exp-item {
	text-align: center;
}

.exp-left.exp-item.bullet-pt {
	padding-right: 4% !important;
	text-align: left;
	padding-left: 5% !important;
}
.exp-right.exp-item.bullet-pt {
	text-align: left;
}

.exp-left#edisoft .exp-inner-item::before {
	content: '';
	position: absolute;
	top: 50%;
	border-top: 0.5em solid #29428f;
	left: 85%;
	right: 0;
}

.exp-left .exp-inner-item::before {
	content: '';
	position: absolute;
	top: 50%;
	border-top: 0.5em solid #29428f;
	left: 85%;
	right: -5;
}

.exp-left .exp-inner-item {
	position: relative;
}

.exp-left .exp-inner-item::after {
	content: '';
    position: absolute;
    right: 15%;
    border-right: 0.5em solid #29428f;
    top: 3%;
    bottom: 3%;
}

.exp-right .exp-inner-item::before {
	content: '';
	position: absolute;
	top: 50%;
	border-top: 0.5em solid #29428f;
	right: 85%;
	left: -5;
}

.exp-right .exp-inner-item {
	position: relative;
}

.exp-right .exp-inner-item::after {
	content: '';
    position: absolute;
    left: 15%;
    border-left: 0.5em solid #29428f;
    top: 3%;
    bottom: 3%;
}

.exp-item h4 {
	font-size: 1.6em;
	color: #661a20;
	font-weight: bold;
}

.exp-item h5 {
	font-size: 1.3em;
}


#hothead {
	position: relative;
    padding: 12% 1%;
}

#hothead::after {
    content: '';
    position: absolute;
    right: 0;
    border-right: 0.8em solid #29428f;
    top: -2%;
    bottom: -3%;
}

#hothead-bp {
	padding: 8% 0%;
}

#personal-proj {
	padding-top: 12%;
	padding-bottom: 12%;
    position: relative;
}

#personal-proj::after {
    content: '';
    position: absolute;
    right: 0;
    border-right: 0.8em solid #29428f;
    top: -2%;
    bottom: -3%;
}

#personal-bp {
	padding: 8% 0%;
}

#fortran {
	padding: 12% 0%;
}

#fortran-bp {
    position: relative;
    padding: 12% 0%;
}

#fortran-bp::after {
    content: '';
    position: absolute;
    right: 0;
    border-right: 0.8em solid #29428f;
    top: -2%;
    bottom: -3%;
}


#zemind {
	padding: 12% 0%;
}

#zemind-bp {
    position: relative;
    padding: 12% 0%;
}

#zemind-bp::after {
    content: '';
    position: absolute;
    right: 0;
    border-right: 0.8em solid #29428f;
    top: -2%;
    bottom: -3%;
}


#bluedot {
	padding-top: 12%;
	padding-bottom: 12%;
    position: relative;
}

#bluedot::after {
    content: '';
    position: absolute;
    right: 0;
    border-right: 0.8em solid #29428f;
    top: -2%;
    bottom: -3%;
}

#bluedot-bp {
	padding: 15% 0%;
}

#kenna {
	padding: 12% 0%;
}

#kenna-bp {
    position: relative;
    padding: 12% 0%;
}

#kenna-bp::after {
    content: '';
    position: absolute;
    right: 0;
    border-right: 0.8em solid #29428f;
    top: -2%;
    bottom: -3%;
}

#edisoft{
	padding: 12% 0%;
    position: relative;
}

#edisoft::after {
    content: '';
    position: absolute;
    right: 0;
    border-right: 0.8em solid #29428f;
    top: -2%;
    bottom: -3%;
}

#edisoft-bp {
	padding: 12% 0%;
}

#ideaworks-bp{
	padding: 16% 0%;
    position: relative;
}

#ideaworks-bp::after {
    content: '';
    position: absolute;
    right: 0;
    border-right: 0.8em solid #29428f;
    top: -2%;
    bottom: -3%;
}

#ideaworks {
	padding: 12% 0%;
}

.oldest {
	margin-bottom: 12%;
}

/***** education area ******/

#uw-logo {
	width: 300px;
	margin-top: -5%;
	margin-bottom: 15%;
	margin-left: 15%;
	text-align: center;
}

#education-items {
	font-size: 1.4em;
}

.degree {
	font-size:1.2em;
	font-weight: bold;
}

.school-name {
	font-size: 1.8em;
}

.edu-date {
	font-size: 1.1em;
}

.subtitle {
	font-size: 0.8em;
}
/*****************************************
 ** contact page
 **/
#contact-page {
	background-color: #243656;
	color: white;
}

#contact-list h2 {
	font-size: 2.2em;
	margin-bottom: 5%;
	font-weight: bold;
	color: #d0d5dd;
}


#contact-page h3 {
	font-size: 1.6em;
	margin-bottom: 3%;
}

#mail-send {
    position: relative;
}

#mail-send::after {
    content: '';
    position: absolute;
    right: 10%;
    border-right: 0.3em solid #9cbbf3;
    top: 3%;
    bottom: 3%;
}


#mail-send h3{
	margin-bottom: 5%;
	font-size: 2.4em;
	font-weight: bold;
}

#mail label{
	font-size: 1.4em;
	font-weight: normal;
	letter-spacing: 1.2px;
	line-height: 1.6;
	width: 15%;
}

#mail input {
	color: black;
	width: 65%;
	margin-bottom: 4%;
	padding: 1%;
	font-size: 1.2em;
	border-radius: 15px;
	outline: none;
}

#mail textarea {
	color: black;
	width: 65%;
	padding: 1%;
 	min-height: 300px;
 	vertical-align: top;
 	font-size:1.2em;
 	border-radius: 15px;
 	outline: none;
}

#submit-button {
	margin-top: 5%;
	margin-right: 20%;
	text-align: right;

}

#submit-btn {
	font-size: 1.4em;
	background-color: #9cbbf3;
	color: black;
	font-weight: bold;
	border: 2px solid #729eee;
	border-radius: 25px;
	outline: none;
}

/* contact (email/linkedin) addr section */
.contact {
	font-weight: normal;
	padding-bottom: 5%;
	font-size: 1.4em;
	letter-spacing: 1.2px;
	line-height: 1.6;
}

.contact.contact-link {
	padding-left: 4%;
	margin-bottom: 5%;
}


.contact a {
	font-weight: normal;
	color: #9cbbf3;
}

.contact a:hover {
	color: #9cbbf3;
}

.contact-sns {
	display: inline-block;
	margin-top: 5%;
}

.contact-logo {
	width: 120px;
}

#contact-linkedin {
	margin-right: 15%;
}



/*****************************************
 ** Animation
 **/
@keyframes rotateWordVer {
	0% 	{ opacity: 0; }
	1% 	{ opacity: 0; transform: translateY(-10px) rotateX(90deg);}
	2% 	{ opacity: 1; transform: translateY(0px);}
	33%	{ opacity: 1; transform: translateY(0px);}
	34% { opacity: 0; transform: translateY(10px) rotateX(270deg);}
	100%{ opacity: 0; }
}

@keyframes rotateWordHor {
	0% 	{ opacity: 0; }
	1% 	{ opacity: 0; transform: translateX(-10px) rotateY(90deg);}
	2% 	{ opacity: 1; transform: translateX(0px);}
	33%	{ opacity: 1; transform: translateX(0px);}
	34% { opacity: 0; transform: translateX(10px) rotateY(270deg);}
	100%{ opacity: 0; }
}

@keyframes iconAnimate {
	0% 	{ background-image: url("../image/icon/design_icon.png"); background-color: #2d436b;}
	1% 	{ opacity: 0; transform: translateX(-10px) rotateY(90deg);}
	2% 	{ opacity: 1; transform: translateX(0px);}
	33%	{ background-image: url("../image/icon/design_icon.png"); opacity: 1; transform: translateX(0px);}

	34% { background-image: url("../image/icon/develop_icon.png"); background-color: #3f5e96; opacity: 0;}
	35% { opacity: 0; transform: translateX(-10px) rotateY(90deg);}
	36% { opacity: 1; transform: translateX(0px);}
	66% { background-image: url("../image/icon/develop_icon.png"); opacity: 1; transform: translateX(0px);}

	67% { background-image: url("../image/icon/create_icon.png"); background-color: #1b2840; opacity: 0;}
	68% { opacity: 0; transform: translateX(-10px) rotateY(90deg);}
	69% { opacity: 1; transform: translateX(0px);}
	99% { background-image: url("../image/icon/create_icon.png"); opacity: 1; transform: translateX(0px);}

	100%{ background-image: url("../image/icon/design_icon.png"); opacity: 0;}

}

@keyframes wordColorChange {
	0% { color: #2d436b;}
	33% { color: #2d436b;}
	34% { color: #3f5e96;}
	66% { color: #3f5e96;}
	67% { color: #1b2840;}
	99% { color: #1b2840;}
	100% { color: #2d436b;}
}

@keyframes bgColorChange {
	0% { background-color: #2d436b;}
	33% { background-color: #2d436b;}
	34% { background-color: #3f5e96;}
	66% { background-color: #3f5e96;}
	67% { background-color: #1b2840;}
	99% { background-color: #1b2840;}
	100% { background-color: #2d436b;}
}

@keyframes lBorderColorChange {
	0% { border-left: 0.2em solid #2d436b;}
	33% { border-left: 0.2em solid #2d436b;}
	34% { border-left: 0.2em solid #3f5e96;}
	66% { border-left: 0.2em solid #3f5e96;}
	67% { border-left: 0.2em solid #1b2840;}
	99% { border-left: 0.2em solid #1b2840;}
	100% { border-left: 0.2em solid #2d436b;}
}

@keyframes rBorderColorChange {
	0% { border-right: 0.2em solid #2d436b;}
	33% { border-right: 0.2em solid #2d436b;}
	34% { border-right: 0.2em solid #3f5e96;}
	66% { border-right: 0.2em solid #3f5e96;}
	67% { border-right: 0.2em solid #1b2840;}
	99% { border-right: 0.2em solid #1b2840;}
	100% { border-right: 0.2em solid #2d436b;}
}


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