@font-face {
  font-family: "glyphicons";
  src:url("fonts/glyphicons-halflings-regular.eot");
  src:url("fonts/glyphicons-halflings-regular.eot?#iefix") format("embedded-opentype"),
      url("fonts/glyphicons-halflings-regular.ttf") format("truetype"),
      url("fonts/glyphicons-halflings-regular.woff") format("woff"),
      url("fonts/glyphicons-halflings-regular.svg#glyphicons-halflings-regular") format("svg");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "cwTeXHei";
  src: url("//fonts.gstatic.com/ea/cwtexhei/v3/cwTeXHei-zhonly.eot");
  src: url("//fonts.gstatic.com/ea/cwtexhei/v3/cwTeXHei-zhonly.eot?#iefix") format("embedded-opentype"),
       url("//fonts.gstatic.com/ea/cwtexhei/v3/cwTeXHei-zhonly.woff2") format("woff2"),
       url("//fonts.gstatic.com/ea/cwtexhei/v3/cwTeXHei-zhonly.woff") format("woff"),
       url("//fonts.gstatic.com/ea/cwtexhei/v3/cwTeXHei-zhonly.ttf") format("truetype");
  font-style: normal;
  font-weight: 500;
}

img, video { width: 100%; height: auto;}

section { position: relative;}

.btn {
	font-family: SofiaProSemiBold;
    color: #0b0b0b;
    font-size: 14px;
    font-weight: 400;
    text-transform: uppercase;
    padding: 10px 18px;
    border: 1px solid #d1d1d1;
    border-radius: 2px;
    background: none;
	position: relative;
	z-index: 100;
}
.btn:hover, .btn:focus {
	color: white;
	background: #0b0b0b;
	border-color: #0b0b0b;
}

