/*************************
	GENERAL
*************************/

@charset 'UTF-8';

html, body { 
	height: 100%;
}

body, * { 
	margin: 0; 
	padding: 0;
}

body { 
	font-size: 14px; 
	background: #fffefe;
	word-wrap: break-word;
}

* { 
	font-family : 'Hiragino Kaku Gothic ProN',Meiryo,Roboto,sans-serif ; 
} 

#container {
	position: relative;
	height: auto !important;
	height: 100%;
	min-height: 100%;
}

tt, code tt, code { 
	font-family : Osaka-mono,'MS Gothic',monospace ; 
}

ul, ol { 
	margin: 1em 0  0.7em 3em; 
}

@media screen and (max-width: 480px) {
ul li {
	margin-left: -1.4em;
}

ol li {
	margin-left: -1.4em;
}
}

p { 
	margin: 10px 0; 
}

table tr td { 
	padding: 5px; 
	font-size: 14px; 
}

table tr th { 
	padding: 5px; 
	font-size: 14px; 
}

blockquote, section {
	border: solid 1px #aaa;
	padding: 10px 20px;
	margin: 20px 5px;
}

h2 {  
	padding: 10px 0 10px 10px;  
	margin: 30px 0 5px 0; 
	font-size: 20px;
	background: #d3caca;
	color: #545454;
	text-shadow: 0 0 5px #fff;
}

h3 { 
	border-top: solid 1px #807D7D; 
	padding: 10px 0 10px 10px;  
	margin: 30px 0 5px 0; 
	font-size: 16px; 
	color: #545454;
}

table { 
	margin: 15px 5px;
	border-width: 1px; 
	border-collapse: collapse; 
	border-color: #888;
}

img {
	margin: 5px 0; 
	border-width: 0;
	max-width: 100%;
}

a {
	text-decoration: none;
}

a:link, a:visited, a:hover {
	color: #1155cf;
}

a:active {
	color : #f00;
}

a:hover {
	text-decoration: underline !important;
}

a[name] {
	display: block;
	height: 5px;
	width: 100%;
}

html[class^='translated-'] a[name] {
	height: 30px;
}

input[type=checkbox], input[type=radio] {
	transform: scale(1.75);
}

fieldset {
	padding: 0 20px 15px 20px;
	margin: 5px;
}

fieldset legend {
	margin: 0 auto;
	padding: 5px;
	font-size: 20px; 
	font-weight: 900; 
	background: #fff;
}

/*****************************
	EXTRA FONTS
*****************************/

/* 
        SegoeUISymbol 
 */
/*
@font-face {
  
	font-family: 'SegoeUISymbol';
  
	src: url('../fonts/SegoeUISymbol.eot?#iefix') format('embedded-opentype'),  
		url('../fonts/SegoeUISymbol.woff') format('woff'), 
		url('../fonts/SegoeUISymbol.ttf')  format('truetype'), 
		url('../fonts/SegoeUISymbol.svg#SegoeUISymbol') format('svg');
  
	font-weight: normal;
  
	font-style: normal;

}


[class^="sui-"], [class*=" sui-"] {
	display: inline-block;
	font-family: 'SegoeUISymbol';
	speak: none;
	font-size: inherit;
	text-rendering: auto;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	transform: translate(0, 0);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.sui-language:before {
	content: "\e164";
}
*/

/* 
        Original Font
 */

@font-face {

	font-family: 'msakofont';

	src:url('../fonts/msakofont.eot?-d810vq');

	src:url('../fonts/msakofont.eot?#iefix-d810vq') format('embedded-opentype'),

		url('../fonts/msakofont.woff?-d810vq') format('woff'),

		url('../fonts/msakofont.ttf?-d810vq') format('truetype'),

		url('../fonts/msakofont.svg?-d810vq#icomoon') format('svg');

	font-weight: normal;

	font-style: normal;

}



[class^="mf-"], [class*=" mf-"] {
	display: inline-block;
	font-family: 'msakofont';

	speak: none;

	font-style: normal;
	
	font-weight: normal;

	font-variant: normal;

	text-transform: none;

	line-height: 1;


	-webkit-font-smoothing: antialiased;

	-moz-osx-font-smoothing: grayscale;

}

.mf-webcam:before {
	content: "\e602";
}

.mf-msako:before {
	content: "\e601";
}

.mf-mailaddr:before {
	content: "\e600";
}


/*******************************
	ANIMATIONS
*******************************/

@keyframes heartbeat {
	0% { transform: scale(1.0, 1.0); }
	10% { transform: scale(1.25, 1.25); }
	35% { transform: scale(1.0, 1.0); }
	100% { transform: scale(1.0, 1.0); }
}

@-moz-keyframes heartbeat {
	0% { transform: scale(1.0, 1.0); }
	10% { transform: scale(1.25, 1.25); }
	35% { transform: scale(1.0, 1.0); }
	100% { transform: scale(1.0, 1.0); }
}

@-webkit-keyframes heartbeat {
	0% { transform: scale(1.0, 1.0); }
	10% { transform: scale(1.25, 1.25); }
	35% { transform: scale(1.0, 1.0); }
	100% { transform: scale(1.0, 1.0); }
}

@-o-keyframes heartbeat {
	0% { transform: scale(1.0, 1.0); }
	10% { transform: scale(1.25, 1.25); }
	35% { transform: scale(1.0, 1.0); }
	100% { transform: scale(1.0, 1.0); }
}

