/* Eric Meyer's CSS Reset */
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-size:100%;
font:inherit;
vertical-align:baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section{
display:block;
}
body{
line-height:1;
}
ol, ul{
list-style:none;
}
blockquote, q{
quotes:none;
}
blockquote:before, blockquote:after,
q:before, q:after{
content:'';
content:none;
}
table{
border-collapse:collapse;
border-spacing:0;
}
/* End of Eric Meyer's CSS Reset */
#data{
display:none;
}
html{
height:100%;
}
article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary{
display:block;
}
body{
font:14px/24px 'Roboto', Arial, sans-serif;
width:100%;
height:100%;
color:#000;
background:#fff;
}
body.fixed{
overflow:hidden;
margin-right:17px;
width:calc(100% - 17px)
}
.wrapper{
width:100%;
margin:0;
min-height:100%;
height:auto !important;
height:100%;
overflow:hidden;
}
.widfix{
width:97%;
margin:0 auto;
}
a{
text-decoration:none;
transition:0.2s;
}
/* Header
-----------------------------------------------------------------------------*/
.header{
}
.header .top{
display:flex;
padding:25px 25px 25px 35px;
height:100px;
box-sizing:border-box;
justify-content:space-between;
align-items:center;
}
.top_menu{}
.top_menu ul{
display:flex;
height:100%;
}
.top_menu li{
position:relative;
display:flex;
align-items:center;
height:100%;
margin-right:17px;
}
.top_menu li:before{
content:'';
position:absolute;
top:0;
left:0;
width:5px;
height:100%;
background:#3b5571;
}
.top_menu a{
color:#3b5571;
font:500 20px/22px 'Roboto';
display:block;
padding:0 0 6px 20px;
}
.top span{
color:#676767;
font:400 35px/40px 'Roboto';
text-transform:uppercase;
margin-top:4px;
}
.header_title{
display:flex;
justify-content:center;
align-items:center;
border-top:5px solid #3b5571;
border-bottom:5px solid #3b5571;
height:150px;
padding:34px;
box-sizing:border-box;
background:#fff;
}
.header_title span{
color:#b2b2b2;
font:500 75px/40px 'Roboto';
text-transform:uppercase;
transform:scaleX(0.57);
transform-origin:left;
}
.header_title span:last-child{
transform-origin:right;
}
.header_title h1{
color:#3b5571;
font:500 36px/36px 'Roboto';
text-transform:uppercase;
margin:4px 0 0 -3px;
width:81%;
}


/* Middle
-----------------------------------------------------------------------------*/
.content{
padding:0;
}
.start_content{
display:flex;
padding:0 102px 0 31px;
/* align-items:center; */
}
.start_menu{
width:71.4%;
margin-right:auto;
padding-top:50px;
}
.start_menu_item{
position:relative;
min-height:160px;
display:flex;
margin:24px 55px 24px 20px;
background:#fff;
}
.start_menu_item:before{
content:'';
position:absolute;
width:10px;
height:100%;
left:-20px;
top:0;
background:#000;
}
.start_menu_item:after{
content:"";
position:absolute;
width:45px;
height:100%;
right:-55px;
border-radius:0 100% 100% 0/0 50% 50% 0;
top:0;
background:#000;
}
.start_menu_item > a{
position:absolute;
left:-2px;
right:-2px;
top:-2px;
bottom:-2px;
z-index:10;
border:2px solid #000;
}
.start_menu_item_title{
display:flex;
align-items:center;
position:relative;
width:30%;
padding:1px 20px 0;
box-sizing:border-box;
box-shadow:3px -5px 3px 0 rgba(0,0,0,.2);
margin-right:160px;
background:#666;
font:500 22px/29px 'Roboto';
color:#fff;
min-height:160px;
}
.start_menu_item_title:after{
content:"";
height:100%;
width:150px;
border-radius:0 50% 50% 0;
position:absolute;
right:-150px;
top:0;
z-index:0;
box-shadow:3px -5px 3px 0 rgba(0,0,0,.2);
background:#666;
}
.start_menu_item_title span{}
.start_menu_item_img{
display:flex;
justify-content:center;
align-items:center;
background:#fff;
border-radius:50%;
width:120px;
height:120px;
position:absolute;
right:-130px;
top:50%;
z-index:1;
transform:translateY(-50%);
box-shadow:inset 3px -5px 3px 0 rgba(0,0,0,.2);
}
.start_menu_item_img img{
max-width:75%;
max-height:75%;
}
.start_menu_item_description{
width:calc(70% - 160px);
display:flex;
padding:16px 115px 14px 0;
box-sizing:border-box;
}
.start_menu_item_text{
display:flex;
flex-direction:column;
}
.start_menu_item_text h3{
font:500 22px/29px 'Roboto';
margin-bottom:auto;
color:#000;
}
.start_menu_item_text span{
font:500 22px/29px 'Roboto';
color:#b2b2b2;
}
.start_menu_item_buttons{
height:100%;
width:65px;
display:flex;
justify-content:center;
align-items:center;
padding:0 0 15px 0;
box-sizing:border-box;
position:absolute;
top:0;
right:0;
z-index:20;
flex-wrap:wrap;
align-content:center;
}
.start_menu_item_info_pop{
background:url(../images/start/popinfo.png) 50% 50%/contain no-repeat;
width:100%;
height:60px;
}
.start_menu_item_play{
width:43px;
height:43px;
border:3px solid #3b5571;
border-radius:50%;
box-sizing:border-box;
margin-top:12px;
position:relative;
}
.start_menu_item_play:before{
content:'';
border:12px solid transparent;
width:0;
height:0;
position:absolute;
top:50%;
left:50%;
border-left:20px solid #3b5571;
margin:-12px 0 0 -7px;
}
.start_menu_item.color_lblue:before,
.start_menu_item.color_lblue:after,
.start_menu_item.color_lblue .start_menu_item_title,
.start_menu_item.color_lblue .start_menu_item_title:after{
background:#456db2;
}
.start_menu_item.color_dblue:before,
.start_menu_item.color_dblue:after,
.start_menu_item.color_dblue .start_menu_item_title,
.start_menu_item.color_dblue .start_menu_item_title:after{
background:#223a76;
}
.start_menu_item.color_dmagenta:before,
.start_menu_item.color_dmagenta:after,
.start_menu_item.color_dmagenta .start_menu_item_title,
.start_menu_item.color_dmagenta .start_menu_item_title:after{
background:#3b5571;
}
.start_menu_item.color_lblue > a{
border-color:#456db2;
}
.start_menu_item.color_dblue > a{
border-color:#223a76;
}
.start_menu_item.color_dmagenta > a{
border-color:#3b5571;
}