.blue { color:#1612cb;}
.red { color:#F03;}
.pink { color:#db034b;}

/* 
	@grid
--------------------------------------
    Bootstrap grid customizations
-------------------------------------- */

/* Default XS */

.container {
	width: 100%;
	margin:0 auto;
	padding: 0;
	overflow: hidden;
}
.col-xs-float-none { float: none;}
.col-xs-clear-left { clear: left;}

/* 
	@typography
--------------------------------------
  Typography styles
-------------------------------------- */

html {
	-webkit-font-smoothing: antialiased;
	font-family: "cwTeXHei", "glyphicons", Arial, sans-serif;
}

h1, .h1 {
	color: #293E77;
	font-size: 1.6em;
	font-weight: 600;
	margin-top: 0;
}

h2, .h2 {
	color: #0b0b0b;
	font-size: 1.2em;
	text-transform: uppercase;
	margin-top: 0;
}

h3, .h3 {
	color: #0b0b0b;
	font-size: 1.2em;
	font-weight: 400;
	text-transform: uppercase;
	margin-top: 0;
}
.h3line-pink {
	padding-bottom:3px;
	border-bottom:2px solid #FFD8D9;
}
.h3line-pink > span {
	padding:3px;
	margin-right:5px;
	background-color:#FFD8D9;
}

h4, .h4 {
	color: rgba(11, 11, 11, 1);
	font-size: 1.2em;
	font-weight: 400;
	line-height: 30px;
	text-transform: uppercase;
	margin-top: 0;
	margin-bottom: 17px;
}

p {
	color: #2A2A2A;
	font-size: 1em;
	line-height: 1.6em;
	margin-top: 0;
}
.text-justify, p { text-align: justify;}

/* 
	@header
--------------------------------------
  The site header
-------------------------------------- */

.header {
	position: fixed;
	z-index: 200;
	top:0; 
	width: 100%;
	margin:0;
	background: rgba(0,160,233,1) url(../images/header_s.png) 0 0 no-repeat;
	height:35px;
}

.navbar {
	margin-bottom: 0;
	border: none;
}

.navbar-header {
	position: relative;
	padding: 8px;
}

.navbar-toggle {
	z-index: 500;
}

.navbar-toggle  {
	position: relative;
	float: right;
	padding: 0;
	width: 26px;
	margin: 0 2px 7px 24px;
	background-color: transparent;
	background-image: none;
	border: none;
	border-radius: 0;
}

.navbar-toggle:hover, .navbar-toggle:active, .navbar-toggle:focus { background: none;}
.navbar-toggle .navbar-toggle-icon-close { display: none;}
.header.is-showing-nav .navbar-toggle .navbar-toggle-icon-close { display: block;}
.header.is-showing-nav .navbar-toggle .navbar-toggle-icon-open { display: none;}

.navbar-toggle .icon-bar {
  display: block;
  background: #151515;
  width: 22px;
  height: 3px;
  border-radius: 0;
 }

.header-social {
	position: absolute;
	list-style: none;
	bottom: 0;
	left: 0;
	right: 0;
	text-align: center;
	margin: 0;
	padding: 30px 0 26px;
}
.header-social:before {
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	margin-left: -18px;
	width: 36px;
	height: 1px;
	background: white;
	opacity: .2;
}
.header-social li { display: inline;}
.header-social a {
	display: inline-block;
	width: 20px;
	opacity: .7;
	margin: 0 10px;
}
.header-social a:hover, .header-social a:focus { opacity: 1;}

/* main item nav */
	.navbar-item {
		position: absolute;
		top:35px;
		background-color:#FFFFFF;
		margin:0;
		list-style:none;
		width:100%;
		padding:10px 0 10px;
		z-index:250;
	}
	.navbar-item > li {
		display:inline-block;
		float:left;
		width:45%;
		margin:0 5px;
	}
	.navbar-item > li:first-child { margin-left:15px;}
	.navbar-item > li > a {
		display:block;
		font-size:18px;
		font-weight:600;
		color:#FFF;
		letter-spacing:1px;
		line-height:34px;
		padding:0 10px;
		width:100%;
		height:36px;
		overflow:hidden;
		border-radius:20px;
		text-align:center;
	}
	.navbar-item > li:first-child a { background-color:rgba(255,107,140,1);}
	.navbar-item > li:last-child a { background-color:rgba(0,170,207,1);}
	.navbar-item > li > a:hover,
	.navbar-item > li > a:focus,
	.navbar-item > li > a.active {
		background-color:#FFFFFF;
		box-sizing:border-box;
	}
	.navbar-item > li:first-child > a:hover,
	.navbar-item > li:first-child > a:focus,
	.navbar-item > li:first-child > a.active {
		color:rgba(255,107,140,1);
		border:2px dotted rgba(255,107,140,1);
	}
	.navbar-item > li:last-child > a:hover,
	.navbar-item > li:last-child > a:focus,
	.navbar-item > li:last-child > a.active {
		color:rgba(0,170,207,1);
		border:2px dotted rgba(0,170,207,1);
	}

.site-nav { opacity: 0;}

.site-nav.in,
.site-nav.collapsing {
	position: absolute;
	z-index: 300;
	top: 0;
	left: 0;
	right: 0;
	height: 100vh !important;
	opacity: 1;
	background: rgba(11, 11, 11, 0.95);
}

.navbar-nav { padding-top:3em;}
.navbar-nav > li > a {
	font-size: 21px;
	line-height: 60px;
	font-weight: 500;
	text-transform: uppercase;
	margin-top: 0;
	color: #ffffff;
	text-align: center;
}
.navbar-nav > li > a:hover,
.navbar-nav > li > a:focus {
	color: #FF0;
	background: none;
}

.navbar-contact { display: none;}

/* directions */
.directions,
.QA,
.course,
.event {
	margin-top:100px;
	padding:10px;
}

.directions-title {
	display:block;
	font-size:1.2em;
	letter-spacing:0.1em;
	border-bottom:1px dotted rgba(211,211,211,1);
	margin:0 auto 1em;
	padding-left:5px;
	width:92%;
}
.dir-etf { color:rgba(255,107,140,1);}
.dir-topix { color:rgba(16,195,236,1);}
.dir-qa { color:rgba(255,11,10,1);}
.dir-course { color:rgba(32,102,244,1);}
.dir-event { color:rgba(255,29,130,1);}

.dir-etf > i
.dir-topix > i,
.dir-qa > i,
.dir-course > i,
.dir-event > i {
	display: inline-block;
	float:left;
	width: 2px;
	height: 15px;
	margin:4px 8px 0 0;
}
.dir-etf > i { background-color: rgba(255,107,140,0.6);}
.dir-topix > i { background-color: rgba(16,195,236,0.6);}
.dir-qa > i { background-color: rgba(255,111,10,0.6);}
.dir-course > i { background-color:rgba(32,102,244,0.6);}
.dir-event > i { background-color:rgba(255,29,130,0.6)}

.directions section,
.event section,
.event-group {
	width:96%;
	margin:1em auto 2em;
}
.directions section:last-of-type {
	margin-bottom:0.8em;
}

.directions ol { padding-left:20px;}
.directions ol li { margin-bottom:6px;}

.count > li span {
	color:#EB3F74;
	display:block;
	margin-bottom:3px;
}

.Remark {
	color:#B31719;
	font-size:0.9em;
	letter-spacing:0.1em;
	padding:10px;
	border-bottom:1px dashed #3CA9EF;
	border-top:1px dashed #3CA9EF;
}

/* Panel */
.panel-title a { display:block;}
.panel-body table tr:nth-child(odd) { background-color:#f5fafe;}
.panel-body th, .panel-body td {
	color:#1F1F1F;
	border:1px solid #333;
	letter-spacing:1px;
	padding:4px;
}
.panel-body th:first-child { width:70%;}
.panel-body table td:last-of-type { text-align:right;}
.panel-body table th {
	background: #ffffff; /* Old browsers */
	background: -moz-linear-gradient(top, #ffffff 0%, #ffffff 30%, #eff2f7 50%, #eff2f7 100%, #eff2f7 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(30%,#ffffff), color-stop(50%,#eff2f7), color-stop(100%,#eff2f7), color-stop(100%,#eff2f7)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #ffffff 0%,#ffffff 30%,#eff2f7 50%,#eff2f7 100%,#eff2f7 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #ffffff 0%,#ffffff 30%,#eff2f7 50%,#eff2f7 100%,#eff2f7 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, #ffffff 0%,#ffffff 30%,#eff2f7 50%,#eff2f7 100%,#eff2f7 100%); /* IE10+ */
	background: linear-gradient(to bottom, #ffffff 0%,#ffffff 30%,#eff2f7 50%,#eff2f7 100%,#eff2f7 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#eff2f7',GradientType=0 ); /* IE6-9 */
	height:32px;
	line-height:18px;
	letter-spacing:2px;
	font-weight:400;
	text-align:center;
}

.directions section h4 {
	background-color: #DDDDDD;
	border-radius:8px;
	padding:6px 6px 6px 16px;
	margin-bottom:5px;
}

/* Table Style */
table {
	border:1px solid #2d2d2d;
	table-layout:fixed;
	empty-cells:show;
	border-collapse:collapse;
	font-size:1em;
	width:100%;
	margin:8px auto;
}
table td {height:20px;}

/* course */
/*Temp*/
.course-fee { display: none;} 
#pad-form { display: none;}
/*Temp*/
.course-nav {
	position:relative;
	right:0;
	width:100%;
	height:50px;
	list-style:none;
	padding-left:30%;
	z-index:100;
}
.course-nav > li {
	display:inline-block;
	float:left;
	margin-right:0.8em;
}
.course-nav > li a {
	color:#FFFFFF;
	display:block;
	text-align:center;
	font-weight:600;
	letter-spacing:0.1em;
	width:86px;
	height:56px;
	line-height:56px;
	border-radius:10px;
}
.course-nav > li:first-child a {
	background-color:#2c8be4;
}
.course-nav > li:last-child a {
	background-color:#fba818;
}
.course-nav > li > a:hover,
.course-nav > li > a:focus {
	background-color: transparent;
	box-sizing:border-box;
	border-radius:20px;
	font-weight:300;
	line-height:54px;
}
.course-nav > li:first-child > a:hover,
.course-nav > li:first-child > a:focus {
	color:#2c8be4;
	border:2px solid #2c8be4;
}
.course-nav > li:last-child > a:hover,
.course-nav > li:last-child > a:focus {
	color:#fba818;
	border:2px solid #fba818;
}

.course-free, .course-fee {
	display:block;
	width:96%;
	margin:3em auto;
}
.course-free h2, .course-fee h2 {
	display:block;
	padding:10px 2px 2px 36px;
	height:32px;
	font-size:1em;
	font-weight:600;
	letter-spacing:0.1em;
	margin-bottom:0.6em;
}
.course-free h2 {
	background:url(../images/course.png) left bottom no-repeat;
	color: #2c8be4;
}
.course-fee h2 {
	background:url(../images/counsellor.png) left bottom no-repeat;
	color: #fba818;
}

.course-free > ul li {
	list-style:url(../images/arrow.png);
	margin-left:20px;
	line-height:1.8em;
	letter-spacing:0.1em;
}

/* course TABLE */
#tabContent1 table { margin-top:1em;}
#tabContent1 caption, #tabContent2 caption {
	color:#333333;
	text-align:center;
	font-size:1.2em;
	font-weight:600;
	letter-spacing:0.1em;
}
#tabContent1 table th {
	color:#FFFFFF;
	height:32px;
	line-height:18px;
	letter-spacing:2px;
	font-weight:600;
}
#tabContent1 table th, #tabContent1 table td {
	border:solid 1px #333;
	letter-spacing:1px;
	padding:4px;
	text-align:center;
}
#home1 table th { background: rgba(44,139,228,1);}
#home1 table tr:nth-child(odd) { background-color: rgba(44,139,228,0.2);}

#paneTwo1 table th { background: rgba(255,107,35,1);}
#paneTwo1 table tr:nth-child(odd) { background-color: rgba(255,107,35,0.2);}

#paneTwo2 table th { background: rgba(255,171,26,1);}
#paneTwo2 table tr:nth-child(odd) { background-color: rgba(255,171,26,0.2);}

#paneTwo3 table th { background: rgba(63,158,76,1);}
#paneTwo3 table tr:nth-child(odd) { background-color: rgba(63,158,76,0.2);}

#paneTwo4 table th { background: rgba(12,181,187,1);}
#paneTwo4 table tr:nth-child(odd) { background-color: rgba(12,181,187,0.2);}

#tabContent1 span { display:none;}

#tabContent2 table { border:none;}
#tabContent2 table th {
	border-right: 1px solid #C3C3C3;
	width:30%;
	height:32px;
	text-align:right;
	padding-right:12px;
}
#tabContent2 table td {
	letter-spacing:1px;
	padding:6px 6px 6px 12px;
}
#tabContent2 span { display:block;}

#pc-form { display: none;}

.course-btn {
	color:#FFFFFF;
	display:block;
	margin:10px auto;
	width:96%;
	height:46px;
	font-size:0.9em;
	letter-spacing:0;
	text-align:center;
	line-height:46px;
	border-radius:2px;
}
.taipei { background-color: rgba(44,139,228,1);}
.hsinchu { background-color: rgba(255,107,35,1);}
.taichung { background-color: rgba(255,171,26,1);}
.tainan { background-color: rgba(63,158,76,1);}
.kaohsiung { background-color: rgba(12,181,187,1);}
.course-btn:hover,
.course-btn:focus {
	background-color:#FFFFFF;
	color:#000000;
	line-height:42px;
	border-radius:6px;
	border:1px solid rgba(211,211,211,0.6);
}

.nav-tabs > li {
	width:20%;
	padding-left:2px;
	padding-right:2px;
	text-align:center;
}

.nav-tabs > 1i.active a {
	color:#F33;
	font-size:1.2em;
	font-weight:600;
}

/* Event */
.event section h2,
.event-group h2 {
	display:block;
	letter-spacing:0.1em;
	color: #395ED4;
	font-weight:500;
	margin-bottom:0;
	padding:2px;
}
.event section p {
	letter-spacing:0.1em;
	padding:2px;
	margin:0;
}

.event-form,
.tjf-event-form {
	border:1px solid #CBCBCB;
	border-radius:6px;
	display:block;
	margin:1em auto;
	padding:8px;
}
.event-form h3,
.tjf-event-form h3 {
	color:#FFFFFF;
	background-color:#58C7DD;
	letter-spacing:0.1em;
	padding:12px;
	text-align:center;
	border-radius:5px;
	font-weight:800;
}
.event-form:last-child h3 { background-color:#F79F10;}
.tjf-event-form h3 { background-color:#F04E71;}

sup {
	color:inherit ;
	letter-spacing:0;
	font-size:0.6em;
	font-weight:300;
}
.event-form dt,
.tjf-event-form dt {
	font-size:1em;
	padding:0 10px 6px 10px;
	letter-spacing:0.1em;
}
.event-form dd,
.tjf-event-form dd {
	border-bottom:1px dashed #58C7DD;
	border-top:1px dashed #58C7DD;
	font-size:1.1em;
	text-align:center;
	padding:8px 0 8px;
	margin:6px;
}
.event-form:last-child dd {
	border-bottom:1px dashed #F79F10;
	border-top:1px dashed #F79F10;
}
.event-form p,
.tjf-event-form p {
	font-size:0.9em;
	padding:8px 0 0;
	margin:8px;
}

.event-body h4 {
	background-color: rgba(137,193,53,0.2);
	letter-spacing:0.1em;
	text-align:center;
	height:30px;
}
.event-body h4 > span {
	display:inline-block;
	float:left;
	background-color: rgba(137,193,53,1);
	width:30px;
	height:30px;
	margin-left:8px;
}

.event-body ol {
	list-style:none;
	padding:0 0 0 2em;
}
.event-body ol li {
	display:block;
	padding:5px;
	width:200px;
	border-left:1px solid #DCDCDC;
	border-right:1px solid #DCDCDC;
}
.event-body ol li:first-child {
	border-top:1px solid #DCDCDC;
	border-top-left-radius:8px;
	border-top-right-radius:8px;
}
.event-body ol li:last-child {
	border-bottom:1px solid #DCDCDC;
	border-bottom-left-radius:8px;
	border-bottom-right-radius:8px;
}
.event-body ol li:nth-child(even) { background-color: rgba(137,193,53,0.2);} 

.event-body {
	display:block;
	margin:1em auto;
	padding:8px;
	border-bottom:1px dotted #A3A3A3;
}
.event-body:last-child { border-bottom: none;}
.event-body:nth-child(3) h4 { background-color: rgba(255,219,20,0.2);}
.event-body:nth-child(3) h4 > span { background-color: rgba(255,219,20,1);}

.event-body:nth-child(4) h4 { background-color: rgba(249,181,203,0.2);}
.event-body:nth-child(4) h4 > span { background-color: rgba(249,181,203,1);}

.event-body dd {
	border-bottom:1px dashed rgba(137,193,53,1);
	border-top:1px dashed rgba(137,193,53,1);
}
.event-body:nth-last-child(2) dd {
	border-bottom:1px dashed rgba(255,219,20,1);
	border-top:1px dashed rgba(255,219,20,1);
}
.event-body:last-child dd {
	border-bottom:1px dashed rgba(249,181,203,1);
	border-top:1px dashed rgba(249,181,203,1);
}


/* QA */
.QA section, .course section {
	width:96%;
	margin:1em auto 2em;
}
.QA section h2 {
	background:url(../images/q.png) left bottom no-repeat;
	color: #ff6714;
	display:block;
	padding:10px 2px 2px 34px;
	height:38px;
	font-weight:600;
	letter-spacing:0.1em;
	margin-bottom:0.6em;
}
.QA section h2 > span {
	color:#333333;
	padding-left:5px;
}
.QA section p {
	background-color: #FBF7DC;
	padding:8px;
	border:1px solid #FFEBB3;
	border-radius:10px;
}
.QA section p::before {
	content: "";
	position: absolute;
	width: 0;
	height: 0;
	border-left:10px solid transparent;
	border-bottom:10px solid #FFEBB3;
	border-right:10px solid transparent;
	font-size: 0;
	line-height: 0;
	top: 38px;
	left: 12px;
}

.Qtable th {
	background: #ffe763; /* Old browsers */
	background: -moz-linear-gradient(top, #ffe763 0%, #ffe763 30%, #eff2f7 50%, #e4b205 100%, #e4b205 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffe763), color-stop(30%,#ffe763), color-stop(50%,#e4b205), color-stop(100%,#e4b205), color-stop(100%,#e4b205)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #ffe763 0%,#ffe763 30%,#e4b205 50%,#e4b205 100%,#e4b205 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #ffe763 0%,#ffe763 30%,#e4b205 50%,#e4b205 100%,#e4b205 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, #ffe763 0%,#ffe763 30%,#e4b205 50%,#e4b205 100%,#e4b205 100%); /* IE10+ */
	background: linear-gradient(to bottom, #ffe763 0%,#ffe763 30%,#e4b205 50%,#e4b205 100%,#e4b205 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffe763', endColorstr='#e4b205',GradientType=0 ); /* IE6-9 */
	height:32px;
	line-height:18px;
	letter-spacing:2px;
	font-weight:600;
	text-align:center;
}
.Qtable tr:nth-child(odd) { background-color:#fffad1;}
.Qtable th, .Qtable td {
	color:#1F1F1F;
	border:solid 1px #333;
	letter-spacing:1px;
	padding:4px;
}
.Qtable th:first-child { width:35%;}
.Qtable th:last-child { width:25%;}
.Qtable td:last-of-type { text-align:center;}
.Qtable td > small {
	display:block;
	letter-spacing:0;
}

/* Vertical Spacing */
p + p { margin-top: 15px;}

/* Links within headings should not add styling */
a {
	color: inherit;
	font-size: inherit;
	text-decoration: none;
}

a:hover, a:focus {
	color: inherit;
	text-decoration: none;
}


/* 
	@footer
--------------------------------------
  Custom styles for site-footer
-------------------------------------- */

.site-footer {
	margin: 2% auto 0.5%;
}
.site-footer p {
	display:block;
	width:100%;
	color: #666;
	font-size: 0.8em;
	font-weight: 400;
	line-height:1.5em;
	padding:2px 8px 2px 8px;
	margin:0;
}
.site-footer p span { margin-right:0.8em;}
.site-footer p:last-child { text-align:justify;}

/* 
	@sections
--------------------------------------
  Custom styles per section
-------------------------------------- */

/* ETF */
#etf {
	width:100%;
	margin-top:70px;
	background: url(../images/etf_background_s.jpg) top center no-repeat;
	-moz-background-size: cover;
	background-size: cover;
}
.etf-title {
	position:absolute;
	width:52%;
	top:10em;
	right:0.8em;
	z-index:101;
}
.etf-map {
	position:relative;
	width:90%;
	height:auto;
	top:8em;
	left:-2em;
	z-index:100;
}
.sell-date {
	position:absolute;
	width:16%;
	top:9em;
	left:1em;
	z-index:101;
}
#etf > a {
	position:absolute;
	background-color: rgba(255,255,255,0.8);
	display:block;
	width:70px;
	height:70px;
	font-size:14px;
	font-weight:400;
	line-height:60px;
	text-align:center;
	border-radius:35px;
	z-index:102;
}
#etf > a:hover,
#etf > a:focus {
	color:rgba(255,255,255,1);
	background-color:rgba(255,107,140,1);
	border-color:rgba(255,107,140,0)
}
.etf-btn {
	border:2px solid rgba(255,107,140,1);
	color: rgba(199,2,48,1);
	top:22em;
	right:2em;
}
.etf-btn::before {
		content: "";
		position: absolute;
		width: 0;
		height: 0;
		border-left: 8px solid transparent;
		border-right: 8px solid transparent;
		border-top: 8px solid rgba(255,107,140,1);
		font-size: 0;
		line-height: 0;
		top: 45px;
		left: 25px;
}

.etf-well {
	position:relative;
	border:none;
	padding-left:2em;
	margin-top:4em;
	list-style:none;
	z-index:103;
}
.etf-well > li {
	display:block;
	background:url(../images/list.png) left center no-repeat;
	color: rgba(0,0,0,1);
	font-size:1em;
	font-weight:800;
	padding:2px 2px 2px 22px;
}

#etf section {
	position: relative;
	background-color: rgba(255,255,255,0.8);
	border:1px solid  rgba(255,161,172,1);
	border-radius:20px;
	box-shadow: 0 2px 3px rgba(0,0,0,.25);
	width:90%;
	min-height:190px;
	margin:1.2em auto;
	padding:16px;
}
#etf section h1 {
	font-size:1.3em;
	line-height:34px;
	font-weight:800;
	letter-spacing:0.1em;
	height:34px;
	padding-left:36px;
	margin-bottom:16px;
}
.etfsubject {
	background:url(../images/etfsubject.png) left center no-repeat;
}
.etftime {
	background:url(../images/etftime.png) left center no-repeat;
}
#etf section > ul {
	list-style:none;
	color:#333;
}
#etf section li {
	margin-bottom:5px;
	font-size:1em;
	font-weight:600;
	letter-spacing:0.1em;
}
#etf section li small {
	font-size:0.8em;
	color:#666;
	padding-left:2px;
	letter-spacing:0;
}
#etf section p {
	color:#333;
	font-size:1em;
	font-weight:600;
	line-height:1.4em;
}
#etf section p:last-child {
	background:url(../images/etficon.png) left center no-repeat;
	padding-left:26px;
}
#etf section p span:nth-child(2),
#etf section p span:nth-child(3),
#etf section p span:nth-child(5),
#etf section p span:nth-child(6),
#etf section p span:nth-child(7),
#etf section p span:last-child
{ padding-left:4px;}