@-ms-keyframes heartbeat {
	0% { transform: scale(1.0, 1.0); }
	10% { transform: scale(1.25, 1.25); }
	35% { transform: scale(1.0, 1.0); }
	100% { transform: scale(1.0, 1.0); }
}

.heartbeat {
	-moz-animation: heartbeat 1s ease-out 0s infinite normal;
	-webkit-animation: heartbeat 1s ease-out 0s infinite normal;
	-o-animation: heartbeat 1s ease-out 0s infinite normal;
	-ms-animation: heartbeat 1s ease-out 0s infinite normal;
	animation: heartbeat 1s ease-out 0s infinite normal;
}

@keyframes run {
	0% { transform: translateX(-11px); }	
	100% { transform: translateX(+6px); }	
}

@-moz-keyframes run {
	0% { transform: translateX(-11px); }	
	100% { transform: translateX(+6px); }	
}

@-webkit-keyframes run {
	0% { transform: translateX(-11px); }	
	100% { transform: translateX(+6px); }	
}

@-o-keyframes run {
	0% { transform: translateX(-11px); }	
	100% { transform: translateX(+6px); }	
}

@-ms-keyframes run {
	0% { transform: translateX(-11px); }	
	100% { transform: translateX(+6px); }	
}

.run {
	-moz-animation: run 1s ease-out -1s infinite alternate;
	-webkit-animation: run 1s ease-out -1s infinite alternate;
	-o-animation: run 1s ease-out -1s infinite alternate;
	-ms-animation: run 1s ease-out -1s infinite alternate;
	animation: run 1s ease-out -1s infinite alternate;
}

@keyframes spin {
	0% { transform: rotateY(0deg); }
	100% { transform: rotateY(360deg); }	
}

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

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

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

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

.spin {
	-moz-animation: spin 2.5s ease 0s infinite normal;
	-webkit-animation: spin 2.5s ease 0s infinite normal;
	-o-animation: spin 2.5s ease 0s infinite normal;
	-ms-animation: spin 2.5s ease 0s infinite normal;
	animation: spin 2.5s ease 0s infinite normal;
}

@keyframes shake {
	0% { transform: rotate(0deg); }
	3% { transform: rotate(-13deg); }
	9% { transform: rotate(+13deg); }
	15% { transform: rotate(-13deg); }
	18% { transform: rotate(0deg); }
	91% { transform: rotate(0deg); }
	94% { transform: rotate(+13deg); }
	100% { transform: rotate(0deg); }
}

@-webkit-keyframes shake {
	0% { transform: rotate(0deg); }
	3% { transform: rotate(-13deg); }
	9% { transform: rotate(+13deg); }
	15% { transform: rotate(-13deg); }
	18% { transform: rotate(0deg); }
	91% { transform: rotate(0deg); }
	94% { transform: rotate(+13deg); }
	100% { transform: rotate(0deg); }
}

@-o-keyframes shake {
	0% { transform: rotate(0deg); }
	3% { transform: rotate(-13deg); }
	9% { transform: rotate(+13deg); }
	15% { transform: rotate(-13deg); }
	18% { transform: rotate(0deg); }
	94% { transform: rotate(0deg); }
	97% { transform: rotate(+13deg); }
	100% { transform: rotate(0deg); }
}

@-ms-keyframes shake {
	0% { transform: rotate(0deg); }
	3% { transform: rotate(-13deg); }
	9% { transform: rotate(+13deg); }
	15% { transform: rotate(-13deg); }
	18% { transform: rotate(0deg); }
	94% { transform: rotate(0deg); }
	97% { transform: rotate(+13deg); }
	100% { transform: rotate(0deg); }
}

.shake {
	-moz-animation: shake 1.5s ease 0s infinite normal;
	-webkit-animation: shake 1.5s ease 0s infinite normal;
	-o-animation: shake 1.5s ease 0s infinite normal;
	-ms-animation: shake 1.5s ease 0s infinite normal;
	animation: shake 1.5s ease 0s infinite normal;
}

@keyframes bouncedown {
	0% { transform: translateY(0px); }
	60% { transform: translateY(+7px); }	
	80% { transform: translateY(-1px); }	
	100% { transform: translateY(0px); }	}

@-moz-keyframes bouncedown {
	0% { transform: translateY(0px); }
	60% { transform: translateY(+7px); }	
	80% { transform: translateY(-1px); }	
	100% { transform: translateY(0px); }	
}

@-webkit-keyframes bouncedown {
	0% { transform: translateY(0px); }
	60% { transform: translateY(+7px); }	
	80% { transform: translateY(-1px); }	
	100% { transform: translateY(0px); }	
}

@-o-keyframes bouncedown {
	0% { transform: translateY(0px); }
	60% { transform: translateY(+7px); }	
	80% { transform: translateY(-1px); }	
	100% { transform: translateY(0px); }		
}

@-ms-keyframes bouncedown {
	0% { transform: translateY(0px); }
	60% { transform: translateY(+7px); }	
	80% { transform: translateY(-1px); }	
	100% { transform: translateY(0px); }		
}

.bouncedown {
	-moz-animation: bouncedown 0.3s ease-in 0s 1 normal;
	-webkit-animation: bouncedown 0.3s ease-in 0s 1 normal;
	-o-animation: bouncedown 0.3s ease-in 0s 1 normal;
	-ms-animation: bouncedown 0.3s ease-in 0s 1 normal;
	animation: bouncedown 0.3s ease-in 0s 1 normal;
}

@keyframes bounceup {
	0% { transform: translateY(0px); }
	50% { transform: translateY(-6px); }	
	70% { transform: translateY(+5px); }	
	100% { transform: translateY(0px); }
}