.start_info{
padding:40px 0 0;
width:26%;
flex:0 0 auto;
}
.start_info_img{
display:flex;
width:100%;
margin-bottom:20px;
}
.start_info_img img{
max-width:70%;
min-height:300px;
object-fit:contain;
}
.start_info_text{
margin:53px -20px 20px 0;
}
.start_info_text h3{
font:500 30px/36px 'Roboto';
color:#3b5571;
position:relative;
margin:25px 0 7px;
padding-bottom:16px;
}
.start_info_text h3:after{
content:'';
position:absolute;
bottom:0;
left:0;
width:205px;
height:4px;
background:#3b5571;
}
.start_info_text p{
font:500 25px/32px 'Roboto';
color:#3b5571;
}

.popups{
display:none;
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
z-index:100;
background:rgba(0,0,0,0.5);
}
.popup_container{
display:none;
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}
.popup_flexbox{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
justify-content:center;
align-items:center;
display:flex;
}
.popup_container.pop_text{}
.popup{background:#fff;}
.pop_text .popup{
width:80%;
height:75%;
border-radius:10px;
border:8px solid #473b53;
padding:20px 5px 20px 20px;
box-sizing:border-box;
position:relative;
font:400 30px/42px 'Roboto';
}
.popup .close{position:absolute;width:40px;height:40px;border-radius:50%;background-color:#473b53;top:-20px;right:-20px;color:#fff;display:flex;align-items:center;justify-content:center;font-size:50px;box-sizing:border-box;padding-bottom:2px;}
.pop_text .text{
width:100%;
height:100%;
overflow:hidden;
}
.pop_text .text > div{
max-height:100%;
}
.pop_text h4{
font:500 30px/32px 'Roboto';
color:#553982;
margin:20px 0 5px;
}
.pop_text h2{
font:500 24px/32px 'Roboto';
color:#553982;
margin:20px 0;
width:100%;
}
.pop_text h2:first-child,.pop_text h4:first-child,
.pop_text .close + h2{
margin-top:0;
}
.pop_text p{
margin-bottom:20px;
}
.pop_text p:last-child{
margin-bottom:0;
}
.pop_text table{
margin-top:20px;
}
.pop_text td{
font:400 30px/42px 'Roboto';
border:1px solid #000;
padding:10px;
}
.pop_text tr:nth-child(2n) td{
background:#ebebeb;
}
.pop_text b,.pop_text strong{
font-weight:500;
}
.pop_text i,.pop_text italic{
font-style:italic;
}
.pop_text ul{
padding:20px 0 20px 30px;
}
.pop_text li ul{
padding:5px 0 5px 8px;
}
.pop_text ul li{
padding-left:20px;
position:relative;
}
.pop_text ul li:before{
content:'';
position:absolute;
width:6px;
height:6px;
border-radius:50%;
background:#000;
top:18px;
left:0;
}
.pop_text ul li li:before{
content:'';
position:absolute;
width:8px;
height:2px;
border-radius:50%;
background:#000;
top:22px;
left:0;
}

/* type 1 */
body.type_1{
background:#fff;
}
.type_1 .wrapper{width:1249px;margin:0 auto;box-shadow:0 0 15px rgba(0,0,0,0.3);}
.type_1 .header{
background:rgba(255,255,255,1);
background:-moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 92%, rgba(235,230,235,1) 100%);
background:-webkit-gradient(left top, left bottom, color-stop(0%, rgba(255,255,255,1)), color-stop(92%, rgba(255,255,255,1)), color-stop(100%, rgba(235,230,235,1)));
background:-webkit-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 92%, rgba(235,230,235,1) 100%);
background:-o-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 92%, rgba(235,230,235,1) 100%);
background:-ms-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 92%, rgba(235,230,235,1) 100%);
background:linear-gradient(to bottom, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 92%, rgba(235,230,235,1) 100%);
filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ebe6eb', GradientType=0 );
}
.type_1 .header .widfix{
width:100%;
padding:10px 20px 7px;
box-sizing:border-box;
}
.type_1 .header h1{
background:#fde3e5;
padding:15px 16px;
font:500 24px/30px 'Roboto';
min-height:65px;
box-sizing:border-box;
display:flex;
align-items:center;
border-radius:10px;
color:#525252;
}
.type_1 .header p{
border-bottom:2px solid #65305b;
font:400 22px/21px 'Roboto';
padding:9px 16px 7px;
color:#5a335a;
}
.type_1 .content{
background:rgba(235,230,235,1);
background:-moz-linear-gradient(top, rgba(235,230,235,1) 0%, rgba(255,255,255,1) 100%);
background:-webkit-gradient(left top, left bottom, color-stop(0%, rgba(235,230,235,1)), color-stop(100%, rgba(255,255,255,1)));
background:-webkit-linear-gradient(top, rgba(235,230,235,1) 0%, rgba(255,255,255,1) 100%);
background:-o-linear-gradient(top, rgba(235,230,235,1) 0%, rgba(255,255,255,1) 100%);
background:-ms-linear-gradient(top, rgba(235,230,235,1) 0%, rgba(255,255,255,1) 100%);
background:linear-gradient(to bottom, rgba(235,230,235,1) 0%, rgba(255,255,255,1) 100%);
filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#ebe6eb', endColorstr='#ffffff', GradientType=0 );
}
.type_1 .content .widfix{
max-width:100%;
width:1249px;
padding:0 20px;
box-sizing:border-box;
position:relative;
}
.type_1 .root_menu{
display:flex;
flex-wrap:wrap;
justify-content:center;
margin-right:-10px;
min-height:calc(100vh - 202px);
align-items:center;	
}
.root_menu_item{
border:2px solid #65305b;
border-radius:5px;
width:392px;
margin:0 10px 10px 0;
box-sizing:border-box;
padding:20px 30px;
display:flex;
justify-content:center;
background:#fff;
min-height:236px;
flex-wrap:wrap;
position:relative;
}
.root_menu_item.seen:before{
content:'';
width:30px;
height:30px;
border-radius:50%;
background:#3da83e;
position:absolute;
top:10px;
right:10px;
z-index:5;
}
.root_menu_item.seen:after{
content:'';
width:6px;
height:12px;
border-bottom:2px solid #fff;
border-right:2px solid #fff;
position:absolute;
top:15px;
right:20px;
z-index:6;
transform:rotate(45deg);
}
.root_menu_item > a{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
z-index:10;
}
.root_menu_item_image{
display:flex;
justify-content:center;
align-items:center;
width:103px;
height:103px;
}
.root_menu_item_image img{
max-width:100%;
max-height:100%;
}
.root_menu_item h3{
font:500 18px/20px 'Roboto';
color:#000;
width:100%;
text-align:center;
}
.detail_text_contaner{
position:absolute;
top:-9px;
left:20px;
right:20px;
bottom:50px;
z-index:20;
background:#504f51;
display:none;
}
.type_1 .footer{
width:100%;
background:#3b5571;
height:50px;
margin-top:-3px;
}
.start_link{
position:fixed;
left:0;
top:342px;
transform-origin:left top;
transform:rotate(-90deg);
padding:8px 19px 10px;
color:#fff;
background:#65305b;
text-transform:lowercase;
font:400 22px/16px 'Roboto';
opacity:0.5;
border-radius:0 0 5px 5px;
transition:0.2s;
}
.start_link:hover{
opacity:1;
}
.detail_text_box{
position:absolute;
top:40px;
bottom:40px;
left:15px;
right:15px;
border-radius:5px;
background:#fff;
padding:15px;
z-index:10;
border:1px solid #5a335a;
display:flex;
/* flex-wrap:wrap; */
/* overflow:hidden; */
/* align-content:stretch; */
/* justify-items:stretch; */
flex-direction:column;
}
.detail_text_box .close{
position:absolute;
top:0;
right:0;
width:40px;
height:40px;
background:#65305b;
border-radius:0 0 0 5px;
z-index:10;
color:#fff;
font-size:35px;
display:flex;
justify-content:center;
align-items:center;
}
.detail_text_box .close span{
position:relative;
top:-2px;
left:1px;
}
.detail_text_content{
display:flex;
max-height:94%;
}
.detail_images{
width:220px;
box-sizing:border-box;
padding:0 60px 20px 20px;
display:flex;
flex-wrap:wrap;
flex:0 0 auto;
}
.detail_images > .mCustomScrollBox{
margin-right:-35px;
max-width:calc(100% + 35px);
}
.detail_images a{
display:flex;
margin-bottom:10px;
border:1px solid #65305b;
width:140px;
box-sizing:border-box;
position:relative;
overflow:hidden;
}
.detail_images img{
max-width:100%;
max-height:200px;
}
.detail_images a span{
position:absolute;
bottom:0;
right:0;
width:40px;
height:40px;
background:#a682b3;
border-radius:5px 0 0 0;
z-index:10;
color:#fff;
display:flex;
justify-content:center;
align-items:center;
font:500 16px/40px 'Roboto';
opacity:0.8;
}
.detail_images a span:before{
content:'';
width:22px;
height:22px;
border-radius:50%;
border:2px solid #fff;
position:absolute;
top:50%;
left:50%;
margin:-11px 0 0 -11px;
box-sizing:border-box;
}
.detail_images a span:after{
content:'';
position:absolute;
width:3px;
height:10px;
background:#fff;
transform:rotate(-45deg);
top:26px;
right:8px;
}
.detail_text{
font:400 18px/24px 'Roboto';
padding-bottom:20px;
box-sizing:border-box;
}
.detail_text h3{
font-weight:500;
}
.detail_text_box.pop_text ul > li:before{
top:10px;
}
.detail_text .wide{
display:flex;
flex-wrap:wrap;
margin:20px 0;
justify-content:center;
}
.detail_text .wide img, .detail_text .left img, .detail_text .right img{
max-width:100%;
/*width:600px;*/
height:auto;
}
.detail_text .left{
display:flex;
flex-wrap:wrap;
justify-content:center;
max-width:30%;
float:left;
margin:5px 20px 20px 0;
}
.detail_text .right{
display:flex;
flex-wrap:wrap;
justify-content:center;
max-width:30%;
float:right;
margin:5px 0 20px 20px;
}
.detail_text .wide small, .detail_text .left small, .detail_text .right small{
width:100%;
text-align:center;
margin-top:10px;
font-size:80%;
}