/* TOPIX */
#topix {
	width:100%;
	min-height:470px;
	margin-top:70px;
	background: url(../images/topix_background_s.jpg) top center no-repeat;
	-moz-background-size: cover;
	background-size: cover;
}
.topix-title {
	position:relative;
	width:90%;
	top:2em;
	margin:0 auto;
	z-index:101;
}
.topix-gist {
	position:relative;
	color:rgba(241,7,120,1);
	font-size:1.2em;
	font-weight:400;
	letter-spacing:0.1em;
	text-align: center;
	padding-right:2em;
	height:32px;
	top:1em;
	z-index:100;
}
.topix-gist span {
	color:rgba(235,10,68,1);
	font-weight:900;
}

#topix > a {
	position:absolute;
	background-color: rgba(255,255,255,1);
	display:block;
	width:120px;
	height:36px;
	font-size:14px;
	font-weight:400;
	line-height:32px;
	text-align:center;
	border-radius:10px;
	z-index:102;
}
#topix > a:hover,
#topix > a:focus {
	color:rgba(255,255,255,1);
	background-color: rgba(16,195,236,1);
	border-color:rgba(255,107,140,0)
}
.topix-btn {
	border:2px solid rgba(16,195,236,1);
	color: rgba(2,176,227,1);
	top:35em;
	left:35%;
}
.topix-btn::before {
	content: "";
	position: absolute;
	width: 0;
	height: 0;
	border-left:6px solid rgba(37,193,218,1);
	border-bottom:6px solid transparent;
	border-top:6px solid transparent;
	font-size: 0;
	line-height: 0;
	top: 11px;
	left: 100px;
}