@-moz-keyframes bounceup {
	0% { transform: translateY(0px); }
	50% { transform: translateY(-6px); }	
	70% { transform: translateY(+5px); }	
	100% { transform: translateY(0px); }
}

@-webkit-keyframes bounceup {
	0% { transform: translateY(0px); }
	50% { transform: translateY(-6px); }	
	70% { transform: translateY(+5px); }	
	100% { transform: translateY(0px); }
}

@-o-keyframes bounceup {
	0% { transform: translateY(0px); }
	50% { transform: translateY(-6px); }	
	70% { transform: translateY(+5px); }	
	100% { transform: translateY(0px); }
}

@-ms-keyframes bounceup {
	0% { transform: translateY(0px); }
	50% { transform: translateY(-6px); }	
	70% { transform: translateY(+5px); }	
	100% { transform: translateY(0px); }
}

.bounceup {
	-moz-animation: bounceup 0.3s ease-in 0s 1 normal;
	-webkit-animation: bounceup 0.3s ease-in 0s 1 normal;
	-o-animation: bounceup 0.3s ease-in 0s 1 normal;
	-ms-animation: bounceup 0.3s ease-in 0s 1 normal;
	animation: bounceup 0.3s ease-in 0s 1 normal;
}

@keyframes bounceright {
	0% { transform: translateX(0px); }
	50% { transform: translateX(-6px); }	
	70% { transform: translateX(+5px); }	
	100% { transform: translateX(0px); }
}

@-moz-keyframes bounceright {
	0% { transform: translateX(0px); }
	50% { transform: translateX(-6px); }	
	70% { transform: translateX(+5px); }	
	100% { transform: translateX(0px); }
}

@-webkit-keyframes bounceright {
	0% { transform: translateX(0px); }
	50% { transform: translateX(-6px); }	
	70% { transform: translateX(+5px); }	
	100% { transform: translateX(0px); }
}

@-o-keyframes bounceright {
	0% { transform: translateX(0px); }
	50% { transform: translateX(-6px); }	
	70% { transform: translateX(+5px); }	
	100% { transform: translateX(0px); }
}

@-ms-keyframes bounceright {
	0% { transform: translateX(0px); }
	50% { transform: translateX(-6px); }	
	70% { transform: translateX(+5px); }	
	100% { transform: translateX(0px); }
}

.bounceright {
	-moz-animation: bounceright 0.3s ease-in 0s 1 normal;
	-webkit-animation: bounceright 0.3s ease-in 0s 1 normal;
	-o-animation: bounceright 0.3s ease-in 0s 1 normal;
	-ms-animation: bounceright 0.3s ease-in 0s 1 normal;
	animation: bounceright 0.3s ease-in 0s 1 normal;
}

@-moz-keyframes roty {
	0% { transform: rotateX(55deg) translateY(-13px); }
	50% { transform: rotateX(0deg) translateY(0px); }
	100% { transform: rotateX(0deg) translateY(0px); }
}

@-webkit-keyframes roty {
	0% { transform: rotateX(55deg) translateY(-13px); }
	50% { transform: rotateX(0deg) translateY(0px); }
	100% { transform: rotateX(0deg) translateY(0px); }
}

@-o-keyframes roty {
	0% { transform: rotateX(55deg) translateY(-13px); }
	50% { transform: rotateX(0deg) translateY(0px); }
	100% { transform: rotateX(0deg) translateY(0px); }
}

@-ms-keyframes roty {
	0% { transform: rotateX(55deg) translateY(-13px); }
	50% { transform: rotateX(0deg) translateY(0px); }
	100% { transform: rotateX(0deg) translateY(0px); }
}

@keyframes roty {
	0% { transform: rotateX(55deg) translateY(-13px); }
	50% { transform: rotateX(0deg) translateY(0px); }
	100% { transform: rotateX(0deg) translateY(0px); }
}

.roty {
	-moz-perspective: 40px;
	-webkit-perspective: 40px;
	-o-perspective: 40px;
	-ms-perspective: 40px;
	perspective: 40px;

	-moz-perspective-origin: 33px 50px;
	-webkit-perspective-origin: 33px 50px;
	-o-perspective-origin: 33px 50px;
	-ms-perspective-origin: 33px 50px;
	perspective-origin: 33px 50px;

	-mozt-transform-style: preserve-3d;
	-webkit-transform-style: preserve-3d;
	-o-transform-style: preserve-3d;
	-ms-transform-style: preserve-3d;
	transform-style: preserve-3d;
}

.roty i {
	-moz-animation: roty 1.2s ease-out 0s infinite alternate;
	-webkit-animation: roty 1.2s ease-out 0s infinite alternate;
	-o-animation: roty 1.2s ease-out 0s infinite alternate;
	-ms-animation: roty 1.2s ease-out 0s infinite alternate;
	animation: roty 1.2s ease-out 0s infinite alternate;
}

@keyframes fat {
	0% { transform: scale(1.0); }
	40% { transform: scale(1.2); }
}

@-moz-keyframes fat {
	0% { transform: scale(1.0); }
	40% { transform: scale(1.2); }
}

@-webkit-keyframes fat {
	0% { transform: scale(1.0); }
	40% { transform: scale(1.2); }
}

@-o-keyframes fat {
	0% { transform: scale(1.0); }
	40% { transform: scale(1.2); }
}

@-ms-keyframes fat {
	0% { transform: scale(1.0); }
	40% { transform: scale(1.2); }
}