/* type 2 */
body.type_2{
background:#fff;
}
.type_2 .wrapper{width:1249px;margin:0 auto;box-shadow:0 0 15px rgba(0,0,0,0.3);}
.type_2 .header{
background:rgba(245,245,245,1);
background:-moz-linear-gradient(top, rgba(245,245,245,1) 0%, rgba(245,245,245,1) 92%, rgba(235,230,235,1) 100%);
background:-webkit-gradient(left top, left bottom, color-stop(0%, rgba(245,245,245,1)), color-stop(92%, rgba(245,245,245,1)), color-stop(100%, rgba(235,230,235,1)));
background:-webkit-linear-gradient(top, rgba(245,245,245,1) 0%, rgba(245,245,245,1) 92%, rgba(235,230,235,1) 100%);
background:-o-linear-gradient(top, rgba(245,245,245,1) 0%, rgba(245,245,245,1) 92%, rgba(235,230,235,1) 100%);
background:-ms-linear-gradient(top, rgba(245,245,245,1) 0%, rgba(245,245,245,1) 92%, rgba(235,230,235,1) 100%);
background:linear-gradient(to bottom, rgba(245,245,245,1) 0%, rgba(245,245,245,1) 92%, rgba(235,230,235,1) 100%);
filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ebe6eb', GradientType=0 );
}
.type_2 .header .widfix{
width:100%;
padding:10px 20px 0;
box-sizing:border-box;
}
.type_2 .header h1{
background:#fde3e5;
padding:15px 16px;
font:500 24px/30px 'Roboto';
min-height:65px;
box-sizing:border-box;
display:flex;
align-items:center;
border-radius:10px;
justify-content:center;
width:100%;
color:#000;
}
.header_question_data{
position:relative;
padding:0 0 6px 45px;
display:flex;
align-items:center;
background:#fff;
height:75px;
}
.header_question_data:before{
content:'?';
position:absolute;
top:16px;
left:14px;
font-size:44px;
font-weight:600;
line-height:44px;
color:#3b5571
}
.header_question_data p{
font:400 22px/21px 'Roboto';
padding:5px 0 6px;
color:#3b5571;
width:100%;
}
.header_question_data a{
background:url(../images/task.svg) 50% 50%/100% no-repeat;
width:50px;
height:100%;
flex:0 0 auto;
}
.header_pager{
display:flex;
flex:0 0 auto;
background:#3b5571;
color:#fff;
border-radius:3px;
padding:7px 15px;
margin:0 25px;
font-weight:500;
font-size:20px;
line-height:20px;
}
.header_pager span{}
.header_pager span:before{
content:'/';
display:inline-block;
}
.header_pager span:first-child:before{
display:none;
}
.pointer{
display:flex;
position:absolute;
bottom:0;
right:-2px;
left:-2px;
}
.pointer:after{
content:'';
position:absolute;
bottom:0;
right:2px;
left:2px;
background:#3b5571;
height:2px;
}
.pointer span{
background:#b2b2b2;
height:6px;
width:100%;
margin:0 2px;
}
.pointer span.active{
background:#3b5571;
}