#topix section {
	position: relative;
	background-color: rgba(255,255,255,0.8);
	border:2px dashed rgba(54,183,238,1);
	border-radius:20px;
	width:96%;
	min-height:150px;
	margin:2em auto;
	padding:12px;
}
#topix section h1 { display:none;}
#topix section > ul {
	list-style:none;
	color:#333;
	margin:0 0 0 4px;
	padding:0;
}
#topix section li {
	background:url(../images/topixicon.png) no-repeat;
	margin-bottom:5px;
	font-size:1em;
	font-weight:600;
	height:30px;
	line-height:30px;
	padding-left:30px;
}
#topix section li:first-child { background-position:0 -10px;}
#topix section li:nth-child(2) { background-position:0 -60px;}
#topix section li:nth-child(3) { background-position:0 -110px;}
#topix section li:last-child { background-position:0 -160px;}

@media (min-width: 360px) {
.header {
	height:40px;
}
}

@media (min-width: 400px) {
	#topix > a {
		width:70px;
		height:70px;
		line-height:60px;
		border-radius:35px;
	}
	.topix-btn {
		top:23em;
		left:80%;
	}
	.topix-btn::before {
	border-left:8px solid transparent;
	border-right:8px solid transparent;
	border-top:8px solid rgba(37,193,218,1);
	top: 46px;
	left: 26px;
	}
	
	#tabContent2 span { display: inline-block;}
	
	/* event */
	.event-body ol { padding:0 0 0 4em;}
	
}
/* 

	@xs
===========================================
	XS Breakpoint 480px 
=========================================== */

@media (min-width: 480px) {
.header {
	background: rgba(0,160,233,1) url(../images/header_m.png) 0 0 no-repeat;
	height:46px;
}

	.navbar-item {
		padding:10px 0 10px 0;
	}
	.navbar-item > li:first-child {
		margin-left:25px;
	}
	.navbar-item > li > a {
		line-height:46px;
		height:46px;
	}
	
	/* footer */
	.site-footer p {
		font-size: 0.9em;
		line-height:1.5em;
	}
	.copyright-mark { height:46px;}
	
	/* ETF */
	#etf {
		background-image: url(../images/etf_background_m.jpg);
		background-repeat: no-repeat;
		background-position: top center;
		background-size: cover;
	}
	.etf-title {
		width:55%;
		top:12em;
	}
	.etf-map {
		width:100%;
		top:13em;
		left:-5em;
	}
	.sell-date {
		width:18%;
		top:10em;
		left:1em;
	}
	.etf-btn {
		top:30em;
		right:4em;
	}
	
	.etf-well {
		padding-left:6em;
		margin-top:6em;
	}
	.etf-well > li {
		font-size:1.2em;
		letter-spacing:0.1em;
	}
	
	#etf section { margin:2em auto;}
	#etf section ul { padding-left:10px;}
	#etf section li {
		display:inline-block;
		float:left;
		width:47%;
		margin-right:10px;
		margin-bottom:5px;
	}
	#etf section p {
		margin-left:10px;
		letter-spacing:0.1em;
	}
	
	/* TOPIX */
	#topix {
		min-height:480px;
		margin-top:120px;
		background: url(../images/topix_background_m.jpg) top center no-repeat;
	}
	#topix > .sell-date {
		width:16%;
	}
	.topix-gist {
		font-size:1.3em;
		font-weight:600;
		letter-spacing:0.2em;
	}

	.topix-btn { top:26em;}

	#topix section > ul {
		list-style:none;
		color:#333;
		margin:6px;
	}
	#topix section li {
		font-size:1.1em;
		letter-spacing:0.1em;
		padding-left:32px;
	}
	
	/* course */
	.course-btn {
		font-size:1em;
		letter-spacing:0.1em;
	}
	
	/* event */
	.event-form dd,
	.tjf-event-form dd { letter-spacing:0.1em;}
	

	.event-body ol {
		display:block;
		width:380px;
		height:150px;
		padding:0 0 0 20px;
	}
	.event-body ol li {
		display: inline-block;
		float:left;
		width:180px;
		height:36px;
		line-height:26px;
		padding-left:10px;
		border-bottom:1px solid #DCDCDC;
		border-left:1px solid #DCDCDC;
	}
	.event-body ol li:nth-child(odd) { border-right:none;}
	.event-body ol li:nth-child(2),
	.event-body ol li:nth-child(5),
	.event-body ol li:nth-child(6) { background-color:#FFFFFF;}
	
	.event-body ol li:nth-child(3),
	.event-body ol li:nth-child(7) { background-color: rgba(137,193,53,0.2);} 

	.event-body ol li:first-child {
		border-top:1px solid #DCDCDC;
		border-top-left-radius:8px;
		border-top-right-radius:0;
	}
	.event-body ol li:nth-child(2) {
		border-top:1px solid #DCDCDC;
		border-top-right-radius:8px;
	}
	.event-body ol li:nth-child(7) {
		border-bottom:1px solid #DCDCDC;
		border-bottom-left-radius:8px;
	}
	.event-body ol li:last-child {
		border-bottom:1px solid #DCDCDC;
		border-bottom-left-radius:0;
		border-bottom-right-radius:8px;
	}
	
}

/* 

	@custom bp
===========================================
	Breakpoint 600, no classes assoc.
=========================================== */

@media (min-width: 600px) {
	/* ETF */
	.etf-title {
		width:50%;
		top:12em;
	}
	.etf-map {
		width:90%;
		top:10em;
		left:-4em;
	}
	.sell-date {
		width:16%
		left:2em;
	}
	.etf-btn { top:32em;}
	
	.etf-well {
		padding-left:10em;
		margin-top:2em;
	}
	
	#etf section { z-index:150; min-height:210px;}
	#etf section li { font-size:1.2em; padding-left:28px;}
	#etf section p { font-size:1.2em; margin-left:36px;}
	
	/* TOPIX */
	#topix > .sell-date { width:15%;}
	
	.topix-gist {
		font-size:1.4em;
		top:0.3em;
	}
	
	#topix > a {
		width:90px;
		height:90px;
		font-size:1.2em;
		line-height:80px;
		border-radius:20px;
	}
	.topix-btn {
		top:30em;
		left:75%;
	}
	.topix-btn::before {
		top: 56px;
		left: 38px;
	}

	#topix section > ul {
		color:#333;
		margin:6px;
	}
	#topix section li {
		font-size:1.1em;
		letter-spacing:0.1em;
		padding-left:32px;
	}
	
	/* course */ 
	#tabContent1 span { display: inline-block;}
}


