@charset "utf-8";

h4, .h4 { margin-top:50px; padding-left:38px; font-size:28px; color:#765123; background:url('/wheel/images/contents/h4.gif') no-repeat left 7px; font-weight:bold; }
.sblet { padding-top:3px; padding-left:32px; font-weight:bold; font-size:22px; color:#a16312; background:url('/wheel/images/contents/sblet.gif') no-repeat left 9px;}
.ssblet {margin-top:5px; padding-left:15px; font-size:16px; background:url('/wheel/images/contents/ssblet.gif') no-repeat left 7px; }
.sssblet {margin-top:5px; padding-left:15px; background:url('/wheel/images/contents/sssblet.gif') no-repeat left 12px;}
.ssssblet {padding-left:12px; background:url('/wheel/images/contents/ssssblet.gif') no-repeat left 11px;}
.para01 {margin:20px 0px 0px 37px}
.para02 {margin:15px 0px 0px 18px }
.para03 {margin:8px 0px 10px 0px }

/*테이블*/
.datatable { margin-top:10px; margin-bottom:20px; }
.datatable .data { width:100%; text-align:center; }
.datatable .data caption { display:block; position:fixed; top:-500000px; margin:0px; padding:0px; width:0px; height:0px; text-indent:-50000px; border:0px; }
.datatable .data thead th { padding:10px 0px; background:#cdc5d9; color:#3b2b53; border-left:1px solid #aea6ba; border-top:1px solid #aea6ba; }
.datatable .data thead th:first-child { border-left:none; }
.datatable .data thead tr:first-child th { border-top:none; }
.datatable .data tbody td, .datatable .data tbody th { padding:8px 1%; border-bottom:1px solid #d8d8d8; border-right:1px solid #d8d8d8; }
.datatable .data tbody td:first-child, .datatable .data tbody th:first-child { border-left:none; }
.datatable .data tbody th { color:#494949; background:#f5f5f5; }
/*.datatable .data tr:first-child th .datatable .data tr:first-child td{ border-top:1px solid #c0c0c0; }*/
.datatable .data tr th:last-child,
.datatable .data tr td:last-child { border-right:0px; }

.datatable2 { margin-top:10px; margin-bottom:20px; border-top:2px solid #9b90ac; }
.datatable2 .data { width:100%; text-align:center; }
.datatable2 .data caption { display:block; position:fixed; top:-500000px; margin:0px; padding:0px; width:0px; height:0px; text-indent:-50000px; border:0px; }
.datatable2 .data thead th { padding:10px 0px; background:#cdc5d9; color:#3b2b53; border-left:1px solid #aea6ba; }
.datatable2 .data thead th:first-child { border-left:none; }
.datatable2 .data thead tr:first-child th { border-top:none; }
.datatable2 .data tbody td, .datatable2 .data tbody th { padding:8px 1%; border-bottom:1px solid #d8d8d8; border-right:1px solid #d8d8d8; }
.datatable2 .data tbody td:first-child, .datatable2 .data tbody th:first-child { border-left:none; }
.datatable2 .data tbody th { color:#494949; background:#f5f5f5; }
/*.datatable2 .data tr:first-child th .datatable2 .data tr:first-child td{ border-top:1px solid #c0c0c0; }*/
.datatable2 .data tr th:last-child,
.datatable2 .data tr td:last-child { border-right:0px; }

.resizing img { max-width:100%; }

/*step*/
ol.step { margin-top:10px; width:100%; overflow:hidden; }
ol.step>li { position:relative; box-sizing:border-box; vertical-align:top; padding:14px 20px; border:1px solid #9b9b9b; text-align:center; float:left; display:inline-block; margin-left:3%; margin-bottom:2%; font-weight:bold; }
ol.step>li:before { width:10px; height:2px; background:#000; transform:rotate(45deg); position:absolute; top:50%; right:-20px; margin-top:-3px; content:""; }
ol.step>li:after { width:10px; height:2px; background:#000; transform:rotate(-45deg); position:absolute; top:50%; right:-20px; margin-top:3px; content:""; }

ol.step.block>li { display:block; width:100%; margin-left:0; margin-bottom:6%; }
ol.step.block>li:before { width:10px; height:2px; background:#000; transform:rotate(45deg); position:absolute; top:75px; right:50%; margin-top:3px; content:""; }
ol.step.block>li:after { width:10px; height:2px; background:#000; transform:rotate(-45deg); position:absolute; top:75px; right:50%; margin-top:3px; margin-right:-6px; content:""; }
ol.step.block>li.two:before { width:10px; height:2px; background:#000; transform:rotate(45deg); position:absolute; top:95px; right:50%; margin-top:3px; content:""; }
ol.step.block>li.two:after { width:10px; height:2px; background:#000; transform:rotate(-45deg); position:absolute; top:95px; right:50%; margin-top:3px; margin-right:-6px; content:""; }

ol.step>li:first-child { margin-left:0; border:1px solid #7952ad; color:#7952ad; }
ol.step>li:last-child { border:1px solid #709ac7; color:#709ac7; }
ol.step>li:last-child:before { display:none; }
ol.step>li:last-child:after { display:none; }

.tbox { padding:35px; margin-bottom:15px; background:#f9f9f9; border:1px solid #d2d2d2; border-bottom:4px solid #dfdfdf; box-sizing:border-box; color:#575757; font-size:15px; }
.tbox.sm { padding:16px; background:#f0f0f0; border:none; font-size:14px; letter-spacing:-1.8px; }
.tbox>p.tit { color:#333333; font-size:16px; font-weight:bold; }

#detail_con { margin-top:50px; }

/*수레바퀴 꿈 교실이란?*/
.classroom_graph { position:relative; margin:30px auto 0; width:652px; height:588px; background:url('/wheel/images/contents/classroom_graph_bg.png') no-repeat 54% 49%; }
.classroom_graph .gra_wrap { overflow:hidden; }
.classroom_graph .gra_wrap .gra01 { text-align:center; }
.classroom_graph .gra_wrap .gra01 p { width:193px; height:193px; margin:0 auto; border:2px solid #ea6455; border-radius:100%; }
.classroom_graph .gra_wrap .gra01 p span { display:block; padding-top:120px; background:url('/wheel/images/contents/gra01_ico.png') no-repeat center 60%; font-size:20px; font-weight:bold; color:#ea6455; }
.classroom_graph .gra_wrap .gra02 { position:absolute; right:0; bottom:0; text-align:center; }
.classroom_graph .gra_wrap .gra02 p { width:193px; height:193px; margin:0 auto; border:2px solid #e3b40d; border-radius:100%; }
.classroom_graph .gra_wrap .gra02 p span { display:block; padding-top:135px; background:url('/wheel/images/contents/gra02_ico.png') no-repeat center 35%; font-size:20px; font-weight:bold; color:#e3b40d; }
.classroom_graph .gra_wrap .gra03 { position:absolute; left:0; bottom:0; text-align:center; }
.classroom_graph .gra_wrap .gra03 p { width:193px; height:193px; margin:0 auto; border:2px solid #3190d8; border-radius:100%; }
.classroom_graph .gra_wrap .gra03 p span { display:block; padding-top:135px; background:url('/wheel/images/contents/gra03_ico.png') no-repeat 10px 35%; font-size:20px; font-weight:bold; color:#3190d8; }
.classroom_graph .gra_wrap div ul.txt { display:inline-block; margin:20px auto 0; }
.classroom_graph .gra_wrap div ul.txt li { text-align:left; }

@media screen and (max-width:690px){
	/*수레바퀴 꿈 교실이란?*/
	.classroom_graph { width:100%; height:auto; background:none; }
	.classroom_graph .gra_wrap .gra01 { position:relative; float:left; width:31.3%; margin:0 1%; }
	.classroom_graph .gra_wrap .gra02 { position:relative; float:left; width:31.3%; margin:0 1%; }
	.classroom_graph .gra_wrap .gra03 { position:relative; float:left; width:31.3%; margin:0 1%; }
}

@media screen and (max-width:650px){
	/*수레바퀴 꿈 교실이란?*/
	.classroom_graph { width:100%; height:auto; background:none; }
	.classroom_graph .gra_wrap .gra01 { width:100%; margin:0 0 40px; }
	.classroom_graph .gra_wrap .gra02 { width:100%; margin:0 0 40px; }
	.classroom_graph .gra_wrap .gra03 { width:100%; margin:0; }
}