.type_2 .content{
background:rgba(235,230,235,1);
background:-moz-linear-gradient(top, rgba(235,230,235,1) 0%, rgba(255,255,255,1) 100%);
background:-webkit-gradient(left top, left bottom, color-stop(0%, rgba(235,230,235,1)), color-stop(100%, rgba(255,255,255,1)));
background:-webkit-linear-gradient(top, rgba(235,230,235,1) 0%, rgba(255,255,255,1) 100%);
background:-o-linear-gradient(top, rgba(235,230,235,1) 0%, rgba(255,255,255,1) 100%);
background:-ms-linear-gradient(top, rgba(235,230,235,1) 0%, rgba(255,255,255,1) 100%);
background:linear-gradient(to bottom, rgba(235,230,235,1) 0%, rgba(255,255,255,1) 100%);
filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#ebe6eb', endColorstr='#ffffff', GradientType=0 );
}
.type_2 .content .widfix{
max-width:100%;
width:1249px;
padding:0 20px;
box-sizing:border-box;
position:relative;
}
.type_2 .lesson_container{
height:calc(100vh - 213px);

}
.lesson{
background:#fff;
font-size:24px;
line-height:28px;
padding:5%;
}
.lesson.transparent{
background:transparent;
}

.lesson_img_cols{
display:flex;
padding:5%;
}
.lesson_img_cols .col{
max-width:45%;
margin-right:5%;
}
.lesson_img_cols .col:first-child{
flex:0 0 auto;
}
.lesson_img_cols .col:last-child{
width:100%;
max-width:100%;
margin-right:0;
}
.lesson_2cols{
display:flex;
flex-wrap:wrap;
padding:5% 0;
}
.wide_image{
width:100%;
display:flex;
}
.wide_image img{
margin:0 !important;
}
.lesson_2cols .col{
width:48%;
margin-right:4%;
}
.lesson_2cols .col:last-child{
margin-right:0;
}
.lesson img{
max-width:100%;
display:block;
margin-bottom:20px;
}
.lesson_text .wide{
display:flex;
flex-wrap:wrap;
margin:20px 0;
justify-content:center;
}
.lesson_text .wide img, .lesson_text .left img, .lesson_text .right img{
max-width:100%;
margin-bottom:0 !important;
}
.lesson_text .left{
display:flex;
flex-wrap:wrap;
justify-content:center;
max-width:30%;
float:left;
margin:5px 20px 20px 0;
}
.lesson_text .right{
display:flex;
flex-wrap:wrap;
justify-content:center;
max-width:30%;
float:right;
margin:5px 0 20px 20px;
}
.lesson_text .wide small, .lesson_text .left small, .lesson_text .right small{
width:100%;
text-align:center;
margin-top:10px;
font-size:80%;
}
.lesson h3{
font-weight:500;
margin-bottom:20px;
}
.lesson p{
margin-bottom:20px;
}
.lesson p + img{
margin-top:20px;
}
.lesson b{
font-weight:700;
}
.lesson i{
font-style:italic;
}
.lesson ul{
list-style:square;
margin:20px 0 20px 40px;
}
.lesson ul li{}
.lesson ul li:before{
content:'';
}
.lesson ol{
list-style:decimal;
margin:20px 0 20px 40px;
}
}
.lesson ol li{}
.lesson ol li:before{
content:'';
}
.lesson .field{
position:relative;
min-height:80px;
padding:10px 20px 10px 95px;
box-sizing:border-box;
background:#fff;
border-radius:10px;
display:flex;
align-items:center;
overflow:hidden;
width:75%;
margin:0 auto 15px;
}
.lesson .col .field{
width:100%;
margin:0 0 15px;
}
.lesson .field.wrong:after,
.lesson .field.right:after{
content:'';
position:absolute;
top:0;
left:80px;
bottom:0;
right:0;
z-index:2;
}
.lesson .field.wrong:after{
background:#ff9191;
}
.lesson .field.right:after{
background:#9fe591;
}
.lesson .field label{
font-size:22px;
color:#3b5571;
z-index:5;
}
.lesson .field label input{
position:absolute;
top:0;
left:0;
bottom:0;
right:0;
z-index:10;
margin:0;
opacity:0;
}
.lesson .field.radio:before{
content:'';
position:absolute;
width:40px;
box-sizing:border-box;
height:40px;
border-radius:50%;
margin-top:-20px;
top:50%;
left:20px;
background:#ccc;
border:1px solid #3b5571;
transition:0.2s;
}
.lesson .field.radio.checked:before{
background:#3b5571;
}
.lesson .field.checkbox:before{
content:'';
position:absolute;
width:46px;
box-sizing:border-box;
height:46px;
border-radius:10px;
margin-top:-23px;
top:50%;
left:17px;
background:#ccc;
border:1px solid #3b5571;
transition:0.2s;
}
.lesson .field.checkbox.checked:before{
background:#3b5571;
}
.lesson_order{}
.order_place{
width:87%;
margin:0 auto 20px;
position:relative;
display:flex;
}
.order_place span{
width:50px;
height:50px;
border-radius:50% 0 0 50%;
background:#3b5571;
color:#fff;
display:flex;
align-items:center;
justify-content:center;
font:600 30px/20px 'Roboto';
flex:0 0 auto;
}
.order_object{
background:#fff;
width:calc(100% - 50px);
height:50px;
display:flex;
align-items:center;
justify-content:center;
font:400 18px/20px 'Roboto';
color:#3b5571;
border:1px solid #3b5571;
box-sizing:border-box;
position:absolute;
top:0;
left:50px;
}
.order_place.right .order_object{
background:#9fe591;
}
.order_place.wrong .order_object{
background:#ff9191;
}
.order_object.ui-draggable{
cursor:grab;
}
.order_object.ui-draggable-dragging{
cursor:grabbing;
z-index:10;
}
.zoom_image{
display:block;
max-width:200px;
max-height:200px;
margin:0 auto 30px;
position:relative;
}
.zoom_image span{
position:absolute;
bottom:0;
right:0;
width:40px;
height:40px;
background:#a682b3;
border-radius:5px 0 0 0;
z-index:10;
color:#fff;
display:flex;
justify-content:center;
align-items:center;
font:500 16px/40px 'Roboto';
opacity:0.8;
}
.zoom_image span:before{
content:'';
width:22px;
height:22px;
border-radius:50%;
border:2px solid #fff;
position:absolute;
top:50%;
left:50%;
margin:-11px 0 0 -11px;
box-sizing:border-box;
}
.zoom_image span:after{
content:'';
position:absolute;
width:3px;
height:10px;
background:#fff;
transform:rotate(-45deg);
top:26px;
right:8px;
}
.insert_image{
position:relative;
display:flex;
justify-content:center;
position:relative;
}
.insert_image img{
margin:0;
width:70%;
border-radius:5px;
border:1px solid #b2b2b2;
}
.insert_place{
z-index:10;
border:2px solid #3b5571;
height:40px;
background:#fff;
border-radius:7px;
box-sizing:border-box;
}
.lesson_insert_image .insert_place{
min-width:180px;
position:absolute;
top:0;
left:0;
}
.lesson_insert_text .insert_place{
min-width:100px;
display:inline-block;
vertical-align:middle;
overflow:hidden;
}
.lesson_insert_image .insert_place.wrong:before{
content:'\D7';
position:absolute;
width:25px;
height:25px;
background:#dd0000;
color:#fff;
left:100%;
top:50%;
margin:-12px 0 0 10px;
border-radius:50%;
z-index:5;
text-align:center;
line-height:23px;
font-size:30px;
}
.lesson_insert_image .insert_place.right:before{
content:'';
position:absolute;
width:25px;
height:25px;
background:#00b200;
left:100%;
top:50%;
margin:-12px 0 0 10px;
border-radius:50%;
z-index:5;
}
.lesson_insert_image .insert_place.right:after{
content:'';
position:absolute;
width:6px;
height:11px;
top:50%;
left:100%;
margin:-9px 0 0 18px;
transform:rotate(45deg);
border-bottom:3px solid #fff;
border-right:3px solid #fff;
z-index:6;
}
.lesson_insert_image .insert_place.wrong.js-left:before,.lesson_insert_image .insert_place.right.js-left:before{
left:0;
margin-left:-35px;
}
.lesson_insert_image .insert_place.right.js-left:after{
left:0;
margin-left:-27px;
}
.insert_start_place{
display:flex;
flex-wrap:wrap;
justify-content:center;
}
.insert_object_box{
background:#b2b2b2;
margin:15px 10px 0;
border-radius:7px;
}
.insert_object{
min-width:180px;
border:2px solid #3b5571;
height:40px;
background:#fff;
border-radius:7px;
color:#3b5571;
padding:0 10px;
font:400 16px/22px 'Roboto';
display:flex;
justify-content:center;
align-items:center;
box-sizing:border-box;
white-space:nowrap;
z-index:10;
}
.insert_object.right{
background:#9fe591;
}
.insert_object.wrong{
background:#ff9191;
}
.insert_object.ui-draggable{
cursor:grab;
}
.insert_object.ui-draggable-dragging{
cursor:grabbing;
}
.insert_object.fix{
}
.insert_object.fix{
text-align:center;
max-width:180px;
white-space:wrap;
align-items:flex-start;
line-height:36px;
overflow:hidden;
}
.insert_object.fix:hover{
max-width:initial;
line-height:22px;
white-space:nowrap;
align-items:center;
}
.lesson_insert_text .insert_place .insert_object{
min-width:100px;
border:0;
height:36px;
border-radius:0;
}
.lesson_insert_text .insert_place.wrong, .lesson_insert_text .insert_place.wrong .insert_object{
background:#ff9191;
}
.lesson_insert_text .insert_place.right .insert_object{
background:#9fe591;
}
.lesson_links{
display:flex;
flex-wrap:wrap;
justify-content:center;
position:relative;
}
.link_starts{
width:42%;
margin-right:6%;
}
.link_starts .zoom_image{
margin:0;
max-width:100%;
z-index:10;
}
.link_start,.link_end{
position:relative;
min-height:70px;
border-radius:5px;
background:#fff;
display:flex;
align-items:center;
margin-bottom:80px;
box-shadow:0 5px 5px #b2b2b2;
padding:10px 15px;
box-sizing:border-box;
font-size:18px;
color:#3b5571;
line-height:22px;
}
.link_start.right,.link_end.right{
background:#9fe591;
}
.link_start.wrong,.link_end.wrong{
background:#ff9191;
}
.link_start{
border-radius:5px 35px 35px 5px;
padding:10px 85px 10px 15px;
}
.link_start .place{
width:40px;
height:40px;
border:8px solid #91afce;
background:#b2b2b2;
border-radius:50%;
position:absolute;
top:50%;
right:15px;
margin-top:-20px;
box-sizing:border-box;
}
.link_start.moved .place:after{
content:'';
width:10px;
height:10px;
background:#3b5571;
border-radius:50%;
position:absolute;
top:50%;
right:50%;
margin:-5px -5px 0 0;
z-index:10;
}
.link_start .place span{
position:absolute;
top:50%;
left:50%;
width:24px;
height:24px;
margin:-12px 0 0 -12px;
border-radius:50%;
background:#3b5571;
z-index:10;
}
.link_start .place span.ui-draggable{
cursor:grab;
}
.link_start .place span.ui-draggable-dragging{
cursor:grabbing;
}