/* 

	@sm
===========================================
	SM Breakpoint 768px 
=========================================== */

@media (min-width: 768px) {
	.header {
		background: rgba(0,160,233,1) url(../images/header_m.png) 0 0 no-repeat;
		height:46px;
	}
	.container,
	.container-fluid {
		width:100%;
		padding-left:90px;
		min-height:640px;
		overflow:hidden;
	}
	
.directions,
.QA,
.course,
.event {
	margin-top:70px;
}
	.col-xs-clear-left {
		clear: none;
	}
	.col-sm-clear {
		clear: both;
	}
	.col-sm-float-right {
		float: right;
	}
	.col-sm-float-left {
		float: left;
	}

	.navbar-header {
		position: absolute;
		width: 100%;
		padding: 13px 5%;
	}
	
	/* main item nav */
	.navbar-item {
		top:-5px;
		left:45%;
		background-color:transparent;
	}
	.navbar-item > li {
		width:180px;
		margin:0 20px 0 0;
	}
	.navbar-item > li > a {
		font-size:18px;
		font-weight:800;
		width:180px;
		height:36px;
		line-height: 36px;
		border-radius:13px;
		border:2px solid #FFFFFF;
	}

	.site-nav,
	.site-nav.in,
	.site-nav.collapse {
		position: fixed;
		z-index: 100;
		top: 56px;
		left: 0;
		opacity: 1;
		width: 90px;
		background-color:rgba(255,255,255,1);
		border-right: 1px solid rgba(239,239,239,1);
	}
	.site-nav .navbar-nav {
		float: none !important;
		text-align: center;
	}
	.navbar-nav { padding-top:0.8em;}
	.navbar-nav > li {
		float: left; !important;
		margin-bottom:30px;
	}
	.navbar-nav > li:first-child { margin-bottom:20px;}
	.navbar-nav > li::before {
		content: "";
		position: absolute;
		top: 58px;
		left: 0;
		padding:2px;
	}
	.navbar-nav > li:nth-child(2):before { content: "商品介紹";}
	.navbar-nav > li:nth-child(3):before { content: "交易優惠";}
	.navbar-nav > li:last-child:before { content: "Q & A"; padding-left:12px;}

	.navbar-nav > li > a {
		background:url(../images/menu.png) no-repeat;
		display: block;
		padding: 11px;
		line-height: 1;
		position: relative;
		width:60px;
		height:60px;
		border-radius:30px;
		text-indent:-9999px;
	}
	
	.navbar-nav > li:first-child > a {
		background-position: -20px -20px;
	}
	.navbar-nav > li:nth-child(2) > a {
		background-position: -120px -120px;
		background-color: rgba(253,173,19,1);
	}
	.navbar-nav > li:nth-child(3) > a {
		background-position: -120px -320px;
		background-color: rgba(245,116,181,1);
	}
	.navbar-nav > li:last-child > a {
		background-position: -120px -420px;
		background-color: rgba(31,199,210,1);	
	}
	
	/* Select icon */
	.navbar-nav > li > a.select {
		background-color: transparent;
	}
	.navbar-nav > li:nth-child(2) > a.select {
		background-position: -20px -120px;
	}
	.navbar-nav > li:nth-child(3) > a.select {
		background-position: -20px -320px;
	}
	.navbar-nav > li:last-child > a.select {
		background-position: -20px -420px;
	}

	/* Select mouseOver */
	.navbar-nav > li > a:hover,
	.navbar-nav > li > a:focus,
	.navbar-nav > li > a.active {
		background:url(../images/menu.png) no-repeat;
		box-sizing: border-box;
		border: 2px dotted;
	}
	.navbar-nav > li:first-child > a:hover,
	.navbar-nav > li:first-child > a:focus,
	.navbar-nav > li:first-child > a.active {
		background-position: -22px -22px;
		border-color: rgba(0,150,224,1);
	}
	.navbar-nav > li:nth-child(2) > a:hover,
	.navbar-nav > li:nth-child(2) > a:focus,
	.navbar-nav > li:nth-child(2) > a.active {
		background-position: -22px -122px;
		border-color: rgba(253,173,19,1);
	}
	.navbar-nav > li:nth-child(3) > a:hover,
	.navbar-nav > li:nth-child(3) > a:focus,
	.navbar-nav > li:nth-child(3) > a.active {
		background-position: -22px -322px;
		border-color: rgba(245,116,181,1);
	}
	.navbar-nav > li:nth-child(4) > a:hover,
	.navbar-nav > li:nth-child(4) > a:focus,
	.navbar-nav > li:nth-child(4) > a.active {
		background-position: -22px -422px;
		border-color: rgba(31,199,210,1);
	}

  .navbar-tagline{
  	display: none !important;
  }
  
	.navbar-contact {
		display: inline-block;
	}

	.header-social {
		display: none;
	}
	
	/* ETF */
	#etf {
		background-image:url(../images/etf_background.jpg);
		margin-top: 46px;
		min-height:600px;
	}
	.etf-title {
		width:45%;
		top:10em;
		right:1em;
	}
	.etf-map {
		width:80%;
		top:11em;
		left:-3em;
	}
	.sell-date {
		width:16%;
		top:8em;
		left:8em;
	}
	.etf-btn {
		top:37em;
		right:5em;
	}
	#etf > a:hover,
	#etf > a:focus {
		color:rgba(255,255,255,1);
		background-color:rgba(255,107,140,1);
		border-color:rgba(255,107,140,0);
		-webkit-animation: updown 2s infinite;
		-ms-animation: updown 2s infinite;
		-moz-animation: updown 2s infinite;
		animation: updown 2s infinite;
	}
@-webkit-keyframes updown {
	0% { top:37em;}
	50% { top:37.5em;}
	100% { top:37em;}
}
@-ms-keyframes updown {
	0% { top:37em;}
	50% { top:37.5em;}
	100% { top:37em;}
}
@-moz-keyframes updown {
	0% { top:37em;}
	50% { top:37.5em;}
	100% { top:37em;}
}
@keyframes updown {
	0% { top:37em;}
	50% { top:37.5em;}
	100% { top:37em;}
}
	
	.etf-well {
		padding-left:24em;
		margin-top:-9em;
		margin-bottom:9em;
	}

	#etf section { min-height:200px;}
	#etf section li, #etf section p { font-size:1.2em;}
	#etf section li small { font-size:0.9em;}
	
	/* TOPIX */
	#topix {
		background-image:url(../images/topix_background_m.jpg);
		margin-top:46px;
		min-height:500px;
	}
	.topix-title {
		width:80%;
		top:3em;
		right:1em;
	}
	#topix > .sell-date {
		width:110px;
		height:180px;
		left:83%;
	}
	.topix-gist {
		font-size:1.4em;
		top:1em;
	}
	
	#topix > a {
		width:70px;
		height:70px;
		font-size:1em;
		line-height:60px;
		border-radius:35px;
	}
	#topix > a:hover,
	#topix > a:focus {
		color:rgba(255,255,255,1);
		background-color:rgba(37,193,218,1);
		border-color:rgba(37,193,218,0);
		-webkit-animation: updown2 2s infinite;
		-ms-animation: updown2 2s infinite;
		-moz-animation: updown2 2s infinite;
		animation: updown2 2s infinite;
	}
	.topix-btn {
		top:26em;
		left:85%;
	}
@-webkit-keyframes updown2 {
	0% { top:26em;}
	50% { top:26.5em;}
	100% { top:26em;}
}
@-ms-keyframes updown2 {
	0% { top:26em;}
	50% { top:26.5em;}
	100% { top:26em;}
}
@-moz-keyframes updown2 {
	0% { top:26em;}
	50% { top:26.5em;}
	100% { top:26em;}
}
@keyframes updown2 {
	0% { top:26em;}
	50% { top:26.5em;}
	100% { top:26em;}
}
	.topix-btn::before {
		border-left:8px solid transparent;
		border-right:8px solid transparent;
		border-top:8px solid rgba(37,193,218,1);
		top: 46px;
		left: 26px;
	}
	
	#topix section { margin-top:3em;}
	#topix section > ul {
		list-style:none;
		color:#333;
		margin:30px 5px 5px 5px;
	}
	#topix section li {
		display:inline-block;
		float:left;
		font-size:1.2em;
		letter-spacing:0.1em;
		margin-right:15px;
		padding-left:32px;
	}
	