.fat {
	-moz-animation: fat 0.3s ease 0s 1 normal;
	-webkit-animation: fat 0.3s ease 0s 1 normal;
	-o-animation: fat 0.3s ease 0s 1 normal;
	-ms-animation: fat 0.3s ease 0s 1 normal;
	animation: fat 0.3s ease 0s 1 normal;
}

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

@-moz-keyframes screw-in {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

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

@-o-keyframes screw-in {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

@-ms-keyframes screw-in {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

.screw-in {
	-moz-animation: screw-in 0.04s linear 0s infinite normal;
	-webkit-animation: screw-in 0.04s linear 0s infinite normal;
	-o-animation: screw-in 0.04s linear 0s infinite normal;
	-ms-animation: screw-in 0.04s linear 0s infinite normal;
	animation: screw-in 0.04s linear 0s infinite normal;
}

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

@-moz-keyframes screw-out {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(-360deg); }
}

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

@-o-keyframes screw-out {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(-360deg); }
}

@-ms-keyframes screw-out {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(-360deg); }
}

.screw-out {
	-moz-animation: screw-out 0.04s linear 0s infinite normal;
	-webkit-animation: screw-out 0.04s linear 0s infinite normal;
	-o-animation: screw-out 0.04s linear 0s infinite normal;
	-ms-animation: screw-out 0.04s linear 0s infinite normal;
	animation: screw-out 0.04s linear 0s infinite normal;
}

/*****************************
	MENU BAR
*****************************/

#menubar { 
	background: #333;
	width: 100%;
	color: #fff;
	font-size: 17px;
}

#root_menu {
	margin: 0;
	position: relative; 
	list-style: none; 
	background: #333;
	height: 58px;
}

#root_menu a {
	display: block;
	text-decoration: none;
	padding: 10px 4px 9px 4px;
	font-size: 26px;
	color: #d0d0d0;
}

#root_menu li {
	margin: 0;
	display: inline-block;
	float: right;
}

#root_menu li:first-child { 
	float: left;
}

#root_menu li:first-child i:first-child { 
	padding-left: 5px;
	padding-right: 8px;
}

#root_menu li:first-child i:nth-child(2) { 
	font-size: 20px;
	padding-right: 5px;
	transform: translateY(-3px);
}

#root_menu a:visited {
	color: #d0d0d0;
}

#root_menu a:active { 
	text-shadow: 
		0 0 10px #fff, 
		0 0 15px #fff, 
		0 0 20px #aaa;
}

.hilight_menu {
	xbackground: #00a6e3;
	color: #fff !important;
}

.shine_menu {
	text-shadow: 
		0 0 10px #fff, 
		0 0 15px #fff, 
		0 0 20px #aaa !important;
}

/***************************
	SEARCH BOX
***************************/

#searchbox {
	display: none;
	padding: 0 !important;
	margin: 0 !important;
	background: #333;
	color: #fff;
	width: 100%;
}

@media screen and (max-width: 569px) {

div.gsc-results-wrapper-nooverlay {
	width: 95% !important;
}

}

@media screen and (min-width: 570px) {

div.gsc-results-wrapper-nooverlay {
	width: 570px;
	margin: 0 auto;
}

}

div.gsc-control-cse {
	border-width: 0;
	padding: 0 !important;
}

table.gsc-search-box {
	margin: 0 !important;
}

form.gsc-search-box {
	margin: 0 !important;
	background: #333;
}

table.gstl_50 {
	margin: 0 !important;
	border-width: 0 !important;
}

div.gsc-input-box {
	height: 40px !important;
}

td.gsc-input {
	padding-right: 0 !important;
}

div#gsc-iw-id1 {
	border-width: 0 !important;
}

td.gsib_a {
	padding: 0 !important;
}

span.gscb_a {
	line-height: 22px !important;
}

a.gsst_a {
	padding-top: 5px !important;
}

td.gsc-search-button {
	padding: 9px 5px 3px 5px !important;
}

input#gsc-i-id1 {
	margin: 8px !important;
	background: none !important;
}

input.gsc-search-button-v2 {
	width: 18px !important;
	height: 18px !important;
	margin:  0 !important;
	padding: 10px 27px !important;
}

/****************************
	TRANLATOR
****************************/

#translator {
	display: none;
	background: #333;
	color: #fff;	
}

#translator table {
	margin: 0 !important;
	padding: 0 !important;
	width: 100%;
}

#translator table td {
	padding: 0 !important;
}

#translator table td:first-child {
	padding-left:  5px !important;
}

#translator table td:nth-child(2) {
	min-width:  140px;
}

div.goog-te-gadget {
	text-align: right;
	padding: 10px 0;
}

div.goog-te-gadget-simple {
	background: #333;
	border: 0 none;
}

a.goog-te-menu-value {
	color: #d0d0d0 !important;
	font-size: 12px !important;
}

#translate_excuse {
	font-size: 12px;
	color: #d0d0d0; 
}

/**************************************
	DROP DOWN FOR PC
**************************************/

@media screen and (min-width: 801px) {

#root_menu { 
	display: none; 
}

/*
	DROP DOWN LEVEL ONE
*/

ul.dropdown { 
	z-index: 200;
	position: relative; 
	list-style: none; 
	margin: 0 !important;
	background: #333; 
}

ul.dropdown li { 
	float: left; 
	zoom: 1; 
}

ul.dropdown li a { 
	display: block; 
	padding: 17px 6px 16px 6px; 
	color: #d0d0d0; 
	text-decoration: none !important; 
}

