@import url("font-awesome.min.css");
 @import url("animate.css");
 @import url("animations.css");
body {
	padding: 0;
	margin: 0;
	font-family: Helvetica, Arial, 微軟正黑體, "Microsoft JhengHei", sans-serif;
	letter-spacing: 1px;
	position: relative;
	color:#3c3c3c;
	background-color: #fff
}
* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
	font-family: Helvetica, Arial, 微軟正黑體, "Microsoft JhengHei", sans-serif;
	line-height: 1.4em;
	font-weight: 900;
}
.img {
	width:100%;
}
.main_container h2, h3 {
	color:#ff8200;
}
h2 {
	font-size: 58px;
	font-size: 6.5vmin;
	text-align:center;
	padding-top: 20px;
	margin-bottom: 10px;
	font-weight:bolder;
}
.h2_content {
	font-size: 32px;
	font-size: 4vmin;
	text-align:center;
	display:block;
	letter-spacing:3px;
	line-height:7vmin;
}
.h2_content font {
	color:#ff8200;
	font-weight:bolder;
}
h3 {
	font-size:40px;
	font-weight:bold;
	text-align: center;
}
.orgfont {
	color:#ff8200;
}
.red {
	color:#bb0000
}
.graybg {
	background:#e5e5e5;
}
.h2_content:after, .h2_content:before {
	content: '';
	display: block;
	padding: 15px 0;
	margin-bottom: 0px;
}
html, body {
	height: 100%;
	border: none;
}
p {
	font-weight:bold;
}
a {
	text-decoration: none;
	-webkit-transition: all 0.2s ease-out 0s;
	-moz-transition: all 0.2s ease-out 0s;
	transition: all 0.2s ease-out 0s;
}
a:hover, a:focus, a:active {
	text-decoration: none;
}
ul {
	list-style: none;
	line-height: 30px;
}
.list-style {
	padding:0;
	margin:0;
	color: #3D3935;
}
.list-style-small {
	margin: 0 0 0 25px;
	padding:0;
	list-style:decimal!important;
	color: #3D3935;
}
.tab_style, .tab_style2 {
    display: table;
    white-space: nowrap;
    border-spacing: 15px 0;
    margin: 10px auto 20px auto;
	padding-top:0;
	padding-bottom: 0;
    color: #fff;
	font-size:25px;
	font-weight:normal;
}
.tab_style:before, .tab_style:after {
    content: "";
    display: table-cell;
    width: 30%;
    background: -webkit-linear-gradient(#fff,#fff) repeat-x left center;
    background: -moz-linear-gradient(#fff,#fff) repeat-x left center;
    background: -ms-linear-gradient(#fff,#fff) repeat-x left center;
    background: linear-gradient(#fff,#fff) repeat-x left center;
    background-size: 1px 1px;
}
.right_content h7.tab_style:before, .right_content h7.tab_style:after {content: "";
    display: table-cell;
    width: 30%;
    background: -webkit-linear-gradient(#000,#000) repeat-x left center;
    background: -moz-linear-gradient(#000,#000) repeat-x left center;
    background: -ms-linear-gradient(#000,#000) repeat-x left center;
    background: linear-gradient(#000,#000) repeat-x left center;
    background-size: 1px 1px; }
.now_btn {display: block;
    max-width: 300px;
    background: #fff;
    text-align: center;
    border-radius: 50px;
    padding: 5px 0;
    border: 1px solid #b3b3b3;
    margin: 20px auto 0px;
    color: #000;
    font-size: 90%;}
.orgbg { background:#ff8200; color:#fff; font-size:25px; padding: 10px 20px 20px; margin:20px 0; }

#six {
	font-size: 18px;
	font-weight: bold;
	line-height: 1.5;
}
a img {
	border: none;
}
img {
	border: none;
	display: block;
	margin-left: auto;
	margin-right: auto;
}
.img_auto {
	width:100%;
}
.notice_word:before, .notice_word:after {
	display: table;
	content: " ";
	clear:both;
}
table i {
	vertical-align: middle;
}
h1, h2, h5 {
	font-size: 40px;
	font-size: 4.5vmin;
	font-weight: 400;
	text-align: center;
	color: #464646;
	display: block;
	font-weight:bolder;
	position: relative;
	padding-bottom: 10px;
}
h1.dash span {
	background: none;
	background-color: #fff;
}
h1.dash .bit {
	background: url(../images/bit2.png) repeat;
	background-position: 8px 10px;
	padding: 0px 15px;
}
h1.dash:after {
	content: '';
	display: block;
	margin-top: -25px;
	width: 100%;
	border-bottom: 1px solid #ff8200;
}
h1.dash2:after {content: '';
	display: block;
	margin-top: -25px;
	width: 100%;
	border-bottom: 1px dashed #ff8200;}
.main_protitle h1 { margin-bottom:0; padding-bottom:0;}

.movie_main { position: relative;max-height: 300px;}
.movie_box li {
    list-style-type: none;
    margin-right: 10px;
}
.text-small2 {     display: block;
    clear: both;
    padding:20px 10px 0 10px; }
.bold {
	font-weight:bold!important;
}
.activity {
	width:30%;
	width: 30vw;
	max-width: 200px;
	margin: 0 auto;
}
.mobile, .mobile2 {
	display:none!important;
}
.table {
	width: 100%;
	max-width: 100%;
	margin-bottom: 0px;
	border-spacing: 0;
	font-size: 20px;
	border-collapse: collapse;/*border: 1px solid #959595;*/
}
.table>tbody>tr>td {
	padding: 10px 20px;
	line-height: 1.42857143;
	border: 1px solid #959595;
	vertical-align: middle;
	font-size: 2.2vmin;
}
.garybg { background:#ebebeb; display: flex;-webkit-flex-direction: row-reverse;
    flex-direction: row-reverse; }
.right_content { width:65%;text-align: center;}
.right_content h6 {font-size: 180%;margin: 10px 0;}
.right_content h7 {color: #000;font-size: 100%;}
.left_content { width:35%;position: relative;}
.now_search {    padding: 10px 0;
    display: block;
    max-width: 300px;
    margin: 0 auto 10px;
	position: relative;
    border: 1px solid #000;
    color: #000;
    border-radius: 50px;}
.search { position: absolute;
    right: 0;
}
@keyframes out {
    0% { transform: rotate(0); }
    100% { transform: rotate(-360deg); }
}
@keyframes in {
    0% { transform: rotate(0); }
    100% { transform: rotate(360deg); }
}
@keyframes center {
	0% { transform: translate(0,50%); }
	25% { transform: translate(-50%,0); }
	50% { transform: translate(0,-50%); }
	75% { transform: translate(50%,0); }
	100% { transform: translate(0,50%); }
}
.box2,.search{
    animation: 2s linear infinite;
}
.box2{
    position: absolute;
		/* top: 50%; */
		top: 0;
    right: 0;
    width: 50px;
    height: 50px;
    /* transform: translate(-50%, -50%) rotate(0); */
    /* transform-origin: 15% 30%; */
    animation-name: center;
}
.search{
    width: 50px;
    height: 50px;
    /* transform: rotate(0); */
    /* animation-name: in; */
}
.big_img {position: absolute;
    bottom: 0;
    padding: 0 10px;}
.text-justify {
	text-align: justify;
	text-justify: inter-ideograph;
}
.text-left {
	text-align:left;
}
.bonus {
	background:#f0f0f0;
}
.text-nowrap, .table th {
	white-space: nowrap;
}
.top_champion { background: url(../images/top_championbg.png) no-repeat;background-size: contain;max-width: 600px;margin: 20px auto; position:relative;}
.top_champion img:nth-child(1) { position:absolute; top:0;}
.table th {
	vertical-align:middle;
	padding:12px;
	border: 1px solid #959595;
	background: #00a9ba;
	color: #fff;
}
.plan_img {
	position:relative;
}
.main_content {
	overflow: auto;
	margin-top: 20px;
	margin-bottom: 20px;
}
.left_news { width:60%; float:left; padding-left: 20px;}
sub { vertical-align: baseline;font-size: initial;}
.right_girl { width:40%; float:left;padding: 20px;}
.main_content span {
	display: block;
	overflow: auto;
	width: 50%;
	float: left;
}
.main_boy img {
	max-width:300px;
}
.main_boybtn img {
	max-width:350px;
}
.main_boybtn a {
	display: block;
	text-align: center;
	margin: 3% auto;
}
:focus {
	outline: -webkit-focus-ring-color auto 0px;
}
#hidebtn {
	max-width: 500px;
	margin: 20px auto;
	cursor: pointer;
}
.text-center {
	text-align: center;
}
.text-normal {
	font-weight:normal!important;
}
.drawer-nav {
	position: fixed;
	z-index: 101;
	top: 0;
	overflow: hidden;
	width: 16.25rem;
	height: 100%;
	color: #222;
	background-color: #fff;
}
.drawer-brand {
	font-size: 1.5rem;
	font-weight: bold;
	line-height: 3.10rem;
	display: block;
	text-decoration: none;
	color: #222;
}
.drawer-menu {
	margin: 0;
	padding: 0;
	list-style: none;
}
.drawer-menu-item {
	font-size: 1rem;
	display: block;
	margin-left: 2rem;
	text-decoration: none;
	color: #222;
}
.drawer-menu-item:hover {
	text-decoration: underline;
	color: #3D3935;
	background-color: transparent;
}
/*! overlay */



.drawer-overlay {
	position: fixed;
	z-index: 100;
	top: 0;
	left: 0;
	display: none;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, .2);
}
.drawer-open .drawer-overlay {
	display: block;
}
/*!------------------------------------*\



    Top



\*!------------------------------------*/



.drawer--top .drawer-nav {
	top: -100%;
	left: 0;
	width: 100%;
	height: auto;
	max-height: 100%;
	-webkit-transition: top .6s cubic-bezier(0.190, 1.000, 0.220, 1.000);
	transition: top .6s cubic-bezier(0.190, 1.000, 0.220, 1.000);
}
.drawer--top.drawer-open .drawer-nav {
	top: 0;
}
.drawer--top .drawer-hamburger, .drawer--top.drawer-open .drawer-hamburger {
	right: 0;
}
/*!------------------------------------*\



    Right



\*!------------------------------------*/



.drawer--right .drawer-nav {
	right: -16.25rem;
	-webkit-transition: right .6s cubic-bezier(0.190, 1.000, 0.220, 1.000);
	transition: right .6s cubic-bezier(0.190, 1.000, 0.220, 1.000);
}
.drawer--right.drawer-open .drawer-nav, .drawer--right .drawer-hamburger, .drawer--right.drawer-open .drawer-navbar .drawer-hamburger {
	right: 0;
}
.drawer--right.drawer-open .drawer-hamburger {
	right: 16.25rem;
}
/*!------------------------------------*\



    Hamburger



\*!------------------------------------*/



.drawer-hamburger {
	position: fixed;
	z-index: 104;
	top: 0;
	display: block;
	box-sizing: content-box;
	width: 2rem;
	padding: 0;
	padding-top: 11px;
 padding-right: .75rem;
	padding-bottom: 30px;
 padding-left: .75rem;
	-webkit-transition: all .6s cubic-bezier(0.190, 1.000, 0.220, 1.000);
	transition: all .6s cubic-bezier(0.190, 1.000, 0.220, 1.000);
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
	border: 0;
	outline: 0;
	background-color: transparent;
}
.drawer-hamburger:hover {
	cursor: pointer;
	background-color: transparent;
}
.drawer-hamburger-icon {
	position: relative;
	display: block;
	margin-top: 10px;
}
.drawer-hamburger-icon, .drawer-hamburger-icon:before, .drawer-hamburger-icon:after {
	width: 100%;
	height: 2.5px;
	-webkit-transition: all .6s cubic-bezier(0.190, 1.000, 0.220, 1.000);
	transition: all .6s cubic-bezier(0.190, 1.000, 0.220, 1.000);
	background-color: #ff8200;
}
.drawer-hamburger-icon:before, .drawer-hamburger-icon:after {
	position: absolute;
	top: -10px;
	left: 0;
	content: ' ';
}
.drawer-hamburger-icon:after {
	top: 10px;
}
.drawer-open .drawer-hamburger-icon {
	background-color: transparent;
}
.drawer-open .drawer-hamburger-icon:before, .drawer-open .drawer-hamburger-icon:after {
	top: 0;
}
.drawer-open .drawer-hamburger-icon:before {
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
}
.drawer-open .drawer-hamburger-icon:after {
	-webkit-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	transform: rotate(-45deg);
}
/*!------------------------------------*\



    accessibility



\*!------------------------------------*/







/*!



 * Only display content to screen readers



 * See: http://a11yproject.com/posts/how-to-hide-content



 */



.sr-only {
	position: absolute;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
}
/*!



 * Use in conjunction with .sr-only to only display content when it's focused.



 * Useful for "Skip to main content" links; see http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G1



 * Credit: HTML5 Boilerplate



 */



.sr-only-focusable:active, .sr-only-focusable:focus {
	position: static;
	overflow: visible;
	clip: auto;
	width: auto;
	height: auto;
	margin: 0;
}
/*!------------------------------------*\



    Sidebar



\*!------------------------------------*/



.drawer--sidebar {
	background-color: #fff;
}
.drawer--sidebar .drawer-contents {
	background-color: #fff;
}
 @media (min-width: 64em) {
.drawer--sidebar .drawer-hamburger {
	display: none;
	visibility: hidden;
}
.drawer--sidebar .drawer-nav {
	display: block;
	-webkit-transform: none;
	-ms-transform: none;
	transform: none;
	position: fixed;
	width: 12.5rem;
	height: 100%;
}
/*! Right */



.drawer--sidebar.drawer--right .drawer-nav {
	right: 0;
	border-left: 1px solid #ddd;
}
.drawer--sidebar.drawer--right .drawer-contents {
	margin-right: 12.5rem;
}
/*! container */



.drawer--sidebar .drawer-container {
	max-width: 48rem;
}
}
 @media (min-width: 75em) {
.drawer--sidebar .drawer-nav {
	width: 16.25rem;
}
.drawer--sidebar.drawer--left .drawer-contents {
	margin-left: 16.25rem;
}
.drawer--sidebar.drawer--right .drawer-contents {
	margin-right: 16.25rem;
}
/*! container */



.drawer--sidebar .drawer-container {
	max-width: 60rem;
}
}
/*!------------------------------------*\



    Navbar



\*!------------------------------------*/



.drawer--navbarTopGutter {
	padding-top: 3.10rem;
}
.drawer-navbar .drawer-navbar-header {
	border-bottom: 1px solid #ddd;
	background-color: #fff;
}
.drawer-navbar {
	z-index: 1020;
	top: 0;
	width: 100%;
}
/*! .drawer-navbar modifier */



.drawer-navbar--fixed {
	position: fixed;
}
.drawer-navbar-header {
	position: relative;
	z-index: 102;
	box-sizing: border-box;
	width: 100%;
	height: 3.10rem;
 padding: 0 .75rem;
}
.drawer-menu-item {
	color: #3e3a37;
	text-decoration: none;
}
.drawer-navbar .drawer-brand {
	height: auto;
	display: block;
	min-width: 199px;
	display: block;
	padding: 15px 20px 0;
	float: left;
}
.logo_right_nav {
	height: auto;
	display: block;
	padding: 20px 20px 0;
}
.drawer-navbar .drawer-brand:hover {
	background-color: transparent;
}
.drawer-navbar .drawer-nav {
	padding-top: 3.10rem;
}
.drawer-navbar .drawer-menu {
}
 @media (min-width: 84em) {
.drawer-navbar {
	border-bottom: 1px solid #d3d3d3;
	background-color: #fff;
	max-height: 52px;
}
.drawer-navbar .drawer-navbar-header {
	position: relative;
	display: block;
	float: left;
	width: auto;
	padding: 0;
	border: 0;
}
.drawer-navbar-header a {
	color: #7D4E22;
}
.drawer-navbar .drawer-menu--right {
	float: right;
}
.drawer-navbar .drawer-menu li {
	float: left;
}
.drawer-navbar .drawer-menu-item {
	line-height: 3rem;
	padding-top: 0;
	padding-bottom: 0;
	border-top: 5px solid #FFFFFF;
	text-decoration: none;
	cursor:pointer;
}
.drawer-navbar .drawer-menu-item:hover {
	border-top: 5px solid #f6904b;
}
.drawer-navbar .drawer-hamburger {
	display: none;
}
.drawer-navbar .drawer-nav {
	position: relative;
	left: 0;
	overflow: visible;
	width: auto;
	height: 2rem;
	padding-top: 0;
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
}
.drawer-navbar .drawer-menu {
	padding: 0;
}
/*! dropdown */



.drawer-navbar .drawer-dropdown-menu {
	position: absolute;
	width: 16.25rem;
	border: 1px solid #ddd;
}
.drawer-navbar .drawer-dropdown-menu-item {
 padding-left: .75rem;
}
}
/*! open */



.drawer-dropdown.open > .drawer-dropdown-menu {
	display: block;
}
/*! drawer-caret */



.drawer-dropdown .drawer-caret {
	display: inline-block;
	width: 0;
	height: 0;
	margin-left: 4px;
	-webkit-transition: opacity .2s ease, -webkit-transform .2s ease;
	transition: opacity .2s ease, -webkit-transform .2s ease;
	transition: transform .2s ease, opacity .2s ease;
	transition: transform .2s ease, opacity .2s ease, -webkit-transform .2s ease;
	-webkit-transform: rotate(0deg);
	-ms-transform: rotate(0deg);
	transform: rotate(0deg);
	vertical-align: middle;
	border-top: 4px solid;
	border-right: 4px solid transparent;
	border-left: 4px solid transparent;
}
/*! open */



.drawer-dropdown.open .drawer-caret {
	-webkit-transform: rotate(180deg);
	-ms-transform: rotate(180deg);
	transform: rotate(180deg);
}
/*!------------------------------------*\



    Container



\*!------------------------------------*/



.logo_right {
	float:right;
}
.drawer-container {
	margin-right: auto;
	margin-left: auto;
}
footer {
	bottom: 0;
	width: 100%;
	background:#ddd;
}
footer .first:after {
	content:' | ';
	margin-right: 5px;
}
footer a, footer img {
	display: inline-block;
	color: rgb(51, 51, 51);
}
.txt_link a {
	padding: 8px 0 12px 0;
	font-size:0.8rem;
}
.txt_link img {
	vertical-align: bottom;
}
.txt_link {
	max-width:250px;
	margin:0 auto
}
.bottom_btn {
	background:#ff8200;
}
.bottom_width a {
	color: #fff;
	border: 1px solid #fff;
	padding: 5px 15px;
	margin: 10px 5px;
	letter-spacing: 5px;
 font-size: calc(10px + .5vw);
	text-align:center;
}
.bottom_width a:hover {
	border: 1px solid #ff8200;
	color: #ff8200;
	background: #fff;
}
.logo {
	max-height: 40px;
}
.bottom_width {
	margin: 0 auto;
	width: 100%;
	max-width: 600px;
	text-align: center;
}
.banner {
	width:100%;
	background: #ff8200 url(../images/banner_bg.png) no-repeat 110% 10%;
    background-size: contain;
	display: block;
    overflow: hidden;
	position: relative;
}
.banner p { color:#000; font-size:150%; display:block; max-width:1000px; margin:20px auto; text-align:center; z-index: 5; position: relative;}
.top_title_main {max-width: 1000px; width: 80%;margin: 3% auto 0; position: relative; z-index: 5;}
.center2_main {    display: flex;
    max-width: 1000px;
    position: relative;
    margin: auto;
    z-index: 5;}
.center2_main div { width:50%;}
.center2_main div img {max-width: 70%;margin: 40px auto 0;}
.left_img { position: relative;}
.center2_main:after{ content: "";
    border-right: 3px solid #fff;
    position: absolute;
    height: 100px;
    left: 50%;
    top: 40%;}
.ld-bounce {-webkit-animation: ld-bounce 1s infinite;animation: ld-bounce 1s infinite;}
@keyframes ld-bounce {
0%, 90% {
animation-timing-function:linear
}
10% {
animation-timing-function:cubic-bezier(0, .4, .4, 1);
-webkit-transform:translate(0%, 5%) scaleY(1.1);
transform:translate(0%, 5%) scaleY(1.1)
}
50% {
animation-timing-function:cubic-bezier(.4, 0, 1, .6);
-webkit-transform:translate(0%, -6%) scaleY(1.0);
transform:translate(0%, -6%) scaleY(1.0)
}
0%, to {
-webkit-transform:translate(0%, 6%) scaleY(.9);
transform:translate(0%, 6%) scaleY(.9)
}
90% {
-webkit-transform:translate(0%, 5%) scaleY(1.0);
transform:translate(0%, 5%) scaleY(1.0)
}
}
@-webkit-keyframes ld-bounce {
0%, 90% {
animation-timing-function:linear
}
10% {
animation-timing-function:cubic-bezier(0, .4, .4, 1);
-webkit-transform:translate(0%, 5%) scaleY(1.1);
transform:translate(0%, 5%) scaleY(1.1)
}
50% {
animation-timing-function:cubic-bezier(.4, 0, 1, .6);
-webkit-transform:translate(0%, -6%) scaleY(1.0);
transform:translate(0%, -6%) scaleY(1.0)
}
0%, to {
-webkit-transform:translate(0%, 6%) scaleY(.9);
transform:translate(0%, 6%) scaleY(.9)
}
90% {
-webkit-transform:translate(0%, 5%) scaleY(1.0);
transform:translate(0%, 5%) scaleY(1.0)
}
}
.step1 img {
	padding:20px 15px 0 0;
}
.step2 img {
	padding:20px 0 0 15px;
}
.banner:before, .banner:after, .main_container:before, .main_container:after {
	display: table;
	content: " ";
	clear: both;
}
.banner_left, .banner_right, .step1, .step2 {
	width: 50%;
	width: calc(100% / 2);
	float: left;
	display: table-cell;
	text-align: center;
	position: relative;
}
.second_tab {
	padding-top: 10px;
}
.main_click {
	display:block;
	overflow:visible;
}
.main_click li {
	width: 49%;
	width: calc(100% / 2 - 5px);
	display: inline-block;
}
.main_click li a {
	display:block;
	position: relative;
}
.text-box,.text-list { position:absolute;}
.text-box {color: #000;font-weight: bolder;font-size: 35px;}
.left {
	padding-right:20px;
}
.right {
	padding-left:20px;
}
.free_box {color: #fff;font-size: 35px;line-height: 1.8;}
.free_box font,.free_content font {background: #fff;font-size: 35px;
    color: #02a9ba;
    font-weight: bolder;
    padding: 20px 10px;}
.free_content { display:flex;}
.free_content span { margin: 10px 0;}
.free_content font { white-space: nowrap;padding: 20px 30px;}
.free_words { padding:0 10px; font-size: 22px; color: #fff; margin-top: -10px!important;}
.program_main {display: flex;}
.top_tiltle {text-align: center;display: block;font-size: 40px; font-weight: bolder;color: #09acbc;}
.top_tiltle2 {display: block;background: radial-gradient(ellipse at left, #01a9ba, #5dd1b5);color: #fff;text-align: center;padding: 20px 0;}
.title_last {    text-align: center;display: block;padding: 20px 0 10px;font-weight: bolder; font-size: 18px;}
.title_last ul {padding: 0 0 0 10px;max-width: 140px;text-align: left;list-style: circle;margin: auto;line-height: 1.4;}
.banner_right span {
	display:block;
	position:absolute;
	left:0;
	right:0;
	top:0;
	bottom:0;
	margin:auto;
	content:"";
	background:url(../images/banner_right_robot.png) no-repeat;
	background-size: contain;
	transform-origin: left bottom;
}
.banner_left img {
	width: 80%;
	margin: 10% auto 0 auto;
}
.case01, .case02 {
	width: 49.5%;
	width: calc(100% / 2 - 2px);
	float: left;
	cursor:pointer;
}
.case01 {
	margin: 0 2px 0 0;
}
.case02 {
	margin: 0 0 0 2px;
}
.program1, .program2, .program3 {
	width: 32.5%;
	width: calc(100% / 3);
	float: left;
	background:#ffffff;
}
.price {
	width: 60%;
	margin: 0 auto;
}
.box-container {
   display: inline-block;
    margin-top: 1.4em;
    width: 100%;
    margin-left: 7%;
    margin-bottom: 0;
}

.box {
   list-style-type: none;
   float: left;
   margin-bottom: 1.8rem;
   margin-left: 1%;
   margin-right: 1%;
}

.inviewport .box {
   transform: translateY(140px);
   opacity: 0;
   -webkit-transition: all 0.2s ease-in-out;
   -moz-transition: all 0.2s ease-in-out;
   transition: all 0.2s ease-in-out;
}

.box.visible {
   transform: translateY(0);
   opacity: 1;
   -webkit-transition: all 0.8s ease-in-out;
   -moz-transition: all 0.8s ease-in-out;
   transition: all 0.8s ease-in-out;
}

.box a {
   display: block;
   width: 100%;
   height: auto;
}

.four-cols .box {
   width: 23.1%;
   position:relative;
    -webkit-transition: all 0.8s ease-in-out;
   -moz-transition: all 0.8s ease-in-out;
   transition: all 0.8s ease-in-out;
}
.four-cols li:nth-child(1) {margin-top:3%;}
.four-cols li:nth-child(2),.four-cols li:nth-child(4){margin-left: -5%;margin-top: 2.1%;
    transform: scale(0.8, 0.8);
    -ms-transform: scale(0.8, 0.8);
    -webkit-transform: scale(0.8, 0.8); z-index:2;}
.four-cols li:nth-child(3) {margin-left: -5%; z-index:3;}
.four-cols li:nth-child(4) { z-index:2;margin-left: -3%;margin-top: 5%;}
.four-cols li:hover { transform: scale(1.2, 1.2);
    -ms-transform: scale(1.2, 1.2);
    -webkit-transform: scale(1.2, 1.2); z-index:20;}
.four-cols .box:nth-child(4n+1) {
   clear: both;
}

.box a img {
   -webkit-back-visibility: hidden;
   display: block;
   width: 100%;
   height: auto;
   vertical-align: bottom;
   -moz-box-shadow:4px 4px 12px 4px rgba(20%,20%,40%,0.5);
-webkit-box-shadow:4px 4px 12px 4px rgba(20%,20%,40%,0.5);
box-shadow:4px 4px 12px 4px rgba(20%,20%,40%,0.5);
   -webkit-transition: opacity 0.2s ease-in;
   -moz-transition: opacity 0.2s ease-in;
   transition: opacity 0.2s ease-in;
}
.box:hover img{
    opacity: 1;
    -webkit-transition: opacity 0.3s ease-in;
    -moz-transition: opacity 0.3s ease-in;
    transition: opacity 0.3s ease-in;
}

.free {
	max-width: 50%;
	float: left;
	clear: both;
}
.lfont {
	font-size:28px;
}
.second_tab {/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#00a9ba+0,5ed1b5+100 */
	background: #00a9ba url(../images/main_titlebg.png); /* Old browsers */
	background: -moz-linear-gradient(left, #00a9ba 0%, #5ed1b5 100%) url(../images/main_titlebg.png); /* FF3.6-15 */
	background: -webkit-linear-gradient(left, #00a9ba 0%, #5ed1b5 100%) url(../images/main_titlebg.png); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to right, #00a9ba 0%, #5ed1b5 100%) url(../images/main_titlebg.png); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00a9ba', endColorstr='#5ed1b5', GradientType=1 ); /* IE6-9 */
}
.program_content {
	margin: 2% 5% 5% 5%;
	border: 1px solid #d0d0d0;
	position: relative;
	overflow:hidden;
}
.change {/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#00a9ba+0,5ed1b5+100 */
	background: #00a9ba url(../images/main_titlebg4.png); /* Old browsers */
	background: -moz-linear-gradient(left, #00a9ba 0%, #5ed1b5 100%) url(../images/main_titlebg4.png); /* FF3.6-15 */
	background: -webkit-linear-gradient(left, #00a9ba 0%, #5ed1b5 100%) url(../images/main_titlebg4.png); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to right, #00a9ba 0%, #5ed1b5 100%) url(../images/main_titlebg4.png); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00a9ba', endColorstr='#5ed1b5', GradientType=1 ); /* IE6-9 */
}
.program_content {
	margin: 2% 5% 5% 5%;
	border: 1px solid #d0d0d0;
	position: relative;
	overflow:hidden;
	background-position: 0 -50px;
}
.shot, .clock {
	position: absolute;
	z-index: 10;
}
.go {
	animation: hh1 infinite 3s linear;
	-webkit-animation: hh1 infinite 3s linear;
	-moz--animation: hh1 infinite 3s linear;
}
 @keyframes hh1 {
 100% {
 transform:rotate(360deg)
}
}
 @-webkit-keyframes hh1 {
 100% {
 transform:rotate(360deg)
}
}
.gear {
	position:relative;
	z-index:100;
}
.second_img {
	background:#fff;
}
.img_top {
	margin:5px auto;
}
.main_container, .main_click, .main_click2 {
	width:90%;
	position:relative;
	max-width: 1000px;
	margin: 0 auto;
	padding: 0 15px 50px 0px;
}
#add .main_container {padding: 0 15px 0px 0px;}
.main_click3 {width:100%;max-width: 1200px;margin: 20px auto;
    overflow: hidden;}
.main_click2 {padding: 0 15px 0 0;}
.awards, .star {
	position:absolute;
	z-index:100;
}
.star {
	z-index: 101;
	margin: 0 auto;
	left: 0;
	right: 0;
 filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
	opacity:0;
	-moz-transform:translateY(10%);
	-ms-transform:translateY(10%);
	-webkit-transform:translateY(10%);
	transform:translateY(10%);
	-moz-animation:step1 1.2s linear infinite alternate;
	-webkit-animation:step1 1.2s linear infinite alternate;
	animation:step1 1.2s linear infinite alternate
}
.notice_word {
	color:#3d3d3d;
	margin:10px 0;
}
.lineblack:before {
	content: '';
	display: block;
	border-bottom: 1px solid #808080;
	padding-bottom: 15px;
	margin-bottom: 15px;
}
.lineblack2:before {
	content: '';
	display: block;
	border-bottom: 1px solid #b9b9b9;
	padding-bottom: 15px;
	margin-bottom: 15px;
}
.org:after {
	content: '';
	display: block;
	border-bottom: 2px solid #ff8200;
	padding-bottom: 15px;
	margin-bottom: 0px;
}
.left.active, .right.active {
	-webkit-animation: ld-bounce 1s infinite;
    animation: ld-bounce 1s infinite;
}
.btn2, .btn1 {
	text-align:center;
	margin:2% auto;
}
.img01 {
	background:url(../images/close.png) no-repeat center;
	background-size:contain;
	height:70px;
}
.img02 {
	background:url(../images/close2.png)no-repeat center;
	background-size:contain;
	height:70px;
}
.o-style {
	position: absolute;
	width: 16%;
	left: 4%;
	right: 0;
	top: 35%;
	bottom: 0;
	z-index: 100;
}
.accordionPart {
	margin: 3% auto 0;
}
.whitebg {
	background:#fff;
}
.notice {
	padding-bottom: 200px;
}
.right_now {
	right: 0;
	top: 20vh;
	z-index: 1000;
	position: fixed;
	font-size: 2vw;
	-webkit-overflow-scrolling: touch;
	cursor: pointer;
}
.right_now a {
	color: #FFF;
	margin: 5px;
	display: block;
	text-align: center;
	position: relative;
}
.right_now a span {
	display: block;
	font-weight: bolder;
	white-space: pre;
}
.media {
	max-width:600px;
}
.main_awards {
	max-width:1000px;
	margin: 0 auto;
}
.show {
	display:block!important;
}
.hid {
	display:none!important;
}
.main_btn {
	max-width: 800px;
	margin: 5% auto 0;
}
.main_btn a {
	display: inline-block;
	width:46%;
	width: calc(50% - 10px);
}
.main_btn a img {
	width: 100%;
	margin: auto;
}
.robot20 {
	float:right;
}
.right_now img {
	width: 10vw;
	height:auto;
}
.mobile {
	display:none;
}
.pc {
	display:block;
}
.vs_main, .man_say {
	position: relative;
	overflow: auto;
	zoom: 1;
	overflow-y: hidden;
}
.shake {
	animation-name: thumb;
	animation-duration: 500ms;
	transform-origin:right bottom;
	animation-iteration-count: 2;
	animation-timing-function: linear;
}
 @keyframes thumb {
 0% {
 transform: rotate(0deg);
}
 50% {
 transform: rotate(-6deg);
}
 100% {
 transform: rotate(0deg);
}
}
.shake2 {
	animation-name: thumb2;
	animation-duration: 800ms;
	transform-origin:left bottom;
	animation-iteration-count: 2;
	animation-timing-function: linear;
}
 @keyframes thumb2 {
 0% {
 transform: rotate(0deg);
}
 50% {
 transform: rotate(-6deg);
}
 100% {
 transform: rotate(0deg);
}
}
.vs_main img {
	width:50%;
	width: calc(100% / 2);
	float:left
}
.vs_main:before {
	position: absolute;
	left: 0;
	bottom: 0;
	top: 0;
	right: 0;
	margin:auto;
	content: "";
	z-index: 100;
	display: block;
	background: url(../images/robotVS.png) no-repeat center;
	background-size: contain;
}
.man_say:before {
	position: absolute;
	left: 0;
	bottom: 0;
	top: 0;
	right: 0;
	margin:auto;
	content: "";
	z-index: -1;
	display: block;
	background: url(../images/man.png) no-repeat center;
	background-size: contain;
}
.three_title {
	max-width: 700px;
	margin:5% auto;
}
#threes {
}
.blue {/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffbb28+0,ffe228+100 */
	background: #ffbb28 url(../images/main_titlebg2.png); /* Old browsers */
	background: -moz-linear-gradient(left, #ffbb28 0%, #ffe228 100%) url(../images/main_titlebg2.png); /* FF3.6-15 */
	background: -webkit-linear-gradient(left, #ffbb28 0%, #ffe228 100%) url(../images/main_titlebg2.png); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to right, #ffbb28 0%, #ffe228 100%) url(../images/main_titlebg2.png); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffbb28', endColorstr='#ffe228', GradientType=1 ); /* IE6-9 */
}
.top_title {/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffbb28+0,ffe228+100 */
	background: #ffbb28 url(../images/main_titlebg3.png); /* Old browsers */
	background: -moz-linear-gradient(left, #ffbb28 0%, #ffe228 100%) url(../images/main_titlebg3.png); /* FF3.6-15 */
	background: -webkit-linear-gradient(left, #ffbb28 0%, #ffe228 100%) url(../images/main_titlebg3.png); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to right, #ffbb28 0%, #ffe228 100%) url(../images/main_titlebg2.png); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffbb28', endColorstr='#ffe228', GradientType=1 ); /* IE6-9 */
}
.top_title span {
	background: #fff;
	padding: 10px 20px;
	font-size: 40px;
	color: #ffbd28;
	font-weight: bolder;
	margin: 2% 0;
	display: block;
	max-width: 50%;
	float: left;
}
.top_title p {
	width: 47%;
	font-size: 30px;
	color: #fff;
	float: left;
	margin: 20px 0 0 10px;
	text-align: justify;
	text-justify: inter-ideograph;
}
.h1 {
	font-size: 22px;
	font-weight: 700;
}
.words p, .words ul {
	margin-left:40px;
	font-size: 22px;
	color:#626262;
	font-weight: 500;
	line-height: normal;
	text-align: justify;
	text-justify: inter-ideograph;
}
.h1 {
	font-size: 22px;
	font-weight: 700;
}
.words2 p {
	margin-left: 20px;
	font-size: 20px;
	color: #626262;
	font-weight: 500;
	line-height: normal;
	max-width: 940px;
}
.bit {
	background: url(../images/bit.jpg) repeat;
}
.words ul {
	margin:2% 0;
	font-size: 20px;
}
.words p:before, .words ul:before, .words li:before {
	content: attr(data-th);
	position: absolute;
	margin-left: -40px;
}
.words2 p:before, .words2 ul:before, .words2 li:before {
	content: attr(data-th);
	position: absolute;
	margin-left: -20px;
}
.words3 {
	margin: 0 0 0 50px;
	font-weight:700;
}
.words3 *:before {
	content: attr(data-th);
	position: absolute;
	margin-left: -90px;
	color: #ff8200;
}
.plan {
	width:80%;
	width:calc(100% - 350px);
	float:left;
}
.plan li {
	line-height:2;
}
.plan_img {
	float:left;
	margin-top: -30px;
}
.fly, .flya, .fly2 {
	max-width:289px;
	padding:0 30px;
}
.fly2 {
	position:relative;
}
.flya, .fly2a, .fly2 {
	position:absolute;
	top:0;
	z-index:110;
	left: 0;
	right: 0;
}
.fly2a {
	z-index:100
}
#main_product2 {
	background: #fff;
	padding: 20px;
}
.products2-1 {
	width: 35.5%;
	width: calc(100% / 2 - 15%);
	float: left;
	border: 1px solid #d0d0d0;
	height: 100000px;
	max-height: 650px;
}
.products2-2 {
	width: 60%;
	width: calc(100% / 2 + 11%);
	float: left;
	border: 1px solid #d0d0d0;
	height: 100000px;
	max-height: 650px;
}
.products {
	width: 48.5%;
	width: calc(100% / 2 - 20px);
	float: left;
	background: #fff;
	font-size: 130%;
	min-height: 430px;
	border: 1px solid #dfdfdf;
	position: relative;
}
.space {
	margin-left: 30px;
}
.title {
	text-align: center;
	background: #ff8200;
	color: #fff;
	padding: 2% 0;
}
.title2 {
	font-size: 28px;
	text-align: center;
	color: #fff;
	padding: 10px 0;/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#00a9ba+0,5ed1b5+100 */
	background: #00a9ba; /* Old browsers */
	background: -moz-linear-gradient(left, #00a9ba 0%, #5ed1b5 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(left, #00a9ba 0%, #5ed1b5 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to right, #00a9ba 0%, #5ed1b5 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00a9ba', endColorstr='#5ed1b5', GradientType=1 ); /* IE6-9 */
}
.moneywords {
	list-style: disc;
	font-size: 20px;
	font-weight: 600;
}
.products_content {
	max-width: 80%;
	margin: 5% auto;
	line-height: 1.6;
	font-size: 90%;
	text-align: justify;
	text-justify: inter-ideograph;
}
#fives {
	background: #ffefba;
	padding: 0;
}
#noContent {
	padding-bottom:100px;
}
.text-small {
	font-size:1vmax!important;
}
.activity_img img {
	position:relative;
	width:45%;
	width: calc(100% / 2 - 50px);
	float: left;
	margin: 20px;
}
.activity_line {
	position:relative;
}
.activity_line:before {
	position: absolute;
	left: -3%;
	bottom: 0;
	top: 0;
	right: 0;
	margin: auto;
	content: "";
	z-index: 100;
	display: block;
	background: url(../images/activity_line.png) no-repeat center -50px;
	background-size: contain;
	height: 70%;
	height: 88vmin;
	max-height: 100%;
	max-height: 100vmax;
}
/*-----------------------------------------*/

#notice_title1, #notice_title2 {
  cursor: pointer;
  font-size: 23px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}
h5 p {
    flex-grow: 9;font-weight: normal;
}
.hid_1, .hid_2, .uupp, .UPPP span {
  display: none
}

.UPPP .uupp {
  display: block
}
h5 p, h5 span {
    display: block;
    margin: 0;
    border: 1px solid #000;
    padding: 10px;
}
h5 span {
    flex-basis: 50px;
}
#add3 { min-height:770px;}
#six p {
    font-size: 90%;
    font-weight: 400;
}
.ih-theme-font-main-blue {
    color: #00a9ba;font-weight: normal;font-size: 90%;
}

/*----------頁籤-----------*/



.ecNetUlTabs {
	position: relative;
	float: left;
	margin: 0;
	padding: 0;
	width: 100%;
}
.ecNetUlTabs li span {
	position:relative;
	display:block;
}
.lasticon {
	position: absolute;
	left: 0;
	right: 0;
	margin: 0 auto;
}
.ecNetUlTabs>li {
	float:left;
	list-style:none;
	padding:0;
	margin:0;
	width: 33%;
}
.ecNetUlTabs>li>a {
	padding:0 10px;
	display:block;
	line-height:52px;
	vertical-align:middle;
	text-align:center;
	text-decoration:none;
	font-size: 115%;
	letter-spacing: 0.12em;
}
.ecNetUlTabs>li:last-child>a {
}
.ecNetUlTabs a img {
	max-width:250px;
}
.newsWrap .ecNetUlTabs a.ecNetUlTab {
	color:#000;
}
.newsWrap .ecNetUlTabs>li:last-child>a.ecNetUlTab {
	border-right: 0px;
}
.newsWrap .ecNetUlTabs a.ecNetUlTabSelected {
	color: #fff;
}
.ecNetUlTabs a.ecNetUlTabSelected:visited {
	color:#fff;
}
.ecNetUlTabs a.tab:hover {
	color:#333;
}
.ecNetUlTabs a:active {
	color:#705938;
}
/*----------頁籤內容-----------*/







.planbox {
	display: block;
	text-align: center;
	list-style: none;
	padding: 0;
	left:0;
	right:0;
	margin: 43px auto 80px auto;
	width: 100%;
	font-weight: 700;
}
.planbox.a2 {
	max-width: 750px;
}
.planbox.a3 {
	max-width:350px;
	margin: 43px 0 80px auto;
}
.planbox p {
	max-width:100%;
	margin:auto;
}


.circles,.circles2,.circles3,.circles4,.circles5,.circles6,.circles7,.circles8,.circles9,.circles10,.circles11 {
  position: absolute;
  pointer-events: none;
  width: 35vmin;
  height: 35vmin;
  right: -10%;
  top: -20%;
  background-color: #c2c6ca;
    border-radius: 50%;
    -webkit-animation: moveDown 10s linear infinite;
    animation: moveDown 10s linear infinite;
}
.circles2 {
  width: 15vmin;
  height: 15vmin;
  left: 5%;
  top: 30%;
  -webkit-animation-delay: .8s!important;
   animation-delay: .8s!important;
  z-index: 1;
 border-radius: 50%;
 background: #00aebc;
}
.circles3 {
    width: 10vmin;
    height: 10vmin;
    left: 2%;
    top: 20%;
  -webkit-animation-delay: 3s!important;
  animation-delay: 3s!important;
  border-radius: 50%;
  background: #f6d93c;
}
.circles4 {
 width: 3vmin;
  height: 3vmin;
  left: 10%;
  top: 12%;
  -webkit-animation-delay: 1s!important;
  animation-delay: 1s!important;
  border-radius: 50%;
  background: #fff;
}
.circles5 {
  width: 23vmin;
  height: 23vmin;
  left: 4%;
  top: 75%;
   -webkit-animation-delay: .6s!important;
   animation-delay: .6s!important;
  border-radius: 50%;
  background: #fff;
}
.circles6 {
  width: 10vmin;
  height: 10vmin;
  left: 2%;
  top: 70%;
  -webkit-animation-delay: 2s!important;
  animation-delay: 2s!important;
  border-radius: 50%;
  background: #c2c6ca;
  z-index: 1;
}
.circles7 {
  width: 5vmin;
  height: 5vmin;
  left: 12%;
  top: 68%;
  -webkit-animation-delay: .2s!important;
   animation-delay: .2s!important;
  border-radius: 50%;
  background: #c2c6ca;
  z-index: 2;
}
.circles8 {
  width: 23vmin;
    height: 23vmin;
    right: 10%;
	top: 69%;
   -webkit-animation-delay: .6s!important;
   animation-delay: .6s!important;
  border-radius: 50%;
  background: #fff;
  z-index: 1;
}
.circles9 {
  width: 13vmin;
    height: 13vmin;
    right: 6%;
	top: 60%;
   -webkit-animation-delay: .2s!important;
   animation-delay: .2s!important;
  border-radius: 50%;
  background: #f6d93c;
  z-index: 0;
}
.circles10 {
  width: 13vmin;
    height: 13vmin;
    right: 8%;
	top: 80%;
   -webkit-animation-delay: .5s!important;
   animation-delay: .5s!important;
  border-radius: 50%;
  background: #00aebc;
  z-index: 2;
}
.circles11 {
  width: 3vmin;
  height: 3vmin;
  left: 85%;
   -webkit-animation-delay: .5s!important;
   animation-delay: .5s!important;
  border-radius: 50%;
  top:30%;
  background: #c2c6ca;
}
@keyframes rotate2 {
  50% {
    transform: rotate(360deg) scale(1.1, 0.8);
  }
  100% {
    transform: rotate(0deg) scale(1, 1);
  }
}

@keyframes rotate {
  100% {
    transform: rotate(360deg) scale(1, 1);
  }
}

@keyframes moveDown {
  0% {
     transform: rotate(0deg) scale(1.0);
	 opacity: 0.8;
            }
  70% {
     transform: rotate(360deg) scale(1.3);
     opacity: 1;
            }
  100% {
	 transform: rotate(0deg) scale(1.0);
     opacity: 0.8;
            }
  
}	

.center_main {
	background: #f3f3f3;
	padding: 2% 0;
	text-align: center;
	font-weight: 700;
	font-size: 20px;
}
.center_btn {
	background: #7c7c7c;
	color: #fff;
	font-size: small;
	padding: 5px 10px;
	vertical-align: middle;
}
.xfont {
	font-size: 22px;
}
.cssload-clock {
	position: absolute;
	background-size:contain;
	top: 80px;
	left: 31%;
	border-radius: 60px;
	border: 7px solid #000;
	height: 95px;
	width: 95px;
	z-index: 0;
}
.cssload-clock:after {
	content: "";
	position: absolute;
	background-color: #000;
	top:2px;
	left: 48%;
	height: 38px;
	width: 4px;
	border-radius: 5px;
	transform-origin: 50% 97%;
	-o-transform-origin: 50% 97%;
	-ms-transform-origin: 50% 97%;
	-webkit-transform-origin: 50% 97%;
	-moz-transform-origin: 50% 97%;
	animation: grdAiguille 2s linear infinite;
	-o-animation: grdAiguille 2s linear infinite;
	-ms-animation: grdAiguille 2s linear infinite;
	-webkit-animation: grdAiguille 2s linear infinite;
	-moz-animation: grdAiguille 2s linear infinite;
}
.coan {
	position: relative;
	z-index: 101;
	-webkit-transform: scale(1.3);
	transform: scale(1.3);
	overflow: hidden;
}
.cssload-clock:before {
	content: "";
	position: absolute;
	background-color: #000;
	top:6px;
	left: 48%;
	height: 35px;
	width: 4px;
	border-radius: 5px;
	transform-origin: 50% 94%;
	-o-transform-origin: 50% 94%;
	-ms-transform-origin: 50% 94%;
	-webkit-transform-origin: 50% 94%;
	-moz-transform-origin: 50% 94%;
	animation: ptAiguille 12s linear infinite;
	-o-animation: ptAiguille 12s linear infinite;
	-ms-animation: ptAiguille 12s linear infinite;
	-webkit-animation: ptAiguille 12s linear infinite;
	-moz-animation: ptAiguille 12s linear infinite;
}
#cssload-pgloading:after {
	content: "";
	z-index: -1;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
}
.cssload-loadingwrap {
	position:absolute;
	top:45%;
	bottom:45%;
	left:25%;
	right:25%;
}
.cssload-bokeh {
	position: absolute;
	font-size: 100px;
	width: 10vmin;
	height: 10vmin;
	top: 35%;
	left: 40%;
	margin: 0 auto;
	list-style: none;
	padding:0;
	border-radius: 50%;
	-o-border-radius: 50%;
	-ms-border-radius: 50%;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
}
.cssload-bokeh li {
	position: absolute;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	-o-border-radius: 50%;
	-ms-border-radius: 50%;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
}
.cssload-bokeh li:nth-child(1) {
	left: 50%;
	top: 0;
	width: 50px;
	height: 50px;
	margin: 0 0 0 -.1em;
	background: url(../images/circle.png) no-repeat;
	background-size:contain;
	transform-origin: 20% 10%;
	-o-transform-origin: 20% 10%;
	-ms-transform-origin: 20% 10%;
	-webkit-transform-origin: 20% 10%;
	-moz-transform-origin: 20% 10%;
	animation: 
 cssload-rota 1.13s linear infinite, cssload-opa 3.67s ease-in-out infinite alternate;
	-o-animation: 
 cssload-rota 1.13s linear infinite, cssload-opa 3.67s ease-in-out infinite alternate;
	-ms-animation: 
 cssload-rota 1.13s linear infinite, cssload-opa 3.67s ease-in-out infinite alternate;
	-webkit-animation: 
 cssload-rota 1.13s linear infinite, cssload-opa 3.67s ease-in-out infinite alternate;
	-moz-animation: 
 cssload-rota 1.13s linear infinite, cssload-opa 3.67s ease-in-out infinite alternate;
}
.cssload-bokeh li:nth-child(2) {
	top: 50%;
	right: 0;
	margin: -.1em 0 0 0;
	background: url(../images/circle.png) no-repeat;
	background-size:contain;
	transform-origin: -100% 50%;
	-o-transform-origin: -100% 50%;
	-ms-transform-origin: -100% 50%;
	-webkit-transform-origin: -100% 50%;
	-moz-transform-origin: -100% 50%;
	animation: 
 cssload-rota 1.86s linear infinite, cssload-opa 4.29s ease-in-out infinite alternate;
	-o-animation: 
 cssload-rota 1.86s linear infinite, cssload-opa 4.29s ease-in-out infinite alternate;
	-ms-animation: 
 cssload-rota 1.86s linear infinite, cssload-opa 4.29s ease-in-out infinite alternate;
	-webkit-animation: 
 cssload-rota 1.86s linear infinite, cssload-opa 4.29s ease-in-out infinite alternate;
	-moz-animation: 
 cssload-rota 1.86s linear infinite, cssload-opa 4.29s ease-in-out infinite alternate;
}
 @media screen and (max-width: 1300px) {
.drawer-menu-item, .drawer-menu-item:hover {
	color: #3D3935;
	font-size: 22px;
	line-height: 22px;
	text-decoration: none;
	padding: 20px 0px 20px 0px;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-o-box-sizing: border-box;
	border-top: none;
	white-space: nowrap;
	text-align: center;
	border-bottom: 1px solid #ececec;
	letter-spacing: 15px;
}
.logo_right_nav {
	display:none;
}
}
 @media screen and (max-width: 1200px) {
h1 {
	font-size: calc(3.5vw);
	color: #ffffff;
	display: block;
	font-weight: bolder;
	padding-top: 5%;
	margin-bottom: 2vh;
}
.circles2 {
  width: 10vmin;
  height: 10vmin;
  left: 5%;
  top: 30%;
}
.circles3 {
    width: 5vmin;
    height: 5vmin;
    left: 2%;
    top: 20%;
}
.circles4 {
 width: 1vmin;
  height: 1vmin;
  left: 10%;
  top: 12%;
}
.circles5 {
  width: 18vmin;
  height: 18vmin;
  left: 4%;
  top: 75%;
}
.circles6 {
  width: 5vmin;
  height: 5vmin;
  left: 2%;
  top: 70%;

}
.circles7 {
  width: 1vmin;
  height: 1vmin;
  left: 12%;
  top: 68%;
}
.circles8 {
  width: 18vmin;
    height: 18vmin;
    right: 10%;
	top: 69%;
}
.circles9 {
  width: 8vmin;
    height: 8vmin;
    right: 6%;
	top: 60%;
}
.circles10 {
  width: 8vmin;
    height: 8vmin;
    right: 8%;
	top: 80%;
}
.circles11 {
  width: 1vmin;
  height: 1vmin;
  left: 85%;
}
}
 @media screen and (max-width: 1024px) {
h1 {
	font-size: calc(3.2vw);
	color: #ffffff;
	display: block;
	font-weight: bolder;
	padding-top: 5%;
	margin-bottom: 2vh;
}
.title {
	max-width: 100%;
	margin: 0 auto;
	padding: 0;
	line-height: 5vh;
}
.say {
	max-width: 200px;
}
.text-nowrap, .table th {
	white-space: normal;
}
.mobile {
	display:inline-block!important;
	font-size: 10vw;
}
.mobile2 {
	display:inline-table!important;
	margin: 5% 0;
}
.pc {
	display:none
}
.right_now {
	top: inherit;
	bottom: 0;
	width: 100%;
}
.right_now a {
	margin:0;
}
.right_now img {
	width:50%;
	width: calc(100% / 3);
	float: left;
	height: auto;
}
.rwd-table td:before {
	color: #ff8200;
}
.rwd-table th {
	display: none!important;
}
.rwd-table th, .rwd-table td {
	text-align: center;
	display: block;
}
.rwd-table td:before {
	content: attr(data-th);
	font-weight: bold;
	padding-right: 10px;
	padding: 10px;
	margin-bottom: 10px;
	display: block;
}
.rwd-table td:first-child:before {
	background: #ff8200;
	color: #fff;
}
.table>tbody>tr>td>span {
	padding: 0 5px;
}
.table>tbody>tr>td>font {
	display:block;
}
footer {
	position: relative;
}
}
 @media screen and (max-width: 960px) {
.program_main,.free_content {
    display: block;
}
.step1, .step2 {
	width: auto;
	float: none;
	display: block;
	text-align: center;
}
.free_words {    margin: 20px 0!important;
    display: block;
}
.free_box {
     font-size: 10vmin;
    line-height: 1.2;
    display: block;
    padding-top: 10px;
}
.top_tiltle {
    font-size: 10vmin;
}
.free_box font, .free_content font {font-size: 5.7vmin; display: block;}
	 .top_tiltle2,.title_last {font-size: 4.7vmin;}
	 .robot2 {    margin: 80px 0 10px;}
	 .title_last ul {
    max-width: inherit;
    margin-left: 22%;
}
.step1_move, .step2_move {
	max-width:none;
}
.step2 img {
	padding: 10px 0;
}
.main_container {
	padding: 0;
}
.txt_link {
}
.program2 {
	margin:auto;
}
.program1, .program2, .program3 {
	width: 80%;
	width: calc(80%);
	float: none;
	background: #ffffff;
	margin: 10px auto;
	padding-bottom:10px;
}
.products2-1, .products2-2 {
	width: 100%;
	float: none;
	background: #ffffff;
	margin: 0;
	padding-bottom:10px;
	height: auto;
	max-height: inherit;
}
.plan {
	width: 90%;
	float: none;
}
.plan_img {
	float: none;
	margin-top: 0px;
}
.free {
	max-width: 100%;
	float: left;
	clear: both;
}
.img_top {
	margin:20px auto;
}
.left_notice {
	padding-bottom: 10px;
}
.drawer-brand img {
	margin-left:0px;
}
footer {
}
#six {
	padding-bottom: 100px;
}
}
 @media screen and (max-width: 768px) {
.people1, .people2, .people3, .people4 {
	width: 24.5%;
	width: calc(100% / 2 - 2px);
	float: left;
}
.cssload-clock {
	top: 120px;
	left: 25%;
	border-radius: 500px;
	border: 7px solid #000;
	height: 300px;
	width: 300px;
}
.tab_style, .tab_style2 {
	padding-top:0;
}
h1, h2, h5 {
	font-size: 40px;
}
.main_click {
	width: 100%;
	padding: 0;
}
.main_click li {
	width: 90%;
	display: block!important;
	margin: 5px auto;
}
.left {
	padding-right: 0px;
}
.right {
	padding-left: 0px;
}
.products {
	width: 100%;
	min-height: 230px;
	float:none;
}
.space {
	margin-left: 0px;
	margin-top:20px;
}
.top_title span {
	max-width: 80%;
	font-size: 20px;
}
.top_title p {
	width: 100%;
	font-size: 20px;
	color: #fff;
	padding-bottom:20px;
}
.second_tab {
	padding-top: 20px;
}
.cssload-clock:before {
	top: 7%;
	left: 48%;
	height: 120px;
	width: 10px;
	border-radius: 5px;
}
.cssload-clock:after {
	top: 5px;
	left: 48%;
	height: 130px;
	width: 6px;
	border-radius: 5px;
}
.people2 {
	margin: 0 0 0 2px;
}
.people3 {
	margin: 0 2px 0 0;
}
.left_man, .main_content span {
	width: 100%;
	float: none;
}
.mobile {
	font-size: 5vw;
}
.bonus, .graybg {
	background:#fff;
}
.icon08 span, .icon09 span {
	max-width: 60%;
	display: inline-block;
	text-align: center;
	vertical-align: baseline;
	text-align: left;
}
#six {
	padding-bottom: 0px;
}
}
@media screen and (max-width: 767px) {
#add3 { min-height:inherit;}	
.ecNetUlTabs>li {
    float: none;
    width: 100%;
	display:flex;
}
#add .main_container {
    padding: 0;
}
.planbox p { text-align: left!important;
}
}
 @media screen and (max-width: 600px) {
.garybg,.free_content,.program_main {
    display: block;
}
.free_box font,.free_content font {    font-size: 5.38vmin;
    display: block;
    padding: 10px;}
.free_box {
    font-size: 25px;
    line-height: 2;
}
.robot .free_box {font-size: 35px;}
.robot .free_box font {font-size: 8vmin;}
.free_words { font-size: 15px;
    line-height: 1.5;
    margin: 10px 0 0px!important;
    display: block;}
.right_content {
    width: 80%;
    margin: auto;
	padding-top: 10px;
}
.left_content {
    width: 50%;
    margin: auto;
    position: relative;
}
.right_content h7.tab_style:before, .right_content h7.tab_style:after {
    width: 10%;
}
.right_content h7.tab_style {
    white-space:inherit ;
}
.circles, .circles2, .circles3, .circles4, .circles5, .circles6, .circles7, .circles8, .circles9, .circles10, .circles11 { display:none;}
.banner p { font-size:120%; }
.banner {background: #ff8200 url(../images/banner_bg.png) no-repeat 180% 10%;}
h2 {
 font-size: calc(20px + .5vw);
}
.left_news,.right_girl { width:100%; float:none; padding: 20px;}
.search {
    width: 30px;
    height: 30px;
    /* transform: rotate(0);
    animation-name: in; */
}
.big_img {
	position: relative;}
.orgbg {
    font-size: 20px;
}
.tab_style, .tab_style2 {
    font-size: 20px;
	margin-top:10px;
}
.text-small2 ,.right_girl{ padding-bottom:0;}
.text-small2 { margin-top:0;    padding-top: 0;}
.top_title span {
	max-width: 100%;
}
h1, h2, h5 {
    font-size: 25px;
}
.main_click2 {
    padding: 0;
}
h1.dash:after,h1.dash2:after {
    margin-top: -18px;

}
#add2 { padding-bottom:20px;}
.box-container {
    display: inline-block;
    margin-top: 1em;
    width: 100%;
    margin-left: 0%;
    margin-bottom: 1em;
}
.slick-prev {
    left: 15px;
}
.slick-next {
    right: 15px;
}
.four-cols .box {width: 26%;}
.box {
   list-style-type: none;
   float: left;
   margin-bottom: 0;
   margin-left: 0;
   margin-right: 0;
}
.cssload-clock {
	top: 80px;
	left: 31%;
	border-radius: 60px;
	border: 7px solid #000;
	height: 28vmin;
	width: 28vmin;
}
.robot2 {
    margin: 10px 0 10px;
}
.cssload-clock:before {
	top: 4vmin;
	left: 48%;
	height: 8vmin;
	width: 1vmin;
	border-radius: 5px;
}
.cssload-clock:after {
	background-color: #000;
	top: 3vmin;
	left: 48%;
	height: 9vmin;
	width: 1vmin;
	border-radius: 5px;
}
.accordionPart {
	padding-left: 10px;
}
.ecNetUlTabs {
	min-height: inherit;
	max-height: 400px;
}
.star {
	max-width: 50px;
}
.main_content {
	margin-top: 0px;
}
.main_boy img {
	max-width: 50%;
}
.planbox {
	margin: 10px 0;
}
#six {
	margin-bottom: 50px;
}
.icon08 img, .icon09 img, .icon10 img {
	height:auto;
}
.activity_line:before {
	background: none;
}
.words p, .words ul {
	font-size: 15px;
}
.words2 p {
	font-size: 20px;
}
.text-nowrap, .table th {
	white-space: inherit!important;
	line-height: normal!important;
	font-size:16px;
}
.table>tbody>tr>td {
	padding: 10px 20px;
	line-height: 1.42857143;
	border: 1px solid #959595;
	vertical-align: middle;
	font-size:16px;
}
.planbox br {
	display:none;
}
.activity_img img {
	position: relative;
	width:100%;
	width: calc(100%);
	float: none;
	margin: 5% auto;
}
 @keyframes Move {
 0% {
 bottom: 0px;
}
 50% {
 bottom: 20px;
}
 100% {
 bottom: 0px;
}
}
 @-webkit-keyframes Move {
 0% {
 bottom: 0px;
}
 50% {
 bottom: 20px;
}
 100% {
 bottom: 0px;
}
}
 @keyframes Move2 {
 0% {
 top: 0px;
}
 50% {
 top: 10px;
}
 100% {
 top: 0px;
}
}
 @-webkit-keyframes Move2 {
 0% {
 top: 0px;
}
 50% {
 top: 10px;
}
 100% {
 top: 0px;
}
}
}
 @media screen and (max-width: 350px) {
.main_container {
	padding: 0 10px;
}
}
 @keyframes grdAiguille {
 0% {
 transform:rotate(0deg);
}
 100% {
 transform:rotate(360deg);
}
}
 @-o-keyframes grdAiguille {
 0% {
 -o-transform:rotate(0deg);
}
 100% {
 -o-transform:rotate(360deg);
}
}
 @-ms-keyframes grdAiguille {
 0% {
 -ms-transform:rotate(0deg);
}
 100% {
 -ms-transform:rotate(360deg);
}
}
 @-webkit-keyframes grdAiguille {
 0% {
 -webkit-transform:rotate(0deg);
}
 100% {
 -webkit-transform:rotate(360deg);
}
}
 @-moz-keyframes grdAiguille {
 0% {
 -moz-transform:rotate(0deg);
}
 100% {
 -moz-transform:rotate(360deg);
}
}
 @keyframes ptAiguille {
 0% {
 transform:rotate(0deg);
}
 100% {
 transform:rotate(360deg);
}
}
 @-o-keyframes ptAiguille {
 0% {
 -o-transform:rotate(0deg);
}
 100% {
 -o-transform:rotate(360deg);
}
}
 @-ms-keyframes ptAiguille {
 0% {
 -ms-transform:rotate(0deg);
}
 100% {
 -ms-transform:rotate(360deg);
}
}
 @-webkit-keyframes ptAiguille {
 0% {
 -webkit-transform:rotate(0deg);
}
 100% {
 -webkit-transform:rotate(360deg);
}
}
 @-moz-keyframes ptAiguille {
 0% {
 -moz-transform:rotate(0deg);
}
 100% {
 -moz-transform:rotate(360deg);
}
}
 @keyframes cssload-rota {
 from {
}
to {
	transform: rotate(360deg);
}
}
 @-o-keyframes cssload-rota {
 from {
}
to {
	-o-transform: rotate(360deg);
}
}
 @-ms-keyframes cssload-rota {
 from {
}
to {
	-ms-transform: rotate(360deg);
}
}
 @-webkit-keyframes cssload-rota {
 from {
}
to {
	-webkit-transform: rotate(360deg);
}
}
 @-moz-keyframes cssload-rota {
 from {
}
to {
	-moz-transform: rotate(360deg);
}
}
 @keyframes cssload-opa {
 0% {
}
 12.0% {
 opacity: 0.80;
}
 19.5% {
 opacity: 0.88;
}
 37.2% {
 opacity: 0.64;
}
 40.5% {
 opacity: 0.52;
}
 52.7% {
 opacity: 0.69;
}
 60.2% {
 opacity: 0.60;
}
 66.6% {
 opacity: 0.52;
}
 70.0% {
 opacity: 0.63;
}
 79.9% {
 opacity: 0.60;
}
 84.2% {
 opacity: 0.75;
}
 91.0% {
 opacity: 0.87;
}
}
 @-o-keyframes cssload-opa {
 0% {
}
 12.0% {
 opacity: 0.80;
}
 19.5% {
 opacity: 0.88;
}
 37.2% {
 opacity: 0.64;
}
 40.5% {
 opacity: 0.52;
}
 52.7% {
 opacity: 0.69;
}
 60.2% {
 opacity: 0.60;
}
 66.6% {
 opacity: 0.52;
}
 70.0% {
 opacity: 0.63;
}
 79.9% {
 opacity: 0.60;
}
 84.2% {
 opacity: 0.75;
}
 91.0% {
 opacity: 0.87;
}
}
 @-ms-keyframes cssload-opa {
 0% {
}
 12.0% {
 opacity: 0.80;
}
 19.5% {
 opacity: 0.88;
}
 37.2% {
 opacity: 0.64;
}
 40.5% {
 opacity: 0.52;
}
 52.7% {
 opacity: 0.69;
}
 60.2% {
 opacity: 0.60;
}
 66.6% {
 opacity: 0.52;
}
 70.0% {
 opacity: 0.63;
}
 79.9% {
 opacity: 0.60;
}
 84.2% {
 opacity: 0.75;
}
 91.0% {
 opacity: 0.87;
}
}
 @-webkit-keyframes cssload-opa {
 0% {
}
 12.0% {
 opacity: 0.80;
}
 19.5% {
 opacity: 0.88;
}
 37.2% {
 opacity: 0.64;
}
 40.5% {
 opacity: 0.52;
}
 52.7% {
 opacity: 0.69;
}
 60.2% {
 opacity: 0.60;
}
 66.6% {
 opacity: 0.52;
}
 70.0% {
 opacity: 0.63;
}
 79.9% {
 opacity: 0.60;
}
 84.2% {
 opacity: 0.75;
}
 91.0% {
 opacity: 0.87;
}
}
 @-moz-keyframes cssload-opa {
 0% {
}
 12.0% {
 opacity: 0.80;
}
 19.5% {
 opacity: 0.88;
}
 37.2% {
 opacity: 0.64;
}
 40.5% {
 opacity: 0.52;
}
 52.7% {
 opacity: 0.69;
}
 60.2% {
 opacity: 0.60;
}
 66.6% {
 opacity: 0.52;
}
 70.0% {
 opacity: 0.63;
}
 79.9% {
 opacity: 0.60;
}
 84.2% {
 opacity: 0.75;
}
 91.0% {
 opacity: 0.87;
}
}


 @media screen and (max-width: 350px) {
thead.small-thead tr th {
	font-size: 11px;}

tbody.blockfont tr td {
	font-size: 10px;}
}