/* directions */
.directions-title { width:96%;}
.directions section { width:92%;}

.Remark {
	margin:2em auto 0;
	width:92%;
}

/* Panel */
.panel-group {
	width:92%;
	margin:0 auto;
}

/* Table Style */
.panel-body table { width:90%;}
.Qtable td > small {
	display: inline-block;
	margin-left:2px;
}

/* course */
.course-nav { padding-left:40%;}
.course-free h2, .course-fee h2 {
	padding:6px 2px 2px 36px;
	font-size:1.4em;
}
.nav-tabs > li {
	width:20%;
}

/* 
	@footer
--------------------------------------
  Custom styles for site-footer
-------------------------------------- */

.site-footer { padding-left:90px;}
.site-footer p { font-size: 0.9em;}
.copyright-mark {
	height:42px;
}
}

/* 

	@custom bp
===========================================
	Breakpoint 800, no classes assoc.
=========================================== */

@media (min-width: 800px) {
	/* ETF */
	.etf-well { padding-left:26em;}
}


/* 

	@custom bp
===========================================
	Breakpoint 856, no classes assoc.
=========================================== */

@media (min-width: 865px) {
.directions,
.QA,
.course,
.event {
	margin-top:80px;
}
	.navbar-item {
		top:0;
		left:50%;
	}
	
	/* ETF */
	.etf-map {
		width:80%;
		top:10em;
		left:-4em;
	}
	.etf-well {
		float:right;
		padding-right:1em;
		margin-top:-13em;
	}
	
	/* TOPIX */
	#topix {
		background-image:url(../images/topix_background.jpg);
		background-size:cover;
		margin-top:56px;
	}
	.topix-title {
		width:85%;
		top:3em;
		right:1.5em;
	}
	#topix > .sell-date { top:9em;}
	.topix-gist {
		letter-spacing:0.3em;
		top:0.8em;
	}

	.topix-btn {
		top:33em;
		left:86%;
	}
@-webkit-keyframes updown2 {
	0% { top:33em;}
	50% { top:33.5em;}
	100% { top:33em;}
}
@-ms-keyframes updown2 {
	0% { top:33em;}
	50% { top:33.5em;}
	100% { top:33em;}
}
@-moz-keyframes updown2 {
	0% { top:33em;}
	50% { top:33.5em;}
	100% { top:33em;}
}
@keyframes updown2 {
	0% { top:33em;}
	50% { top:33.5em;}
	100% { top:33em;}
}
	
	#topix section > ul { margin:30px 5px 5px 30px;}
	#topix section li { margin-right:30px;}
}


/* 

	@md
===========================================
	MD Breakpoint, 992px
=========================================== */

@media (min-width: 992px) {
	.header {
		background: rgba(0,160,233,1) url(../images/header.png) 0 0 no-repeat;
		height:56px;
	}
    .navbar-header { padding: 22px 0;}
	
	.navbar-item { left:55%;}
	
	.navbar-nav { padding-top: 9px;}

	.navbar-nav > li > a {
		font-size: 14px;
		padding: 11px 19px;
	}

	/* ETF */
	#etf { min-height:800px;}
	.etf-title { top:11em;}
	.etf-map {
		top:11em;
		left:-2em;
	}
	.sell-date {
		width:12%;
		left:9em;
	}
	.etf-btn {
		top:46em;
		right:6em;
	}
@-webkit-keyframes updown {
	0% { top:46em;}
	50% { top:46.5em;}
	100% { top:46em;}
}
@-ms-keyframes updown {
	0% { top:46em;}
	50% { top:46.5em;}
	100% { top:46em;}
}
@-moz-keyframes updown {
	0% { top:46em;}
	50% { top:46.5em;}
	100% { top:46em;}
}
@keyframes updown {
	0% { top:46em;}
	50% { top:46.5em;}
	100% { top:46em;}
}
	
	.etf-well {
		padding-right:2em;
		margin-top:-16em;
	}

	#etf section {
		width:46%;
		display:inline-block;
		float:left;
		min-height:240px;
		margin:0 2%;
	}
	#etf section li {
		padding-left:0px;
		margin-bottom:15px;
		font-size:1.1em;
	}
	#etf section li small { font-size:0.8em;}
	#etf section p {
		margin-left:20px;
		font-size:1.1em;
	}
	
	/* TOPIX */
	#topix { min-height:600px;}
	.topix-title {
		width:680px;
		height:350px;
		top:3em;
		right:1em;
	}
	#topix > .sell-date {
		top:11em;
		left:76%;
	}
	.topix-btn { left:82%;}
	#topix section { width:80%;}
	
/* course */
.course-nav {
	padding-left:40%;
}
.course-nav > li {
	margin-right:1em;
}
.course-nav > li a {
	width:120px;
	height:36px;
	line-height:36px;
}
.course-nav > li > a:hover,
.course-nav > li > a:focus {
	line-height:32px;
}

#tabContent1 table { width:80%; font-size:1.2em;}

/* event */
.event-form {
	display: inline-block;
	float:left;
	width:48%;
	min-height:260px;
	margin-right:25px;
}
.event-form:last-of-type { margin-right:0;}

.tjf-event-form {
	display: block;
	width:99%;
	min-height:550px;
}
.event-body ol { padding:0;}
.event-body {
	display: inline-block;
	float:left;
	width:26%;
	padding:8px;
	border-right:1px dotted #A3A3A3;
	border-bottom:none;
}
.event-body:first-of-type  { width:46%;}

.event-body:last-child { border-right: none;}




/* 
	@footer
--------------------------------------
  Custom styles for site-footer
-------------------------------------- */

.site-footer p { font-size: 1em;}

}

/* for IE8 */
.mdIE8 {
  position: fixed;
  display:none;
  top:0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: url(images/bg_mdie8_mask.png) repeat 0 0;
  z-index:99999;
}
.mdIE8 table {
  position: relative;
  width: 676px;
  margin: 20px auto;
}
.mdIE8 a {
  display: block;
}
.mdIE8 img {
  display: block;
  margin: 0;
  padding: 0;
  line-height: 0;
}
.mdIE8 table td.img_size {
   height:235px;
   line-height:235px;
}
.mdIE8 table td.img_size img {
	display: inline-block;
}
.mdIE8 table tr, .mdIE8 table td { 
  margin:0;
  padding:0
}

/* 

	@lg
===========================================
	LG Breakpoint, 1200px
=========================================== */

@media (min-width: 1200px) {
	
	/* main item nav */
	.navbar-item { left:60%;}
	.navbar-item > li:after,
	.navbar-item > li:before { top: 64px;}
	.navbar-item > li > a {
		height:42px;
		line-height: 40px;
	}
	
	.directions ol li {
		font-size:1.2em;
		margin-left:20px;
	}
	
	/* event */

.event-form dt, .tjf-event-form dt { font-size: 1.2em;}
	.event-form dd,
	.tjf-event-form dd {font-size:1.4em; font-weight:600; letter-spacing:0.1em;}
	.event section p { font-size:1.2em;}
	.event-form p,
	.tjf-event-form p { font-size:1.1em;}

	.event-body ol {
		width:460px;
		height:180px;
	}
	.event-body ol li {
		font-size:1.1em;
		width:200px;
		height:42px;
		line-height:30px;
	}
	
	.nav-tabs li a, #pc-form h3 {
		font-size:1.4em;
		font-weight:600;
	}
	
	#pc-form caption { font-size:1.2em;}
	#pc-form table th { width:35%;}
	#pc-form table th, #pc-form table td { font-size:1em;}

	/* ETF */
	#etf { min-height:900px;}
	.etf-title {
		width:420px;
		height:320px;
		top:12em;
		right:5em;
	}
	.etf-map {
		width:700px;
		height:650px;
		top:11em;
		left:0;
	}
	.sell-date {
		width:110px;
		height:180px;
		top:11em;
		left:9em;
	}
	
	#etf > a, #topix > a {
	width:90px;
	height:90px;
	font-size:18px;
	font-weight:400;
	line-height:80px;
	border-radius:45px;
	}
