@charset "utf-8";
@import url(reset.css);

/* Default */
* { font-family: 'Noto Sans KR', sans-serif; line-height: 1; letter-spacing: -0.02em; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box;}
html, body  {width: 100%; height: 100%; background-color: #fff;}

/* 파일첨부 */
.file_input label {
    position:relative;
    cursor:pointer;
    display:inline-block;
    vertical-align:middle;
    overflow:hidden;
    height:28px;
    background:#e6e6e6;
	border:#CCC solid 1px;
	border-radius:3px;
	font-size:12px;
    color:#383838;
    text-align:center;
    line-height:26px;
	margin-right:2px;
	padding:0 15px;
}
.file_input label:hover {
    background:#d6d6d6;
	transition: all 0.2s linear;
}
.file_input label input {
    position:absolute;
    width:0;
    height:0;
    overflow:hidden;
}
.file_input input[type=text] {
    vertical-align:middle;
    display:inline-block;
    width:200px;
    height:28px;
    line-height:28px;
    font-size:12px;
	font-weight: 300;
    padding: 0 10px;
    border:1px solid #c4c4c4;
}
.file_input input[type=text]::placeholder { color: #aaa;}

/* button */
button.btn_default { text-align: center; vertical-align:middle; display: inline-block; cursor: pointer;}

/* layout */
#wrap { position: relative; width: 100%; min-width: 1395px; height: auto !important; height: 100%; min-height: 100%; overflow: hidden; display: block;}
.top { position: relative; width: 100%; min-width: 1395px; z-index: 2;}
.gnb { height: 60px; background-color: #1974da;}
.logo { position: relative; font-size: 28px; color: #fff; font-weight: 600; text-align: left; padding-left: 50px; padding-top: 15px; letter-spacing: -0.03em; z-index: 1; cursor: pointer;}
.menu { position: absolute; top: 20px; left: 0; right: 0; font-size: 20px; color: #fff; text-align: center;}
.top_line { height: 50px; background-color: #fff; border-bottom: 1px solid #ddd;}

.body { width: 100%; height: 100%; padding-bottom: 30px; display: inline-block;}
.body.start { padding-bottom: 380px;}
.body.complete { padding-bottom: 350px;}
.body_l { position: absolute; top: 0; left: 0; width: 220px; height: 100%; border-right: 1px solid #ddd;}
.body_c { width: 100%; height: 100%; padding-left: 220px; padding-right: 220px; text-align: left;}
.body_r { position: absolute; top: 0; right: 0; width: 220px; height: 100%; border-left: 1px solid #ddd;}

/* 첫화면 */
.bodymain { position: absolute; top: 50%; transform:translateY(-50%); left: 0; width: 100%; z-index: 1;}
.bodymain_img { position: absolute; top: -150px; left: 0; right: 0; text-align: center; z-index: 1;}
.bodymain_bar { position: absolute; top: 75px; left: 0; width: 100%; height: 40px; background-color: #018cc3;}
.start_btn { position: absolute; top: 150px; left: 0; right: 0; text-align: center; z-index: 1;}
.start_btn button.btn_start { width: 200px; background-color: #f0701a; border: 1px solid #f0701a; border-radius: 3px; font-size: 16px; color:#FFF; padding: 10px 10px;}
.start_btn button.btn_start:hover { background-color: #df5700; border: 1px solid #df5700;}

.p_titl { font-size: 15px; color: #333; text-align: left; padding-top: 25px; padding-left: 230px;}

/* Play화면 */
.play { position: relative; width: 100%; text-align: center; margin-top: 30px;}
.play_l { position: absolute; bottom: 40px; left: -580px; right: 0; width: 197px; margin: 0 auto;}
.play_c { width: 320px; margin: 0 auto;}
.play_r { position: absolute; bottom: 40px; left: 580px; right: 0; width: 197px; margin: 0 auto;}

.connect { position: relative; width: 197px; height: 150px; background-color: #000; border-radius: 4px; padding: 4px;}
.connect_inner { width: 100%; height: 100%; border-radius: 4px; padding: 15px; background: -webkit-linear-gradient(to bottom, rgba(130,130,130,0.5) 10%, rgba(0,0,0,0) 60%); background: -moz-linear-gradient(to bottom, rgba(130,130,130,0.5) 10%, rgba(0,0,0,0) 60%); background: -o-linear-gradient(to bottom, rgba(130,130,130,0.5) 10%, rgba(0,0,0,0) 60%); background: linear-gradient(to bottom, rgba(130,130,130,0.5) 10%, rgba(0,0,0,0) 60%);}
.connect_top { width: 100%; text-align: left; vertical-align: top;}
.connect_top ul li { width: 29px; height: 22px; background-color: #999; border: 1px solid #000; font-size: 11px; color: #000; font-weight: 300; line-height: 20px; text-align: center; margin-bottom: 8px; display: inline-block;}
.connect_top ul li.active { background-color: #ff7a21;}
.connect_btm { position: absolute; bottom: 0; left: 0; width: 100%; padding: 0 20px 10px 20px;}
.btn_connect { width: 100%; height: 24px; background-color: #555; border-radius: 2px;}
.connect_circle { width: 14px; height: 14px; background-color: #69d621; border-radius: 50%; margin-right: 3px; margin-top: 2px; vertical-align: middle; display: inline-block;}
.connect_circle.dim { background-color: #aaa;}
.connect_txt { font-size: 12px; color: #fff; font-weight: 300; margin-left: 3px; margin-top: 2px; vertical-align: middle; display: inline-block;}

.play_panel { width: 320px; height: 520px; background-color: #1e1e1e; border-radius: 4px; box-shadow: 4px 4px 5px rgba(0,0,0,.2); -webkit-box-shadow: 4px 4px 5px rgba(0,0,0,.2); -moz-box-shadow: 4px 4px 5px rgba(0,0,0,.2); padding: 8px;}
.panel_top { width: 100%; height: 350px; background-color: #ccc; border-radius: 4px; display: table;}
.panel_top .panel_img { vertical-align: middle; display: table-cell;}
.panel_mid { height: 30px; font-size: 11px; color: #aaa; font-weight: 300; line-height: 30px; text-align: center; letter-spacing: 0.01em;}
.panel_btm { width: 100%;}
.panel_btm_inner { width: 100%; height: 122px; background-color: #555; border-radius: 4px; text-align: center; padding-top: 25px;}
.btn_circle { width: 80px; height: 80px; margin: 0 auto; background-color: #000; border-radius: 50%; padding: 4px;}
.btn_circle_inner { width: 100%; height: 100%; border-radius: 50%; margin: 0 auto; text-align: center; padding-top: 18px; background: -webkit-linear-gradient(190deg, rgba(130,130,130,0.5) 10%, rgba(0,0,0,0) 60%); background: -moz-linear-gradient(190deg, rgba(130,130,130,0.5) 10%, rgba(0,0,0,0) 60%); background: -o-linear-gradient(190deg, rgba(130,130,130,0.5) 10%, rgba(0,0,0,0) 60%); background: linear-gradient(190deg, rgba(130,130,130,0.5) 10%, rgba(0,0,0,0) 60%);}
.btn_circle_inner .btn_ico { text-align: center; padding-left: 3px;}
.btn_circle_inner .btn_txt { font-size: 12px; color: #aaa; font-weight: 300; text-transform: uppercase; letter-spacing: 0.01em;}

.next { position: relative; width: 130px; height: 100px; background-color: #000; border-radius: 4px; padding: 4px;}
.next_inner { width: 100%; height: 100%; border-radius: 4px; padding: 15px; background: -webkit-linear-gradient(to bottom, rgba(130,130,130,0.5) 10%, rgba(0,0,0,0) 60%); background: -moz-linear-gradient(to bottom, rgba(130,130,130,0.5) 10%, rgba(0,0,0,0) 60%); background: -o-linear-gradient(to bottom, rgba(130,130,130,0.5) 10%, rgba(0,0,0,0) 60%); background: linear-gradient(to bottom, rgba(130,130,130,0.5) 10%, rgba(0,0,0,0) 60%); display: table;}
.next_grp { vertical-align: middle; display: table-cell;}
.next_txt { font-size: 20px; color: #fff; font-weight: 400; margin-bottom: 3px;}
.next_arrow { margin-top: 3px;}

/* 완료 */
.complete_cont { position: absolute; width: 100%; top: 50%; transform:translateY(-50%); left: 0; right: 0; margin-top: 30px;}
.complete_panel { width: 700px; background-color: #444; border-radius: 5px; margin: 0 auto; padding: 6px;}
.complete_panel_inner { width: 100%; background-color: #ccc; text-align: center; padding: 40px;}
.complete_txt1 { font-size: 26px; color: #333; font-weight: 600; margin: 20px 0;}
.complete_txt1 span { color: #1d7ed6; font-weight: 900;}
.complete_txt2 { font-size: 16px; color: #333; font-weight: 400; margin: 20px 0;}

/* 관리자(문제입력) */
.regist { width: 100%; text-align: center;}
.regist_top { height: 80px; background-color: #f8f8f8; border-bottom: 1px solid #ddd; padding: 25px;}
.regist_top ul li { vertical-align: middle; display: inline-block;}
.regist button.btn_del { background-color: #fff; border: 1px solid #bbb; border-radius: 2px; font-size: 12px; color:#333; padding: 7px 10px;}
.regist button.btn_del:hover { background-color: #f3f3f3; border: 1px solid #bbb;}
.regist_top ul li.regist_top_txt { font-size: 13px; color:#333;}

.regist_list { width: 80%; margin: 0 auto; margin-top: 20px; text-align: center;}
.regist_list ul { border-bottom: 1px solid #ddd; padding: 10px 20px; text-align: left;}
.regist_list ul li { vertical-align: middle; display: inline-block;}
.regist_list ul li.regist_top_txt { width: 36px; font-size: 13px; color:#333;}

.regist_btn { width: 80%; margin: 0 auto; text-align: right; margin-top: 10px;}
.regist_btn button.btn_regist { width: 100px; background-color: #1974da; border: 1px solid #1974da; border-radius: 2px; font-size: 13px; color:#FFF; padding: 10px 10px;}
.regist_btn button.btn_regist:hover { background-color: #0056b7; border: 1px solid #0056b7;}