#step12 .head{background:#B0B7C9 url(/images/promo_bg/wsbg_signin.jpg) no-repeat;margin:0;padding: 30px 0 10px 0;height:60px;background-size: 100% auto;background-attachment: fixed;overflow:hidden}
body.guide_one #step12 .head{background:#F1F1F1;padding:0 40px 10px 40px}
body.guide_more #step12 .head{background:#7094B4 url(/images/promo_bg/wsbg11.jpg) no-repeat}
body.agreement #step12 .head{background:#F1F1F1;padding:0 40px 10px 40px}
#step12 .data{margin:0 40px;padding:0 0 140px 0}
body.scr12{background:#f4f4f4}
body #step12:before{z-index: -1;content:'';width:100%;position:fixed;height: 202px;background: #fff;background-size: 100% auto;background-attachment: fixed;background: -moz-linear-gradient(top,#fff 0%,#F4F4F4 100%);background: -webkit-linear-gradient(top,#fff 0%,#F4F4F4 100%);background: linear-gradient(to bottom,#fff 0%,#F4F4F4 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fff',endColorstr=' #F4F4F4',GradientType=0)}
#header{box-shadow: none}
#step12 .text{position:relative}
#step12 h2{font: 600 3rem/0.9 var(--FONT1);text-shadow:1px 1px #fff;margin:0 0 5px 0}
#step12 h2.list_head{position:absolute;top:auto;bottom: 100%}
#step12 .page_content h2{font:600 28px/32px var(--FONT1)}
#step12 .page_content h3{font:600 21px/28px var(--FONT1);padding-top:0}
#step12 .page_content h3:first-child{font:600 28px/32px var(--FONT1);padding-bottom:2.6rem}
#step12 #blog{max-width:calc(680px + 5rem)}
#step12 #blog .item{padding:8rem 0 4rem 0;margin:0}
#step12 #blog .item:last-child{padding-bottom:0}
#step12 #blog .page_content{line-height:150%}
#step12 #blog .item h1{font:600 36px/45px var(--FONT1);text-shadow:1px 1px #fff}
#step12 #blog .top{height:60px;font:16px/20px var(--FONT3);padding:30px 0 0 0}
#step12 #blog .top .date{color:#999;font-style:italic}
#step12 #blog .top .wsuser{height:70px;width:70px;float:left;margin:-30px 10px 0 0;background:url(/images/promo_bg/wsteam.png) -15px -15px}
#step12 #blog .top .wsuser1{background-position:-215px -215px}
#step12 #blog .top .wsuser2{background-position:-115px -15px}
#step12 #blog .top .wsuser3{background-position:-315px -15px}
#step12 #blog .top .wsuser4{background-position:-15px -15px}
#step12 .t2,#step12 .t12{background:#9A5}
#step12 .t2 .corner,#step12 .t12 .corner{border-color:transparent #9A5 transparent transparent}
#step12 .t7,#step12 .t17{background:#C99}
#step12 .t7 .corner,#step12 .t17 .corner{border-color:transparent #C99 transparent transparent}
#step12 #blog .text_{background:#fff;position:relative;border-radius: 0 2rem 2rem 2rem;padding: 1rem 2rem 2.4rem 3rem;box-shadow: rgba(20,30,40,0.10) 0px 16px 64px;display: flex;flex-direction:column;align-items: flex-end}
#step12 .wrap{display: flex;justify-content:center}
#step12 #blog_right{position: -webkit-sticky;position: sticky;align-self: flex-start;top: calc(8rem + 70px);width:350px;margin: 0 20px 0 0}
#step12 #blog_right.blog_right_rel{position: relative;top: 8rem}
#step12 #blog{flex: 1}
#step12 nav ul{margin: 0;padding: 0;list-style: none}
#step12 aside nav li{border-left:3px solid #E6E6E6;position:relative;overflow:hidden;margin:0 0 2px 0}
#step12 aside nav li:hover,#step12 aside nav li:focus-within{border-left:3px solid #333;background:#f7f7f7}
#step12 aside nav li a{font:16px/20px var(--FONT1);transition:left 0.5s ease-out;display:block;position:relative;color:#333;text-shadow:1px 1px #fff;padding:15px 30px 15px 15px;box-sizing: border-box;left:0}
#step12 aside nav li:hover a,#step12 aside nav li:focus-within a{transition:left 0.25s ease-in;left:8px;color:#222}
#step12 aside nav li.item_act{border-left:3px solid var(--GROUP_COLOR4)}
#step12 nav li .arrow-icon{visibility:hidden;width:25px;height:25px;position:absolute;right:15px;top:13px;transform:rotate(180deg);fill: var(--GROUP_COLOR4)}
#step12 nav li:hover .arrow-icon,#step12 nav li:focus-within .arrow-icon{visibility:visible}
#step12 #blog_list .item_act .bg{background:#fff;width:0;height:100px;position:absolute;left:0;top:0}
.do_scrolling #step12 #blog_list .item .bg{display:none}
.do_scrolling #step12 #blog_list .item:hover{border-left:3px solid #E6E6E6 !important;background:transparent !important}
.do_scrolling #step12 #blog_list .item:hover a{color:#333}
#step12 #blog .page_content canvas,#step12 #blog .page_content img[data-uri]{box-shadow:0 0 0 1px #E5E5E5}
#step12 .page_content img{max-width:100%}
svg.logo_content{width: 46px;height: 46px;fill: #c0c0c0;align-self: center}
#step12 .tags{font: 500 14px/24px var(--FONT1);margin-bottom:25px}
#step12 .tags .tags_in{display: inline-flex;position:relative}
#step12 .animate_tags .tag,#step12 .animate_tags .tag:hover{color: #fff !important;background: #fff !important}
#step12 #animate_rec{z-index: 1;height:100%;left:0;top:0;background: var(--MAGENTA);position: absolute;transition: left 0.4s ease-out,width 0.4s ease-out;border-radius: 5px}
#step12 .tags_in a.tag{display: inline-block;padding: 6px 24px;color: rgba(0,0,0,0.6);background: #fff;box-shadow: rgba(20,30,40,0.20) 0 0 30px;margin: 4px 0}
#step12 .tags_in .tag:first-of-type{border-radius: 5px 0 0 5px}
#step12 .tags_in .tag:last-of-type{border-radius: 0 5px 5px 0}
#step12 .tags_in a.tag:hover{background: #f4f4f4;color: rgba(0,0,0,0.8)}
#step12 .tags_in .tag.tag_act,#step12 .tags_in .tag.tag_act:hover{color: #fff;background: var(--MAGENTA);cursor:default;margin:0;border-radius: 5px;padding-top:10px;padding-bottom:10px}
#step12 .tags_in .tag:not(.tag_act){transition: box-shadow 0.3s}
#step12 .tags_in .tag:not(.tag_act):active{box-shadow:0 0 0 4px var(--MAGENTA_OPAC2)}
body.guide #step12 #blog_right nav{overflow-x: hidden;align-self: flex-start}
body.guide #step12 #blog_right nav ul{position: relative;left: 0;transition: left 0.6s ease}
body.guide #step12 #blog_right nav.guide_user ul{left: -100%;transition: left 0.5s ease}
body.guide #step12 #blog_right nav{display: flex;flex-wrap: nowrap}
body.guide #step12 #blog_right nav > *{width: 100%;flex-shrink: 0}
.scr12 .share_menu{display: flex;flex-direction: column;align-items:center;color: #333}
#step12 article.button_invisible .share-icon{visibility:hidden}
#step12 article.button_invisible .logo_content{display: none}
#step12 article.button_invisible .page_content{margin-bottom: 0}
#step12 article.button_invisible .page_content > ol:last-of-type{margin-bottom:0}
#step12 aside#blog_right nav .button_invisible{display: none}
.scr12 #footer-dark{background-color: transparent}
@media(max-width: 1280px){#step12 .data{margin: 0 20px}
#step12 #blog_right{width:270px}
#step12 #blog_right{margin: 0}
#step12 #blog_right .tags .tag{padding-left: 12px;padding-right: 12px}
}
@media(max-width: 992px){#step12 #blog{margin:0 auto}
}
@media(max-width: 992px){#step12 #blog_right{position: static !important;width:100%}
#step12 #blog_list .item{background:#fff}
#step12 #blog{display:none}
#step12 .data{padding:60px 0 20px 0}
#step12 #blog_right .tags{display: flex;justify-content:center;margin-bottom: 40px}
#step12 #blog_right .tags .tag{padding-left: 25px;padding-right: 25px}
}
@media screen and (max-width: 768px){#step12 .head{height:auto;padding:110px 0 15px 0;background:#B0B7C9}
body.agreement #step12 .head{padding:90px 0 0 0}
body.guide_more #step12 .head{height:auto;padding:15px 0 15px 0;margin:-15px 0 0 0}
#step12 .wrap{margin:0 20px}
#step12 #blog{width:auto}
#step12 h2{font:24px/28px var(--FONT1)}
#step12 #blog .text_{padding:15px;font:13px/130% var(--FONT1)}
#step12 #blog .text_ img{max-width:100%;height:auto}
#step12 #blog .text_ canvas{max-width:100%;height:auto}
#step12 #blog .item .text_,#step12 .share,#step12 .comments0,#step12 .comment_new{margin:0 -10px;height:auto}
#step12 #blog .item h1{font:300 26px/35px "Roboto"}
#step12 #blog .item h2{font:20px/24px var(--FONT1)}
#step12 #blog .item h3{font:18px/22px var(--FONT1)}
.page_content li{font:italic 14px/140% var(--FONT3)}
#step12 #blog .top .wsuser{width:36px;height:36px;margin:0 10px 0 0;background-size:200px 50px}
#step12 #blog .top .wsuser1{background-position:-107px -107px}
#step12 #blog .top .wsuser2{background-position:-57px -7px}
#step12 #blog .top .wsuser3{background-position:-157px -7px}
#step12 #blog .top .wsuser4{background-position:-7px -7px}
#step12 #blog .top{font:14px/18px var(--FONT3);padding:0 0 0 0}
#step12 .share .share_item{float:none;width:auto;margin:0 0 6px 0}
body.guide #step12 h2 span.num{margin:-3px 10px -10px 0}
body.guide #step12 #blog .text_{margin:0 -10px 25px -10px}
}
@media screen and (max-width: 360px){#step12 .wrap{width:300px;margin:0 auto}
#step12 #blog .text_ img{max-width:320px;margin:0 -15px;height:auto}
#step12 #blog .text_ canvas{max-width:320px;margin:0 -15px;height:auto}
}
@media screen and (max-width: 340px){#step12 #blog_right .tags .tag{padding-left: 12px;padding-right: 12px}
}
@media print{html{font: 12px/16px var(--FONT1)}
#footer-dark,#header,#header_pre,#step12 #blog_right,button,#blog .item:not(.item_act){display:none !important}
#step12 #blog{display:block !important}
#step12 #blog .text_{background:none;position:relative;border-radius: 0;padding-top: 3rem;padding-left: 0;box-shadow: none}
#step12 .data{margin: 0 !important;padding: 0 !important}
#step12 h2{font: 600 3rem/0.9 var(--FONT1) !important}
#step12 h3{font: 600 2.6rem/0.9 var(--FONT1) !important}
body #step12:before{content: none}
#step12 #blog .item{padding-top:0}
#step12 #blog .list_head{position:static}
#step12 #blog{max-width:none}
}