body{
font:1.1111vw/1.9048vw 'Roboto', Arial, sans-serif
}
body.fixed{
margin-right:1.3492vw;
width:calc(100% - 1.3492vw)
}
/* Header
-----------------------------------------------------------------------------*/
.header .top{
padding:1.9841vw 1.9841vw 1.9841vw 2.7778vw;
height:7.9365vw
}
.top_menu li{
margin-right:1.3492vw
}
.top_menu li:before{
width:0.3968vw
}
.top_menu a{
font:500 1.5873vw/1.746vw 'Roboto';
padding:0 0 0.4762vw 1.5873vw
}
.top span{
font:400 2.7778vw/3.1746vw 'Roboto';
margin-top:0.3175vw
}
.header_title{
border-top:0.3968vw solid #3b5571;
border-bottom:0.3968vw solid #3b5571;
height:11.9048vw;
padding:2.6984vw
}
.header_title span{
font:500 5.9524vw/3.1746vw 'Roboto'
}
.header_title h1{
font:500 2.8571vw/2.8571vw 'Roboto';
margin:0.3175vw 0 0 -0.2381vw
}
/* Middle
-----------------------------------------------------------------------------*/
.start_content{
padding:0 8.0952vw 0 2.4603vw
}
.start_menu{
padding-top:11.8254vw
}
.start_menu_item{
min-height:12.6984vw;
margin:1.9048vw 4.3651vw 1.9048vw 1.5873vw
}
.start_menu_item:before{
width:0.7937vw;
left:-1.5873vw
}
.start_menu_item:after{
width:3.5714vw;
right:-4.3651vw;
}
.start_menu_item > a{
left:-0.1587vw;
right:-0.1587vw;
top:-0.1587vw;
bottom:-0.1587vw;
border:1px* solid #000
}
.start_menu_item_title{
padding:0.0794vw 1.5873vw 0;
box-shadow:0.2381vw -0.3968vw 0.2381vw 0 rgba(0,0,0,.2);
margin-right:12.6984vw;
font:500 1.746vw/2.3016vw 'Roboto';
min-height:12.6984vw
}
.start_menu_item_title:after{
width:11.9048vw;
right:-11.9048vw;
box-shadow:0.2381vw -0.3968vw 0.2381vw 0 rgba(0,0,0,.2)
}
.start_menu_item_img{
width:9.5238vw;
height:9.5238vw;
right:-10.3175vw;
box-shadow:inset 0.2381vw -0.3968vw 0.2381vw 0 rgba(0,0,0,.2)
}
.start_menu_item_description{
width:calc(70% - 12.6984vw);
padding:1.2698vw 9.127vw 1.1111vw 0
}
.start_menu_item_text h3{
font:500 1.746vw/2.3016vw 'Roboto'
}
.start_menu_item_text span{
font:500 1.746vw/2.3016vw 'Roboto'
}
.start_menu_item_buttons{
width:5.1587vw;
padding:0 0 1.1905vw 0
}
.start_menu_item_info_pop{
height:4.7619vw
}
.start_menu_item_play{
width:3.4127vw;
height:3.4127vw;
border:0.2381vw solid #3b5571;
margin-top:0.9524vw
}
.start_menu_item_play:before{
border:0.9524vw solid transparent;
border-left:1.5873vw solid #3b5571;
margin:-0.9524vw 0 0 -0.5556vw
}
.start_info{
padding:3.1746vw 0 0
}
.start_info_img{
margin-bottom:1.5873vw
}
.start_info_img img{
min-height:23.8095vw
}
.start_info_text{
margin:4.2063vw -1.5873vw 1.5873vw 0
}
.start_info_text h3{
font:500 2.381vw/2.8571vw 'Roboto';
margin:1.9841vw 0 0.5556vw;
padding-bottom:1.2698vw
}
.start_info_text h3:after{
width:16.2698vw;
height:0.3175vw
}
.start_info_text p{
font:500 1.9841vw/2.5397vw 'Roboto'
}
.pop_text .popup{
border-radius:0.7937vw;
border:0.6349vw solid #473b53;
padding:1.5873vw 0.3968vw 1.5873vw 1.5873vw;
font:400 2.381vw/3.3333vw 'Roboto'
}
.popup .close{
width:3.1746vw;
height:3.1746vw;
top:-1.5873vw;
right:-1.5873vw;
font-size:3.9683vw;
padding-bottom:0.1587vw
}
.pop_text h4{
font:500 2.381vw/2.5397vw 'Roboto';
margin:1.5873vw 0 0.3968vw
}
.pop_text h2{
font:500 1.9048vw/2.5397vw 'Roboto';
margin:1.5873vw 0
}
.pop_text p{
margin-bottom:1.5873vw
}
.pop_text table{
margin-top:1.5873vw
}
.pop_text td{
font:400 2.381vw/3.3333vw 'Roboto';
border:1px solid #000;
padding:0.7937vw
}
.pop_text ul{
padding:1.5873vw 0 1.5873vw 2.381vw
}
.pop_text li ul{
padding:0.3968vw 0 0.3968vw 0.6349vw
}
.pop_text ul li{
padding-left:1.5873vw
}
.pop_text ul li:before{
width:0.4762vw;
height:0.4762vw;
top:1.4286vw
}
.pop_text ul li li:before{
width:0.6349vw;
height:0.1587vw;
top:1.746vw
}
/* type 1 */
.type_1 .wrapper{
width:99.127vw
}
.type_1 .header .widfix{
padding:0.7937vw 1.5873vw 0.5556vw
}
.type_1 .header h1{
padding:1.1905vw 1.2698vw;
font:500 1.9048vw/2.381vw 'Roboto';
min-height:5.1587vw;
border-radius:0.7937vw
}
.type_1 .header p{
border-bottom:0.1587vw solid #65305b;
font:400 1.746vw/1.6667vw 'Roboto';
padding:0.7143vw 1.2698vw 0.5556vw
}