ul.dropdown li a:active {
	text-shadow: 
		0 0 10px #fff, 
		0 0 15px #fff, 
		0 0 20px #fff;
}

ul.dropdown li:first-child i:first-child { 
	padding-left: 5px;
	padding-right: 8px;
}

ul.dropdown li:first-child i:nth-child(2) { 
/*
	font-size: 20px;
	padding-right: 5px;
	transform: translateY(-3px);
*/
	display: none;
}

ul.dropdown > li:nth-child(2) { 
	padding-left: 2px;
}

ul.dropdown > li:nth-child(8),
ul.dropdown > li:nth-child(9),
ul.dropdown > li:nth-child(10) { 
	float: right;
} 

ul.dropdown > li:first-child a i,
ul.dropdown > li:nth-child(8) a i,
ul.dropdown > li:nth-child(9) a i,
ul.dropdown > li:nth-child(10) a i { 
	font-size: 26px;
}
 
ul.dropdown > li:first-child a { 
	padding: 14px 4px 13px 4px;
}

ul.dropdown > li:nth-child(8) a,
ul.dropdown > li:nth-child(9) a,
ul.dropdown > li:nth-child(10) a { 
	padding: 16px 5px 13px 5px; 
}

/*
	DROP DOWN LEVEL TWO 
*/

ul.dropdown ul { 
	width: 240px; 
	position: absolute; 
	margin: 0px;
	list-style: none; 
	display: none;
}

ul.dropdown ul li { 
	font-weight: normal; 
	background: #333; 
	float: none;
	padding: 0 !important;
}

ul.dropdown ul li a { 
	border-right: none; 
	display: block; 
	padding: 14px 12px !important;
} 

ul.dropdown ul li a i {
	font-size: 26px !important;
	padding-right: 5px;
}

ul.dropdown > li:nth-child(4) > ul > li:nth-child(2) > a {
	padding-top: 13px !important;
	padding-bottom: 13px !important;
}

ul.dropdown > li:nth-child(4) > ul > li:nth-child(9) > a > i {
	transform: scale(1.5);
} 

ul.dropdown > li:nth-child(4) > ul { 
	width: 480px; 
	columns: auto 2;
	-moz-columns: auto 2;
	-webkit-columns: auto 2;
	-o-columns: auto 2;
	-ms-columns: auto 2;
	column-gap: 0;
	-moz-column-gap: 0;
	-webkit-column-gap: 0;
	-o-column-gap: 0;
	-ms-column-gap: 0;
}

/* 
	DROP DOWN LEVEL THREE
*/
/*
ul.dropdown ul ul { 
	left: 100%; 
	top: 0; 
}
*/

} /* END OF PC */

/***********************************************
	DROPDOWN FOR MOBILE DEVICE
***********************************************/

@media screen and (max-width: 800px) {

ul.dropdown {
	padding: 0;
	margin: 0;
	display: none;
}

ul.dropdown * {
	padding: 0;
	margin: 0;
}

ul.dropdown li {
	list-style-type: none;
	border-bottom: 1px solid #555; 
	width: 100%;
}

ul.dropdown > li:first-child {
	display: none;
}

ul.dropdown > li:nth-child(2) {
	border-top: 1px solid #555; 
}

ul.dropdown > li:nth-child(2) > a {
	padding-top: 15px !important;
}

ul.dropdown > li:nth-child(8),
ul.dropdown > li:nth-child(9),
ul.dropdown > li:nth-child(10) {
	display: none;
}

ul.dropdown li a {
	display: block;
	text-decoration: none !important;
	padding: 16px;
	color: #c8c8c8;
}

ul.dropdown li a:active {
	text-shadow: 
		0 0 10px #fff, 
		0 0 15px #fff, 
		0 0 20px #fff;
}

ul.dropdown > li > a > i {
	float: right;
	font-size: 26px;
}  

ul.dropdown li ul {
	display: none;
}

ul.dropdown ul li {
	background: #eee;
}

ul.dropdown li ul li a {
	padding: 13px;
	color: #444;
}

ul.dropdown li ul li a:hover {
	color: #eee !important;
	background: #666;
}

ul.dropdown li ul li {
	border-bottom: 1px solid #bbb; 
}

ul.dropdown li ul li:last-child {
	border-bottom: 0px; 
}

ul.dropdown ul li a i:first-child {
	font-size: 26px !important;
	padding-right: 5px;
} 

ul.dropdown > li:nth-child(4) > ul > li:nth-child(2) > a {
	padding-top: 12px !important;
	padding-bottom: 12px !important;
}

ul.dropdown li:nth-child(4) ul li:nth-child(9) a i {
	transform: scale(1.5);
} 

} /* END OF MOBILE DEVICE */


@media screen and (min-width: 480px) and (max-width: 800px) {

ul.dropdown > li:nth-child(4) > ul { 
	columns: auto 2;
	-moz-columns: auto 2;
	-webkit-columns: auto 2;
	-o-columns: auto 2;
	-ms-columns: auto 2;
	column-gap: 0;
	-moz-column-gap: 0;
	-webkit-column-gap: 0;
	-o-column-gap: 0;
	-ms-column-gap: 0;
}

ul.dropdown > li:nth-child(4) > ul li { 
	border-left: solid 1px #bbb; 
}

ul.dropdown > li:nth-child(4) > ul > li:last-child {
	border-bottom: solid 1px #bbb; 
}

}

/*******************************
	QUICK LAUNCHER
*******************************/

