@charset "utf-8";
* { margin: 0; padding: 0; } /*通用符號，選取所有元素*/
a:link, a:visited ,a:hover ,a:active {text-decoration: none; outline: none; hlbr:expression(this.onFocus=this.blur());}
*:link, *:visited, *:hover, *:active, *:focus , * {
-o-transition: color .20s linear, background-color .20s linear, border-color .20s linear;
-webkit-transition: color .20s linear, background-color .20s linear, border-color .20s linear;
-moz-transition: color .20s linear, background-color .20s linear, border-color .20s linear;
transition: color .20s linear, background-color .20s linear, border-color .20s linear;}
img, hr{ border:0;}
ul, li{ list-style:none;}

body, html{ height:100%;}
body{ width:100%; height:100%; margin:0; padding:0; -webkit-text-size-adjust: 100%; position:relative; font-family: Arial, sans-serif, Microsoft JhengHei; font-family: Microsoft JhengHei, Arial, sans-serif !important;}
.bbgg1{ background:url(../img/pg_bg.png) right -200px fixed no-repeat;}
.bbgg2{ background: #95f6fc url(../img/pg_bg.png) center -200px fixed no-repeat; -moz-background-size: contain; background-size: contain;}
.bbgg3{ background: url(../img/pg_bg2.png) right -200px fixed no-repeat;}
.bbgg4{ background: #FCFAD1 url(../img/pg_bg.png) right -200px fixed no-repeat;}
.bbgg5{ background:url(../img/bg3.png) left top fixed repeat; -moz-background-size: contain; background-size: contain;}

#Load{ width:100%; height:100%; background:#FFF; text-align:center; position:relative;}
#Load img{ position:absolute; top:50%; margin:-50px auto 0 auto;}

h4{ display:none;}
.nav_wrap section h2{ display:none;}
nav h2{ display:none;}
p{ margin:0 0 20px 0;}

/* action */
.floating2{ animation: floating2 3s infinite; -webkit-animation: floating2 3s infinite;}
@keyframes floating2 {
	0% {transform: translateX(0%);}
	50% {transform: translateX(30%);}	
	100% {transform: translateX(0%);}}

@-webkit-keyframes floating2 {
	0% {transform: translateX(0%);}
	50% {transform: translateX(15%);}	
	100% {transform: translateX(0%);}}

.line{animation: line 1.5s linear; -webkit-animation: line 1.5s linear; -moz-animation:line 1.5s linear; -o-animation: line 1.5s linear;}
@keyframes line { 
0% { width:0; opacity:0;} 100% { width:100%; opacity:1;}}
@-webkit-keyframes line {
0% { width:0; opacity:0;} 100% { width:100%; opacity:1;}}

.floating:hover{ animation: floating 1.5s infinite; -webkit-animation: floating 1.5s infinite;}
@keyframes floating {
	0% {transform: translateY(0%);}
	50% {transform: translateY(15%);}	
	100% {transform: translateY(0%);}}

@-webkit-keyframes floating {
	0% {transform: translateY(0%);}
	50% {transform: translateY(15%);}	
	100% {transform: translateY(0%);}}

.fadeIn2{ animation-name: fadeIn2 1.5s ease-in-out; -webkit-animation: fadeIn2 1.5s ease-in-out; -moz-animation:fadeIn2 1.5s ease-in-out; -o-animation: fadeIn2 1.5s ease-in-out; visibility: visible !important;}
@keyframes fadeIn2 { 0% { opacity: 0.0;} 100% {opacity: 1;}}
@-webkit-keyframes fadeIn2 {0% { opacity: 0.0;} 100% {opacity: 1;}}

.bounce{ animation: bounce 1.6s ease 2s infinite; -webkit-animation: bounce 1.6s ease 2s infinite; -moz-animation:bounce 1.6s ease 2s infinite; -o-animation:bounce 1.6s ease 2s infinite;}
@keyframes bounce {
	0% { transform: translateY(0%) scaleY(0.6);}
	60%{transform: translateY(-100%) scaleY(1.1);}
	70%{transform: translateY(0%) scaleY(0.95) scaleX(1.05);}
	80%{transform: translateY(0%) scaleY(1.05) scaleX(1);}	
	90%{transform: translateY(0%) scaleY(0.95) scaleX(1);}				
	100%{transform: translateY(0%) scaleY(1) scaleX(1);}}

@-webkit-keyframes bounce {
	0% {-webkit-transform: translateY(0%) scaleY(0.6);}
	60%{-webkit-transform: translateY(-100%) scaleY(1.1);}
	70%{-webkit-transform: translateY(0%) scaleY(0.95) scaleX(1.05);}
	80%{-webkit-transform: translateY(0%) scaleY(1.05) scaleX(1);}	
	90%{-webkit-transform: translateY(0%) scaleY(0.95) scaleX(1);}				
	100%{-webkit-transform: translateY(0%) scaleY(1) scaleX(1);}}
	
.tossing{ animation: tossing 2.5s infinite; -webkit-animation: tossing 2.5s infinite;	}

@keyframes tossing {
	0% { transform: rotate(-4deg);}
	50% { transform: rotate(4deg);}
	100% { transform: rotate(-4deg);}						
}

@-webkit-keyframes tossing {
	0% { -webkit-transform: rotate(-4deg);}
	50% { -webkit-transform: rotate(4deg);}
	100% { -webkit-transform: rotate(-4deg);}				
}

/* nav */
section{ text-align: center;}
section button { border: none; outline: none; background: #353535; -webkit-border-radius: 80px; -moz-border-radius: 80px; border-radius: 80px; text-align:center; width:85px; height:85px; font-size: 1.5em; color:#FFF; line-height:22px;}
section button img{ width:50px;}
section button:hover{ background: #77d9e0;}
.nav_wrap{ width:85px; position: fixed; top:20px; left:30px; z-index:9;}
.nav_wrap li img{ width:100%;}
.nav_wrap li a { color:#FFF;}
.logo{ width:88px; margin:0 0 5px 0;}
.sh_btn{background: #326c70; -webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 30px; text-align:center; width:30px; height:30px; font-size: 1em; color:#FFF; line-height:31px; margin:10px auto;}
.sh_btn:hover{background: #77d9e0;}
.sh_btn2{background: #326c70; -webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 30px; text-align:center; width:30px; height:30px; font-size: 1em; color:#FFF; line-height:31px; margin:10px auto;}
.sh_btn2:hover{background: #77d9e0;}

/* tit */
.pg_wrap{ width:100%; height:100%; position:relative;}
.pg_wrap2{ width:100%; position:relative;}
.pg_tit{ position: fixed; top:16px; left:140px; width:320px; height:40px; z-index:1;}
.pg_tit a{ background:url(../img/pg-tit2.png) no-repeat; display:block; width:100%; height:100%; -moz-background-size: contain; background-size: contain;}
.pg_tit a:hover{ background:url(../img/pg-tit2-2.png) no-repeat; width:100%; height:100%; -moz-background-size: contain; background-size: contain;}

/* QA*/
.pad_bg{ background:url(../img/QA_bg.png) center 70px no-repeat; -moz-background-size: contain; background-size: contain; width:100%; height:100%;}
.pad_wrap{ width:43%; height:70%; position:relative; left:50%; margin-left:-21.8%; top:172px; float:left;}
.pad_wrap li{ float:left;}
.que{ width:54.5%; padding:5%;}
.que img{ width:50%; margin:0 0 10px 0; display:block;}
.que p{ font-size:3em; line-height:1.4em; color:#353535;}
.que span{ display:block; color:#bbb; font-size:1em; line-height:22px; margin:100px 0 0 0;}

.as{ width:35.5%; background: url(../img/qa_bg2.png) no-repeat; -moz-background-size: cover; background-size: cover; height:545px;}
.as > ul{ position:relative;}
.as > ul > li{ position:absolute;}
.as > ul > li img{ width:100%;}
.no{ width:70%; top:280px; left:100px;}
.man{  width:10%; top:410px; left:70px;}
.yes{ width:70%; top:40px; left:-50px;}
.woman{ width:10%; top:170px; left:150px;}

/* answer */
.ans_wrap{ width:100%; background:url(../img/QA_bg-2.png) center 150px fixed no-repeat; -moz-background-size: cover; background-size: cover; float:left;}
.ans_td{ width:50%; background: #f8f770 url(../img/QA_bg-3.png) left -20px repeat-x; position:relative; left:25%; margin:50px 0 0 0; padding:30px 0; box-shadow: 0px 0px 15px #b2b2b2; -webkit-box-shadow: 0px 0px 15px #b2b2b2; -moz-box-shadow: 0px 0px 15px #b2b2b2; float:left;}
.ans_td h3{ color:#aead5a; font-size:2em; text-align:center; margin:0 2% 20px 2%;}
.ans_td h1{ color:#fb0000; font-size:2.5em; text-align:center; font-weight: normal; line-height:48px; letter-spacing:0.1em; margin:0 2% 15px 2%;}
.ans_td p{ color:#222; line-height:35px; font-size:1.25em; margin:0 5% 20px 5%;}
.line1{ width:96%; background:#333; height:5px; margin:0 2% 15px 2%;}
.line2{ width:96%; background:#333; height:1px; margin:0 2% 5px 2%;}
.ans_pic1{ width:100%; text-align:center;}
.ans_pic1 img{ width:397px;}
.ans_more{ width:100%; background:#f1f1f1; padding:20px 0; float:left; margin:20px 0 0 0; font-weight:300;}
.ans_more li{ color:#454545; font-size:0.915em; font-family:28px; text-align:center; float:left; width:20%; margin:0 0 10px 0;}
.ans_more li a{ color:#222;}
.ans_more li a:hover{  color:#77d9e0;}
.ans_more li img{ width:70%; margin: 0 0 5px 0;}

.ans_btn{width:240px; height:60px; background: url(../img/button-2.png) no-repeat; -moz-background-size: contain; background-size: contain; color:#222; line-height:60px; font-size:1em; font-weight:300; float:left; margin:30px 0 10px 38%; font-weight:300; text-align:center;}
.ans_btn a{ color:#222; display: block; width: 100%; height: 100%;}
.ans_btn:hover{ background: url(../img/button2-2.png) no-repeat; -moz-background-size: contain; background-size: contain;}
.ans_btn_w{ width:100%; float:left; font-size:0.813em; color:#222222; line-height:24px; text-align:center; margin:0 0 20px 0;}

.tks{ padding: 50px 0 100px 0; margin:0 0 50px 0;}
.ans_td h5{ color:#aead5a; font-size:1.8em; text-align: center; margin:0 2% 20px 2%; font-weight:700; line-height:40px;}
.tks_btn{ width:300px; height: 100px; background-color: #f54a6a; text-align:center; line-height:100px; color:#fff; font-weight:bold; font-size:1.25em; border-bottom:7px solid #d33956; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; margin:30px auto;}
.tks_btn a { display: block; width: 100%; height: 100%; text-decoration: none; cursor: pointer; color:#fff; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;}
.tks_btn a:hover { text-decoration: none; border-bottom: 0; background-color: #d33956; padding:5px 0 0 0; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;}

/*m-head*/
.m_head_wrap{ display:none;}

/* foot */
footer{ display:block; float:left; width:90%; padding:10px 0 10px 40px; color:#222; font-size:0.813em; line-height:20px; margin: 10px 0; position:relative; z-index:1; }
footer a{ color:#222;}
footer a:hover{ color:#77d9e0;}
footer p{ margin:5px 0 0 0;}

ul.m_sh{ margin:0 0 10px 0; padding:0; float:left; list-style-type:none; width:100%;}
.m_line{ float:left; display:none;}
.m_fb{ float:left; margin:0; padding:0;}

/* list */
.list_wrap{ margin:80px 0 0 140px; position:relative; z-index:1;}
.list_wrap ul{ width:100%; float:left;}
.list_wrap li{ float:left;}
.list_left{ width:80%; padding:0 20px 20px 0;}
.list_rig{ width:300px; margin:0; padding:0 0 20px 0;}
.list_rig img{ margin:0 0 15px 0;  display:inline-block; width:300px;}
.list_wrap li ul.pages{ width:70%; float:left;}

/* article */
.art_wrap{ width:98%; margin:0; padding:20px 1% 1% 1%; background:#FFF url(../article/img/art_bg.png) repeat;}
.art_wrap img{ width:100%; max-width:630px; margin:10px 20px 10px 0; float:left;}
.art_wrap h1{ font-size:2em; line-height:40px; font-weight:normal; color:#c7a20f; margin:0 0 10px 0; text-align:left;}
.art_wrap h3{ font-size:15px; line-height:25px; font-weight:300; color:#666666; margin:0; text-align:left;}
.art_wrap h2{ font-size:24px; line-height:36px; font-weight:300; color:#009faa; margin:0 0 20px 0; text-align:left;}
.art_wrap h4{ font-size:15px; line-height:25px; font-weight:300; color:#A4860D; margin:5px 0 10px 0; text-align:left; display:block; width:100%;}
.art_wrap p{ font-size:18px; line-height:36px; font-weight:300; color:#222222; text-align:left;}
.art_wrap p a:link{ color:#222222; background:#CCC; padding:3px;}
.art_wrap p a:hover{ color:#009faa; background: none; padding:3px;}

.art_wrap2{ width:98%; margin:0; padding:20px 1% 1% 1%; background:#FFF url(../article/img/art_bg2.png) repeat;}
.art_wrap2 img{ width:100%; max-width:630px; margin:10px 20px 10px 0; float:left;}
.art_wrap2 h1{ font-size:2em; line-height:40px; font-weight:normal; color:#c7a20f; margin:0 0 10px 0; text-align:left;}
.art_wrap2 h3{ font-size:15px; line-height:25px; font-weight:300; color:#666666; margin:0; text-align:left;}
.art_wrap2 h2{ font-size:24px; line-height:36px; font-weight:300; color:#009faa; margin:0 0 20px 0; text-align:left;}
.art_wrap2 h4{ font-size:15px; line-height:25px; font-weight:300; color:#A4860D; margin:5px 0 10px 0; text-align:left; display:block;}
.art_wrap2 p{ font-size:18px; line-height:36px; font-weight:300; color:#222222; text-align:left;}
.art_wrap2 p a:link{ color:#222222; background:#CCC; padding:3px;}
.art_wrap2 p a:hover{ color:#009faa; background: none; padding:3px;}

.pages{ display:block; text-align:center; padding:20px 0 0 45%;}
.pages li{ width:40px; height:40px; background:#c1c1c1; text-align:center; line-height:40px; font-size:1em; color:#fff; font-weight:bold; -webkit-border-radius: 40px; -moz-border-radius: 40px; border-radius: 40px; margin:0 5px;}
.pages li a{ display:block; width:100%; height:100%; color:#fff; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px;}
.pages li a:hover{ background:#77d9e0; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px;}

/* new */
.new_web{  width:90%; display:inline-block; padding:0 0 0 10%; position:relative; z-index:1; background:url(../article/img/art_bg.png) repeat;}
.new_le{ margin:0 0 0 15%; float:left;}
.new_rig{ padding:30px 0 0 0; width:40%; float:left;}
.new_rig img{ width:464px; margin:20px 0 10px 0;}
.new_rig p{ font-size:1em; color:#222; line-height:28px; margin:0 0 10px 0;}
.new_rig span{ background:#77d9e0; color:#fff; font-weight:700; padding:5px 10px; text-align:center;}

.new_pic1 img{ width:500px; float: left;}
.new_pic2 img{ width:388px; float:left;}
.new_web_first{ margin-top:80px;}
.new_web_first2{ padding-top:50px;}

.new_web2{ width:75%; display:inline-block; padding:0 25% 0 0; position:relative; z-index:1; background:url(../article/img/art_bg.png) repeat;}
.new_le2{ padding:110px 0 0 0; float:right; width:35%;}
.new_le2 img{ width:464px; margin:15px 0 10px 0;}
.new_le2 p{ font-size:1em; color:#222; line-height:28px; margin:0 0 10px 0;}
.new_le2 span{ background:#77d9e0; color:#fff; font-weight:700; padding:5px 10px; text-align:center;}
.new_rig2{padding:0 0 0 20px; float:right;}

.new_btn{width:240px; height:60px; background: url(../img/button-2.png) -10px top no-repeat; -moz-background-size: contain; background-size: contain; color:#222; line-height:60px; font-size:1em; font-weight:300; float:left; font-weight:300; text-align: left;}
.new_btn a{ color:#222; display: block; width: 100%; height: 100%; padding:0 0 0 30px;}
.new_btn:hover{ background: url(../img/button2-2.png) -10px top no-repeat; -moz-background-size: contain; background-size: contain;}

/* 6ability */
#next{ color:#FFF;}

.ab_wrap{ width:100%; margin:0; height:1080px;}
.ab_le{ width:50%; height:100%; float:left; position:relative; text-align:center;}
.ab_rig{ width:45%; float:left; padding:10% 0 0 5%;}
.ab_rig h2{ font-size:3em; line-height:58px; font-weight:300;}
.ab_rig p{ color:#222; line-height:35px; font-size:1.125em; display:block; width:70%; margin:10px 0; font-weight:300;}
.ab_rig img{ width:100px; margin:0 0 30px 0;}
.ab_pic1{ position:absolute; right:0; width: 65px; height:100%; top:0; background: url(../6ability/img/bg1.png) left top no-repeat; -moz-background-size: cover; background-size: cover; z-index:1;}

.ab_le2{ width:58%; height:100%; float:right; position:relative; text-align:center;}
.ab_rig2{ width:33%; float:right; padding:13% 0 0 9%;}
.ab_rig2 h2{ font-size:3em; line-height:58px; font-weight:300;}
.ab_rig2 p{ color:#222; line-height:35px; font-size:1.125em; display:block; width:70%; margin:10px 0; font-weight:300;}
.ab_rig2 img{ width:100px; margin:0 0 30px 0;}
.ab_pic2{ position:absolute; left:0; width: 65px; height:100%; top:0; background: url(../6ability/img/bg2.png) left top no-repeat; -moz-background-size: cover; background-size: cover; z-index:1;}

.ab_co1{background:#bee3f2 url(../6ability/img/pic1.jpg) center center no-repeat; -moz-background-size: 80%; background-size: 80%;}
.ab_co2{background:#f4a476 url(../6ability/img/pic2.jpg) center center no-repeat; -moz-background-size: 80%; background-size: 80%;}
.ab_co3{background:#eddceb url(../6ability/img/pic3.jpg) center center no-repeat; -moz-background-size: 80%; background-size: 80%;}
.ab_co4{background:#d5e071 url(../6ability/img/pic4.jpg) center center no-repeat; -moz-background-size: 80%; background-size: 80%;}
.ab_co5{background:#fcf0d6 url(../6ability/img/pic5.jpg) center center no-repeat; -moz-background-size: 80%; background-size: 80%;}
.ab_co6{background:#fdd027 url(../6ability/img/pic6.jpg) center center no-repeat; -moz-background-size: 80%; background-size: 80%;}

.ab_h_1{color:#52B3DC;}
.ab_h_2{color:#EE7831;}
.ab_h_3{color:#B46BAB;}
.ab_h_4{color:#BACA2D;}
.ab_h_5{color:#EEA817;}
.ab_h_6{color:#D0A702;}

/* plan */
.plan_wrap{ width:100%; min-height:2950px; background:url(../img/bg4.png) top center repeat-y; padding:100px 0 0 0; -moz-background-size: 100px; background-size: 100px;}
.plan_man{ position: fixed; top:100px; left:50%; width:54px; height:162px; margin-left:-27px; background:url(../img/plan_m.png) no-repeat; z-index:1; animation: play 3s steps(5) infinite; -moz-animation:play 3s steps(5) infinite; -webkit-animation:play 3s steps(5) infinite; -o-animation: play 3s steps(5) infinite;}
@-webkit-keyframes play{ 0% { background-position: 0px; } 100% { background-position: -270px; }}
@keyframes play { 0% { background-position: 0px; } 100% { background-position: -270px;}}

/* Left */
.p_le_wrap{ float:left; width:40%; z-index:1; position:relative; margin:0 0 0 10%;}

.p_le_tit{ width:80%; min-height:100px; background:#ff3d3d; padding:20px; text-align: center; float:left; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; margin:0 0 100px 0; color:#fff; font-weight:300; line-height:44px; font-size:2em;}
.p_le_t{width: 0; height: 0; border-style: solid; border-width: 25px 0 25px 25px; border-color: transparent transparent transparent #ff3d3d; float:left; margin:20px 0 0 0;}

.p_le_w{ width:75%; min-height:90px; background:#77d9e0; padding:20px; text-align:left; float:left; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; margin:0 0 100px 0; color:#222222; font-weight:300; line-height:30px; font-size:1.125em;}
.p_le_w a {display: block; width: 100%; height: 100%; text-decoration: none; cursor: pointer; color:#222222;}
.p_le_w:hover { text-decoration: none; background:#2BB3BD; color:#fff;}
.p_le_w span{ padding:0 10px; background:#2BB3BD; color:#fff; margin:5px 0 0 5px; -webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 30px; line-height:20px; font-size:0.813em; font-weight:bold;}
.p_le_t2{width: 0; height: 0; border-style: solid; border-width: 25px 0 25px 25px; border-color: transparent transparent transparent #77d9e0; float:left; margin:20px 0 0 0;}

.p_le_w2{ width:60%; min-height:90px; background:#ffee5a; padding:20px; text-align:left; float:left; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; margin:0 0 100px 10%; color:#222222; font-weight:300; line-height:30px; font-size:1.125em;}
.p_le_t3{width: 0; height: 0; border-style: solid; border-width: 25px 0 25px 25px; border-color: transparent transparent transparent #ffee5a; float:left; margin:20px 0 0 0;}

.plan_pic1{ width:350px;}
.plan_day{ width:90px; height:80px; text-align:center; color:#fff; font-weight:300; font-size:1.5em; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; background:#353535; float:left; margin:0 20px 0 0; padding:10px 0 0 0; line-height:33px; font-family: "Comic Sans MS", cursive;}
.animation1{visibility: hidden;}

/* Right */
.p_rig_wrap{ float:right; width:45%; z-index:1; position:relative; margin:0 0 0 0;}

.p_rig_tit{ width:70%; min-height:100px; background:#ff3d3d; padding:20px; text-align: left; float:left; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; margin: 40px 0 100px 0; color:#fff; font-weight:300; line-height:30px; font-size:1.125em;}
.p_rig_t{width: 0; height: 0;border-style: solid; border-width: 25px 25px 25px 0; border-color: transparent #ff3d3d transparent transparent; float:left; margin:60px 0 0 0;}

.p_rig_tit2{ width:50%; min-height:100px; background:#ff3d3d; padding:20px; text-align: center; float:left; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; margin: 20px 0 50px 0; color:#fff; font-weight:300; line-height:45px; font-size:2em;}
.p_rig_tit2 span{ padding: 5px 20px; background:#353535; color:#fff; margin:10px 0; -webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 30px; line-height:30px; font-size:20px; font-weight:bold; display:inline-block;}
.p_rig_tit2 span a {display: block; width: 100%; height: 100%; text-decoration: none; cursor: pointer; color:#fff; -webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 30px;}
.p_rig_tit2 span:hover {text-decoration: none; background:#fff; color:#ff3d3d; -webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 30px;}
.p_rig_tit2 span a:hover {color:#ff3d3d;}

.p_rig_w{ width:70%; min-height:90px; background:#ffee5a; padding:20px; text-align:left; float:left; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; margin:0 0 100px 0; color:#222222; font-weight:300; line-height:30px; font-size:1.125em;}
.p_rig_t2{width: 0; height: 0;border-style: solid; border-width: 25px 25px 25px 0; border-color: transparent #ffee5a transparent transparent; float:left; margin:20px 0 0 0;}

.p_rig_w2{ width:60%; min-height:90px; background:#77d9e0; padding:20px; text-align:left; float:left; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; margin:0 0 100px 0; color:#222222; font-weight:300; line-height:30px; font-size:1.125em;}
.p_rig_w2 a {display: block; width: 100%; height: 100%; text-decoration: none; cursor: pointer; color:#222222;}
.p_rig_w2:hover { text-decoration: none; background:#2BB3BD; color:#fff;}
.p_rig_w2 span{ padding:0 10px; background:#2BB3BD; color:#fff; margin:5px 0 0 5px; -webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 30px; line-height:20px; font-size:0.813em; font-weight:bold;}
.p_rig_t3{width: 0; height: 0;border-style: solid; border-width: 25px 25px 25px 0; border-color: transparent #77d9e0 transparent transparent; float:left; margin:20px 0 0 0;}

.plan_end{ width:90%; float:left; margin:0 5%;}
.plan_end ul.peo{ width:100%; margin:0;}
.plan_end ul.peo li{float:left;}
.p_1{ margin:0 10px 0 0; width:45px;}
.p_2{ margin:0 0 0 35px; width:45px;}

.end{ margin:10px 0 0 10px; width:90px;}
.end:focus{outline-width: 0px;}
.end img{ width:100%;}

@media screen and (max-width: 1680px) {
.as{height:100%;}
.pad_wrap{ height:50%; top:160px;}
.que span{ margin:40px 0 0 0;}
.no{ top:250px;}
.man{ top:370px;}
.woman{ top:150px; left:120px;}

.ans_td{ width:50%; left:25%; z-index:1; margin:80px 0 0 0;}
.ans_btn{margin:30px 0 10px 35%;}
.ans_td h1{ letter-spacing:normal; margin:0 3% 15px 3%;}

.tks{ padding: 50px 0 100px 0; margin:0;}

.list_left{ width:75%;}

.new_web2{ width:85%; padding:0 15% 0 0;}
.new_le2{ width:40%;}

.ab_rig{ padding:12% 0 0 5%;}
.ab_rig2{ padding:15% 0 0 9%;}
.ab_rig p{ width:80%;}
.ab_rig2 p{ width:80%;}

.p_1{ margin:0 10px 0 0; width:40px;}
.p_2{ margin:0 0 0 25px; width:40px;}
}

@media screen and (max-width: 1366px) {
.pg_wrap{ height:695px;}
.pad_bg{ background:url(../img/QA_bg.png) center 70px no-repeat; height:695px;}
.pad_wrap{ width:46.8%; height:62%; margin-left:-23%; top:150px;}
.que p{ font-size:2.5em; line-height:50px;}
.no{ width:70%; top:230px;}
.man{  width:13%; top:330px;}
.woman{ width:13%; top:130px; left:110px;}

.ans_td{ left:24%; width:53%;}
.ans_more li{ width:18%; margin:0 1%;}
.ans_more li img{ width:80%;}
.ans_btn{margin:30px 0 10px 33%;}

.tks{ padding: 0;}
.ans_td h5{ font-size:1.5em; text-align: left; margin:0 5% 20px 5%; line-height:36px;}
.tks_btn{ width:300px; height: 70px; line-height:70px;}

.list_left{ width:70%;}

.art_wrap{ text-align:center;}
.art_wrap2{ text-align:center;}
.art_wrap img{ margin:10px auto 5px auto; float: none;}
.art_wrap2 img{ margin:10px auto 5px auto; float: none;}

.pages{ padding:20px 0 0 40%;}

.new_web{ width:83%; padding:0 0 0 17%;}
.new_web_first{ margin-top:80px;}
.new_web_first2{ padding-top:50px;}
.new_le{ margin:0;}
.new_rig{ width:48%;}

.new_web2{ width:90%; padding:0 10% 0 0;}
.new_le2{ width:45%;}

.ab_le{ width:55%;}
.ab_rig{  width:40%; padding:12% 0 0 5%;}
.ab_le2{ width:56%;}
.ab_rig2{ width:35%; padding:15% 0 0 9%;}

.plan_wrap{ background:url(../img/bg4.png) 630px top repeat-y; padding:100px 0 0 0; -moz-background-size: 100px; background-size: 100px;}
.plan_man{ left:51%;}
.p_1{ margin:0 10px 0 0; width:30px;}
.p_2{ margin:0 0 0 25px; width:30px;}

}

@media screen and (max-width: 1280px) {
.pad_wrap{ width:50.8%; margin-left:-25.5%;}

.ans_td{ left:20%; width:62%;}
.ans_btn{margin:30px 0 10px 35%;}

.new_web{ width:85%; padding:0 0 0 15%;}
.new_web_first{ margin-top:80px;}
.new_web_first2{ padding-top:50px;}
.new_rig{ width:49%;}

.ab_wrap{ height:1030px;}

.plan_wrap{ min-height:3200px;}
.p_le_wrap{ width:43%; margin:0 0 0 12%;}
.p_rig_wrap{ width:40%; margin:0;}
.plan_man{ left:55%;}
.p_1{ margin:0 11px 0 0; width:25px;}
.p_2{ margin:0 0 0 25px; width:25px;}
.p_rig_w{ width:75%;}
.p_rig_w2{ width:65%;}
.plan_day{ margin:0 20px 20px 0;}
}


@media screen and (max-width: 1080px) {
.pad_wrap{ width:58.5%; margin-left:-29%;}
.bbgg1{ background:url(../img/pg_bg.png) center -200px fixed no-repeat;}
.bbgg3{ background:#f8f8f8;}
.bbgg4{ background: #fcf7ee;}

.ans_td{left:16%; width:70%;}
.ans_btn{margin:30px 0 10px 34%;}
.ans_td h1{margin:0 5% 15px 5%; text-align: left; }

.list_left{ width:60%;}

.new_web{ width:90%; padding:0 0 0 10%;}
.new_web_first{ margin-top:80px;}
.new_web_first2{ padding-top:50px;}
.new_rig img{ width:300px;}
.new_le2 img{ width:300px;}
.new_pic1 img{ width:400px;}
.new_pic2 img{ width:350px;}
.new_rig{ width:50%;}

.new_le2{ padding:80px 0 0 0;}

.ab_rig{  width:42%; padding:13% 0 0 3%;}
.ab_rig2{ padding:18% 0 0 9%;}
.ab_rig p{ width:95%;}
.ab_rig2 p{ width:95%;}

.plan_wrap{ min-height:4500px; background:url(../img/bg4.png) 540px top repeat-y; padding:100px 0 0 0; -moz-background-size: 100px; background-size: 100px;}
.p_2{ margin:0 0 0 15px; width:20px;}
}

@media screen and (max-width: 1024px) {
.pad_wrap{ width:62.5%; height:61.8%; margin-left:-30.7%;}
.pg_tit a{ background:url(../img/pg-tit.png) no-repeat; display:block; width:100%; height:100%; -moz-background-size: contain; background-size: contain;}
.pg_tit a:hover{ background:url(../img/pg-tit-2.png) no-repeat; width:100%; height:100%; -moz-background-size: contain; background-size: contain;}

.pages{ padding:20px 0 0 35%;}

.new_web{ width:85%; padding:0 0 0 15%;}
.new_web_first{ margin-top:80px;}
.new_web_first2{ padding-top:50px;}

.ab_wrap{ height:800px;}

.plan_wrap{ min-height:3400px; background:url(../img/bg4.png) 530px top repeat-y; padding:100px 0 0 0; -moz-background-size: 100px; background-size: 100px;}
.plan_man{ left:56.5%;}
.p_le_wrap{ width:42%; margin:0 0 0 13%;}
.p_le_w2{ width:75%; margin:0 0 100px 5%;}
.p_rig_tit2{ width:60%;}
.p_1{ margin:0 11px 0 0; width:20px;}
.p_2{ margin:0 0 0 20px;}
}

@media screen and (max-width: 800px) {	
.floating:hover{ animation:none;}
.nav_wrap{ width:100%; position: fixed; top:0; left:0; z-index:9; background:#fff; height:50px;}
.logo{ top:8px; left:20px; position:absolute;}
.sh_btn{ top:10px; right:60px; margin:0; position:absolute;}
.sh_btn2{ top:10px; right:20px; margin:0; position:absolute;}
section{ position:absolute; top:5px; left:50%; margin:0 0 0 -40px;}
footer{ padding:10px 5% 20px 5%;}
footer p{ margin:10px 0 0 0;}
ul.m_sh{ margin:0 0 5px 0;}
.m_line{ display: block;}
.m_line img{ width:84px; height:auto; margin:0 10px 0 0;}

.bbgg1{ background:none;}
.pg_tit{ display:none;}
.pg_wrap{ width:100%; height:100%; float:left;}
.pad_bg{ width:100%; height: auto; background:none; float:left;}
.pad_wrap{ width:100%; height: inherit; position: static; float:left; margin:0;}
.que{ width:90%; padding:100px 5%; background: url(../img/m_pg_bg.png) center top no-repeat; -moz-background-size: cover; background-size: cover;}
.que img{ width:110px;}
.que span{ margin:0;}
.as{ width:100%; height:200px; background: url(../img/qa_bg2.png) no-repeat; -moz-background-size: cover; background-size: cover;}
.no{ width:40%; top:-60px; left:58%;}
.yes{ width:40%; top:-80px; left:3%;}
.man{ display:none;}
.woman{ width:40px; top:50px; left:50%; margin-left:-4%;}

.m_head_wrap{ display:block; float:left; width:100%; margin:50px 0 0 0; padding:10px 0; background: url(../img/ind_bg.png) center center fixed no-repeat; -moz-background-size: cover; background-size: cover; text-align:center;}
.m_head_wrap img{ width:50%; margin:30px auto 10px auto;}

.ans_wrap{ width:100%; background: none;}
.ans_td{ width:100%; margin:0; left:0;}
.ans_btn{margin:30px 0 10px 35%;}
.ans_td h1{text-align: center;}

.list_wrap{ width:100%; margin:0;}
.list_left{ width:100%; padding:0; margin:0;}
.list_rig{ width:84%; margin:10px 7% 0 9%;}
.list_rig img{ margin:5px;}
.list_wrap li ul.pages{ width:60%;}

.art_wrap{ width:90%; margin:0; padding:20px 5% 0 5%;}
.art_wrap2{ width:90%; margin:0; padding:20px 5% 0 5%;}
.pages{ padding:0 0 30px 40%;}
.pages li{ width:50px; height:50px; line-height:50px; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; margin:0 10px;}

.new_web{ width:90%; padding:0 5%;}
.new_web2{ width:90%; padding:0 5%;}
.new_web_first{ margin-top:0; padding-top:20px;}
.new_web_first2{ padding-top:0;}
.new_le{ margin:0; padding:0 0 20px 0; text-align:center; float:left; width:100%;}
.new_rig{ padding:0 0 20px 0; float:left; width:100%;}
.new_le2{ padding:0 0 20px 0; float:left; width:100%;}
.new_rig2{padding:0 0 20px 0; float:left; width:100%; text-align:center;}
.new_pic1 img{float: none;}
.new_pic2 img{float: none;}

.ab_wrap{ width:100%; margin:0; height:100%; float:left;}
.ab_le{ width:100%; height: 300px; margin:0 0 20px 0;}
.ab_rig{ width:90%; padding:0 5%; margin:0 0 40px 0;}
.ab_rig img{ width:80px; margin:0 0 10px 0;}
.ab_rig h2{ font-size:2.8em; line-height:50px; font-weight:300;}
.ab_rig p{ width:100%; text-align:left; line-height:28px;}
.ab_pic1{ display:none;}

.ab_le2{ width:100%; height: 300px; margin:0 0 20px 0; float:left;}
.ab_rig2{ width:90%; padding:0 5%; margin:0 0 40px 0; float:left;}
.ab_rig2 img{ width:80px; margin:0 0 10px 0;}
.ab_rig2 h2{ font-size:2.8em; line-height:50px; font-weight:300;}
.ab_rig2 p{ width:100%; text-align:left; line-height:28px;}
.ab_pic2{ display:none;}

.ab_co1{background:#bee3f2 url(../6ability/img/pic1-2.jpg) center center no-repeat; -moz-background-size: contain; background-size: contain;}
.ab_co2{background:#f4a476 url(../6ability/img/pic2-2.jpg) center center no-repeat; -moz-background-size: contain; background-size: contain;}
.ab_co3{background:#eddceb url(../6ability/img/pic3-2.jpg) center center no-repeat; -moz-background-size: contain; background-size: contain;}
.ab_co4{background:#d5e071 url(../6ability/img/pic4-2.jpg) center center no-repeat; -moz-background-size: contain; background-size: contain;}
.ab_co5{background:#fcf0d6 url(../6ability/img/pic5-2.jpg) center center no-repeat; -moz-background-size: contain; background-size: contain;}
.ab_co6{background:#fdd027 url(../6ability/img/pic6-2.jpg) center center no-repeat; -moz-background-size: contain; background-size: contain;}

.plan_wrap{ min-height:5700px; background:url(../img/bg4.png) center top repeat-y; padding:100px 0 0 0; -moz-background-size: 100px; background-size: 100px;}
.plan_man{ display:none;}
.p_le_wrap{ width:80%; margin:50px 0 0 15%;}
.p_rig_wrap{ width:90%; margin:0 2% 0 8%;}
.p_le_tit{ width:90%; margin:0 0 30px 0;}
.p_le_t{ border-width: 15px 0 15px 15px;}
.p_le_t2{ border-width: 15px 0 15px 15px;}
.p_le_t3{ border-width: 15px 0 15px 15px;}
.p_le_w{ width:85%; margin:0 0 50px 0;}
.p_le_w2{ width:75%; margin:0 0 50px 0;}

.p_rig_tit{ width:80%; margin: 0 0 50px 0; min-height:50px;}
.p_rig_tit span{ display:none;}
.p_rig_t{ border-width: 15px 15px 15px 0; margin:30px 0 0 0;}
.p_rig_t2{ border-width: 15px 15px 15px 0;}
.p_rig_t3{ border-width: 15px 15px 15px 0;}
.p_rig_w{ margin:0 0 50px 0;}
.p_rig_w2{ width:60%; margin:0 0 50px 0;}
.plan_end{ margin:10px 5% 0 5%;}
.p_1{ margin:0 15px 0 5px;}
.p_2{ display:none;}
}


@media screen and (max-width: 640px) {	
.que p{ line-height:55px;}
footer span{ display:none;}

.ans_btn{margin:30px 0 10px 31%;}
.ans_td h1{text-align: left;}
.tks_btn{ font-weight:300;}

.list_rig{ width:98%; margin:0 1%;}
.list_rig img{ margin:0 0 0 2px;}

.new_rig span{ font-weight:300;}
.new_le2 span{ font-weight:300;}

.p_le_tit{ width:85%;}
.p_rig_tit{ margin: 0 0 30px 0;}
.p_1{ margin:0 10px 0 5px;}
.p_rig_tit2 span{ font-weight:normal;}
}

@media screen and (max-width: 600px) {
.ans_btn{margin:30px 0 10px 29%;}

.list_rig{ width:100%; margin:0; text-align:center;}
.list_rig img{ margin:15px 0 0 0;}

.pages{ padding:0 0 30px 36%;}

.p_1{ margin:0 11px 0 0;}
}

@media screen and (max-width: 480px) {
.ind_bg{ display:none;}
#Load img{ position:absolute; top:50%; left:50%; margin-left:-50px;}
.m_head_wrap img{ width:80%; margin:40px auto 10px auto;}
.as{ height:150px;}
.woman{ top:0;}

.ans_btn{margin:30px 0 10px 26%;}
.ans_more li{ width:31%; margin:0 1% 20px 1%;}
.ans_td h1{ font-size:2em; line-height:40px;}

.art_wrap h1{ text-align:left;}
.art_wrap h3{ text-align:left;}
.art_wrap2 h1{ text-align:left;}
.art_wrap2 h3{ text-align:left;}
.pages{ padding:0 0 30px 30%;}

.new_pic1 img{ width:80%;}
.new_pic2 img{ width:80%;}
.new_rig img{ width:100%;}
.new_le2 img{ width:100%;}

.plan_wrap{ min-height:4950px;}
.p_le_wrap{ width:95%; margin:30px 2% 0 5%;}
.p_rig_wrap{ width:95%; margin:0 2% 0 3%;}
.p_le_tit{ width:80%; margin:0 0 30px 0; font-size:1.8em;}
.p_rig_tit2{ width:80%; margin:0 0 30px 0;}
.p_le_w{ width:80%; margin:0 0 30px 0;}
.p_le_w2{ width:80%; margin:0 0 30px 0;}
.p_rig_w{ width:80%; margin:0 0 30px 0;}
.p_rig_w2{ width:80%; margin:0 0 30px 0;}
.plan_end{ display:none;}
.plan_pic1{ width:100%;}
}

@media screen and (max-width: 361px) {
.logo{left:10px;}
.sh_btn{right:50px;}
.sh_btn2{ right:10px;}

.pad_wrap{ margin:0 0 10px 0;}
.que p{ font-size:1.8em; line-height:42px;}
.no{ width:50%; top:-60px; left:54%;}
.yes{ width:50%; top:-80px; left:-3%;}
.woman{ width:27px; top:10px;}
.as{ height:100px;}

.ans_btn{margin:30px 0 10px 18%;}

.tks_btn{ width:270px;}

.pages{ padding:0 0 30px 28%;}

.ab_rig h2{ font-size:2.5em;}
.ab_rig2 h2{ font-size:2.5em;}

.plan_wrap{ min-height:5300px;}
.plan_day{ margin:0 20px 40px 0;}
.p_le_tit{font-size:1.6em; line-height:36px;}

}


@media screen and (max-width: 321px) {
.ans_btn{margin:30px 0 10px 13%;}

.plan_wrap{ min-height:5900px;}

.list_rig img{ width:280px;}
}


@media screen and (max-height: 720px) {
#Load img{ position:absolute; top:50%; left:50%; margin-left:-50px;}	
}