@charset "utf-8";
html, body, div, applet, object, iframe, h1, h2, h3, h4, h5, h6, dl, dt, dd, ol, ul, li, fieldset, form, label, input, button, select, textarea, img, table, th, td, article, aside, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video{ padding:0; margin:0; border: 0 none; font-family:"Roboto",Arial,sans-serif}
article, aside, footer, header, menu, nav, section { display:block}
html{ font-size:100%}
body{ font-size:1em; line-height:1.5; width:100%; height:100%; background:#eeeeee; position:relative; color:#333; -moz-osx-font-smoothing:grayscale; -webkit-font-smoothing:antialiased; overflow-x:hidden}
*{ -moz-box-sizing:border-box; -webkit-box-sizing:border-box; -o-box-sizing:border-box; -ms-box-sizing:border-box; box-sizing:border-box;}
@-webkit-viewport{ width:device-width }
@-moz-viewport{ width:device-width }
@-ms-viewport{ width:device-width }
@-o-viewport{ width:device-width }
@viewport { width: device-width }
:-moz-placeholder,::-moz-placeholder { color:#aaa; text-overflow:ellipsis}
::-ms-input-placeholder { color:#aaa; text-overflow:ellipsis}
::-webkit-input-placeholder { color:#aaa; text-overflow:ellipsis}
a{ color:#333; text-decoration:none; cursor:pointer; outline:none}
a:hover{ color:#33691e}
.clear{ clear:both}
.clear:after{ content:" "; clear:both; display:block; height:0}
p, dl, ol{ margin:0 0 16px 0}

button, img{ font-size:1em; vertical-align:middle; outline:none}
button{ cursor:pointer}

.wrap{ background:#fff; border-radius:2px; box-shadow:0 3px 4px 0 rgba(0,0,0,0.14),0 3px 3px -2px rgba(0,0,0,0.12),0 1px 8px 0 rgba(0,0,0,0.2); border-radius: 2px; margin:50px auto; width:720px; padding-bottom:2px}

.basics{ width: 100%;}
.basics_img{ float:left; margin:20px 25px 0 25px;}
.basics_info{ padding-top:25px; float:left}
.basics_info h1{ color:#212121; font-size:30px; font-weight:300; line-height:35px; margin-bottom:10px}
.derive{ color:#33691e; font-weight:700; font-size:14px}
.derive span{ margin-right:1em}

.setup_btn{ padding:16px 50px 20px 50px}
a.gp_btn, a.lc_btn{ background-color:#689f38; display:inline-block; color:#fff; padding:0 26px; height:48px; line-height:48px; border-radius:4px; font-size:14px; margin:0 14px 14px 0; font-weight:bold}
a.gp_btn i, a.lc_btn i{ margin-right:6px}
.setup_btn .tips{ font-size:14px; color:#666; margin-top:-10px}


.explain, .variety, .other_info{ font-size:14px; line-height:24px; margin:30px 0; padding:0 50px}

.line{ border-bottom:1px solid #eaeaea; margin:30px 25px}

h2{ color:#212121; display:inline-block; font-size:14px; font-weight:normal}
.other_info ul{ margin-top:0.5em}
.other_info ul li{ float:left; list-style:none; width:33.333%; margin:5px 0}
.other_info ul li a:hover{ text-decoration:underline}


@media (max-width:768px){
.wrap{ max-width:inherit; width:90%;}
.basics_img{ margin:0}
.basics_img img{ transform:scale(0.8)}
.setup_btn{ padding:0 42px 26px 42px; }
.explain, .variety, .other_info{ padding:0 42px}
}
@media (max-width:540px){ 
.explain, .variety, .other_info{ padding:0 30px}
.other_info ul li{ width:50%;}

}