#launcher {
	clear: both;
	width: 100%;
	background-color: #555;
	margin-top: -7px;
	padding: 20px 0;
	text-align: center;
}

.clearer {
	clear: both;
	width: 100%;
}

#launcher ul {
	margin: 0 !important;
	display: inline-block;
	padding-top: 10px;
}

.quick-menu {
	width: 115px;
	height: 110px;
	margin: 0;
	padding: 0;
	font-size: 12px; 
	font-weight: 900;
	list-style-type: none;
	text-align: center;
	display: inline-block;
}

.quick-menu a {
	float: left;
	padding: 10px 0;
	width: 100% !important;
	display: inline-block;
}

.quick-menu span:before {
	content: "\A";
	white-space: pre;
}

.quick-menu a:link, .quick-menu a:visited {
	color: #d8d8d8;
}

.quick-menu a:hover {
	text-decoration: none !important;
	color: #fff;
}

.quick-menu a:active { 
	text-shadow: 
		0 0 10px #eee, 
		0 0 15px #eee, 
		0 0 20px #eee;
}

.quick-menu a:active > i { 
	text-shadow: 
		0 0 10px #eee, 
		0 0 15px #eee, 
		0 0 20px #eee;
}

.quick-menu i {
	font-size: 48px;
}

/***************************
	CONTENTS
***************************/

#contents { 
	margin: 0 auto; 
	color: #222; 
	padding: 5px 5px 130px 5px;
	clear: both;
	overflow: hidden;
}

#title {
	background-color: #666; 
	color: #fff; 
	padding: 10px 10px 8px 10px; 
	font-size: 22px; 
	font-weight: normal;
	text-shadow: 1px 0px 3px #333;
	text-align: left;
}

@media screen and (min-width: 571px) {
#contents { 
	width: 570px; 
}
.prologue { 
	width: 570px; 
}
#episode { 
	width: 400px;
}
}

@media screen and (max-width: 800px) {
img {
	max-width: 100%;
}
}

#app { 
	font-size: 34px; 
	color: #444; 
	text-shadow: 
		1px 1px 1px #fff, 
 
		5px 0px 12px #fff, 
 
		-5px 0px 12px #fff,
		0px 5px 12px #fff, 
 
		0px -5px 12px #fff
}

#app i {
	font-size: 48px; 
}

.announce {
	padding: 3px;
	color: #a00;
}

.prologue { 
	margin: 0 auto; 
	color: #222; 
	padding: 60px 10px 80px 10px;
}

@media screen and (max-width: 480px) {
.prologue { 
	padding: 30px 10px !important;
}
}

#episode { 
	max-width: 400px;
	color:#555; 
	font-size: 85%; 
	padding: 0 5px;
	text-shadow: 1px 1px 1px #fff;
}

.darkbg {
	background: #222;
}

.britebg {
	background: #fffefe;
	background-image: url("../images/webcam-x.jpg") !important;
	background-repeat: no-repeat !important;
	background-position: right top !important;
}

/**********************
	SLIDE
**********************/

#slide {
	width: 100%; 
	margin: 0;
	padding: 0;
	position: relative;
}

#slide ul {
	padding: 0;
	margin: 0;
	height: 0;
}

#slide ul li { 
	width : 100%;
	margin: 0 !important;
	height: 0;
}

#slide img {
	width: 100%;
	margin: 0;
}

#slide ul img {
	position: absolute;
	top: 0;
	left: 0;
}

/****************************
	NAV BUTTON
****************************/

#gototop { 
	position: fixed;
	bottom: -10px;
	right: 0;
	text-align: center; 
	color: #000;  
	font-size: 68px;
	opacity: 0.25;
}

.nav a:link, .nav a:visited
{
	color: #382222;
}

.nav a:active > i { 
	text-shadow: 
		0 0 20px #fff, 
		0 0 30px #ddd, 
		0 0 50px #888;
}

/********************************
	SHARE BUTTONS
********************************/

#mask {
	position: fixed;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	background: rgba(0, 0, 0, 0.7);
	z-index: 900;
}

#close-share {
	display: block;
	padding: 0;
	position: absolute;
	top: 60px;
	right: 20px;
	font-size: 32px;
	height: 44px;
	color: #999;
	z-index: 990;
}

#sns {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	max-width: 100%;
	max-height: 100%;
	font-size: 68px;
	height: 68px;
	text-align: center;
	z-index: 990;
}

#sns a {
	color: #666; 
	padding: 0;
}

#sns a.fb:link, #sns a.fb:hover, #sns a.fb:visited {
	color: #3b5998;
}

#sns a.tw:link, #sns a.tw:hover, #sns a.tw:visited {
	color: #35d6ff;
}

#sns a.gp:link, #sns a.gp:hover, #sns a.gp:visited {
	color: #cc3732;
}

#sns a:active, #close-share:active { 
	text-shadow: 
		0 0 20px #fff, 
		0 0 30px #ddd, 
		0 0 50px #888;
	color: #fff; 
}

/*****************************
	BUSY BUBBLES
*****************************/

#busy-mask {
	position: fixed;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	background: rgba(45, 45, 45, 0.5);
	z-index: 999;
}

#busy {
	font-size: 56px;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	max-width: 100%;
	max-height: 100%;
	height: 56px;
	text-align: center;
	color: #eee;
}

/*************************
	SITE MAP
*************************/

