:root {
	--hl1:#bdcd00;		--hl2:#00294a;
	--bg1:var(--hl1);	--bg1f:var(--hl2);
	--bg2:var(--hl2);	--bg2f:var(--hl1);
	--bg1l:#eef1cf;#e6ec9f;		--bg1lf:var(--hl2);
}

html, body {background:var(--bg1l);color:var(--bg1lf);margin:0;padding:0;font-family: 'Exo','Rajdhani',sans-serif;font-weight:300;font-size:1.1rem}
body * {color:inherit;font-family:inherit;}
a {text-decoration:none}
#errorpage {width:80%;margin:1em auto;overflow:auto;}

.head,.share {background:var(--bg2);color:var(--bg2f);padding:.5em;text-align:center;}
.head {position:fixed;top:0;left:0;right:0;z-index:100;font-weight:100;font-size:1.2em;}
.head b{font-weight:600}
.head aside {position:absolute;right:.5em;top:.5em}
.head aside a {background:var(--bg1);color:var(--bg1f);font-size:.8em;width:6em;padding:2px 4px;border-radius:4px}
.head>a {position:absolute;left:.5em;top:.5em;color:var(--hl1);}
@media only screen and (max-width:380px) {
	.head>div {text-align:left;padding-left:1.8rem}
}

.head+div:not(.title), .heada+div:not(.title){padding-top:1.2rem}

.share {font-weight:bold;padding:1em;}
.share .list {display:flex;justify-content: center;space-around;Margin:2em auto;flex-flow:wrap}
.share .list >div{padding:1em .7em 0}
.share .list >div *{vertical-align:sub}