.etf-btn::before {
		border-left: 10px solid transparent;
		border-right: 10px solid transparent;
		border-top: 10px solid rgba(255,107,140,1);
		top: 56px;
		left: 34px;
}
	.etf-btn {
		top:34em;
		right:6em;
	}
@-webkit-keyframes updown {
	0% { top:34em;}
	50% { top:34.5em;}
	100% { top:34em;}
}
@-ms-keyframes updown {
	0% { top:34em;}
	50% { top:34.5em;}
	100% { top:34em;}
}
@-moz-keyframes updown {
	0% { top:34em;}
	50% { top:34.5em;}
	100% { top:34em;}
}
@keyframes updown {
	0% { top:34em;}
	50% { top:34.5em;}
	100% { top:34em;}
}
	
	.etf-well {
		padding-right:8em;
		margin-top:-15em;
	}
	.etf-well > li {
		font-size:1.4em;
		margin-bottom:4px;
	}

	#etf section li {
		padding-left:16px;
		font-size:1.2em;
	}
	#etf section li small { font-size:0.9em;}
	#etf section p {
		margin-left:20px;
		font-size:1.1em;
	}
	
	/* TOPIX */
	#topix {
		background-image:url(../images/topix_background_w.jpg);
		background-size:cover;
		min-height:600px;
	}
	.topix-title {
		top:5em;
		right:5em;
	}
	#topix > .sell-date {
		top:12em;
		left:68%;
	}
	.topix-gist { top:2.4em;}
	
	.topix-btn::before {
		border-left:10px solid transparent;
		border-right:10px solid transparent;
		border-top:10px solid rgba(37,193,218,1);
		top: 56px;
		left: 34px;
	}

	.topix-btn {
		top:22em;
		left:75%;
	}
@-webkit-keyframes updown2 {
	0% { top:22em;}
	50% { top:22.5em;}
	100% { top:22em;}
}
@-ms-keyframes updown2 {
	0% { top:22em;}
	50% { top:22.5em;}
	100% { top:22em;}
}
@-moz-keyframes updown2 {
	0% { top:22em;}
	50% { top:22.5em;}
	100% { top:22em;}
}
@keyframes updown2 {
	0% { top:22em;}
	50% { top:22.5em;}
	100% { top:22em;}
}
	

	#topix section {
		width:80%;
		margin-top:6em;
		min-height:120px;
	}
	#topix section > ul {
		margin:15px 5px 5px 60px;
	}
	#topix section li {
		font-size:1.2em;
		letter-spacing:0.2em;
		margin-right:20px;}

/* Table Style */
.panel-body table { width:80%;}

/* course */
/*Temp*/
.course-fee { display:none;}
#pad-form { display:none;}
#pc-form { display:none;}
/*Temp*/

.course-free ul li { font-size:1.2em; letter-spacing:0.1em;}

.area {
	display: inline-block;
	width:18%;
	float:left;
	margin:2px 10px 2px 10px;
}
.area h3 {
	background-color:#FFF;
	font-size:1.2em;
	text-align:center;
	padding:5px;
}

.area table {
	background-color:#FFF;
	margin-top:0;
}
.area table caption {
	background-color:#FFF;
	padding:5px;
	text-align:center;
}
.area table th {
	text-align:right;
	padding-right:10px;
	width:43%;
}
.area table td {
	text-align:left;
	padding:4px 2px 4px 10px;
}
.dline { border-bottom:1px dotted #E1E1E1;}

/* event */
.event-form { min-height:0;}

.tjf-event-form {
	width:98%;
	min-height:600px;
}
.event-body ol { padding:0 0 0 10px;}
.event-body {
	width:30%;
	padding:8px;
}
.event-body:first-of-type  { width:38%;}

/* QA */
.QA section, .course section {
	width:96%;
}
.QA section h2 {
	padding:10px 2px 2px 34px;
	height:36px;
	margin-bottom:0.8em;
}
.QA section p {
	font-size:1.1em;
	letter-spacing:0.1em;
	line-height:1.6em;
	padding:16px;
}
.QA section p::before {
	border-left:12px solid transparent;
	border-bottom:12px solid #FFEBB3;
	border-right:12px solid transparent;
	top: 38px;
	left: 20px;
}

.Qtable { width:90%;}
.Qtable th, .Qtable td {
	font-size:1.1em;
	letter-spacing:0.1em;
	padding:6px;
}

/* 
	@footer
--------------------------------------
  Custom styles for site-footer
-------------------------------------- */

.site-footer p { font-size: 1.1em;}

}


/* 

	@custom for xl
===========================================
	1300px
=========================================== */

@media (min-width: 1300px) {

}

/* 

	@custom for xxl
===========================================
	1600px
=========================================== */

@media (min-width: 1600px) {
	h1, .h1 { font-size: 2.1em; letter-spacing:0.1em;}
	h2, .h2 { font-size: 2em; letter-spacing:0.1em;}
	h3, .h3, .panel-title a { font-size: 1.8em; letter-spacing:0.1em;}
	h4, .h4 { font-size: 1.6em; letter-spacing:0.1em;}

	p, .Remark { font-size: 1.2em;}
	
	.navbar-nav { 
		width:100px;
		margin-left:2em;
	}
	
	.container {
		width:100%;
		padding-left:160px;
		overflow:hidden;
	}
	
	.directions-title {	font-size:21px;}
	.directions h3 {margin :0.8em 0 0.5em 0;}
	
	table { font-size:16px;}
	
	.course-free h2, .course-fee h2 { font-size:21px;}
	
	#tabContent1 caption, #tabContent2 caption { font-size:24px;}
	
	.nav-tabs > 1i.active a { font-size:16px;}
	.site-nav,
	.site-nav.in,
	.site-nav.collapse { width: 160px;}
	
	.navbar-nav { padding-top:2em;}
	.navbar-nav > li { margin-bottom:40px;}
	
	.directions p, .event-form dd, .event-form dt {
		letter-spacing:0.1em;
		line-height:1.8em;
	}
	
	.tjf-event-form { min-height:580px;}
	
	.event-body ol {
		width:530px;
		height:180px;
	}
	.event-body ol li {
		font-size:1.1em;
		width:230px;
		height:42px;
		line-height:30px;
	}
	
	/* ETF */
	#etf {
		background-image: url(../images/etf_background_xl.jpg);
		background-repeat: no-repeat;
		background-position: top right;
		background-size: cover;
		margin-top: 56px;
	}
	.etf-title {
		width:420px;
		height:320px;
		top:12em;
		right:6em;
	}
	.etf-map {
		width:700px;
		height:650px;
		top:11em;
		left:30em;
	}
	.sell-date {
		width:110px;
		height:180px;
		top:8em;
		left:28em;
	}
	
	#etf > a {
	width:110px;
	height:110px;
	font-size:21px;
	font-weight:600;
	line-height:100px;
	border-radius:55px;
	}

.etf-btn {
	border:2px solid rgba(255,107,140,1);
	color: rgba(199,2,48,1);
	top:30em;
	right:6em;
}
.etf-btn::before {
		border-left: 12px solid transparent;
		border-right: 12px solid transparent;
		border-top: 12px solid rgba(255,107,140,1);
		top: 68px;
		left: 43px;
}
@-webkit-keyframes updown {
	0% { top:30em;}
	50% { top:30.5em;}
	100% { top:30em;}
}
@-ms-keyframes updown {
	0% { top:30em;}
	50% { top:30.5em;}
	100% { top:30em;}
}
@-moz-keyframes updown {
	0% { top:30em;}
	50% { top:30.5em;}
	100% { top:30em;}
}
@keyframes updown {
	0% { top:30em;}
	50% { top:30.5em;}
	100% { top:30em;}
}
	
	.etf-well {
		padding-right:8em;
		margin-top:-15em;
	}
	.etf-well > li {
		font-size:1.6em;
		margin-bottom:6px;
	}

	#etf section { min-height:200px;}
	#etf section li, #etf section p { font-size:1.2em;}
	#etf section li small { font-size:0.9em;}
	
	/* event */