ul.sitemap {
	background: #222;
	margin: 0;
	padding: 2em 1em 4em 1em;
	font-size: 12px; 
	position: relative;
	columns: 180px auto;
	-moz-columns: 180px auto;
	-webkit-columns: 180px auto;
	-o-columns: 180px auto;
	-ms-columns: 180px auto;
	column-gap: 2em;
	-moz-column-gap: 2em;
	-webkit-column-gap: 2em;
	-o-column-gap: 2em;
	-ms-column-gap: 2em;
}

@media screen and (max-width: 480px) {
ul.sitemap {
	font-size: 13px;
}
}	

ul.sitemap li {
	list-style: none;
	margin-left: 0em !important;
}

ul.sitemap > li {
	display: block;
	padding: 0.5em 0;
}

ul.sitemap > li > a:first-child {
	font-weight: 600;
	display: block;
	border-top: 0 none;
	border-left: 0 none;
	border-right: 0 none;
	border-bottom: solid 1px #555;
	pointer-events: none;
	cursor: default;

	-moz-border-image: -moz-linear-gradient(left, #777 0%, transparent 100%);
	-webkit-border-image: -webkit-linear-gradient(left, #777 0%, transparent 100%);
	-o-border-image: -o-linear-gradient(left, #777 0%, transparent 100%);
	border-image: linear-gradient(to right, #777 0%, transparent 100%);
	border-image-slice: 1;
}

ul.sitemap > li:nth-child(3) > a:first-child {
	pointer-events: inherit;
}

ul.sitemap div {
	color: #aaa;
	padding-bottom: 0.3em;
	font-size: 13px !important;
}

ul.sitemap div i:first-child {
	font-size: 1.4em !important;
	padding-right: 0.4em;
}

ul.sitemap li i:before {
	content: '' !important;
}

ul.sitemap li i {
	display: none;
}

ul.sitemap li ul {
	margin-left: 1.5em;
}

ul.sitemap a:link, 
ul.sitemap a:hover, 
ul.sitemap a:active, 
ul.sitemap a:visited {
	color: #aaa;
	text-decoration: none !important;
}

ul.sitemap a:hover {
	xcolor: #00a6e3;
	color: #fff;
}	

/*************************
	FOOTER
*************************/

#posted {
	margin: 30px 5px;
	text-align: right;
}

#copyright { 
	position: absolute;
	bottom: 0;
	width: 100%;
	text-align: center; 
	background: #222; 
	color: #666; 
	padding: 5px 0; 
	font-size: 11px;
}


/***************************
	ORDER FORM
***************************/

#order_form legend {
	margin: 0 auto;
	padding: 5px;
	font-size: 20px; 
	font-weight: 900; 
	background: #fff;
}

#order_form {
	padding: 0 18px 18px 18px;
}

#order_form input[type='checkbox'] + label {
	font-size: 16px;
	padding-left: 4px;
}

#order_form input[type='radio'] + label {
	font-size: 18px;
	padding-right: 7px;
	padding-left: 4px;
}

#order_form input[type='text'] {
	width: 100%; 
	height: 36px; 
	font-size: 16px;
}

#order_form input[type='email'] {
	width: 100%; 
	height: 36px; 
	font-size: 16px;
}

#order_form input[type='button'] {
	width: 100%;
	height: 36px;
	font-size: 16px;
	font-weight: 900;
}

#order_form textarea {
	width: 100%; 
	height: 160px;
	font-size: 16px;
	min-height: 160px;
}

@media screen and (min-width: 571px) {
#order_form textarea {
	max-width: 528px; 
	min-width: 528px; 
}
}

#mailbody {
	display: none;
	visibility: hidden;
}

/*************************
	OTHERS
*************************/

.error {
	background: #900;
	color: #fff;
	padding: 12px;
}

.feature { 
	position: relative;
}

.feature span { 
	color: #C31700; 
	font-size: 20px;  
}

@media screen and (min-width: 420px) {

.row {
	display: -webkit-flex;
	-webkit-flex-flow: row wrap;
	display: flex;
	flex-flow: row wrap;
	margin: 0 -10px;
}

.col {
	width: 45%;
	padding: 10px;
}

.feature { 
	min-height: 150px;
}

.feature > i:first-child {
	position: absolute;
	top: 10%;
	left: 9%;
	color: #e4e0e0;
	font-size: 150px !important;
	z-index: -1;
}

.feature > i[class*='fa-mobile'] {
	transform: scale(1.5) translateY(20px);
}
}

@media screen and (max-width: 419px) {
.feature > i:first-child {
	color: #A30; 
	font-size: 20px !important; 
}
.feature > i[class*='fa-mobile'] {
	transform: scale(1.5) translateY(0);
}
}

.collapsible-handle {
	padding-right: 45px;
	position: relative;
	cursor: pointer;
}

.collapsible-handle > i:last-child {
	font-size: 24px;
	padding: 8px;
	position: absolute;
	top: 0;
	right: 0;
}

.collapsible-body {
	display: none;
}

.notation {
	color: #090;
	font-weight: 900; 
}

.attention {
	color: #f0a;
	font-weight: 900; 
}

.selectable {
	color: #1155cf;
}

.nogap {
	margin: 0;
}

.tbl_header th {
	background: #777;
	color: #fff;
	text-shadow: 0 0 2px #111;
}

.tbl_data td {
	text-align: center;
}

.large * {
	font-size: 26px;
	font-weight: 900;
}

.code_fragment {
	border: solid 1px #aaa;
	padding: 0.5em 0 0.5em 3em;
	overflow: scroll;
	word-break: break-all;
	margin: 20px 5px;
}

.code_fragment * {
	font-family: monospace;
}

.code_fragment p {
	padding-bottom: 0.5em;
	font-weight: bold;
	font-style: italic;
}