.link_start .place span.fin{
transition:0.3s linear;
}
.link_ends{
width:42%;
}
.link_end{
border-radius:35px 5px 5px 35px;
padding:10px 15px 10px 85px;
}
.link_end .place{
width:40px;
height:40px;
border:8px solid #91afce;
background:#b2b2b2;
border-radius:50%;
position:absolute;
top:50%;
left:15px;
margin-top:-20px;
box-sizing:border-box;
}
.link_end .place span{
position:absolute;
top:50%;
left:50%;
width:24px;
height:24px;
margin:-12px 0 0 -12px;
border-radius:50%;
background:#3b5571;
z-index:10;
}
.lesson_links svg{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}
.lesson_links.vertical{
flex-direction:column;
padding:5% 0;
}
.lesson_links.vertical .link_starts{
width:100%;
margin:0 0 30px;
display:flex;
}
.lesson.lesson_links.vertical img{
max-width:100%;
display:block;
margin-bottom:20px;
margin:0;
}
.lesson_links.vertical .link_start, .lesson_links.vertical .link_end{
width:100%;
max-height:initial;
margin:0 10px;
}
.lesson_links.vertical .link_start{
border-radius:5px 5px 35px 35px;
padding:10px 10px 60px 10px;
}
.lesson_links.vertical .link_start .place{
top:initial;
right:initial;
margin:0 0 10px -20px;
bottom:0;
left:50%;
}
.lesson_links.vertical .link_ends{
width:100%;
margin:0;
display:flex;
}
.lesson_links.vertical .link_end{
border-radius:35px 35px 5px 5px;
padding:60px 10px 10px 10px;
}
.lesson_links.vertical.packed .link_end{
writing-mode:vertical-rl;
}
.lesson_links.vertical .link_end .place{
top:10px;
right:50%;
margin:0 -20px 0 0;
left:initial;
}
.lesson.lesson_groups{
padding:5px 20px;
}
.group_cols{
width:100%;
height:calc(100vh - 235px);
display:flex;
}
.group_col{
width:100%;
min-height:100%;
}
.group_col_title{
font:700 18px/22px 'Roboto';
color:#3b5571;
height:80px;
display:flex;
justify-content:center;
align-items:center;
background:#fff;
border:1px solid #676767;
margin:0 -1px 0 0;
}
.group_col_body{
background:#f0f0f0;
border:1px solid #676767;
padding:10px 20px;
margin:-1px -1px 0 0;
height:calc(100% - 77px);
box-sizing:border-box;
overflow-y:auto;
overflow-x:hidden;
}
.group_col.source{
z-index:10;
position:relative;
}
.group_col.source .group_col_title{
background:#3b5571;
color:#fff;
}
.group_col.source .group_col_body{
background:#b2b2b2;
}
.group_object{
display:flex;
justify-content:center;
align-items:center;
font:400 14px/20px 'Roboto';
min-height:80px;
border:1px solid #3b5571;
border-radius:5px;
margin-bottom:10px;
padding:10px 20px;
box-sizing:border-box;
background:#fff;
color:#3b5571;
}
.group_object.ui-draggable{
cursor:grab;
}
.group_object.ui-draggable-dragging{
cursor:grabbing;
}
.group_col .group_object.wrong{
background:#ff9191;
}
.group_col .group_object.right{
background:#9fe591;
}
.input_image{
position:relative;
display:flex;
justify-content:center;
position:relative;
}
.input_image img{
margin:0;
width:70%;
border-radius:5px;
border:1px solid #b2b2b2;
}
.input_place{
z-index:10;
}
.input_place input{
border:2px solid #3b5571;
height:40px;
background:#fff;
border-radius:7px;
box-sizing:border-box;
padding:0 10px;
font:400 14px/20px 'Roboto';
min-width:180px;
}
.lesson_input_image .input_place{
position:absolute;
top:0;
left:0;
}
.lesson_input_text .input_place{
display:inline-block;
vertical-align:middle;
}
.lesson_input_image .input_place.wrong:before{
content:'\D7';
position:absolute;
width:25px;
height:25px;
background:#dd0000;
color:#fff;
left:100%;
top:50%;
margin:-12px 0 0 10px;
border-radius:50%;
z-index:5;
text-align:center;
line-height:23px;
font-size:30px;
}
.lesson_input_image .input_place.right:before{
content:'';
position:absolute;
width:25px;
height:25px;
background:#00b200;
left:100%;
top:50%;
margin:-12px 0 0 10px;
border-radius:50%;
z-index:5;
}
.lesson_input_image .input_place.right:after{
content:'';
position:absolute;
width:6px;
height:11px;
top:50%;
left:100%;
margin:-9px 0 0 18px;
transform:rotate(45deg);
border-bottom:3px solid #fff;
border-right:3px solid #fff;
z-index:6;
}
.lesson_input_image .input_place.wrong.js-left:before,.lesson_input_image .input_place.right.js-left:before{
left:0;
margin-left:-35px;
}
.lesson_input_image .input_place.right.js-left:after{
left:0;
margin-left:-27px;
}
.lesson_input_text .input_place.wrong input{
background:#ff9191;
}
.lesson_input_text .input_place.right input{
background:#9fe591;
}
.lessons_data{
display:none;
}
.type_2 .footer{
width:100%;
position:relative;
background:#3b5571;
height:50px;
margin-top:-3px;
display:flex;
align-items:center;
justify-content:center;
padding-left:150px;
box-sizing:border-box;
}
.type_2 .footer .time{
position:absolute;
left:30px;
top:0;
font-size:24px;
font-weight:600;
color:#fff;
line-height:50px;
letter-spacing:0.05em;
}
.type_2 .footer .btn{
height:40px;
border-radius:7px;
padding:9px 10px;
background:#fff;
font-size:22px;
font-weight:500;
color:#3b5571;
line-height:22px;
margin:0 20px;
transition:0.2s;
box-sizing:border-box;
}
.type_2 .footer .btn.btn_next{
height:50px;
border-radius:7px;
padding:15px 40px;
background:#3b5571;
font-size:18px;
font-weight:500;
color:#fff;
line-height:18px;
margin:0;
position:absolute;
top:-75px;
right:25px;
}
.type_2 .footer .btn.disabled{
background:#fff !important;
color:#ccc !important;
cursor:default;
}
.type_2 .footer .btn.btn_next.disabled{
background:#3b5571 !important;
color:#fff !important;
opacity:0.3;
}
.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
width:12px;
background:#686868;
border-radius:6px;
}
.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar,
.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{
background:#686868;
}
.mCSB_scrollTools .mCSB_draggerRail{
width:12px;
border-radius:6px;
background:#c5c5c5;
}

