@charset "UTF-8";
@import url(fonts.css);
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font: inherit; font-size: 100%; vertical-align: baseline; }
html { line-height: 1; }
html ol, html ul, html li { list-style: none; }
html table { border-collapse: collapse; border-spacing: 0; }
html caption, html th, html td { text-align: left; font-weight: normal; vertical-align: middle; }
html q, html blockquote { quotes: none; }
html q:before, html q:after, html blockquote:before, html blockquote:after { content: ""; content: none; }
html img { border: none; }
html article, html aside, html details, html figcaption, html figure, html footer, html header, html hgroup, html main, html menu, html nav, html section, html summary { display: block; }
html :link, html :visited, html ins { text-decoration: none; }
html *, html *:after, html *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
html .clearfix { zoom: 1; }
html .clearfix:before, html .clearfix:after { content: " "; display: table; }
html .clearfix:after { clear: both; }
.index-content::after, .action-box section .process::after, .page-info > ul::after, footer .footer::after { clear: both; content: ''; display: block; visibility: hidden; height: 0; }
.gogotop { -moz-transition: all 0.8s; -o-transition: all 0.8s; -webkit-transition: all 0.8s; transition: all 0.8s; }
body { font-family: Arial, "微軟正黑體", "Microsoft JhengHei", sans-serif; font-size: 15px; line-height: 24px; color: #555; background: url(../images/bg.png?250309002); }
article { display: block; position: relative; width: 100%; }
img { max-width: 100%; }
.mv { -moz-transition: all 0.8s; -o-transition: all 0.8s; -webkit-transition: all 0.8s; transition: all 0.8s; }
.gogotop { background: #53a942; width: 80px; height: 38px; text-align: center; position: fixed; bottom: 15%; right: -100%; z-index: 500; border: 5px solid #eee; border-right: none; -moz-border-radius: 50px 0px 0px 50px; -webkit-border-radius: 50px; border-radius: 50px 0px 0px 50px; }
.gogotop a { color: #fff; display: block; }
.gogotop:hover { background: #326628; }
header { width: 100%; display: block; background: url(../images/top01.png?250409003) repeat-x; }
header .top-bar { width: 100%; max-width: 1200px; margin: 0 auto; }
header .top-bar ul { display: block; text-align: right; padding-top: 5px; }
header .top-bar ul li { display: inline-block; margin-left: 15px; }
header .top-bar ul li a { font-size: 14px; color: #fff; }
header .top-bar ul li a i { margin-right: 5px; display: inline-block; vertical-align: middle; font-size: 16px; }
header .top-bar ul li a:hover { color: #ff0; }
header .header { width: 100%; max-width: 1200px; margin: -12px auto 0 auto; position: relative; background: url(../images/logo-bar.png?250409003) no-repeat; }
header .header .logo { display: block; position: absolute; top: 10px; width: 132px; height: 95px; }
header .header .home { display: block; position: absolute; top: 50px; right: 0; }
header .header ul { display: block; padding: 50px 20px 30px 0; text-align: right; }
header .header ul li { display: inline-block; margin-left: 40px; position: relative; }
header .header ul li a { color: #555; font-size: 18px; font-weight: bold; display: block; position: relative; z-index: 10; padding: 4px 15px 4px 10px; }
header .header ul li a:hover { background: #8CC11F; color: #fff; -moz-border-radius: 0 50px 50px 0; -webkit-border-radius: 0; border-radius: 0 50px 50px 0; }
header .header ul li a:hover:before { width: 60px; height: 60px; background: #8CC11F; -moz-border-radius: 100px; -webkit-border-radius: 100px; border-radius: 100px; content: ''; z-index: -100; position: absolute; left: -40px; top: -13px; -moz-box-shadow: -5px 0px 5px rgba(0, 0, 0, 0.3); -webkit-box-shadow: -5px 0px 5px rgba(0, 0, 0, 0.3); box-shadow: -5px 0px 5px rgba(0, 0, 0, 0.3); }
header .header ul li a:hover:after { width: 42px; height: 42px; position: absolute; left: -33px; top: -5px; z-index: 12; content: ''; }
header .header ul li:before { content: "/"; font-weight: bold; font-size: 24px; color: #555; position: absolute; left: -25px; top: 4px; }
header .header ul li:nth-child(1):before { display: none; }
header .header ul li:nth-child(1) a:hover:after { background: url(../images/menu-pic.png?250422001) no-repeat 0px 0px; }
header .header ul li:nth-child(2) a:hover:after { background: url(../images/menu-pic.png?250422001) no-repeat -42px 0px; }
header .header ul li:nth-child(3) a:hover:after { background: url(../images/menu-pic.png?250422001) no-repeat -84px 0px; }
header .header ul li:nth-child(4) a:hover:after { background: url(../images/menu-pic.png?250422001) no-repeat -126px 0px; }
header .header ul li:nth-child(5) a:hover:after { background: url(../images/menu-pic.png?250422001) no-repeat -168px 0px; }
header .header ul li:nth-child(6) a:hover:after { background: url(../images/menu-pic.png?250422001) no-repeat -210px 0px; }
.Mobile { display: none; width: 100%; z-index: 200; position: fixed; top: 0; background: url(../images/top03.png?250422001); }
.Mobile .logo { margin: 10px 0 0 30px; display: block; }
.Mobile .logo img { width: 80px; }
.Mobile .menuBtn { width: 40px; position: absolute; top: 20px; right: 5%; z-index: 101; transition: top 300ms; }
.Mobile .menuBtn span, .Mobile .menuBtn:before, .Mobile .menuBtn:after { display: block; content: ""; transition: all 300ms; background-color: #fff; margin: 7px; width: 26px; height: 4px; text-indent: -100%; overflow: hidden; white-space: nowrap; }
.Mobile .active { transform: rotate(180deg); }
.Mobile .active span { background-color: transparent; box-shadow: none; }
.Mobile .active:before, .Mobile .active:after { background-color: #fff; }
.Mobile .active:before { transform: translateY(11px) rotate(-45deg); }
.Mobile .active:after { transform: translateY(-11px) rotate(45deg); }
.Mobile ul { display: block; width: 100%; position: absolute; background: #00ad40; border-bottom: 5px solid #f8d100; }
.Mobile ul li { width: 100%; text-align: center; border: 5px solid #f8d100; border-bottom: none; }
.Mobile ul li a { color: #fff; display: block; padding: 15px 5px; font-size: 16px; }
.Mobile ul li a:hover { background: #f8d100; color: #000; }
.Mobile ul li a i { margin-right: 5px; }
.index-content { width: 100%; max-width: 1200px; margin: 20px auto; }
.index-content .text { float: left; width: 69px; font-size: 60px; line-height: 60px; color: #666; padding-top: 65px; }
.index-content .text b { font-weight: bold; }
.index-content .content { float: left; width: 1131px; }
.index-content .content > span { display: block; }
.index-content .content > span img { display: block; }
.index-content .content ul { display: block; background: url(../images/top.png?250422001); overflow: hidden; border: 5px solid #fff; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; }
.index-content .content ul .explain { float: left; width: 700px; }
.index-content .content ul .explain span { display: block; background: url(../images/index-pic.png?250422001) no-repeat 30px 50px; padding: 30px 60px 30px 260px; }
.index-content .content ul .explain span b { font-size: 36px; font-weight: bold; line-height: 40px; display: block; color: #fff; text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5); }
.index-content .content ul .explain span u { color: #842182; display: block; margin-top: 20px; font-size: 16px; text-decoration: none;}
.index-content .content ul .explain span p { line-height: 24px; }
.index-content .content ul .explain span ol { }
.index-content .content ul .explain span ol li { margin-left: 20px; list-style: decimal; }
.index-content .content ul .method { float: left; width: calc(100% - 700px); background: #fff; -moz-border-radius: 0 5px 5px 0; -webkit-border-radius: 0; border-radius: 0 5px 5px 0; border: 2px solid #f7b52c; border-left: none; position: relative; }
.index-content .content ul .method > span { display: block; position: absolute; z-index: 10; right: 15px; top: 135px; }
.index-content .content ul .method div { position: relative; padding: 30px 30px 25px 75px; }
.index-content .content ul .method div span { display: block; position: absolute; left: -45px; top: 50px; }
.index-content .content ul .method div b { font-size: 36px; font-weight: bold; color: #f05a24; display: block; margin-bottom: 10px; }
.index-content .content ul .method div i { color: #f00; }
.index-content .content ul .method div p { display: block; margin-bottom: 10px; }
.index-content .content ul .method div:nth-of-type(2) { border-top: 2px solid #f7b52c; }
.container { width: 100%; max-width: 1200px; margin: 20px auto; }
.container .title { margin: 0 0 5px 5px; }
.container .title span { display: inline-block; vertical-align: middle; }
.container .title span img { display: block; }
.container .title dl { display: inline-block; vertical-align: middle; }
.container .title dl dt i { display: inline-block; width: 42px; height: 42px; vertical-align: middle; }
.container .title dl dt i.iconI { background: url(../images/menu-pic.png?250422001) no-repeat 0px 0px; }
.container .title dl dt i.iconII { background: url(../images/menu-pic.png?250422001) no-repeat -42px 0px; }
.container .title dl dt i.iconIII { background: url(../images/menu-pic.png?250422001) no-repeat -84px 0px; }
.container .title dl dt i.iconIV { background: url(../images/menu-pic.png?250422001) no-repeat -126px 0px; }
.container .title dl dt i.iconV { background: url(../images/menu-pic.png?250422001) no-repeat -168px 0px; }
.container .title dl dt i.iconVI { background: url(../images/menu-pic.png?250422001) no-repeat -210px 0px; }
.container .title dl dt p { display: inline-block; font-size: 30px; font-weight: bold; color: #f05a24; vertical-align: middle; letter-spacing: 1px; -moz-transition: all 0.8s; -o-transition: all 0.8s; -webkit-transition: all 0.8s; transition: all 0.8s; }
.container .title dl dd { display: block; color: #444; margin-left: 6px; font-size: 16px; -moz-transition: all 0.8s; -o-transition: all 0.8s; -webkit-transition: all 0.8s; transition: all 0.8s; }
.container .title dl dd b { font-weight: bold; }
.container .content { width: 100%; position: relative; min-height: 500px; -moz-box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.2); -webkit-box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.2); box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.2); background: #fff; border: 1px solid #ccc; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; }
.container .content .loginbtn { display: block; position: absolute; top: -3.5%; right: 40%; color: #fff; background: #999; -moz-border-radius: 50px; -webkit-border-radius: 50px; border-radius: 50px; padding: 5px 20px; z-index: 5; }
.container .content .loginbtn i { margin-right: 5px; }
.container .content .loginbtn a { color: #f6fd87; text-decoration: underline; }
.container .content .loginbtn a:hover { color: #f00; }
.container .content .loginbtn-shadow { display: block; position: absolute; top: -3.5%; right: 43.2%; -moz-box-shadow: -3px 0px 5px rgba(0, 0, 0, 0.15); -webkit-box-shadow: -3px 0px 5px rgba(0, 0, 0, 0.15); box-shadow: -3px 0px 5px rgba(0, 0, 0, 0.15); height: 34px; width: 100px; padding: 5px 30px; z-index: 4; background: #fff; -moz-border-radius: 50px; -webkit-border-radius: 50px; border-radius: 50px; }
.container .content .reciprocal { display: block; position: absolute; top: -3.5%; right: 10%; color: #fff; background: #d31d35; -moz-border-radius: 50px; -webkit-border-radius: 50px; border-radius: 50px; padding: 5px 30px; z-index: 5; }
.container .content .reciprocal i { margin-right: 5px; }
.container .content .reciprocal-shadow { display: block; position: absolute; top: -3.5%; right: 18%; -moz-box-shadow: -3px 0px 5px rgba(0, 0, 0, 0.15); -webkit-box-shadow: -3px 0px 5px rgba(0, 0, 0, 0.15); box-shadow: -3px 0px 5px rgba(0, 0, 0, 0.15); height: 34px; width: 100px; padding: 5px 30px; z-index: 4; background: #fff; -moz-border-radius: 50px; -webkit-border-radius: 50px; border-radius: 50px; }
.container .content .pic { display: block; position: absolute; }
.container .content .pic img { display: block; }
.container .content .picI { top: -1%; right: 5%; }
.container .content .picII { top: -100px; right: 0px; }
.container .content .picIII { top: -20%; right: 1%; }
.container .content .picIV { top: 0; right: 0; }
.container .content .picV { top: -100px; right: 0px; }
.container .content .boxA { padding: 75px 540px 75px 70px; }
.container .content .boxB { width: 800px; margin: 70px auto; }
.container .content .boxC { width: 90%; margin: 20px auto; }
.container .content .boxTest { width: 800px; margin: 40px auto; }
.container .content .boxFinish { padding: 50px 400px 50px 50px; }
.action-box { padding: 60px; }
.action-box dl { display: block; }
.action-box dl dt { display: inline-block; background: #009536; color: #fff; font-weight: bold; -moz-border-radius: 50px; -webkit-border-radius: 50px; border-radius: 50px; padding: 5px 30px; margin-top: 10px; }
.action-box dl dt i { display: inline-block; vertical-align: middle; margin-right: 5px; }
.action-box dl dt p { display: inline-block; vertical-align: middle; }
.action-box dl dd { display: block; padding: 5px 5px 20px 5px; }
.action-box section { display: block; margin: 50px 0; border: 1px solid #94c6a6; padding: 50px 40px 40px 40px; position: relative; line-height: 30px; }
.action-box section h1 { display: block; height: 60px; position: absolute; top: -30px; left: 40px; font-size: 24px; font-weight: bold; line-height: 60px; color: #f94949; background: #fff url(../images/action-1.jpg) no-repeat; padding: 0 10px 0 85px; }
.action-box section h2 { color: #299249; margin-bottom: 10px; }
.action-box section .process { display: block; margin: 30px 0; line-height: 24px; }
.action-box section .process li { float: left; }
.action-box section .process li.box-I { width: 200px; height: 85px; background: #72b8db; text-align: center; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; }
.action-box section .process li.box-I p { width: 80%; margin: 20px auto 0 auto; color: #fff; }
.action-box section .process li.box-I i { display: block; }
.action-box section .process li.box-II { width: 200px; height: 85px; background: #72b8db; text-align: center; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; }
.action-box section .process li.box-II p { width: 70%; margin: 10px auto 0 auto; color: #fff; line-height: 20px; }
.action-box section .process li.box-II i { display: block; }
.action-box section .process li.box-III { width: 200px; height: 85px; background: #72b8db; text-align: center; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; font-size: 14px; }
.action-box section .process li.box-III p { width: 95%; margin: 10px auto 0 auto; color: #fff; line-height: 20px; }
.action-box section .process li.box-III i { display: block; }
.action-box section .process li.box-IV { width: 200px; height: 85px; background: #fc8f9f; text-align: center; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; }
.action-box section .process li.box-IV p { width: 70%; margin: 10px auto 0 auto; color: #fff; line-height: 20px; }
.action-box section .process li.box-IV i { display: block; }
.action-box section .process li.arrow { width: 50px; text-align: center; padding-top: 22px; }
.action-box section .process li.arrow i { color: #ccc; font-size: 36px; font-weight: bold; }
.action-box section .process li.arrow-down { width: 100%; text-align: left; padding: 20px 0 10px 80px; position: relative; }
.action-box section .process li.arrow-down i { color: #ccc; font-size: 36px; font-weight: bold; }
.action-box section .process li.arrow-down:before { content: ''; width: calc(100% - 240px); height: 5px; background: #ccc; position: absolute; left: 96px; }
.action-box section .process li.arrow-down:after { content: ''; width: 5px; height: 20px; background: #ccc; position: absolute; right: 144px; top: 0px; }
.action-box section ol.one { margin: 30px 0; }
.action-box section ol.one > li { list-style-type: cjk-ideographic; margin: 0 0 30px 20px; }
.action-box section ol.one b { color: #d42a3f; }
.action-box section ol.one i { color: #1e94d2; }
.action-box section ol.one p { color: #555; }
.action-box section ol.one span { display: block; margin-top: 20px; }
.action-box section ol.one span u { color: #028833; display: block; }
.action-box section ol.one span b { color: #555d; display: block; font-weight: bold; }
.action-box section ol.two > li { list-style-type: decimal; margin-left: 20px; }
.action-box section ol.three > li { list-style-type: disc; margin-left: 20px; color: #555; }
.action-box section > span u { color: #028833; }
.action-box section > span p { padding-left: 20px; position: relative; }
.action-box section > span p:before { content: '★'; position: absolute; left: 0px; top: -1px; }
.action-box section .ul-table { display: table; width: 100%; border-left: 1px solid #ccc; border-top: 1px solid #ccc; }
.action-box section .ul-table li { display: table-row; }
.action-box section .ul-table li p { display: table-cell; width: 20%; padding: 8px; text-align: center; vertical-align: middle; border-right: 1px solid #ccc; border-bottom: 1px solid #ccc; }
.action-box section .ul-table li:nth-child(1) p { background: #5174ae; color: #fff; }
.action-box section table.line { border-left: 1px solid #ccc; border-top: 1px solid #ccc; width: 100%; }
.action-box section table.line td { border: none; border-right: 1px solid #ccc; border-bottom: 1px solid #ccc; text-align: center; padding: 5px; }
.action-box section table.line tr:nth-child(1) td { background: #5174ae; color: #fff; }
.action-box section table.loctime tr:nth-child(1) td { background: #5174ae; color: #fff; }
.action-box section table.loctime tr:nth-child(4) td { background: #555; color: #fff; }
.action-box section table.loctime tr:nth-child(5) td { background: #5174ae; color: #fff; }
.action-box section table.reward tr:nth-child(2) td { background: #5174ae; color: #fff; }
.action-box section table.reward tr:nth-child(1) td { background: #555; color: #fff; }
.action-box section:nth-of-type(2) h1 { background: #fff url(../images/action-2.jpg) no-repeat; }
.action-box section:nth-of-type(3) h1 { background: #fff url(../images/action-3.jpg) no-repeat; }
.page-info { font-size: 20px; line-height: 36px; font-weight: bold; }
.page-info > b { color: #d42a3f; }
.page-info > i { color: #1e94d2; }
.page-info .link { color: #f49c0f; text-decoration: underline; }
.page-info .btn { font-size: 38px; font-style: italic; color: #fff; display: block; padding: 20px 30px; background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzBhYzA0ZCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAwYTEzYyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #0ac04d), color-stop(100%, #00a13c)); background-image: -moz-linear-gradient(top, #0ac04d, #00a13c); background-image: -webkit-linear-gradient(top, #84b12f, #84b12f); background-image: linear-gradient(to bottom, #84b12f, #84b12f); text-align: center; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; width: 80%; margin-top: 30px; }
.page-info .btn i, .page-info .btn p { display: inline-block; vertical-align: bottom; }
.page-info .btn p:nth-of-type(2) { font-size: 20px; color: #f8fcae; margin-left: 10px; }
.page-info .btn:hover { background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjEuMCIgeDI9IjAuNSIgeTI9IjAuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzBhYzA0ZCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAwYTEzYyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; background-image: -webkit-gradient(linear, 50% 100%, 50% 0%, color-stop(0%, #0ac04d), color-stop(100%, #00a13c)); background-image: -moz-linear-gradient(bottom, #0ac04d, #00a13c); background-image: -webkit-linear-gradient(bottom, #0ac04d, #00a13c); background-image: linear-gradient(to top, #84b12f, #84b12f); color: #ff0; }
.page-info > ul { display: block; width: 100%; margin-top: 20px; }
.page-info > ul li { display: block; float: left; width: 48%; margin: 0 2% 2% 0; text-align: center; }
.page-info > ul li a { display: block; width: 100%; color: #fff; font-size: 16px; padding: 5px; background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2JlYmViZSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2FmYWZhZiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #bebebe), color-stop(100%, #afafaf)); background-image: -moz-linear-gradient(top, #bebebe, #afafaf); background-image: -webkit-linear-gradient(top, #bebebe, #afafaf); background-image: linear-gradient(to bottom, #bebebe, #afafaf); }
.page-info > ul li a.on, .page-info > ul li a:hover { background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzA5Yjk0YSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzA5Yjk0YSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #09b94a), color-stop(100%, #09b94a)); background-image: -moz-linear-gradient(top, #09b94a, #09b94a); background-image: -webkit-linear-gradient(top, #09b94a, #09b94a); background-image: linear-gradient(to bottom, #09b94a, #09b94a); }
.page-info-II { font-size: 20px; line-height: 36px; font-weight: bold; }
.page-info-II > p { position: relative; display: block; padding-left: 20px; }
.page-info-II > p b { color: #d42a3f; }
.page-info-II > p i { color: #1e94d2; }
.page-info-II > p:before { content: '★'; position: absolute; left: -5px; }
.page-info-II .link { color: #f49c0f; text-decoration: underline; }
.page-info-II span { display: block; margin-top: 20px; text-align: center; }
.page-info-II .btnA { font-size: 24px; font-style: italic; color: #fff; display: inline-block; padding: 10px 30px; margin: 0 10px; background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzVkYThkNyIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzIwOTVkMiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #5da8d7), color-stop(100%, #2095d2)); background-image: -moz-linear-gradient(top, #5da8d7, #2095d2); background-image: -webkit-linear-gradient(top, #5da8d7, #2095d2); background-image: linear-gradient(to bottom, #5da8d7, #2095d2); text-align: center; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; }
.page-info-II .btnA i, .page-info-II .btnA p { display: inline-block; vertical-align: middle; }
.page-info-II .btnA i { margin-right: 10px; }
.page-info-II .btnA:hover { background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjEuMCIgeDI9IjAuNSIgeTI9IjAuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzVkYThkNyIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzIwOTVkMiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; background-image: -webkit-gradient(linear, 50% 100%, 50% 0%, color-stop(0%, #5da8d7), color-stop(100%, #2095d2)); background-image: -moz-linear-gradient(bottom, #5da8d7, #2095d2); background-image: -webkit-linear-gradient(bottom, #5da8d7, #2095d2); background-image: linear-gradient(to top, #5da8d7, #2095d2); color: #ff0; }
.page-info-II .btnB { font-size: 24px; font-style: italic; color: #fff; display: inline-block; padding: 10px 30px; margin: 0 10px; background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZhODg5OSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2ZmNjk4MSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #fa8899), color-stop(100%, #ff6981)); background-image: -moz-linear-gradient(top, #fa8899, #ff6981); background-image: -webkit-linear-gradient(top, #fa8899, #ff6981); background-image: linear-gradient(to bottom, #fa8899, #ff6981); text-align: center; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; }
.page-info-II .btnB i, .page-info-II .btnB p { display: inline-block; vertical-align: middle; }
.page-info-II .btnB i { margin-right: 10px; }
.page-info-II .btnB:hover { background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjEuMCIgeDI9IjAuNSIgeTI9IjAuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZhODg5OSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2ZmNjk4MSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; background-image: -webkit-gradient(linear, 50% 100%, 50% 0%, color-stop(0%, #fa8899), color-stop(100%, #ff6981)); background-image: -moz-linear-gradient(bottom, #fa8899, #ff6981); background-image: -webkit-linear-gradient(bottom, #fa8899, #ff6981); background-image: linear-gradient(to top, #fa8899, #ff6981); color: #ff0; }
.page-title-I { color: #1e94d2; font-size: 24px; font-weight: bold; display: block; margin-bottom: 10px; }
.page-title-I i, .page-title-I p { display: inline-block; vertical-align: middle; margin-right: 10px; }
.page-title-II { color: #d42a3f; font-size: 24px; font-weight: bold; display: block; margin-bottom: 10px; }
.page-title-II i, .page-title-II p { display: inline-block; vertical-align: middle; margin-right: 10px; }
.page-login ul { display: block; }
.page-login ul li { display: block; margin-bottom: 20px; }
.page-login ul li i { font-size: 18px; margin-right: 5px; color: #777; }
.page-login ul li b { font-size: 18px; width: 60px; display: inline-block; }
.page-login ul li input { width: calc(100% - 85px); padding: 8px; font-size: 18px;}
.page-login p { margin-left: 75px; }
.page-login p a { color: #458cb9; }
.page-login p a:hover { color: #f00; }
.page-login span { display: block; text-align: center; margin-top: 30px; }
.page-register ul { display: block; }
.page-register ul li { display: block; margin-bottom: 20px; }
.page-register ul li i { font-size: 18px; margin-right: 5px; color: #777; }
.page-register ul li b { font-size: 18px; width: 60px; display: inline-block; }
.page-register ul li input { width: calc(100% - 85px); padding: 8px; }
.page-register span { display: block; text-align: center; margin-top: 30px; }
.page-test { text-align: center; }
.page-test .title { display: block; }
.page-test .title b { color: #2a9e4e; font-size: 24px; font-weight: bold; display: inline-block; }
.page-test .title b i { margin-right: 5px; }
.page-test .title p { display: inline-block; color: #999; font-size: 20px; font-weight: bold; }
.page-test .title b.blue { color: #1e94d2; }
.page-test .title b.red { color: #d42a3f; }
.page-test .topic { display: block; margin: 10px 0; }
.page-test .topic b, .page-test .topic p, .page-test .topic img { display: inline-block; vertical-align: middle; margin: 0 10px; }
.page-test .topic b { font-size: 20px; color: #fff; font-weight: bold; padding: 15px; -moz-border-radius: 50px; -webkit-border-radius: 50px; border-radius: 50px; background: #2488c7; }
.page-test .topic p { font-size: 32px; font-weight: bold; margin-left: 10px; }
.page-test .topic audio { margin: 10px 0; }
.page-test .answer { display: block; border: 1px solid #ccc; background: #fcfcfc; -moz-box-shadow: -3px 3px 3px rgba(0, 0, 0, 0.2); -webkit-box-shadow: -3px 3px 3px rgba(0, 0, 0, 0.2); box-shadow: -3px 3px 3px rgba(0, 0, 0, 0.2); text-align: center; padding: 5px; }
.page-test .answer input { border: none; border: 1px solid #f99; width: 100%; display: inline-block; vertical-align: middle; padding: 8px; background: none; font-size: 26px; color: #000; text-align: center; }
.page-test .answer i { font-size: 24px; font-weight: bold; margin: 10px; vertical-align: middle; }
.page-test .btn { display: block; margin-top: 5px; }
.page-complete { width: 100%; height: 300px; }
.page-complete td { font-size: 40px; font-weight: bold; vertical-align: middle; text-align: center; }
.albums { width: 100%; max-width: 1079px; margin: 0 auto; position: relative; padding-bottom: 80px; }
.albums span { display: block; position: absolute; top: 40px; left: 495px; }
.albums ul { margin-top: -115px; }
.albums ul img { display: block; }
.billboard-box { padding: 80px 50px 50px 50px; }
.billboard-box .pd-con { width: 100%; display: block; }
.billboard-box .pd-con .btn-nav { width: 72%; margin-bottom: 30px; display: block; margin-left: 20px; }
.billboard-box .pd-con .btn-nav .tabs { display: block; }
.billboard-box .pd-con .btn-nav .tabs li { display: inline-block; margin: 0 5px; }
.billboard-box .pd-con .btn-nav .tabs li a { padding: 10px 20px; color: #999; display: block; border: 1px solid #ccc; position: relative; }
.billboard-box .pd-con .btn-nav i { padding: 10px 20px; color: #999; display: block; border: 1px solid #ccc; position: relative; }
.billboard-box .pd-con .btn-nav .tabs li.active a { color: #fff; background: #84b12f; border: 1px solid #84b12f; }
.billboard-box .pd-con .btn-nav .tabs li.active a:before { position: absolute; top: 90%; left: calc(50% - 7px); content: " "; border: solid transparent; width: 0; height: 0; pointer-events: none; border-top-color: #84b12f; border-width: 14px; margin-left: -7px; z-index: 8; }
.billboard-box .pd-con .tab_container { width: 100%; display: block; }
.billboard-box .pd-con .tab_content { width: 100%; display: block; background: #f6b42c; padding: 20px 0; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; }
.billboard-box .pd-con2 { width: 100%; display: block; }
.billboard-box .pd-con2 .btn-nav2 { width: 72%; margin-bottom: 30px; display: block; margin-left: 20px; }
.billboard-box .pd-con2 .btn-nav2 .tabs2 { display: block; }
.billboard-box .pd-con2 .btn-nav2 .tabs2 li { display: inline-block; margin: 0 5px; }
.billboard-box .pd-con2 .btn-nav2 .tabs2 li a { padding: 5px 10px; color: #666; display: block; background: #ffe35a; border: 1px solid #ffe35a; position: relative; }
.billboard-box .pd-con2 .btn-nav2 .tabs2 li.active a { color: #fff; background: #8421b2; border: 1px solid #8421b2; }
.billboard-box .pd-con2 .tab_container2 { width: 100%; display: block; }
.billboard-box .pd-con2 .tab_content2 { width: 100%; display: block; background: #f6b42c; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; }
.billboard-box .ul-table { display: table; width: 72%; margin-left: 20px; }
.billboard-box .ul-table li { display: table-row; }
.billboard-box .ul-table li p { display: table-cell; width: 10%; padding: 8px; background: #fff; text-align: center; vertical-align: middle; }
.billboard-box .ul-table li p:nth-child(1) { width: 5%; }
.billboard-box .ul-table li:nth-child(odd) p { background: #efefef; }
.billboard-box .ul-table li:nth-child(1) p { background: none; color: #4d4d4d; font-weight: bold; font-size: 18px; text-align: center; }
footer { background: url(../images/top02.png?250422001); padding: 10px 0; }
footer .footer { width: 100%; max-width: 1200px; margin: 0 auto; display: flex; align-items: center;}
footer .footer span { font-size: 13px; color: #eee; }
footer .footer .copyright { margin: auto; }
footer .footer .unit { float: left; margin-left: 5%; color: #ccc; }
footer .footer .unit p { display: inline-block; margin-left: 20px; }
footer .footer .unit b { color: #ffe35a; margin-right: 5px; }
footer .footer .iware { float: right; color: #999; }
footer .footer .iware a { color: #999; }
@media (min-width: 1025px) and (max-width: 1199px) {
header .top-bar { max-width: 960px; }
header .header { max-width: 960px; margin: -6px auto 0 auto; }
header .header ul { padding: 50px 20px 30px 0; }
header .header ul li { margin-left: 25px; }
header .header ul li a { font-size: 16px; }
header .header ul li:before { left: -20px; top: 3px; }
.index-content { max-width: 960px; }
.index-content .text { width: 49px; font-size: 47px; line-height: 47px; padding-top: 50px; }
.index-content .content { width: 911px; }
.index-content .content ul .explain { float: none; width: 100%; }
.index-content .content ul .explain span { background: url(../images/index-pic.png?250422001) no-repeat 30px 30px; padding: 30px 60px 90px 260px; }
.index-content .content ul .method { float: none; width: 100%; -moz-border-radius: 0 0 5px 5px; -webkit-border-radius: 0 0 5px 5px; border-radius: 0 0 5px 5px; border: 2px solid #f7b52c; border-left: 2px solid #f7b52c; }
.index-content .content ul .method > span { display: block; position: absolute; z-index: 10; right: 60px; top: 105px; }
.index-content .content ul .method div { padding: 30px 60px 25px 150px; }
.index-content .content ul .method div span { left: 15px; top: 50px; }
footer .footer { max-width: 960px; padding: 0 2%; text-align: center; }
footer .footer span { display: inline-block; font-size: 12px; }
footer .footer .copyright { float: none; }
footer .footer .unit { float: none; margin-left: 10px; }
footer .footer .unit p { display: inline-block; margin-left: 5px; }
footer .footer .iware { float: none; margin-left: 5px; }
.container { max-width: 960px; padding: 0 1%; }
.container .content .loginbtn { position: static; display: inline-block; margin: 10px 0 0 10px; }
.container .content .loginbtn-shadow { display: none; }
.container .content .pic { display: block; position: static; width: 100%; text-align: center; }
.container .content .pic img { display: inline-block; }
.container .content .boxA { padding: 30px 20px; }
.container .content .boxB { width: 96%; margin: 30px auto; }
.container .content .boxTest { width: 96%; margin: 30px auto; }
.container .content .boxFinish { padding: 30px 20px; }
.action-box { padding: 30px; }
.container .content .picI { display: none; }
.albums { width: 96%; }
.albums span { top: -95px; left: 535px; }
.albums ul { margin-top: 20px; }
.action-box section .process { margin: 20px 0; text-align: center; }
.action-box section .process li { float: none; display: block; width: 100%; }
.action-box section .process li.box-I { width: 100%; height: auto; }
.action-box section .process li.box-I p { width: 100%; margin: 0 auto; padding: 10px 0; }
.action-box section .process li.box-I i { display: inline-block; }
.action-box section .process li.box-II { width: 100%; height: auto; }
.action-box section .process li.box-II p { width: 100%; margin: 0 auto; padding: 10px 0; }
.action-box section .process li.box-II i { display: inline-block; }
.action-box section .process li.box-III { width: 100%; height: auto; font-size: 15px; }
.action-box section .process li.box-III p { width: 100%; margin: 0 auto; padding: 10px 0; }
.action-box section .process li.box-III i { display: inline-block; }
.action-box section .process li.box-IV { width: 100%; height: auto; }
.action-box section .process li.box-IV p { width: 100%; margin: 0 auto; padding: 10px 0; }
.action-box section .process li.box-IV i { display: inline-block; }
.action-box section .process li.arrow { width: 100%; padding: 10px 0; -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -webkit-transform: rotate(90deg); transform: rotate(90deg); }
.action-box section .process li.arrow-down { width: 100%; padding: 10px 0; text-align: center; }
.action-box section .process li.arrow-down:before { display: none; }
.action-box section .process li.arrow-down:after { display: none; }
.billboard-box .ul-table { display: table; width: 96%; margin-left: 20px; }
}
@media (max-width: 1024px) { header .top-bar { max-width: 960px; }
header .header { max-width: 960px; margin: -6px auto 0 auto; }
header .header ul { padding: 50px 20px 30px 0; }
header .header ul li { margin-left: 25px; }
header .header ul li a { font-size: 16px; }
header .header ul li:before { left: -20px; top: 3px; }
.index-content { max-width: 960px; }
.index-content .text { width: 49px; font-size: 47px; line-height: 47px; padding-top: 360px; }
.index-content .content { width: 911px; }
.index-content .content ul .explain { float: none; width: 100%; }
.index-content .content ul .explain span { background: url(../images/index-pic.png?250422001) no-repeat 30px 30px; padding: 60px 60px 90px 260px; }
.index-content .content ul .method { float: none; width: 100%; -moz-border-radius: 0 0 5px 5px; -webkit-border-radius: 0 0 5px 5px; border-radius: 0 0 5px 5px; border: 2px solid #f7b52c; border-left: 2px solid #f7b52c; }
.index-content .content ul .method > span { display: block; position: absolute; z-index: 10; right: 60px; top: 105px; }
.index-content .content ul .method div { padding: 30px 60px 25px 150px; }
.index-content .content ul .method div span { left: 15px; top: 50px; }
footer .footer { max-width: 960px; padding: 0 2%; text-align: center; }
footer .footer span { display: inline-block; font-size: 12px; }
footer .footer .copyright { float: none; }
footer .footer .unit { float: none; margin-left: 10px; }
footer .footer .unit p { display: inline-block; margin-left: 5px; }
footer .footer .iware { float: none; margin-left: 5px; }
.container { max-width: 960px; padding: 0 1%; }
.container .content .loginbtn { position: static; display: inline-block; margin: 10px 0 0 10px; }
.container .content .loginbtn-shadow { display: none; }
.container .content .pic { display: block; position: static; width: 100%; text-align: center; }
.container .content .pic img { display: inline-block; }
.container .content .reciprocal { position: static; display: inline-block; margin: 10px 0 0 10px; }
.container .content .reciprocal-shadow { display: none; }
.container .content .boxA { padding: 30px 20px; }
.container .content .boxB { width: 96%; margin: 30px auto; }
.container .content .boxTest { width: 96%; margin: 30px auto; }
.container .content .boxFinish { padding: 30px 20px; }
.action-box { padding: 30px; }
.container .content .picI { display: none; }
.action-box section .process { margin: 20px 0; text-align: center; }
.action-box section .process li { float: none; display: block; width: 100%; }
.action-box section .process li.box-I { width: 100%; height: auto; }
.action-box section .process li.box-I p { width: 100%; margin: 0 auto; padding: 10px 0; }
.action-box section .process li.box-I i { display: inline-block; }
.action-box section .process li.box-II { width: 100%; height: auto; }
.action-box section .process li.box-II p { width: 100%; margin: 0 auto; padding: 10px 0; }
.action-box section .process li.box-II i { display: inline-block; }
.action-box section .process li.box-III { width: 100%; height: auto; font-size: 15px; }
.action-box section .process li.box-III p { width: 100%; margin: 0 auto; padding: 10px 0; }
.action-box section .process li.box-III i { display: inline-block; }
.action-box section .process li.box-IV { width: 100%; height: auto; }
.action-box section .process li.box-IV p { width: 100%; margin: 0 auto; padding: 10px 0; }
.action-box section .process li.box-IV i { display: inline-block; }
.action-box section .process li.arrow { width: 100%; padding: 10px 0; -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -webkit-transform: rotate(90deg); transform: rotate(90deg); }
.action-box section .process li.arrow-down { width: 100%; padding: 10px 0; text-align: center; }
.action-box section .process li.arrow-down:before { display: none; }
.action-box section .process li.arrow-down:after { display: none; }
.page-info .btn { width: 100%; }
.albums { width: 96%; }
.albums span { top: -95px; left: 535px; }
.albums ul { margin-top: 20px; }
.billboard-box { padding: 30px 20px 50px 20px; }
.billboard-box .pd-con .btn-nav { width: 100%; margin-left: 0px; }
.billboard-box .ul-table { width: 96%; margin-left: 2%; }
.billboard-box .pd-con .tab_content { padding: 10px 0 20px 0; } }
@media (min-width: 769px) and (max-width: 1023px) { body header { display: none; }
.Mobile { display: block; }
article { padding-top: 80px; }
.index-content .text { float: none; width: 100%; font-size: 47px; line-height: 47px; padding-top: 20px; text-align: center; margin-bottom: 20px; }
.index-content .content { float: none; width: 100%; padding: 0 1%; }
.container { padding: 60px 1% 20px 1%; text-align: center; }
.container .title { text-align: center; }
.action-box { padding: 20px; text-align: left; }
.action-box section { margin: 50px 0; padding: 30px 20px; }
.albums span { display: none; } }
@media (max-width: 768px) { body header { display: none; }
.Mobile { display: block; }
article { padding-top: 80px; }
.index-content .text { display: none; }
.index-content .content { float: none; width: 100%; padding: 0 1%; }
footer .footer .unit { margin-left: 0px; }
.container { padding: 60px 1% 20px 1%; text-align: center; }
.container .title { text-align: center; }
.action-box { padding: 20px; text-align: left; }
.action-box section { margin: 50px 0; padding: 30px 20px; }
.page-info, .page-info-II { text-align: left; }
.albums span { display: none; } }
@media (max-width: 640px) { .index-content .content ul .explain span { background: none; padding: 30px; }
.index-content .content ul .method > span { position: static; width: 100%; text-align: center; padding: 20px 0 10px 0; border-top: 2px solid #ccc; }
.action-box section .ul-table { display: block; border: none; }
.action-box section .ul-table li { display: block; margin-bottom: 20px; border: 1px solid #eee; border-bottom: none; }
.action-box section .ul-table li p { display: block; width: 100%; position: relative; border-right: none; border-color: #ccc; text-align: left; padding-left: 44%; }
.action-box section .ul-table li p:before { position: absolute; left: 10px; top: 5px; text-align: center; content: attr(data-title); display: inline-block; font-weight: bold; width: 40%; background: #5174ae; color: #fff; }
.action-box section .ul-table li p:nth-child(1) { width: 100%; }
.action-box section .ul-table li:first-child { display: none; }
.billboard-box .pd-con .btn-nav .tabs li { margin: 0 5px 10px 5px; } }
@media (min-width: 481px) and (max-width: 639px) { .container .title dl { margin: 10px auto 0 auto; line-height: 36px; }
.container .title dl dt p { font-size: 36px; }
.container .title dl dd { margin-left: 0px; font-size: 30px; } }
@media (max-width: 480px) { .container .title dl { margin: 10px auto 0 auto; line-height: 36px; }
.container .title dl dt p { font-size: 36px; }
.container .title dl dd { margin-left: 0px; font-size: 30px; } }
@media (max-width: 375px) { .container .title dl dt p { font-size: 34px; }
.container .title dl dd { font-size: 28px; } }
@media (max-width: 320px) { .container .title dl dt p { font-size: 30px; }
.container .title dl dd { font-size: 24px; } }
.btn-g { padding: 6px 25px; margin: 0 5px; border: none; color: #fff; cursor: pointer; background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzA4Yjk0YSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAwYWU0MSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #08b94a), color-stop(100%, #00ae41)); background-image: -moz-linear-gradient(top, #08b94a, #00ae41); background-image: -webkit-linear-gradient(top, #08b94a, #00ae41); background-image: linear-gradient(to bottom, #08b94a, #00ae41); -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; }
.btn-g:hover { color: #ff0; background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjEuMCIgeDI9IjAuNSIgeTI9IjAuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzA4Yjk0YSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAwYWU0MSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; background-image: -webkit-gradient(linear, 50% 100%, 50% 0%, color-stop(0%, #08b94a), color-stop(100%, #00ae41)); background-image: -moz-linear-gradient(bottom, #08b94a, #00ae41); background-image: -webkit-linear-gradient(bottom, #08b94a, #00ae41); background-image: linear-gradient(to top, #08b94a, #00ae41); }
.btn-gy { padding: 6px 25px; margin: 0 5px; border: none; color: #fff; cursor: pointer; background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2JjYmNiYyIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2E5YTlhOSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #bcbcbc), color-stop(100%, #a9a9a9)); background-image: -moz-linear-gradient(top, #bcbcbc, #a9a9a9); background-image: -webkit-linear-gradient(top, #bcbcbc, #a9a9a9); background-image: linear-gradient(to bottom, #bcbcbc, #a9a9a9); -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; }
.btn-gy:hover { color: #ff0; background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjEuMCIgeDI9IjAuNSIgeTI9IjAuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2JjYmNiYyIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2E5YTlhOSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; background-image: -webkit-gradient(linear, 50% 100%, 50% 0%, color-stop(0%, #bcbcbc), color-stop(100%, #a9a9a9)); background-image: -moz-linear-gradient(bottom, #bcbcbc, #a9a9a9); background-image: -webkit-linear-gradient(bottom, #bcbcbc, #a9a9a9); background-image: linear-gradient(to top, #bcbcbc, #a9a9a9); }
.btn_blue1 {
background-color: #006dcc;
color: #ffffff;
border-color: rgba(0, 0, 0, 0.1);
border-radius: 3px;
display: inline-block;
padding: 2px 4px;
font-size: 14px;
font-weight: bold;
line-height: 16px;
color: #ffffff;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
white-space: nowrap;
vertical-align: baseline;
}
.btn_blue_dis {
background-color: #666699;
color: #ffffff;
border-color: rgba(0, 0, 0, 0.1);
border-radius: 3px;
display: inline-block;
padding: 2px 4px;
font-size: 14px;
font-weight: bold;
line-height: 16px;
color: #ffffff;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
white-space: nowrap;
vertical-align: baseline;
}
.btn_green{
background-color: #356635;
color: #ffffff;
border-color: rgba(0, 0, 0, 0.1);
border-radius: 3px;
display: inline-block;
padding: 2px 4px;
font-size: 14px;
font-weight: bold;
line-height: 16px;
color: #ffffff;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
white-space: nowrap;
vertical-align: baseline;
}
.btn_red{
background-color: #d9534f;
color: #ffffff;
border-color: rgba(0, 0, 0, 0.1);
border-radius: 3px;
display: inline-block;
padding: 2px 4px;
font-size: 14px;
font-weight: bold;
line-height: 16px;
color: #ffffff;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
white-space: nowrap;
vertical-align: baseline;
}
.btn_ans_grey{
background-color: #cccccc;
color: #000;
border-color: rgba(0, 0, 0, 0.1);
border-radius: 10px;
display: inline-block;
padding: 15px 15px;
font-size: 24px;
font-weight: bold;
line-height: 26px;
color: #000;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
white-space: nowrap;
vertical-align: baseline;
margin: 5px;
width: 250px;
text-align: left;
}
.btn_ans_orange{
background-color: #f0ad4e;
color: #ffffff;
border-color: rgba(0, 0, 0, 0.1);
border-radius: 10px;
display: inline-block;
padding: 15px 15px;
font-size: 24px;
font-weight: bold;
line-height: 26px;
color: #ffffff;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
white-space: nowrap;
vertical-align: baseline;
margin: 5px;
width: 250px;
text-align: left;
}
.btn_ans_danger{
background-color: #d9534f;
border-color: #d43f3a;
color: #ffffff;
border-color: rgba(0, 0, 0, 0.1);
border-radius: 10px;
display: inline-block;
padding: 20px 22px;
font-size: 24px;
font-weight: bold;
line-height: 26px;
color: #ffffff;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
white-space: nowrap;
vertical-align: baseline;
margin: 5px;
width: 250px;
text-align: left;
}
.btn_ans_blue{
background-color: #006dcc;
border-color: #006dcc;
color: #ffffff;
border-color: rgba(0, 0, 0, 0.1);
border-radius: 10px;
display: inline-block;
padding: 20px 22px;
font-size: 24px;
font-weight: bold;
line-height: 26px;
color: #ffffff;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
white-space: nowrap;
vertical-align: baseline;
margin: 5px;
width: 250px;
text-align: left;
}
.btn_select_grey{
background-color: #cccccc;
color: #fff;
border-color: rgba(0, 0, 0, 0.1);
border-radius: 10px;
display: inline-block;
padding: 15px 5px;
font-size: 20px;
line-height: 20px;
color: #fff;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
white-space: nowrap;
vertical-align: baseline;
margin: 5px;
width: 130px;
}
.btn_select_green{
background-color: #2a9e4e;
color: #fff;
border-color: rgba(0, 0, 0, 0.1);
border-radius: 10px;
display: inline-block;
padding: 15px 5px;
font-size: 20px;
line-height: 20px;
color: #fff;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
white-space: nowrap;
vertical-align: baseline;
margin: 5px;
width: 130px;
}
.btn_select_danger{
background-color: #d9534f;
color: #fff;
border-color: rgba(0, 0, 0, 0.1);
border-radius: 10px;
display: inline-block;
padding: 15px 5px;
font-size: 20px;
line-height: 20px;
color: #fff;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
white-space: nowrap;
vertical-align: baseline;
margin: 5px;
width: 130px;
}
.btn-danger1 {
color: #fff;
background-color: #d9534f;
border-color: #d43f3a;
display: inline-block;
padding: 6px 12px;
margin-bottom: 0;
font-size: 14px;
font-weight: 400;
line-height: 1.42857143;
text-align: center;
white-space: nowrap;
vertical-align: middle;
-ms-touch-action: manipulation;
touch-action: manipulation;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-image: none;
border: 1px solid transparent;
border-radius: 4px;
}
.tables>tbody>tr>td, .tables>tbody>tr>th, .tables>tfoot>tr>td, .tables>tfoot>tr>th, .tables>thead>tr>td, .tables>thead>tr>th {
padding: 4px;
line-height: 1.42857143;
vertical-align: top;
border: 1px solid #ccc;
border-top: 2px solid #bbb;
}
.table {
width: 100%;
max-width: 100%;
margin-top: 5px;
margin-bottom: 5px;
}
.table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td, .table>tfoot>tr>th, .table>thead>tr>td, .table>thead>tr>th {
padding: 4px;
line-height: 1.42857143;
vertical-align: top;
border-top: 1px solid #ddd
}
.table>thead>tr>th {
vertical-align: bottom;
border-bottom: 2px solid #ddd
}
.table>caption+thead>tr:first-child>td, .table>caption+thead>tr:first-child>th, .table>colgroup+thead>tr:first-child>td, .table>colgroup+thead>tr:first-child>th, .table>thead:first-child>tr:first-child>td, .table>thead:first-child>tr:first-child>th {
border-top: 0
}
.table>tbody+tbody {
border-top: 2px solid #ddd
}
.table .table {
background-color: #fff
}
.table-condensed>tbody>tr>td, .table-condensed>tbody>tr>th, .table-condensed>tfoot>tr>td, .table-condensed>tfoot>tr>th, .table-condensed>thead>tr>td, .table-condensed>thead>tr>th {
padding: 5px
}
.table-bordered {
border: 1px solid #ddd
}
.table-bordered>tbody>tr>td, .table-bordered>tbody>tr>th, .table-bordered>tfoot>tr>td, .table-bordered>tfoot>tr>th, .table-bordered>thead>tr>td, .table-bordered>thead>tr>th {
border: 0px solid #ddd
}
.table-bordered>thead>tr>td, .table-bordered>thead>tr>th {
border-bottom-width: 2px
}
.table-striped>tbody>tr:nth-of-type(odd) {
background-color: #f9f9f9
}
.table-hover>tbody>tr:hover {
background-color: #f5f5f5
}
table col[class*=col-] {
position: static;
display: table-column;
float: none
}
table td[class*=col-], table th[class*=col-] {
position: static;
display: table-cell;
float: none
}
.table>tbody>tr.active>td, .table>tbody>tr.active>th, .table>tbody>tr>td.active, .table>tbody>tr>th.active, .table>tfoot>tr.active>td, .table>tfoot>tr.active>th, .table>tfoot>tr>td.active, .table>tfoot>tr>th.active, .table>thead>tr.active>td, .table>thead>tr.active>th, .table>thead>tr>td.active, .table>thead>tr>th.active {
background-color: #f5f5f5
}
.table-hover>tbody>tr.active:hover>td, .table-hover>tbody>tr.active:hover>th, .table-hover>tbody>tr:hover>.active, .table-hover>tbody>tr>td.active:hover, .table-hover>tbody>tr>th.active:hover {
background-color: #e8e8e8
}
.table>tbody>tr.success>td, .table>tbody>tr.success>th, .table>tbody>tr>td.success, .table>tbody>tr>th.success, .table>tfoot>tr.success>td, .table>tfoot>tr.success>th, .table>tfoot>tr>td.success, .table>tfoot>tr>th.success, .table>thead>tr.success>td, .table>thead>tr.success>th, .table>thead>tr>td.success, .table>thead>tr>th.success {
background-color: #dff0d8
}
.table-hover>tbody>tr.success:hover>td, .table-hover>tbody>tr.success:hover>th, .table-hover>tbody>tr:hover>.success, .table-hover>tbody>tr>td.success:hover, .table-hover>tbody>tr>th.success:hover {
background-color: #d0e9c6
}
.table>tbody>tr.info>td, .table>tbody>tr.info>th, .table>tbody>tr>td.info, .table>tbody>tr>th.info, .table>tfoot>tr.info>td, .table>tfoot>tr.info>th, .table>tfoot>tr>td.info, .table>tfoot>tr>th.info, .table>thead>tr.info>td, .table>thead>tr.info>th, .table>thead>tr>td.info, .table>thead>tr>th.info {
background-color: #d9edf7
}
.table-hover>tbody>tr.info:hover>td, .table-hover>tbody>tr.info:hover>th, .table-hover>tbody>tr:hover>.info, .table-hover>tbody>tr>td.info:hover, .table-hover>tbody>tr>th.info:hover {
background-color: #c4e3f3
}
.table>tbody>tr.warning>td, .table>tbody>tr.warning>th, .table>tbody>tr>td.warning, .table>tbody>tr>th.warning, .table>tfoot>tr.warning>td, .table>tfoot>tr.warning>th, .table>tfoot>tr>td.warning, .table>tfoot>tr>th.warning, .table>thead>tr.warning>td, .table>thead>tr.warning>th, .table>thead>tr>td.warning, .table>thead>tr>th.warning {
background-color: #fcf8e3
}
.table-hover>tbody>tr.warning:hover>td, .table-hover>tbody>tr.warning:hover>th, .table-hover>tbody>tr:hover>.warning, .table-hover>tbody>tr>td.warning:hover, .table-hover>tbody>tr>th.warning:hover {
background-color: #faf2cc
}
.table>tbody>tr.danger>td, .table>tbody>tr.danger>th, .table>tbody>tr>td.danger, .table>tbody>tr>th.danger, .table>tfoot>tr.danger>td, .table>tfoot>tr.danger>th, .table>tfoot>tr>td.danger, .table>tfoot>tr>th.danger, .table>thead>tr.danger>td, .table>thead>tr.danger>th, .table>thead>tr>td.danger, .table>thead>tr>th.danger {
background-color: #f2dede
}
.table-hover>tbody>tr.danger:hover>td, .table-hover>tbody>tr.danger:hover>th, .table-hover>tbody>tr:hover>.danger, .table-hover>tbody>tr>td.danger:hover, .table-hover>tbody>tr>th.danger:hover {
background-color: #ebcccc
}
.table-responsive {
min-height: .01%;
overflow-x: auto
}
@media screen and (max-width:767px) {
.table-responsive {
width: 100%;
margin-bottom: 15px;
overflow-y: hidden;
-ms-overflow-style: -ms-autohiding-scrollbar;
border: 1px solid #ddd
}
.table-responsive>.table {
margin-bottom: 0
}
.table-responsive>.table>tbody>tr>td, .table-responsive>.table>tbody>tr>th, .table-responsive>.table>tfoot>tr>td, .table-responsive>.table>tfoot>tr>th, .table-responsive>.table>thead>tr>td, .table-responsive>.table>thead>tr>th {
white-space: nowrap
}
.table-responsive>.table-bordered {
border: 0
}
.table-responsive>.table-bordered>tbody>tr>td:first-child, .table-responsive>.table-bordered>tbody>tr>th:first-child, .table-responsive>.table-bordered>tfoot>tr>td:first-child, .table-responsive>.table-bordered>tfoot>tr>th:first-child, .table-responsive>.table-bordered>thead>tr>td:first-child, .table-responsive>.table-bordered>thead>tr>th:first-child {
border-left: 0
}
.table-responsive>.table-bordered>tbody>tr>td:last-child, .table-responsive>.table-bordered>tbody>tr>th:last-child, .table-responsive>.table-bordered>tfoot>tr>td:last-child, .table-responsive>.table-bordered>tfoot>tr>th:last-child, .table-responsive>.table-bordered>thead>tr>td:last-child, .table-responsive>.table-bordered>thead>tr>th:last-child {
border-right: 0
}
.table-responsive>.table-bordered>tbody>tr:last-child>td, .table-responsive>.table-bordered>tbody>tr:last-child>th, .table-responsive>.table-bordered>tfoot>tr:last-child>td, .table-responsive>.table-bordered>tfoot>tr:last-child>th {
border-bottom: 0
}
}
.form-control {
display: block;
width: 100%;
padding: .5rem .75rem;
font-size: 1rem;
line-height: 1.25;
color: #464a4c;
background-color: #fff;
background-image: none;
-webkit-background-clip: padding-box;
background-clip: padding-box;
border: 1px solid rgba(0, 0, 0, .15);
border-radius: .25rem;
-webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
-o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s, -webkit-box-shadow ease-in-out .15s
}
.form-control::-ms-expand {
background-color: transparent;
border: 0
}
.form-control:focus {
color: #464a4c;
background-color: #fff;
border-color: #5cb3fd;
outline: 0
}
.form-control::-webkit-input-placeholder {
color: #636c72;
opacity: 1
}
.form-control::-moz-placeholder {
color: #636c72;
opacity: 1
}
.form-control:-ms-input-placeholder {
color: #636c72;
opacity: 1
}
.form-control::placeholder {
color: #636c72;
opacity: 1
}
.form-control:disabled, .form-control[readonly] {
background-color: #eceeef;
opacity: 1
}
.form-control:disabled {
cursor: not-allowed
}
select.form-control:not([size]):not([multiple]) {
height: calc(2.25rem + 2px)
}
select.form-control:focus::-ms-value {
color: #464a4c;
background-color: #fff
}
.form-control-file, .form-control-range {
display: block
}
.col-form-label {
padding-top: calc(.5rem - 1px * 2);
padding-bottom: calc(.5rem - 1px * 2);
margin-bottom: 0
}
.col-form-label-lg {
padding-top: calc(.75rem - 1px * 2);
padding-bottom: calc(.75rem - 1px * 2);
font-size: 1.25rem
}
.col-form-label-sm {
padding-top: calc(.25rem - 1px * 2);
padding-bottom: calc(.25rem - 1px * 2);
font-size: .875rem
}
.col-form-legend {
padding-top: .5rem;
padding-bottom: .5rem;
margin-bottom: 0;
font-size: 1rem
}
.form-control-static {
padding-top: .5rem;
padding-bottom: .5rem;
margin-bottom: 0;
line-height: 1.25;
border: solid transparent;
border-width: 1px 0
}
.form-control-static.form-control-lg, .form-control-static.form-control-sm, .input-group-lg>.form-control-static.form-control, .input-group-lg>.form-control-static.input-group-addon, .input-group-lg>.input-group-btn>.form-control-static.btn, .input-group-sm>.form-control-static.form-control, .input-group-sm>.form-control-static.input-group-addon, .input-group-sm>.input-group-btn>.form-control-static.btn {
padding-right: 0;
padding-left: 0
}
.form-control-sm, .input-group-sm>.form-control, .input-group-sm>.input-group-addon, .input-group-sm>.input-group-btn>.btn {
padding: .25rem .5rem;
font-size: .875rem;
border-radius: .2rem
}
.input-group-sm>.input-group-btn>select.btn:not([size]):not([multiple]), .input-group-sm>select.form-control:not([size]):not([multiple]), .input-group-sm>select.input-group-addon:not([size]):not([multiple]), select.form-control-sm:not([size]):not([multiple]) {
height: 1.8125rem
}
.form-control-lg, .input-group-lg>.form-control, .input-group-lg>.input-group-addon, .input-group-lg>.input-group-btn>.btn {
padding: .75rem 1.5rem;
font-size: 1.25rem;
border-radius: .3rem
}
.input-group-lg>.input-group-btn>select.btn:not([size]):not([multiple]), .input-group-lg>select.form-control:not([size]):not([multiple]), .input-group-lg>select.input-group-addon:not([size]):not([multiple]), select.form-control-lg:not([size]):not([multiple]) {
height: 3.166667rem
}
.form-group {
margin-bottom: 1rem
}
.form-text {
display: block;
margin-top: .25rem
}
.form-check {
position: relative;
display: block;
margin-bottom: .5rem
}
.form-check.disabled .form-check-label {
color: #636c72;
cursor: not-allowed
}
.form-check-label {
padding-left: 1.25rem;
margin-bottom: 0;
cursor: pointer
}
.form-check-input {
position: absolute;
margin-top: .25rem;
margin-left: -1.25rem
}
.form-check-input:only-child {
position: static
}
.form-check-inline {
display: inline-block
}
.form-check-inline .form-check-label {
vertical-align: middle
}
.form-check-inline+.form-check-inline {
margin-left: .75rem
}
.form-control-feedback {
margin-top: .25rem
}
.form-control-danger, .form-control-success, .form-control-warning {
padding-right: 2.25rem;
background-repeat: no-repeat;
background-position: center right .5625rem;
-webkit-background-size: 1.125rem 1.125rem;
background-size: 1.125rem 1.125rem
}
.has-success .col-form-label, .has-success .custom-control, .has-success .form-check-label, .has-success .form-control-feedback, .has-success .form-control-label {
color: #5cb85c
}
.has-success .form-control {
border-color: #5cb85c
}
.has-success .input-group-addon {
color: #5cb85c;
border-color: #5cb85c;
background-color: #eaf6ea
}
.has-success .form-control-success {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%235cb85c' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3E%3C/svg%3E")
}
.has-warning .col-form-label, .has-warning .custom-control, .has-warning .form-check-label, .has-warning .form-control-feedback, .has-warning .form-control-label {
color: #f0ad4e
}
.has-warning .form-control {
border-color: #f0ad4e
}
.has-warning .input-group-addon {
color: #f0ad4e;
border-color: #f0ad4e;
background-color: #fff
}
.has-warning .form-control-warning {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%23f0ad4e' d='M4.4 5.324h-.8v-2.46h.8zm0 1.42h-.8V5.89h.8zM3.76.63L.04 7.075c-.115.2.016.425.26.426h7.397c.242 0 .372-.226.258-.426C6.726 4.924 5.47 2.79 4.253.63c-.113-.174-.39-.174-.494 0z'/%3E%3C/svg%3E")
}
.has-danger .col-form-label, .has-danger .custom-control, .has-danger .form-check-label, .has-danger .form-control-feedback, .has-danger .form-control-label {
color: #d9534f
}
.has-danger .form-control {
border-color: #d9534f
}
.has-danger .input-group-addon {
color: #d9534f;
border-color: #d9534f;
background-color: #fdf7f7
}
.has-danger .form-control-danger {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23d9534f' viewBox='-2 -2 7 7'%3E%3Cpath stroke='%23d9534f' d='M0 0l3 3m0-3L0 3'/%3E%3Ccircle r='.5'/%3E%3Ccircle cx='3' r='.5'/%3E%3Ccircle cy='3' r='.5'/%3E%3Ccircle cx='3' cy='3' r='.5'/%3E%3C/svg%3E")
}
.form-inline {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-flow: row wrap;
-ms-flex-flow: row wrap;
flex-flow: row wrap;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center
}
.form-inline .form-check {
width: 100%
}
@media (min-width:576px) {
.form-inline label {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
margin-bottom: 0
}
.form-inline .form-group {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-flex: 0;
-webkit-flex: 0 0 auto;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
-webkit-flex-flow: row wrap;
-ms-flex-flow: row wrap;
flex-flow: row wrap;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
margin-bottom: 0
}
.form-inline .form-control {
display: inline-block;
width: auto;
vertical-align: middle
}
.form-inline .form-control-static {
display: inline-block
}
.form-inline .input-group {
width: auto
}
.form-inline .form-control-label {
margin-bottom: 0;
vertical-align: middle
}
.form-inline .form-check {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
width: auto;
margin-top: 0;
margin-bottom: 0
}
.form-inline .form-check-label {
padding-left: 0
}
.form-inline .form-check-input {
position: relative;
margin-top: 0;
margin-right: .25rem;
margin-left: 0
}
.form-inline .custom-control {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
padding-left: 0
}
.form-inline .custom-control-indicator {
position: static;
display: inline-block;
margin-right: .25rem;
vertical-align: text-bottom
}
.form-inline .has-feedback .form-control-feedback {
top: 0
}
}
.btn {
display: inline-block;
font-weight: 400;
line-height: 1.25;
text-align: center;
white-space: nowrap;
vertical-align: middle;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
border: 1px solid transparent;
padding: .5rem 1rem;
font-size: 1rem;
border-radius: .25rem;
-webkit-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out
}
.btn:focus, .btn:hover {
text-decoration: none
}
.btn.focus, .btn:focus {
outline: 0;
-webkit-box-shadow: 0 0 0 2px rgba(2, 117, 216, .25);
box-shadow: 0 0 0 2px rgba(2, 117, 216, .25)
}
.btn.disabled, .btn:disabled {
cursor: not-allowed;
opacity: .65
}
.btn.active, .btn:active {
background-image: none
}
a.btn.disabled, fieldset[disabled] a.btn {
pointer-events: none
}
.btn-default {
color: #333;
background-color: #fff;
border-color: #555
}
.btn-default:hover {
color: #333;
background-color: #e6e6e6;
border-color: #adadad
}
.btn-default.focus, .btn-primary:focus {
-webkit-box-shadow: 0 0 0 2px rgba(2, 117, 216, .5);
box-shadow: 0 0 0 2px rgba(2, 117, 216, .5)
}
.btn-default.disabled, .btn-primary:disabled {
background-color: #fff;
border-color: #ccc
}
.btn-default.active, .btn-default:active, .show>.btn-default.dropdown-toggle {
color: #333;
background-color: #d4d4d4;
background-image: none;
border-color: #8c8c8c
}
.btn-outline-default {
color: #333;
background-image: none;
background-color: transparent;
border-color: #333
}
.btn-outline-default:hover {
color: #333;
background-color: #ccc;
border-color: #333
}
.btn-outline-default.focus, .btn-outline-default:focus {
-webkit-box-shadow: 0 0 0 2px rgba(2, 117, 216, .5);
box-shadow: 0 0 0 2px rgba(2, 117, 216, .5)
}
.btn-outline-default.disabled, .btn-outline-default:disabled {
color: #000;
background-color: transparent
}
.btn-outline-default.active, .btn-outline-default:active, .show>.btn-outline-default.dropdown-toggle {
color: #333;
background-color: #fff;
border-color: #555
}
.btn-primary {
color: #fff;
background-color: #0275d8;
border-color: #0275d8
}
.btn-primary:hover {
color: #fff;
background-color: #025aa5;
border-color: #01549b
}
.btn-primary.focus, .btn-primary:focus {
-webkit-box-shadow: 0 0 0 2px rgba(2, 117, 216, .5);
box-shadow: 0 0 0 2px rgba(2, 117, 216, .5)
}
.btn-primary.disabled, .btn-primary:disabled {
background-color: #0275d8;
border-color: #0275d8
}
.btn-primary.active, .btn-primary:active, .show>.btn-primary.dropdown-toggle {
color: #fff;
background-color: #025aa5;
background-image: none;
border-color: #01549b
}
.btn-secondary {
color: #292b2c;
background-color: #fff;
border-color: #ccc
}
.btn-secondary:hover {
color: #292b2c;
background-color: #e6e6e6;
border-color: #adadad
}
.btn-secondary.focus, .btn-secondary:focus {
-webkit-box-shadow: 0 0 0 2px rgba(204, 204, 204, .5);
box-shadow: 0 0 0 2px rgba(204, 204, 204, .5)
}
.btn-secondary.disabled, .btn-secondary:disabled {
background-color: #fff;
border-color: #ccc
}
.btn-secondary.active, .btn-secondary:active, .show>.btn-secondary.dropdown-toggle {
color: #292b2c;
background-color: #e6e6e6;
background-image: none;
border-color: #adadad
}
.btn-info {
color: #fff;
background-color: #5bc0de;
border-color: #5bc0de
}
.btn-info:hover {
color: #fff;
background-color: #31b0d5;
border-color: #2aabd2
}
.btn-info.focus, .btn-info:focus {
-webkit-box-shadow: 0 0 0 2px rgba(91, 192, 222, .5);
box-shadow: 0 0 0 2px rgba(91, 192, 222, .5)
}
.btn-info.disabled, .btn-info:disabled {
background-color: #5bc0de;
border-color: #5bc0de
}
.btn-info.active, .btn-info:active, .show>.btn-info.dropdown-toggle {
color: #fff;
background-color: #31b0d5;
background-image: none;
border-color: #2aabd2
}
.btn-success {
color: #fff;
background-color: #5cb85c;
border-color: #5cb85c
}
.btn-success:hover {
color: #fff;
background-color: #449d44;
border-color: #419641
}
.btn-success.focus, .btn-success:focus {
-webkit-box-shadow: 0 0 0 2px rgba(92, 184, 92, .5);
box-shadow: 0 0 0 2px rgba(92, 184, 92, .5)
}
.btn-success.disabled, .btn-success:disabled {
background-color: #5cb85c;
border-color: #5cb85c
}
.btn-success.active, .btn-success:active, .show>.btn-success.dropdown-toggle {
color: #fff;
background-color: #449d44;
background-image: none;
border-color: #419641
}
.btn-warning {
color: #fff;
background-color: #f0ad4e;
border-color: #f0ad4e
}
.btn-warning:hover {
color: #fff;
background-color: #ec971f;
border-color: #eb9316
}
.btn-warning.focus, .btn-warning:focus {
-webkit-box-shadow: 0 0 0 2px rgba(240, 173, 78, .5);
box-shadow: 0 0 0 2px rgba(240, 173, 78, .5)
}
.btn-warning.disabled, .btn-warning:disabled {
background-color: #f0ad4e;
border-color: #f0ad4e
}
.btn-warning.active, .btn-warning:active, .show>.btn-warning.dropdown-toggle {
color: #fff;
background-color: #ec971f;
background-image: none;
border-color: #eb9316
}
.btn-danger {
color: #fff;
background-color: #d9534f;
border-color: #d9534f
}
.btn-danger:hover {
color: #fff;
background-color: #c9302c;
border-color: #c12e2a
}
.btn-danger.focus, .btn-danger:focus {
-webkit-box-shadow: 0 0 0 2px rgba(217, 83, 79, .5);
box-shadow: 0 0 0 2px rgba(217, 83, 79, .5)
}
.btn-danger.disabled, .btn-danger:disabled {
background-color: #d9534f;
border-color: #d9534f
}
.btn-danger.active, .btn-danger:active, .show>.btn-danger.dropdown-toggle {
color: #fff;
background-color: #c9302c;
background-image: none;
border-color: #c12e2a
}
.btn-outline-primary {
color: #0275d8;
background-image: none;
background-color: transparent;
border-color: #0275d8
}
.btn-outline-primary:hover {
color: #fff;
background-color: #0275d8;
border-color: #0275d8
}
.btn-outline-primary.focus, .btn-outline-primary:focus {
-webkit-box-shadow: 0 0 0 2px rgba(2, 117, 216, .5);
box-shadow: 0 0 0 2px rgba(2, 117, 216, .5)
}
.btn-outline-primary.disabled, .btn-outline-primary:disabled {
color: #0275d8;
background-color: transparent
}
.btn-outline-primary.active, .btn-outline-primary:active, .show>.btn-outline-primary.dropdown-toggle {
color: #fff;
background-color: #0275d8;
border-color: #0275d8
}
.btn-outline-secondary {
color: #ccc;
background-image: none;
background-color: transparent;
border-color: #ccc
}
.btn-outline-secondary:hover {
color: #fff;
background-color: #ccc;
border-color: #ccc
}
.btn-outline-secondary.focus, .btn-outline-secondary:focus {
-webkit-box-shadow: 0 0 0 2px rgba(204, 204, 204, .5);
box-shadow: 0 0 0 2px rgba(204, 204, 204, .5)
}
.btn-outline-secondary.disabled, .btn-outline-secondary:disabled {
color: #ccc;
background-color: transparent
}
.btn-outline-secondary.active, .btn-outline-secondary:active, .show>.btn-outline-secondary.dropdown-toggle {
color: #fff;
background-color: #ccc;
border-color: #ccc
}
.btn-outline-info {
color: #5bc0de;
background-image: none;
background-color: transparent;
border-color: #5bc0de
}
.btn-outline-info:hover {
color: #fff;
background-color: #5bc0de;
border-color: #5bc0de
}
.btn-outline-info.focus, .btn-outline-info:focus {
-webkit-box-shadow: 0 0 0 2px rgba(91, 192, 222, .5);
box-shadow: 0 0 0 2px rgba(91, 192, 222, .5)
}
.btn-outline-info.disabled, .btn-outline-info:disabled {
color: #5bc0de;
background-color: transparent
}
.btn-outline-info.active, .btn-outline-info:active, .show>.btn-outline-info.dropdown-toggle {
color: #fff;
background-color: #5bc0de;
border-color: #5bc0de
}
.btn-outline-success {
color: #5cb85c;
background-image: none;
background-color: transparent;
border-color: #5cb85c
}
.btn-outline-success:hover {
color: #fff;
background-color: #5cb85c;
border-color: #5cb85c
}
.btn-outline-success.focus, .btn-outline-success:focus {
-webkit-box-shadow: 0 0 0 2px rgba(92, 184, 92, .5);
box-shadow: 0 0 0 2px rgba(92, 184, 92, .5)
}
.btn-outline-success.disabled, .btn-outline-success:disabled {
color: #5cb85c;
background-color: transparent
}
.btn-outline-success.active, .btn-outline-success:active, .show>.btn-outline-success.dropdown-toggle {
color: #fff;
background-color: #5cb85c;
border-color: #5cb85c
}
.btn-outline-warning {
color: #f0ad4e;
background-image: none;
background-color: transparent;
border-color: #f0ad4e
}
.btn-outline-warning:hover {
color: #fff;
background-color: #f0ad4e;
border-color: #f0ad4e
}
.btn-outline-warning.focus, .btn-outline-warning:focus {
-webkit-box-shadow: 0 0 0 2px rgba(240, 173, 78, .5);
box-shadow: 0 0 0 2px rgba(240, 173, 78, .5)
}
.btn-outline-warning.disabled, .btn-outline-warning:disabled {
color: #f0ad4e;
background-color: transparent
}
.btn-outline-warning.active, .btn-outline-warning:active, .show>.btn-outline-warning.dropdown-toggle {
color: #fff;
background-color: #f0ad4e;
border-color: #f0ad4e
}
.btn-outline-danger {
color: #d9534f;
background-image: none;
background-color: transparent;
border-color: #d9534f
}
.btn-outline-danger:hover {
color: #fff;
background-color: #d9534f;
border-color: #d9534f
}
.btn-outline-danger.focus, .btn-outline-danger:focus {
-webkit-box-shadow: 0 0 0 2px rgba(217, 83, 79, .5);
box-shadow: 0 0 0 2px rgba(217, 83, 79, .5)
}
.btn-outline-danger.disabled, .btn-outline-danger:disabled {
color: #d9534f;
background-color: transparent
}
.btn-outline-danger.active, .btn-outline-danger:active, .show>.btn-outline-danger.dropdown-toggle {
color: #fff;
background-color: #d9534f;
border-color: #d9534f
}
.btn-link {
font-weight: 400;
color: #0275d8;
border-radius: 0
}
.btn-link, .btn-link.active, .btn-link:active, .btn-link:disabled {
background-color: transparent
}
.btn-link, .btn-link:active, .btn-link:focus {
border-color: transparent
}
.btn-link:hover {
border-color: transparent
}
.btn-link:focus, .btn-link:hover {
color: #014c8c;
text-decoration: underline;
background-color: transparent
}
.btn-link:disabled {
color: #636c72
}
.btn-link:disabled:focus, .btn-link:disabled:hover {
text-decoration: none
}
.btn-group-lg>.btn, .btn-lg {
padding: .75rem 1.5rem;
font-size: 1.25rem;
border-radius: .3rem
}
.btn-group-sm>.btn, .btn-sm {
padding: .25rem .5rem;
font-size: .875rem;
border-radius: .2rem
}
.btn-group-xs>.btn, .btn-xs {
padding: 1px 5px;
font-size: 12px;
line-height: 1.5;
border-radius: 3px
}
.btn-block {
display: block;
width: 100%
}
.btn-block+.btn-block {
margin-top: .5rem
}
input[type=button].btn-block, input[type=reset].btn-block, input[type=submit].btn-block {
width: 100%
}
.btn-circle {
width: 30px;
height: 30px;
padding: 6px 0;
border-radius: 15px;
text-align: center;
font-size: 12px;
line-height: 1.428571429;
}
.btn-circle-lg{
width: 40px;
height: 40px;
padding: 10px 0px;
border-radius: 20px;
font-size: 16px;
line-height: 1.33;
}