.code_fragment li {
	border-left: solid 1px #ccc;
	padding-left: 0.7em;
}

.code_fragment li:nth-child(2n) {
	background: #eee;
}

.shadow-border {
	border: solid 1px #aaa;
}

.youtube {
	position: relative;
	xpadding-bottom: 56.25%;
	padding-bottom: 66.8%;
	padding-top: 30px;
	height: 0;
	overflow: hidden;
}
 
.youtube iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

a.btn {
	display: block;
	padding: 10px;
	margin: 20px 10px;
	background: #1251A0;
	color: #fff;
/* bg color change anmation */
	transition: background 0.4s linear 0s;
	-moz-transition: background 0.4s linear 0s;
	-webkit-transition: background 0.4s linear 0s;
	-o-transition: background 0.4s linear 0s;
	-ms-transition: background 0.4s linear 0s;

/**/
}

a.btn i:first-child {
	font-size: 1.48em;
}

a.btn-center {
	text-align: center;
}

a.btn-strong {
	font-weight: 900;
	font-size: 1.4em;
}

a.btn-very-strong {
	font-weight: 900;
	font-size: 1.8em;
}

a.btn-i-right i:first-child {
	float: right;
}

a.btn:link, a.btn:visited, a.btn:hover {
	color: #fff;
	text-decoration: none !important;
}

a.btn:hover {
	background: #00a6e3;
}

a.btn:hover i:first-child {
	transform: scale(1.25);
}

a.btn:active {
	background: #1251A0;
}

a.btn:active i:first-child {
	transform: scale(1);
}

@media screen and (min-width: 500px) {
ul.two-cols-list, ol.two-cols-list {
	column-count: 2;
	-moz-column-count: 2;
	-webkit-column-count: 2;
	-o-column-count: 2;
	-ms-column-count: 2;
	list-style: outside;
	margin-left: 0.5em;
}
ul.two-cols-list li, ol.two-cols-list li {
	margin-left: 2em;
}

}

a.linked-image:hover img {
	opacity: 0.7;
}

i[class*='mf-mailaddr'] {
	font-size: 17px;
	transform: translateY(3px);
}

.mail-setting {
	margin: 0 20px;
}

.mail-setting p {
	text-align: right;
}

.mail-setting table {
	width: 100%;
}

.abstract {
	font-size: 18px; 
	padding: 15px 15px;
	position: relative;
	border: solid 1px #eae8e8;
	border-bottom: solid 1px #e0dddd;
	margin: 30px 0px;
	background: #f6f6f6;

background: -moz-linear-gradient(left,  rgba(247,246,246,1) 0%, rgba(254,253,253,1) 50%, rgba(246,244,244,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(247,246,246,1)), color-stop(50%,rgba(254,253,253,1)), color-stop(100%,rgba(246,244,244,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left,  rgba(247,246,246,1) 0%,rgba(254,253,253,1) 50%,rgba(246,244,244,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left,  rgba(247,246,246,1) 0%,rgba(254,253,253,1) 50%,rgba(246,244,244,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left,  rgba(247,246,246,1) 0%,rgba(254,253,253,1) 50%,rgba(246,244,244,1) 100%); /* IE10+ */
background: linear-gradient(to right,  rgba(247,246,246,1) 0%,rgba(254,253,253,1) 50%,rgba(246,244,244,1) 100%); /* W3C */
}

.abstract:after {
	position: absolute;
	content: "";
	box-shadow: 0 5px 6px rgba(32, 0, 0, .3);
	transform: rotate(4deg);
	right: 2px;
	left: auto;
	top: auto;
	bottom: 4px;
	z-index: -1;
	width: 80px;
	height: 10px;
}

.abstract:before {
	position: absolute;
	content: "";
	box-shadow: 0 5px 6px rgba(32, 0, 0, .3);
	transform: rotate(-1deg);
	right: auto;
	left: 2px;
	top: auto;
	bottom: 5px;
	z-index: -1;
	width: 200px;
	height: 10px;
}

.intro {
	margin: 10px 0;
	padding-left: 0;
	padding-bottom: 20px;
	border: none 0;
	background: transparent;
}

.intro:after, .intro:before {
	content: "";
	width: 0;
	height: 0;
}

.intro i {
	color: #e4e0e0;
}

.abstract-icon {
	position: absolute;
	top: -17px;
	left: -4px;
	font-size: 28px !important;
	transform: rotate(-18deg) !important;
	color: #6a6868;
	text-shadow: -1px 14px 14px #ccc;
}

@media screen and (max-width: 419px) {
.abstract i {
	font-size: 28px;
	color: #6a6868;
}

.intro i {
	float: none;
	font-size: 22px;
	color: #666;
}

}

/*********************
   Clickable Map
*********************/

div.clickable-map
{
	position: relative;
}

div.clickable-map img {
	margin: 0;
	xmin-width: 399px;
	xmax-width: 399px;
}

div.selectable-area {
	position: absolute;
	background: transparent;
	border: solid 1px #1155cf;
	cursor: pointer !important;
	display: none;
	z-index: 1;
}

/*********************
   Image Gallary
*********************/

div.gallary img {
	max-width: 23%;
	cursor: pointer;
}

img.pickup {
	cursor: pointer;
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	max-width: 90% !important;
	max-height: 90%;
	z-index: 1;
}

div.gallary-mask {
	position: fixed;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	background: rgba(255, 255, 255, 0.5);
	z-index: 999;
	display: none;
}

/** END OF THE STYLE **/