/* result */
body.result{
background:#fff;
}
.result .wrapper{width:1249px;margin:0 auto;box-shadow:0 0 15px rgba(0,0,0,0.3);}
.result .header{
background:rgba(245,245,245,1);
background:-moz-linear-gradient(top, rgba(245,245,245,1) 0%, rgba(245,245,245,1) 92%, rgba(235,230,235,1) 100%);
background:-webkit-gradient(left top, left bottom, color-stop(0%, rgba(245,245,245,1)), color-stop(92%, rgba(245,245,245,1)), color-stop(100%, rgba(235,230,235,1)));
background:-webkit-linear-gradient(top, rgba(245,245,245,1) 0%, rgba(245,245,245,1) 92%, rgba(235,230,235,1) 100%);
background:-o-linear-gradient(top, rgba(245,245,245,1) 0%, rgba(245,245,245,1) 92%, rgba(235,230,235,1) 100%);
background:-ms-linear-gradient(top, rgba(245,245,245,1) 0%, rgba(245,245,245,1) 92%, rgba(235,230,235,1) 100%);
background:linear-gradient(to bottom, rgba(245,245,245,1) 0%, rgba(245,245,245,1) 92%, rgba(235,230,235,1) 100%);
filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ebe6eb', GradientType=0 );
}
.result .header .widfix{
width:100%;
padding:0 20px;
box-sizing:border-box;
}
.result .header h1{
padding:0;
font:500 32px/36px 'Roboto';
height:140px;
box-sizing:border-box;
display:flex;
align-items:center;
justify-content:center;
width:100%;
color:#3b5571;
border-bottom:2px solid #3b5571;
}
.result_container{
padding:60px 40px;
box-sizing:border-box;
}
.result .content{
background:rgba(235,230,235,1);
background:-moz-linear-gradient(top, rgba(235,230,235,1) 0%, rgba(255,255,255,1) 100%);
background:-webkit-gradient(left top, left bottom, color-stop(0%, rgba(235,230,235,1)), color-stop(100%, rgba(255,255,255,1)));
background:-webkit-linear-gradient(top, rgba(235,230,235,1) 0%, rgba(255,255,255,1) 100%);
background:-o-linear-gradient(top, rgba(235,230,235,1) 0%, rgba(255,255,255,1) 100%);
background:-ms-linear-gradient(top, rgba(235,230,235,1) 0%, rgba(255,255,255,1) 100%);
background:linear-gradient(to bottom, rgba(235,230,235,1) 0%, rgba(255,255,255,1) 100%);
filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#ebe6eb', endColorstr='#ffffff', GradientType=0 );
}
.result .content .widfix{
max-width:100%;
width:1249px;
padding:0 20px;
box-sizing:border-box;
position:relative;
}
.result .panel{
border:1px solid #3b5571;
color:#3b5571;
border-radius:10px;
background:#fff;
padding:20px 30px 19px;
margin-bottom:20px;
font-size:20px;
font-weight:500;
}
.result .cols2, .result .cols3{
display:flex;
align-items:center;
}
.result .cols2 .col{
width:45%;
margin-right:10%;
}
.result .cols3 .col{
width:32%;
margin-right:2%;
}
.result .col:last-child{
margin-right:0;
}
.result .col h3{
margin-bottom:5px;
}
.result .col dl{
display:flex;
align-items:baseline;
}
.result .col dt{
margin-right:15px
}
.result .col dd, .result .diag .col span{
font-size:32px;
}
.result .diag .col h3{
margin-bottom:15px;
}
.result .diag .cols3 .col:first-child{
color:#b2b2b2;
}
.result .center{
text-align:center;
}
.result ol{
padding-left:60px;
}
.result ol li{
list-style:decimal;
font-size:24px;
margin-bottom:10px;
line-height:26px;
position:relative;
}
.result ol li.right{
color:#149a10;
}
.result ol li.wrong{
color:#fc4a05;
}
.result ol li.right:before{
content:'';
position:absolute;
width:25px;
height:25px;
background:#00b200;
left:-80px;
top:12px;
margin:-12px 0 0 10px;
border-radius:50%;
z-index:5;
}
.result ol li.right:after{
content:'';
position:absolute;
width:6px;
height:11px;
top:12px;
left:-80px;
margin:-9px 0 0 18px;
transform:rotate(45deg);
border-bottom:3px solid #fff;
border-right:3px solid #fff;
z-index:6;
}
.result ol li.wrong:before{
content:'\D7';
position:absolute;
width:25px;
height:25px;
background:#dd0000;
color:#fff;
left:-80px;
top:12px;
margin:-12px 0 0 10px;
border-radius:50%;
z-index:5;
text-align:center;
line-height:23px;
font-size:30px;
}
.result .btn{
display:block;
margin:0 auto;
/* box-shadow:inset 0 -5px 0 #3b5571; */
border-radius:10px;
text-transform:uppercase;
text-align:center;
color:#fff;
height:55px;
line-height:53px;
font-size:20px;
width:200px;
background:#6080a2;
transition:0.2s;
}
.result .btn:hover{
background:#3b5571;
}
.result .btn.btn_print{
background:#d2d2d2;
text-transform:initial;
color:#777;
box-shadow:none;
font-size:14px;
height:40px;
line-height:42px;
width:170px;
}
.result .btn.btn_print span{
}
.result .btn.btn_print span:after{
content:'';
display:inline-block;
width:20px;
height:20px;
vertical-align:middle;
margin-left:15px;
background:url(../images/print-icon.svg) 0 0/contain no-repeat;
}
.result .btn.btn_print:hover{
filter:sepia(1);
}
sub{
font-size:50%;
font-weight:500;
position:relative;
}
@media print{
.not4print{
display:none !important;
}
.result .wrapper{
width:100%;
}
.result_container{
padding:20px 0 0;
}
.result .header h1{
height:70px;
}
.result .panel{
font-size:16px;
line-height:18px;
font-weight:500;
margin-bottom:10px
}
.result .col dl{
flex-wrap:wrap;
text-align:center;
}
.result .col dt{
margin-right:0;
width:100%;
}
.result .col dd, .result .diag .col span{
width:100%;
margin-top:10px;
}
.result ol{
padding-left:40px;
}
.result ol li{
font-size:16px;
line-height:18px;
color:#aaa !important
}
.result ol li.wrong,.result ol li.right{
color:#000 !important
}
.result ol li.right:after{
left:-65px;
top:8px;
border-bottom:3px solid #000;
border-right:3px solid #000;
}
.result ol li.wrong:before{
top:8px;
left:-65px;
background:transparent;
color:#000;
}

}