.type_1 .content .widfix{
width:99.127vw;
padding:0 1.5873vw
}
.type_1 .root_menu{
min-height:calc(100vh - 16.0317vw);
margin-right:-0.7937vw
}
.root_menu_item{
border:1px* solid #65305b;
border-radius:0.3968vw;
width:31.1111vw;
margin:0 0.7937vw 0.7937vw 0;
padding:1.5873vw 2.381vw;
min-height:18.7302vw
}
.root_menu_item.seen:before{
width:2.381vw;
height:2.381vw;
top:0.7937vw;
right:0.7937vw
}
.root_menu_item.seen:after{
width:0.4762vw;
height:0.9524vw;
border-bottom:0.1587vw solid #fff;
border-right:0.1587vw solid #fff;
top:1.1905vw;
right:1.5873vw
}
.root_menu_item_image{
width:8.1746vw;
height:8.1746vw
}
.root_menu_item h3{
font:500 1.4286vw/1.5873vw 'Roboto'
}
.detail_text_contaner{
top:-0.7143vw;
left:1.5873vw;
right:1.5873vw;
bottom:3.9683vw
}
.type_1 .footer{
height:3.9683vw;
margin-top:-0.2381vw
}
.start_link{
top:27.1429vw;
padding:0.6349vw 1.5079vw 0.7937vw;
font:400 1.746vw/1.2698vw 'Roboto';
border-radius:0 0 0.3968vw 0.3968vw
}
.detail_text_box{
top:3.1746vw;
bottom:3.1746vw;
left:1.1905vw;
right:1.1905vw;
border-radius:0.3968vw;
padding:1.1905vw;
border:1px solid #5a335a
}
.detail_text_box .close{
width:3.1746vw;
height:3.1746vw;
border-radius:0 0 0 0.3968vw;
font-size:2.7778vw
}
.detail_text_box .close span{
top:-0.1587vw;
left:0.0794vw
}
.detail_images{
width:17.4603vw;
padding:0 4.7619vw 1.5873vw 1.5873vw
}
.detail_images > .mCustomScrollBox{
margin-right:-2.7778vw;
max-width:calc(100% + 2.7778vw)
}
.detail_images a{
margin-bottom:0.7937vw;
border:1px solid #65305b;
width:11.1111vw
}
.detail_images img{
max-height:15.873vw
}
.detail_images a span{
width:3.1746vw;
height:3.1746vw;
border-radius:0.3968vw 0 0 0;
font:500 1.2698vw/3.1746vw 'Roboto'
}
.detail_images a span:before{
width:1.746vw;
height:1.746vw;
border:1px* solid #fff;
margin:-0.873vw 0 0 -0.873vw
}
.detail_images a span:after{
width:0.2381vw;
height:0.7937vw;
top:2.0635vw;
right:0.6349vw
}
.detail_text{
font:400 1.4286vw/1.9048vw 'Roboto';
padding-bottom:1.5873vw
}
.detail_text .wide{
margin:1.5873vw 0;
}
.detail_text .left{
margin:0.3968vw 1.5873vw 1.5873vw 0;
}
.detail_text .right{
margin:0.3968vw 0 1.5873vw 1.5873vw;
}
.detail_text_box.pop_text ul > li:before{
top:0.7937vw
}
/* type 2 */
.type_2 .wrapper{
width:99.127vw;
box-shadow: 0 0 1.1905vw rgba(0,0,0,0.3)
}
.type_2 .header .widfix{
padding:0.7937vw 1.5873vw 0
}
.type_2 .header h1{
padding:1.1905vw 1.2698vw;
font:500 1.9048vw/2.381vw 'Roboto';
min-height:5.1587vw;
border-radius:0.7937vw
}
.header_question_data{
padding:0 0 0.4762vw 3.5714vw;
height:5.9524vw
}
.header_question_data:before{
top:1.2698vw;
left:1.1111vw;
font-size:3.4921vw;
line-height:3.4921vw
}
.header_question_data p{
font:400 1.746vw/1.6667vw 'Roboto';
padding:0.3968vw 0 0.4762vw
}
.header_question_data a{
width:3.9683vw
}
.header_pager{
border-radius:0.2381vw;
padding:0.5556vw 1.1905vw;
margin:0 1.9841vw;
font-size:1.5873vw;
line-height:1.5873vw
}
.pointer{
right:-0.1587vw;
left:-0.1587vw
}
.pointer:after{
right:0.1587vw;
left:0.1587vw;
height:0.1587vw
}
.pointer span{
height:0.4762vw;
margin:0 0.1587vw
}
.type_2 .content .widfix{
width:99.127vw;
padding:0 1.5873vw
}
.type_2 .lesson_container{
height:calc(100vh - 16.9048vw)
}
.lesson{
font-size:1.9048vw;
line-height:2.2222vw
}
.lesson img{
margin-bottom:1.5873vw
}
.lesson_text .wide{
margin:1.5873vw 0;
}
.lesson_text .left{
margin:0.3968vw 1.5873vw 1.5873vw 0;
}
.lesson_text .right{
margin:0.3968vw 0 1.5873vw 1.5873vw;
}
.lesson h3{
margin-bottom:1.5873vw
}
.lesson p{
margin-bottom:1.5873vw
}
.lesson p + img{
margin-top:1.5873vw
}
.lesson ul{
margin:1.5873vw 0 1.5873vw 3.1746vw
}
.lesson ol{
margin:1.5873vw 0 1.5873vw 3.1746vw
}
.lesson .field{
min-height:6.3492vw;
padding:0.7937vw 1.5873vw 0.7937vw 7.5397vw;
border-radius:0.7937vw;
margin:0 auto 1.1905vw
}
.lesson .col .field{
margin:0 0 1.1905vw
}
.lesson .field.wrong:after,
.lesson .field.right:after{
left:6.3492vw
}
.lesson .field label{
font-size:1.746vw
}
.lesson .field.radio:before{
width:3.1746vw;
height:3.1746vw;
margin-top:-1.5873vw;
left:1.5873vw;
border:1px solid #3b5571
}
.lesson .field.checkbox:before{
width:3.6508vw;
height:3.6508vw;
border-radius:0.7937vw;
margin-top:-1.8254vw;
left:1.3492vw;
border:1px solid #3b5571
}
.order_place{
margin:0 auto 1.5873vw
}
.order_place span{
width:3.9683vw;
height:3.9683vw;
font:600 2.381vw/1.5873vw 'Roboto'
}
.order_object{
width:calc(100% - 3.9683vw);
height:3.9683vw;
font:400 1.4286vw/1.5873vw 'Roboto';
border:1px solid #3b5571;
left:3.9683vw
}
.zoom_image{
max-width:15.873vw;
max-height:15.873vw;
margin:0 auto 2.381vw
}
.zoom_image span{
width:3.1746vw;
height:3.1746vw;
border-radius:0.3968vw 0 0 0;
font:500 1.2698vw/3.1746vw 'Roboto'
}
.zoom_image span:before{
width:1.746vw;
height:1.746vw;
border:1px* solid #fff;
margin:-0.873vw 0 0 -0.873vw
}
.zoom_image span:after{
width:0.2381vw;
height:0.7937vw;
top:2.0635vw;
right:0.6349vw
}
.insert_image img{
border-radius:0.3968vw;
border:1px solid #b2b2b2
}
.insert_place{
border:1px* solid #3b5571;
height:3.1746vw;
border-radius:0.5556vw
}
.lesson_insert_image .insert_place{
min-width:14.2857vw
}
.lesson_insert_text .insert_place{
min-width:7.9365vw
}
.lesson_insert_image .insert_place.wrong:before{
width:1.9841vw;
height:1.9841vw;
margin:-0.9524vw 0 0 0.7937vw;
line-height:1.8254vw;
font-size:2.381vw
}
.lesson_insert_image .insert_place.right:before{
width:1.9841vw;
height:1.9841vw;
margin:-0.9524vw 0 0 0.7937vw
}
.lesson_insert_image .insert_place.right:after{
width:0.4762vw;
height:0.873vw;
margin:-0.7143vw 0 0 1.4286vw;
border-bottom:0.2381vw solid #fff;
border-right:0.2381vw solid #fff
}
.lesson_insert_image .insert_place.wrong.js-left:before,.lesson_insert_image .insert_place.right.js-left:before{
margin-left:-2.7778vw
}
.lesson_insert_image .insert_place.right.js-left:after{
margin-left:-2.1429vw
}
.insert_object_box{
margin:1.1905vw 0.7937vw 0;
border-radius:0.5556vw
}
.insert_object{
min-width:14.2857vw;
border:1px* solid #3b5571;
height:3.1746vw;
border-radius:0.5556vw;
padding:0 0.7937vw;
font:400 1.2698vw/1.746vw 'Roboto'
}
.insert_object.fix{
max-width:14.2857vw;
line-height:2.8571vw
}
.insert_object.fix:hover{
line-height:1.746vw
}
.lesson_insert_text .insert_place .insert_object{
min-width:7.9365vw;
height:2.8571vw
}
.link_start,.link_end{
min-height:5.5556vw;
border-radius:0.3968vw;
margin-bottom:6.3492vw;
box-shadow:0 0.3968vw 0.3968vw #b2b2b2;
padding:0.7937vw 1.1905vw;
font-size:1.4286vw;
line-height:1.746vw
}
.link_start{
border-radius:0.3968vw 2.7778vw 2.7778vw 0.3968vw;
padding:0.7937vw 6.746vw 0.7937vw 1.1905vw
}
.link_start .place{
width:3.1746vw;
height:3.1746vw;
border:0.6349vw solid #91afce;
right:1.1905vw;
margin-top:-1.5873vw
}
.link_start.moved .place:after{
width:0.7937vw;
height:0.7937vw;
margin:-0.3968vw -0.3968vw 0 0
}
.link_start .place span{
width:1.9048vw;
height:1.9048vw;
margin:-0.9524vw 0 0 -0.9524vw
}
.link_end{
border-radius:2.7778vw 0.3968vw 0.3968vw 2.7778vw;
padding:0.7937vw 1.1905vw 0.7937vw 6.746vw
}
.link_end .place{
width:3.1746vw;
height:3.1746vw;
border:0.6349vw solid #91afce;
left:1.1905vw;
margin-top:-1.5873vw
}
.link_end .place span{
width:1.9048vw;
height:1.9048vw;
margin:-0.9524vw 0 0 -0.9524vw
}
.lesson_links.vertical .link_starts{
margin:0 0 2.381vw
}
.lesson.lesson_links.vertical img{
margin-bottom:1.5873vw
}
.lesson_links.vertical .link_start, .lesson_links.vertical .link_end{
margin:0 0.7937vw
}
.lesson_links.vertical .link_start{
border-radius:0.3968vw 0.3968vw 2.7778vw 2.7778vw;
padding:0.7937vw 0.7937vw 4.7619vw 0.7937vw
}
.lesson_links.vertical .link_start .place{
margin:0 0 0.7937vw -1.5873vw
}
.lesson_links.vertical .link_end{
border-radius:2.7778vw 2.7778vw 0.3968vw 0.3968vw;
padding:4.7619vw 0.7937vw 0.7937vw 0.7937vw
}
.lesson_links.vertical .link_end .place{
top:0.7937vw;
margin:0 -1.5873vw 0 0
}
.lesson.lesson_groups{
padding:0.3968vw 1.5873vw
}
.group_cols{
height:calc(100vh - 18.6508vw)
}
.group_col_title{
font:700 1.4286vw/1.746vw 'Roboto';
height:6.3492vw;
border:1px solid #676767;
margin:0 -0.0794vw 0 0
}
.group_col_body{
border:1px solid #676767;
padding:0.7937vw 1.5873vw;
margin:-0.0794vw -0.0794vw 0 0;
height:calc(100% - 6.1111vw)
}
.group_object{
font:400 1.1111vw/1.5873vw 'Roboto';
min-height:6.3492vw;
border:1px solid #3b5571;
border-radius:0.3968vw;
margin-bottom:0.7937vw;
padding:0.7937vw 1.5873vw
}
.input_image img{
border-radius:0.3968vw;
border:1px solid #b2b2b2
}
.input_place input{
border:1px* solid #3b5571;
height:3.1746vw;
border-radius:0.5556vw;
padding:0 0.7937vw;
font:400 1.1111vw/1.5873vw 'Roboto';
min-width:14.2857vw
}
.lesson_input_image .input_place.wrong:before{
width:1.9841vw;
height:1.9841vw;
margin:-0.9524vw 0 0 0.7937vw;
line-height:1.8254vw;
font-size:2.381vw
}
.lesson_input_image .input_place.right:before{
width:1.9841vw;
height:1.9841vw;
margin:-0.9524vw 0 0 0.7937vw
}
.lesson_input_image .input_place.right:after{
width:0.4762vw;
height:0.873vw;
margin:-0.7143vw 0 0 1.4286vw;
border-bottom:0.2381vw solid #fff;
border-right:0.2381vw solid #fff
}
.lesson_input_image .input_place.wrong.js-left:before,.lesson_input_image .input_place.right.js-left:before{
margin-left:-2.7778vw
}
.lesson_input_image .input_place.right.js-left:after{
margin-left:-2.1429vw
}
.type_2 .footer{
height:3.9683vw;
margin-top:-0.2381vw;
padding-left:11.9048vw
}
.type_2 .footer .time{
left:2.381vw;
font-size:1.9048vw;
line-height:3.9683vw
}
.type_2 .footer .btn{
height:3.1746vw;
border-radius:0.5556vw;
padding:0.7143vw 0.7937vw;
font-size:1.746vw;
line-height:1.746vw;
margin:0 1.5873vw
}
.type_2 .footer .btn.btn_next{
height:3.9683vw;
border-radius:0.5556vw;
padding:1.1905vw 3.1746vw;
font-size:1.4286vw;
line-height:1.4286vw;
top:-5.9524vw;
right:1.9841vw
}
.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
width:0.9524vw;
border-radius:0.4762vw
}
.mCSB_scrollTools .mCSB_draggerRail{
width:0.9524vw;
border-radius:0.4762vw
}
/* result */
.result .wrapper{
width:99.127vw;
box-shadow:0 0 1.1905vw rgba(0,0,0,0.3)
}
.result .header .widfix{
padding:0 1.5873vw
}
.result .header h1{
font:500 2.5397vw/2.8571vw 'Roboto';
height:11.1111vw;
border-bottom:0.1587vw solid #3b5571
}
.result_container{
padding:4.7619vw 3.1746vw
}
.result .content .widfix{
width:99.127vw;
padding:0 1.5873vw
}
.result .panel{
border:1px solid #3b5571;
border-radius:0.7937vw;
padding:1.5873vw 2.381vw 1.5079vw;
margin-bottom:1.5873vw;
font-size:1.5873vw
}
.result .col h3{
margin-bottom:0.3968vw
}
.result .col dt{
margin-right:1.1905vw
}
.result .col dd, .result .diag .col span{
font-size:2.5397vw
}
.result .diag .col h3{
margin-bottom:1.1905vw
}
.result ol{
padding-left:4.7619vw
}
.result ol li{
font-size:1.9048vw;
margin-bottom:0.7937vw;
line-height:2.0635vw
}
.result ol li.right:before{
width:1.9841vw;
height:1.9841vw;
left:-6.3492vw;
top:0.9524vw;
margin:-0.9524vw 0 0 0.7937vw
}
.result ol li.right:after{
width:0.4762vw;
height:0.873vw;
top:0.9524vw;
left:-6.3492vw;
margin:-0.7143vw 0 0 1.4286vw;
border-bottom:0.2381vw solid #fff;
border-right:0.2381vw solid #fff
}
.result ol li.wrong:before{
width:1.9841vw;
height:1.9841vw;
left:-6.3492vw;
top:0.9524vw;
margin:-0.9524vw 0 0 0.7937vw;
line-height:1.8254vw;
font-size:2.381vw
}
.result .btn{
box-shadow:inset 0 -0.3968vw 0 #3b5571;
border-radius:0.7937vw;
height:4.3651vw;
line-height:4.2063vw;
font-size:1.5873vw;
width:15.873vw
}
.result .btn.btn_print{
font-size:1.1111vw;
height:3.1746vw;
line-height:3.3333vw;
width:13.4921vw
}
.result .btn.btn_print span:after{
width:1.5873vw;
height:1.5873vw;
margin-left:1.1905vw
}