.event-form dt, .tjf-event-form dt { font-size: 1.3em;}
	.event-form dd,
	.tjf-event-form dd {font-size:1.6em; font-weight:600; letter-spacing:0.1em;}
	.event section p { font-size:1.3em;}
	.event-form p,
	.tjf-event-form p { font-size:1.2em;}

	.event-body ol {
		width:530px;
		height:180px;
	}
	.event-body ol li {
		font-size:1.1em;
		width:230px;
		height:42px;
		line-height:30px;
	}
	
	.nav-tabs li a, #pc-form h3 {
		font-size:1.4em;
		font-weight:600;
	}
	
	#pc-form caption { font-size:1.2em;}
	#pc-form table th { width:35%;}
	#pc-form table th, #pc-form table td { font-size:1em;}
	#pc-form table span { display:block; margin-bottom:5px;}
	
	/* TOPIX */
	#topix {
		background-image:url(../images/topix_background_xl.jpg);
		background-size:cover;
		min-height:800px;
		margin-top: 56px;
	}
	.topix-title {
		width:680px;
		height:350px;
		top:3em;
		right:1em;
	}
	#topix > .sell-date {
		width:110px;
		height:180px;
		left:70%;
	}
	.topix-gist {
		font-size:1.8em;
		top:1em;
	}
	
	#etf > a, #topix > a {
	width:110px;
	height:110px;
	font-size:21px;
	font-weight:600;
	line-height:100px;
	border-radius:55px;
	letter-spacing:1px;
	}
	
	#topix > a:hover,
	#topix > a:focus {
		color:rgba(255,255,255,1);
		background-color:rgba(37,193,218,1);
		border-color:rgba(37,193,218,0);
		-webkit-animation: updown2 2s infinite;
		-ms-animation: updown2 2s infinite;
		-moz-animation: updown2 2s infinite;
		animation: updown2 2s infinite;
	}
	.topix-btn {
		top:20em;
		left:80%;
	}
@-webkit-keyframes updown2 {
	0% { top:20em;}
	50% { top:20.5em;}
	100% { top:20em;}
}
@-ms-keyframes updown2 {
	0% { top:20em;}
	50% { top:20.5em;}
	100% { top:20em;}
}
@-moz-keyframes updown2 {
	0% { top:20em;}
	50% { top:20.5em;}
	100% { top:20em;}
}
@keyframes updown2 {
	0% { top:20em;}
	50% { top:20.5em;}
	100% { top:20em;}
}
	.topix-btn::before {
		border-left:12px solid transparent;
		border-right:12px solid transparent;
		border-top:12px solid rgba(37,193,218,1);
		top: 70px;
		left: 42px;
	}
	
	#topix section {
		margin-top:5em;
		width:80%;
	}
	#topix section > ul {
		margin:30px 5px 5px 40px;
	}
	#topix section li {
		display:inline-block;
		float:left;
		font-size:1.2em;
		letter-spacing:0.1em;
		height:32px;
		margin-right:15px;
		padding-left:32px;
	}
	
/* course */
	.course-free ul li { font-size:1.4em; letter-spacing:0.1em;}
	
	/* QA */
.QA section, .course section {
	width:92%;
}
.QA section h2 {
	padding:10px 2px 2px 34px;
	height:42px;
}
.QA section p {
	font-size:1.2em;
	letter-spacing:0.1em;
	line-height:1.8em;
}
.QA section p::before {
	border-left:16px solid transparent;
	border-bottom:16px solid #FFEBB3;
	border-right:16px solid transparent;
	top: 49px;
	left: 18px;
}

/* 
	@footer
--------------------------------------
  Custom styles for site-footer
-------------------------------------- */

.site-footer {
	width:100%;
	margin:0;
	padding:0;
}
.site-footer p {
	display:block;
	width:100%;
	color: #333;
	font-size: 1.1em;
	font-weight: 400;
	line-height:1.5em;
	padding:20px 20px 20px 180px;
	margin:0;
}

}

/* 

	@custom for xxl
===========================================
	1920px
=========================================== */
@media (min-width: 1920px) {
	h1, .h1 { font-size: 2.1em; letter-spacing:0.1em;}
	h2, .h2 { font-size: 2em; letter-spacing:0.1em;}
	h3, .h3, .panel-title a { font-size: 1.8em; letter-spacing:0.1em;}
	h4, .h4 { font-size: 1.6em; letter-spacing:0.1em;}

	p, .Remark { font-size: 1.2em;}
	
	.navbar-nav { 
		width:100px;
		margin-left:2em;
	}
	
	.container {
		width:100%;
		padding-left:160px;
		overflow:hidden;
	}
	
	.directions-title {	font-size:21px;}
	.directions h3 {margin :0.8em 0 0.5em 0;}
	
	table { font-size:16px;}
	
	.course-free h2, .course-fee h2 { font-size:21px;}
	
	#tabContent1 caption, #tabContent2 caption { font-size:24px;}
	
	.nav-tabs > 1i.active a { font-size:16px;}
	.site-nav,
	.site-nav.in,
	.site-nav.collapse { width: 160px;}
	
	.navbar-nav { padding-top:2em;}
	.navbar-nav > li { margin-bottom:40px;}
	
	.directions p, .event-form dd, .event-form dt {
		letter-spacing:0.1em;
		line-height:1.8em;
	}
	
	
	/* ETF */
	.etf-map {
		left:50em;
	}
	.sell-date {
		top:8em;
		left:68em;
	}

.etf-btn {
	top:32em;
	right:10em;
}
.etf-btn::before {
		border-left: 12px solid transparent;
		border-right: 12px solid transparent;
		border-top: 12px solid rgba(255,107,140,1);
		top: 70px;
		left: 42px;
}
@-webkit-keyframes updown {
	0% { top:32em;}
	50% { top:32.5em;}
	100% { top:32em;}
}
@-ms-keyframes updown {
	0% { top:32em;}
	50% { top:32.5em;}
	100% { top:32em;}
}
@-moz-keyframes updown {
	0% { top:32em;}
	50% { top:32.5em;}
	100% { top:32em;}
}
@keyframes updown {
	0% { top:32em;}
	50% { top:32.5em;}
	100% { top:32em;}
}
	
	.etf-well {
		padding-right:6em;
		margin-top:-14em;
	}
	.etf-well > li {
		font-size:1.6em;
		margin-bottom:6px;
	}

	#etf section {
		position:absolute;
		width:700px;
		top:-32em;
		left:2em;
		min-height:250px;
	}
	#etf section:last-child { top:-12em;}
	#etf section li, #etf section p {
		font-size:1.4em;
		letter-spacing:0.2em;
	}
	
	
	/* TOPIX */
	#topix {
		background-image:url(../images/topix_background_xl.jpg);
		background-size:cover;
		min-height:800px;
	}
	.topix-title {
		top:5em;
		right:2em;
	}
	#topix > .sell-date {
		left:75%;
	}
	.topix-gist {
		font-size:2em;
		top:1.6em;
	}
	
	#topix > a:hover,
	#topix > a:focus {
		color:rgba(255,255,255,1);
		background-color:rgba(37,193,218,1);
		border-color:rgba(37,193,218,0);
		-webkit-animation: updown2 2s infinite;
		-ms-animation: updown2 2s infinite;
		-moz-animation: updown2 2s infinite;
		animation: updown2 2s infinite;
	}
	.topix-btn {
		top:20em;
		left:70%;
	}
@-webkit-keyframes updown2 {
	0% { top:20em;}
	50% { top:20.5em;}
	100% { top:20em;}
}
@-ms-keyframes updown2 {
	0% { top:20em;}
	50% { top:20.5em;}
	100% { top:20em;}
}
@-moz-keyframes updown2 {
	0% { top:20em;}
	50% { top:20.5em;}
	100% { top:20em;}
}
@keyframes updown2 {
	0% { top:20em;}
	50% { top:20.5em;}
	100% { top:20em;}
}
	
	#topix section {
		margin-top:8em;
		width:60%;
		height:160px;
	}
	#topix section > ul {
		list-style:none;
		color:#333;
		margin:30px;
	}
	#topix section li {
		font-size:1.8em;
		letter-spacing:0.2em;
		margin-right:36px;
		padding-left:32px;
	}
	.topix h4 { background-color:#A9E1EB;}
	
	/* QA */
.QA section p {
	font-size:1.3em;
	line-height:1.8em;
	padding:20px;
}

	
/* 
	@footer
--------------------------------------
  Custom styles for site-footer
-------------------------------------- */

.site-footer p {
	padding:20px 20px 20px 160px;
}

}