*{margin:0; padding:0; border:0;}
html,body{width:100%; height:100%; box-sizing:content-box;}
a{text-decoration:none;}
body{font:13px 'Roboto'; line-height:17px; color:#777;}
header{width:100%; height:60px;}
header .crp1{width:calc(100% - 40px); height:100%;}
h1{font:27px 'Ubuntu'; font-weight:300; letter-spacing:-1px; color:#0091EA;}
h1 b{font-weight:500;}
article{max-width:900px; width:calc(100% - 40px); margin:0px auto 1px; padding:30px 20px 50px 20px;}
article:nth-child(odd){background:#fff;}
article:nth-child(even){background:#ddd;}
article:last-child{margin-bottom:60px;}

.logo{}
.crp1{max-width:1200px; width:100%; margin:0 auto;}
.crp2{padding:20px 0; background:#03A9F4; color:#fff;}
.crp3{max-width:800px; width:calc(100% - 60px); margin:0 auto 30px; padding:20px; background:#03A9F4; color:#fff; border-radius:5px; text-align:center;}
.crp4{margin-bottom:20px; padding:20px 0; background:#ddd;}
.crp5{max-width:1200px; width:100%; margin:0 auto 20px;}
.clm1{width:calc(25% - 20px); min-width:200px; margin:0 10px 30px 10px; text-align:left;}
.clm2{width:calc(50% - 20px); min-width:320px; padding:0 10px;}
.clm3{margin:0 auto 0px; padding:20px;}
.clm4{width:calc(33% - 40px); min-width:220px; margin:30px auto; padding:0 20px;}
.clm4 img{width:80%; margin:0 auto;}
.clm5{width:calc(33% - 37px); padding:20px;}
.bra1{width:100%; height:25px; background:#222; color:#ccc; font-size:11px;}
.bra1 .crp1{width:calc(100% - 40px); height:100%;}
.bnr1{max-width:1200px; width:100%; margin:0 auto 30px auto; overflow:hidden;}
.bnr1 img{width:100%;}
.ttl1{width:100%; text-align:center;}
.ttl1 i{font-size:40px; padding:15px; border:1px solid #777; border-radius:50%;}
.nav1 a{color:#ccc; position:relative; border-left:1px solid#666;}
.nav1 a:first-child{border-left:none;}
.nav1 a:after{content:''; position:absolute; top:-2px; left:0; width:100%; height:20px; background:#0277BD; border-bottom:1px solid #01579B; opacity:0; transition-duration:0.3s;}
.nav1 a:hover:after{opacity:1; color:#FFF;}
.nav1 a:hover{color:#FFF;}
.nav1 a p{margin:0 5px; position:relative; z-index:80;}
#nav2{height:24px;}
#nav2 a{margin:0 10px; color:#666;}
#nav2 a:hover{color:#03A9F4;}
.btn1{width:40px; height:40px; display:none; position:relative; background:#ccc; border-radius:50%; transition:all .25s;}
.btn1 div{width:24px; height:2px; background:#0091EA; border-radius:1.5px; position:absolute; left:8px; transition:all .25s;}
.btn1 div:nth-child(1){top:11px;}
.btn1 div:nth-child(2){top:19px;}
.btn1 div:nth-child(3){top:27px;}
#btn2{width:100vw; height:calc(100vh - 60px); position:fixed; top:60px; left:0; background:rgba(0,0,0,.6);}
.prf1{font-size:33px; font-weight:300; line-height:110%; letter-spacing:-1px; margin:10px 0;}
.prf2{font-size:16px; font-weight:300; line-height:150%;}
.prf3{font-family:'Ubuntu'; text-align:center;}
.prf4{font-size:20px; font-weight:400; line-height:110%; margin-bottom:10px;}
.prf5{font-size:16px; font-weight:300; line-height:150%; position:relative; padding-left:15px;}
.prf5:after{content:''; width:6px; height:10px; position:absolute; top:6px; left:4px; background:rgba(256,256,256,.7); border-radius:2px;}
footer{width:100%; min-height:80px; background:#222; color:#7a7a7a; font-size:11px;}
footer p{text-align:center;}
footer h4{font-weight:300;}
footer a{color:#7a7a7a;}

.df{display:flex;}
.flw{flex-flow:row wrap;}
.jcc{justify-content:center;}
.jsb{justify-content:space-between;}
.jef{justify-content:flex-end;}
.aic{align-items:center;}
.ais{align-items:flex-start;}

.bgn1{background:#29B6F6; color:#fff;}
.bgn2{background:#03A9F4; color:#fff;}
.bgn3{background:#039BE5; color:#fff;}

@media screen and (max-width:900px){
	.clm5{width:calc(50% - 40px);}
}
@media screen and (max-width:650px){
	header{position:fixed; z-index:999; background:#fff;}
	.logo{position:absolute; right:20px;}
	.bra1{display:none;}
	#nav2{width:300px; height:calc(100vh - 60px ); position:fixed; top:60px; left:0; flex-direction:column; justify-content:center; background:#fff; transition:left 0.5s ease;}
	#nav2 a{width:100%; height:45px; margin:0; font-size:16px; display:flex; justify-content:center; align-items:center;}
	.btn1{display:block;}
	.clm4:last-child{margin-top:0;}
	.clm5{width:calc(100% - 40px);}
	footer{font-size:14px;}
}
@media screen and (max-width:460px){
	.clm1{width:calc(100% - 90px);}
	.clm2{width:calc(100% - 60px);}
	.clm4{width:80%; text-align:center;}
	.clm4 img{width:60%;}
	.clm4:first-child{margin-bottom:0;}
	footer{font-size:16px; line-height:150%; font-weight:300;}
}