.title {margin:3em auto 1em;width:90vw;position:relative;height:83vw;overflow:hidden}
.title>div {border-radius:50%;height:60vw;width:60vw;positioN:absolute;transition:all .8s}
.title .bubble1 {background:var(--bg1);}
.title .bubble2 {background:url(/pic/tool/liste.jpg) 50% 50% no-repeat;background-size:cover;}
.title .txt {color:var(--hl2);transform:rotate(10deg);font-size:8vw;text-shadow:0 0 1px #bdcd00;font-weight:800;text-align:center}
	.title .txt span {display:inline-block;font-size:35%}

.title.v1 .bubble1, .title.v1 .txt {left:30vw;top:0}
.title.v1 .bubble2 {left:0;top:20vw}
.title.v2 .bubble1, .title.v2 .txt {left:0;top:20vw}
.title.v2 .bubble2 {left:30vw;top:0}
@media only screen and (min-width:1000px) {
	.title {width:900px;height:830px}
	.title>div {width:600px;height:600px}
	.title .txt {font-size:80px}
	.title.v1 .bubble1, .title.v1 .txt {left:300px;}
	.title.v1 .bubble2 {top:200px}
	.title.v2 .bubble1, .title.v2 .txt {top:200px}
	.title.v2 .bubble2 {left:300px}
}

.info {width:80%;margin:1em auto}
.info .explain {font-size:1.2em;}
.info .explain+ul {list-style:none;font-weight:800;letter-spacing:.2em;line-height:1.8em;margin:1em;padding:0}
.info .explain+ul i{margin-right:.2em}

.badge {position:absolute;border-radius:50%;font-weight:bold;padding:1.4rem 0;height:8rem;width:8rem;text-align:center;overflow:hidden;background:#7a821f;color:#fff;font-size:1.4rem;box-sizing:border-box;line-height:1em;top:-4rem;right:5%;transform:rotate(10deg)}
.badge div {font-size:1.2em;padding:.2em 0}
@media only screen and (max-width:380px) {.badge {transform:scale(.8) rotate(10deg)}}

/*.dl,*/ .box {background:rgba(255,255,255,.8);padding:1rem;}
/*.dl,*/ .boxfl {display:flex;}
/*.dl,*/ .four ,.how {flex-flow: wrap;justify-content: space-between;}
	/*.dl h4,*/ .box h4 {margin:0}
	.di {width:46%;}
	.boxitem {width:49%;box-sizing:border-box;margin-bottom:2%;border-left:.7em solid}
		.dt {font-weight: bold;clear: both;margin:1em 0;}
			.dt>i {font-size: 3rem;float: left;margin-right: .5rem;}
			.fa-stack {float:left;margin-right:.5rem;font-size:2.5rem}
			.fa-stack .fa-stack-1x{margin:1.5rem 0 0 1.8rem;font-size:3.5rem}
		.dd {}
		@media only screen and (max-width:999px) and (orientation: landscape) {
		}
		@media only screen and (max-width:500px) {
			/*.dl .di,*/ .boxitem {width:96%;margin-bottom:2em}
		}
@media only screen and (max-width:380px) {.fa-stack {float:unset;display:block !important;margin:0 auto .5em}}
@media only screen and (min-width:501px) and (max-width:720px) {.fa-stack {float:unset;display:block !important;margin:0 auto .5em}}

	#pros {display:grid;grid-template-columns:1fr 1fr 1fr 1fr;}
	#pros>div {ywhite-space: nowrap;padding:0 1em 1em 0}
	@media only screen and (max-width:800px) {#pros {grid-template-columns:1fr 1fr 1fr;}}
	@media only screen and (max-width:580px) {#pros {grid-template-columns:1fr 1fr;}}
	@media only screen and (max-width:400px) {#pros {grid-template-columns:1fr;}}

/*.dl.wrong h4, .dl.wrong .fa-stack-1x {color:red}
.dl.right h4, .dl.right .fa-stack-1x {color:darkgreen;}
.dl.right .fa-stack-1x {text-shadow:0 0 2px #fff;margin:1.4rem 0 0 1.6rem}*/
.wrong h4, .wrong .fa-stack-1x{color:red} .wrong .boxitem {border-color:red}
.right h4, .right .fa-stack-1x{color:darkgreen;} .right .boxitem {border-color:darkgreen;}
.right .fa-stack-1x {text-shadow:0 0 2px #fff;margin:1.4rem 0 0 1.6rem}

/*.dl.howto, .dl.ht>*,*/ .how>* {display:flex;flex-direction:column}
/*.dl.howto .di,.dl.ht .howto .di,*/ .how>* .di {width:100%}
.ico {justify-content: space-between;padding-left:1.5em}
/*.dl.ht .ico i,*/  .ico i{color:var(--hl1) !important;font-size:4.5em;yborder:1px solid red;text-align:center}
/*.dl.ht .ico i:last-child,*/ .ico i:last-child{padding-bottom:0}
		@media only screen and (max-width:960px) {
			.how {flex-direction:column}
			/*.dl.ht .ico ,*/ .ico {flex-direction:row;width:100%;justify-content: center;padding:0}
			/*.dl.ht .ico i,*/ .ico i{padding:.3em;font-size:2.2em}
		}

.goto {display:flex;justify-content:center;}
.goto .pr {text-align:right;margin-right:1rem}
.goto .statt,.goto .inf {font-size:.8em}
.goto .mtl span {font-size:2.5em;color:darkgreen;font-weight:900}
.goto .inf {opacity:.7}
.goto .btn, .btnrow {padding-top:1.6rem}
.goto .btn a, .btnrow a {font-size:1.4em;font-weight:bold;background:darkgreen;color:#fff;padding:.3em .6em;border-radius:.3em;display:inline-block;}
@media only screen and (max-width:380px) {.btnrow a {font-size:.85em} .btnrow a i {font-weight:200;font-size:.6em}}

#switchit {max-width:100%;overflow:hidden;display:flex;font-size:1.8em}
#switchit .words{margin-left:.3em;width:10em;display:flex;flex-direction:column}
#switchit span {width:10em;display:block;}



.foot {margin-top:1em;padding-top:2em;background:#f4f4f4;color:var(--hl2);padding:.5em;text-align:center;font-weight:100;font-size:1rem;}
.foot a {font-size:.8em}


.info .header {text-align:center}
.info label {display:block;margin-top:1em}
.info input:not([type=hidden]) {display:block; width:calc(100% - .8em);margin:.2em;font-size:1.1em;padding:.2em;border-radius:4px;border:none}
.info button, .info .button { margin-top:.3em;background:var(--bg2);color:var(--bg2f);border:0;padding:.3em .6em;float:right;border-radius:5px;font-size:1.4em}
.info form+div{clear:both}
.thx {background: rgba(255,255,255,.8);padding: 1em;}

.show_mobile{display:none}
.show_desktop{display:block}
@media only screen and (max-width:600px) {
	.show_mobile{display:block}
	.show_desktop{display:none}
}