@import url("/00_common/css/basic.css");
@import url("/00_common/css/con_com.css");

/*-------------------------------------------------
Author : YJ,Kim
Create date : 2020. 10. 14.
-------------------------------------------------*/
html{ background:#e0e0e0;}

li{position:relative;}
textarea{width:100%; padding:0.75rem; border:1px solid #ccc;}
input[type="text"], select{height:2.5rem; line-height:2.5rem; padding:0 0.5rem; border:1px solid #ccc;}
select:focus{border-color:#fb0023;}

input.w100{width:100%;}
input.w50{width:50%;}

#wrap{position:relative; min-height:100%;}

/* layout */
#header{width:100%; position: fixed; left:0; top:0; background:#fff; box-shadow:0 0 20px rgba(0,0,0,0.3); z-index:10;}
#header > h1{ max-width:50%; display:inline-block; vertical-align:middle; font-size:1.2rem; line-height:2rem; margin:1rem 1.25rem; overflow:hidden; color:#111;}
#header > h1 img{margin-right:0.5rem;}
#header > h1 + p{ position:absolute; top:1.5rem; display:inline-block; vertical-align:middle; border-left:1px dashed #ccc; padding:0 5rem 0 0.5rem;}
#header > h1 + p span{display:none;}
/* #header.sur_header .header_wrap h1{margin-top:0.5rem;} */
#header .header_wrap{width:96%; margin:0 auto; height:3.5rem;}
#header.sur_header:before{bottom:auto; top:3.5rem;}
.top_util{ margin:1rem 1.25rem; float:right; }
.top_util li{display:inline-block; vertical-align:middle}
.top_util li a{display:block; line-height:2.5rem; text-align:center; transition: all .3s; -webkit-transition: all .3s;}
.top_util li a.btnIco{ width:2.5rem; height:2.5rem; border-radius:50%; font-size:1.3rem; color:#444;}
.top_util li a.btnSend, .top_util li a.btnCopy {font-size:0.85rem; padding:0 1rem; background:#fff; color:#111; border:1px solid #1b2843; border-radius:0.25rem;}
.top_util li a.btnIco:hover{color:#fff; background: #fb0023;}
.top_util li a.btnSend:hover, .top_util li a.btnCopy:hover {background:#1b2843; color:#fff}

#container{margin-top:3rem; padding:2rem 0; overflow:hidden;}
#container a{transition: all .3s; -webkit-transition: all .3s;}

/* layer popup */
.lyerWrap{display:none; position: fixed; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,0.75);z-index:100;}
.lyerBox{position:absolute; left:50%; top:50%; width:95%; max-width:40rem; padding:1rem; border-radius:0.5rem; background:#fff; box-shadow: 0 0 10px rgba(0,0,0,0.5); transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%);}
.lyerBox h2{color:#000; font-weight: 600; font-size:1.4rem; margin-bottom:0.5rem; }
.lyerBox, .lyerBox a, .lyerBox :before{transition: all .3s; -webkit-transition: all .3s;}
.lyerBox input[type="file"]{width:100%; border:1px solid #ccc; background:#fff;}

    /* 설정팝업 */
    .srySet h3{position: absolute; top:3rem; width:calc(33.33% - 0.7rem); font-size:1rem; font-weight: 400; text-align:center; color:#666;}
    .srySet h3.tit_2{left:0%;}
    .srySet h3.tit_2{left:calc(33.33% - 0.35rem);}
    .srySet h3.tit_3{left:calc(66.66% - 0.35rem);}
    .srySet h3 a{position:relative; display:block; padding:0.75rem 0; border-radius:0.25rem;}
    .srySet h3 a:before{content:""; position: absolute; left:50%; bottom:0; width:0; height:5px; border-radius:0.25rem; background:#fb0023; transform: translateX(-50%); -webkit-transform: translateX(-50%);}
    .srySet h3 a.current{color:#fb0023; font-weight: 600;}
    .srySet h3 a.current:before{width:100%;}
    .srySet h4{font-size:0.9rem; line-height:1.3; margin:1rem 0 0.25rem; font-weight: 600; color:#3e4e6f;}
    .srySet h5{font-size:0.8rem; line-height:1.3; font-weight: 400; color:#000;}
    .srySet p.sub{font-size:0.7rem; margin-left:1.25rem; color:#777;}
    .srySet .setBox{display:none; padding:1rem; margin-top:2.7rem; border:1px solid #ccc; border-top:2px solid #111; color:#555;}
    .srySet .setBox.on{display:block;}
    .srySet .setBox label{display:block; margin:0.25rem 0;}
    .srySet .setBox input[type='checkbox'],
    .srySet .setBox input[type='radio']{vertical-align: revert; padding:0; margin:0 0.5rem 0 0;}

     .srySet .setBox .dateSet p{display:inline-block;}
     .srySet .setBox .dateSet p input{width:6rem;}

/* 상단 탭 */
.sryTab{width:96%; max-width:50rem; margin:0 auto;}
.sryTab:after{display:block; clear: both; content:"";}
.sryTab li{width:50%; float:left;}
.sryTab li a{position:relative; display:block; font-size:1rem; line-height:3rem; color:#666; text-align:center; border-bottom:1px solid #666; }
.sryTab li a:before{content:""; position: absolute; left:50%; bottom:-3px; width:0%; height:5px; background:#000; transform: translateX(-50%); -webkit-transform: translateX(-50%);  transition: all .3s; -webkit-transition: all .3s;}
.sryTab li a.on{color:#111; font-weight: 400;}
.sryTab li a.on:before{width:100%;}
.sryTab li a:hover{color:#111;}

.sryCon{position:relative; width:96%; max-width:50rem; margin:1.5rem auto 0; padding:1rem 1.5rem; background:#fff; border-radius:0.75rem; box-shadow:0 0 10px rgba(0,0,0,0.2); overflow:hidden; border:4px solid #fff; word-break:break-all; transition: all .3s; -webkit-transition: all .3s;}
.sryCon .btnPic{ float:right; width:2.25rem; line-height:2.25rem; border:1px solid #aaa; border-radius:1.5rem; vertical-align: top; text-align:center; font-size:1.25rem; color:#555;}
.sryCon .btnPic:hover{color:#fff; border-color:#fb0023; background:#fb0023;}

.sryCon.section-wrap{padding-top:2rem;}
.sryCon.section-wrap:before{content:""; position: absolute; left:-2px; top:0; width:calc(100% + 4px); height:1rem; background:#fb0023; z-index:1;}

.sryCon.fcsIn{border-color:#fb0023;}

/* 문항별 이미지 업로드 */
.

/* 질문생성 */
    /* 질문목록 */
    .sryCon .qustList li{position:relative; padding-left:0.75rem; padding-right:1.5rem; font-size:0.75rem; line-height:1.5;}
    .sryCon .qustList li + li{margin-top:0.5rem;}
    .sryCon .qustList input[type="text"]{width:100%;}
    .sryCon .qustList li.ov .btnPic{display:block;}
    .sryCon .qustList .btnPic{display:none;}
    .sryCon .qustList .btnClose{position:absolute; right:0; top:0.4rem; font-size:1rem; }
    .sryCon .qustList .btnClose:hover{color:#fb0023;}
    .sryCon .qustList.qL_st1 li {padding:0 1.5rem 0 0.75rem}
    .sryCon .qustList.qL_st1 li:before { top:0.5rem !important; width:4px; height:4px; background:#fb0023 }

    /* 주관식 */
    .sryCon .sbjctF{/*width:50%;*/ line-height:1.5rem; padding:0.5rem; border-bottom:1px dashed #Ccc; color:#666; font-size:0.8rem;}
    .sryCon .sbjctF.long{width:100%;}

   /* 객관식 */
    .sryCon .objctF li:before{content:""; position: absolute; left:0; top:1rem; width:0.25rem; height:0.25rem; border-radius:50%; background:#666;}

    /* 체크박스 */
    .sryCon .ckBoxF li{padding-left:1rem;}
    .sryCon .ckBoxF li:before{content:""; position: absolute; left:0; top:0.85rem; width:0.75rem; height:0.75rem; border-radius:3px; border:1px solid #aaa;}

    /* 드롭다운 */
    .sryCon .drDownF li{list-style-type: decimal; padding-left:0; margin-left:1rem;}

    /* 파일업로드 */
    .sryCon .fileUpSet li{position:relative; }
    .sryCon .fileUpSet li + li{margin-top:0.5rem;}
    .sryCon .fileUpSet li strong{display:inline-block; width:8rem; vertical-align: middle; font-weight: 600;}
    .sryCon .fileUpSet li > div{display:inline-block; vertical-align: middle; width:calc(100% - 9rem);}
    .sryCon .fileUpSet li > div select{width:50%; height:2rem; line-height:2rem; padding:0 0.5rem;}

    /* 직선단계 */
    .sryCon .stepSet select{width:5rem;}
    .sryCon .stepSet select + span{margin:0 0.5rem;}
    .sryCon .stepList{margin-top:1rem;}
    .sryCon .stepList em{display:inline-block; width:1.5rem; padding-right:0.5rem;}
    .sryCon .stepList input{width:calc(100% - 4.5rem);}

    /* 占쎄텊筌욑옙 */
    .sryCon .dateSet{width:40%;}
    .sryCon .dateSet:after{content:""; clear: both; display:block;}
    .sryCon .dateSet p{position:relative; padding-left:2.5rem;}
    .sryCon .dateSet p:before{content:""; position: absolute; left:0; top:0; width:2.5rem; height:2.5rem; float:left; border:1px solid #ccc; border-right:0; background:#eee url('/images/ad/qn/main/ico_calender.png') no-repeat center;}
    .sryCon .dateSet p input{width:100%; }
    .sryCon .dateSet span{width:1rem; float:left; text-align:center;}

    /* 占쎈뻻揶쏉옙 */
    .sryCon .timeSet{width:40%;}
    .sryCon .timeSet:after{content:""; clear: both; display:block;}
    .sryCon .timeSet p{position:relative; padding-left:2.5rem;}
    .sryCon .timeSet p:before{content:""; position: absolute; left:0; top:0; width:2.5rem; height:2.5rem; float:left; border:1px solid #ccc; border-right:0; background:#eee url('/images/ad/qn/main/ico_clock.png') no-repeat center;}
    .sryCon .timeSet p input{width:100%;}
    .sryCon .timeSet span{width:1rem; float:left; text-align:center;}

    /* 占쎄퐬�눧占� 占쎄맒占쎈뼊占쎄퐬占쎌젟 */
    .titF p{position:relative; word-break:break-word;}
    .titF p:before{content:""; position: absolute; left:50%; bottom:3px; width:0; height:3px; background:#000; transform: translateX(-50%); -webkit-transform: translateX(-50%); transition: all .3s; -webkit-transition: all .3s;}
    .titF p.focus:before{width:100%;}
    .titF p + p{padding-top:0.5rem}
    .titF p.sub textarea{font-size:0.75rem; line-height:0.9rem;}
    .titF textarea{border:0; resize: none; overflow-y: hidden;}
    .titF textarea:focus{outline: none; background:#f1f1f1;}
    .titF .tit01,
    .titF .tit01 textarea{line-height:1.5rem; font-size:1.2rem; word-break:break-all;}
    .titF .tit01 textarea, .titF .tit01 input{border-bottom:1px solid #ccc;}
    .titF .tit01 span{color:#fb0023;}
    .titF .tit02 textarea{line-height:1.25rem; font-size:1.1rem;}
    .titF .tit02 textarea, .titF .tit02 input{border-bottom:1px solid #ccc;}
    .titF .sub textarea{line-height:1.1rem; font-size:0.9rem; border-bottom:1px solid #ccc;}
    .titF .sryTy{width:100%; margin:1rem 0 0.5rem;}
    .titF .btnPic{margin:1rem 0 0.5rem;}
    .titF .fileUpload{margin-top:1rem; padding:1rem; background:#fafafa; border-radius:.25rem;}
    .titF .fileUpload:before{content:"\ea50"; display:inline-block; vertical-align:middle; width:1.75rem; height:1.75rem; line-height:1.9rem; text-align:center; background:#444; border-radius:50%; font-family:'xeicon';  margin-right:.25rem; color:#fff; font-size:1rem;}
    .titF .fileUpload input[type="file"]{border:1px solid #ddd; background:#fff;}
    .titF .fileUpload span{display:block; font-size:14px;}

    /* 占쎄퐬�눧占� 占쎌맄燁살꼷�뵠占쎈짗 *//* 201106 */
    .moveBtn{float:left;}
    .moveBtn a{display:inline-block; line-height:2rem; font-size:1.6rem; color:#444; margin-right:0.25rem;}
    .moveBtn a:hover,s
    .moveBtn a:focus{color:#fb0023;}

    /* 占쎄퐬�눧占� 占쎄퐬占쎌젟 */
    .settingF{border-radius:0.75rem; margin-top:1.5rem; padding:0.5rem 1rem; background:#f1f1f1; overflow:hidden;}
    .setBtn{float:right;}
    .setBtn li{display:inline-block; vertical-align: middle; margin:0 0.25rem;}
    .setBtn li.ck{border-left:1px solid #999; padding-left:0.5rem;}
    .setBtn li a.btnIco{ font-size:1.3rem; color:#444;}
    .setBtn li a.btnIco:hover{color:#fb0023;}

    /* 占쎄퐬�눧占� control */
    .optControl{position: absolute; right:50%; top:6.5rem; width:2.5rem; margin-right:-28rem; padding:0.5rem 0; background:#fff; border-radius:0.5rem; box-shadow: 0 0 5px rgba(0,0,0,0.5); text-align:center;}
    .optControl li a{display:block; color:#111; margin:4px 0; transition: all .3s; -webkit-transition: all .3s; font-size:1rem;}
    .optControl li a:hover{color:#fb0023;}

/* 설문 결과(요약) */
    /* 주관식 */
    .awerSmry .sbjctF{width:100%; padding:0; border-bottom:0;}
    .awerSmry .sbjctF li{padding:0.25rem 0.75rem; background:#f1f1f1;}

   /* 객관식 */
    .awerSmry .objctF{padding:1rem 0;}

    /* 체크박스 */
    .awerSmry .ckBoxF ul{position:relative; /*padding:0.25rem 0; */}
    /*.awerSmry .ckBoxF ul:before{content:""; position: absolute; left:0; top:0; width:1px; height:100%; margin-left:-1px; background:#000;}*/
    .awerSmry .ckBoxF li{position:relative; font-size:0; line-height:0; margin:0.5rem 0; padding:0;}
    .awerSmry .ckBoxF li:before{display:none;}
    .awerSmry .ckBoxF li .opt{/*width:8rem; display:inline-block; vertical-align: top; */position:relative; font-size:0.75rem; line-height:1.4; font-weight:600; padding-left:15px; /*text-align:right; padding-right:5px;*/ margin-bottom:0.2rem}
    .awerSmry .ckBoxF li .opt:before {content:""; position: absolute; left:0; top:8px; width:10px; height:3px; background:#fb0023;}
    .awerSmry .ckBoxF li .graph{width:100%; display:inline-block; vertical-align: top; font-size:0.7rem; line-height:1.4;}
    .awerSmry .ckBoxF li .graph p{position:relative; width:10%; height:1.5rem; background:#3e4e6f;}
    .awerSmry .ckBoxF li .graph p span{position: absolute; right:5px; top:0; line-height:1.5rem; color:#fff;}
    .awerSmry .ckBoxF li .graph p.per_ar span{color:#000; right:-3rem;}

    /* 파일업로드 */
    .awerSmry .filelst{padding:1rem 0;}
    .awerSmry .filelst li{position:relative; padding:0.5rem 0.75rem 0.5rem 2rem; background:#f1f1f1;}
    .awerSmry .filelst li:before{content:"\ea50"; position: absolute; left:0.45rem; top:0.2rem; font-family: 'xeicon'; font-size:1.2rem; color:#fb0023; }
    .awerSmry .filelst li a:hover{color:#fb0023; text-decoration: underline;}

    /* 직선단계 */
    .awerSmry .stepSet {position:relative;}
    .awerSmry .stepSet p.st_txtL { position: absolute; left:0; bottom:1.5rem; width:3.5rem; text-align:left; font-weight:600; color:#fb0023}
    .awerSmry .stepSet p.st_txtR { position: absolute; right:0; bottom:1.5rem; width:3.5rem; text-align:right; font-weight:600; color:#fb0023}
    .awerSmry .stepSet ul{position:relative; padding:1rem 0 0.25rem; margin:0 3.5rem; overflow:hidden;}
    .awerSmry .stepSet ul:before{content:""; position: absolute; left:0; bottom:2.25rem; width:100%; height:1px; margin-bottom:-1px; background:#000;}
    .awerSmry .stepSet li{float:left; margin:0.5rem 0; padding:0; text-align: center;}
    .awerSmry .stepSet li:before{display:none;}
    .awerSmry .stepSet li .opt{ position: absolute; left:0; bottom:-1.5rem; width:100%; font-size:0.7rem; line-height:1.4; }
    .awerSmry .stepSet li .graph{position:relative; height:5rem; font-size:0.7rem; line-height:1.4; margin-bottom:1.5rem;}
    .awerSmry .stepSet li .graph p.bar{position: absolute; left:15%; bottom:0; width:70%; background:#3e4e6f;}
    .awerSmry .stepSet li .graph p.bar span{position: absolute; left:0; top:-1.5rem; width:100%; line-height:1.5rem; white-space:nowrap;}

    /* 날짜/시계 */
    .awerSmry .datelst {padding:1rem 0; overflow:hidden;}
    .awerSmry .datelst dl{position:relative; padding-left:6rem; }
    .awerSmry .datelst dl:before{content:""; position: absolute; left:6rem; top:-1.25rem; width:1px; height:calc(100% + 2rem); margin:0.5rem 0; background:#000;}
    .awerSmry .datelst dl + dl{padding-top:1rem;}
    .awerSmry .datelst dl + dl dt{top:1rem;}
    .awerSmry .datelst dt{position: absolute; left:0; top:4px; width:5.5rem; line-height:1.25rem; text-align:right; color:#000;}
    .awerSmry .datelst dd{padding-left:0.75rem;}
    .awerSmry .datelst dd li{display:inline-block; border-radius:1rem; line-height:1.5rem; padding:0 0.5rem; margin:3px 2px; background:#fedada; color:#000; font-size:0.7rem;}
    .awerSmry .datelst.timelst dt{padding-right:1.5rem;}
    .awerSmry .datelst.timelst dt:before{content:""; position: absolute; right:0; bottom:0; width:1.3rem; height:3px; background:#fb0023; }

/* 설문 결과(응답) */
    .awerReult{border:0;}

    .awerInfo{padding-bottom:0 !important;}
    .awerInfo:after{content:""; display:block; clear: both;}
    .awerInfo .titF .tit01{display:inline-block;}
    .awerInfo .titF .btnBox{float:right; font-size:1.25rem; color:#555;}
    .awerInfo .titF .btnBox a{display:inline-block; width:2rem; height:2rem; border-radius:50%; text-align:center;}
    .awerInfo .titF .btnBox a:hover{background:#f1f1f1;}
    .awerInfo .titF .btnBox .exDown{color:#399740;}

     /* 설문 정지 */
    .awerReult .noAwer{ text-align:right; margin-top:0.5rem;}
    .awerReult .noAwer > p{padding:0.5rem 1rem;}
    .awerReult .noAwer.checked > p{background:#3c3c3c; color:#fff;}
    .awerReult .noAwer .noAwerBox{text-align:left; padding:1rem; border:1px solid #555; border-top:0; border-radius:0.25rem;}
    .awerReult .noAwer .noAwerBox p{font-size:0.8rem;}

    /* 결과정보 탭 */
    .awerTab { position:relative; width:100%; overflow:hidden}
    .awerTab li{width:50%; float:left; text-align:center; margin-top:1.5rem;}
    .awerTab li a{position:relative; display:block; font-size:0.85rem; padding:0.75rem 0.5rem;  border-radius:0.5rem 0.5rem 0 0; transition: all .3s; -webkit-transition: all .3s;}
    /*.awerTab li a:before{content:""; position: absolute; left:50%; bottom:0; width:0; height:4px; border-radius:0.5rem 0.5rem 0 0; background:#fb0023; transform: translateX(-50%); -webkit-transform: translateX(-50%); transition: all .3s; -webkit-transition: all .3s;}
    .awerTab li a.on:before{width:100%;}*/
    .awerTab li a.on {color:#fff; background:#fa0026}
    .awerTab li a:hover {color:#fff; background:#bf202c}

    /* 결과 - 질문선택 */
    .quesSelect{padding:1rem 0; border-bottom:1px solid #555; overflow:hidden;}
    .quesSelect select{width:calc(100% - 7.5rem); float:left;}
    .quesSelect p{width:7rem; float:right; font-size:0.8rem; line-height:2rem; text-align:right;}
    .quesSelect p a{padding:0 0.75rem; }
    .quesSelect p a i{ font-weight: bold;}
    .quesSelect p strong{font-weight: 400;}

    /* 결과 - 질문정보 */
    .quesInfo{padding:1rem 0;}
    .quesInfo .tit01 a{display:inline-block; margin-left:0.5rem; vertical-align: text-bottom; font-size:0.75rem; color:#fff; font-weight:normal; padding:0 0.5rem; background:#666; border-radius:0.25rem; }
    .quesInfo .tit01 a i{font-size:0.9rem; padding-left:0.5rem; vertical-align: middle; }
    .quesInfo .tit01 a.active .show{display:block;}
    .quesInfo .tit01 a .close{display:none;}
    .quesInfo .tit01 a.active .close{display:block;}
    .quesInfo .tit01 a.active .show{display:none !important;}
    .quesInfo .qustList{display:none;}

    /* 결과 - 응답갯수 */
    .reultNum{border-top:1px solid #ccc; padding-top:1rem; margin-top:1rem;}

   /* 결과 - 주관식 */
    .awerReult p.none{color:#777; font-style: italic;}

    /* 결과 - 객관식 */
    .awerReult .objctF .qustList li:before{top:0.5rem;}

    /* 결과 - 체크박스 */
    .awerReult .ckBoxF .qustList li:before{content:"\e928"; font-family: 'xeicon'; color:#fff; top:0.25rem; line-height:1; font-size:0.7rem; background:#666;}

    /* 결과 - 파일업로드 */
    .awerReult .reultFile{position:relative; display:inline-block; padding:0.5rem 0.75rem 0.5rem 2rem; border:1px solid #ccc; border-radius:3px; margin-right:0.5rem;}
    .awerReult .reultFile:before{content:"\ea50"; position: absolute; left:0.45rem; top:0.2rem; font-family: 'xeicon'; font-size:1.2rem; color:#fb0023; }
    .awerReult .reultFile a{display:block; overflow:hidden; text-overflow: ellipsis; white-space: nowrap;}
    .awerReult .reultFile a:hover, .awerReult .reultFile a:focus{color:#fb0023; text-decoration: underline; }

    /* 결과 - 직선단계 */
    .awerReult .stepSet {font-size:0; line-height:0;}
    .awerReult .stepSet > p{width:25%; display:inline-block; vertical-align: middle; font-size:0.75rem; line-height:1.4;}
    .awerReult .stepSet > p.stepEnd{text-align:right;}
    .awerReult .stepSet ul{width:50%; display:inline-block; vertical-align: middle; font-size:0.9rem; line-height:1.4;}
    .awerReult .stepSet li{float:left; text-align:center;}
    .awerReult .stepSet li em{display: block; margin-bottom:1rem; color:#777;}
    .awerReult .stepSet li p{ position:relative; width:1.25rem; height:1.25rem; border-radius:50%; border:2px solid #999; margin:0 auto;}
    .awerReult .stepSet li.ck em{color:#000; font-weight: 600;}
    .awerReult .stepSet li.ck p{border-color:#000;}
    .awerReult .stepSet li.ck p:before{content:""; position: absolute; left:50%; top:50%; width:60%; height:60%; border-radius:50%; background:#000; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%);}

    /* 결과 - 시간/날짜 */
    .awerReult .reultDate{letter-spacing: 1px;}
    .awerReult .reultDate > span{display:block; margin-bottom:0.75rem; color:#777;}
    .awerReult .reultDate > p{color:#111; letter-spacing: 1.5px;}

/* 揶쏆뮆�롨퉪�떯由� */
.indQues .indPage{display:inline-block; line-height:2rem; }
.indQues .indPage a{padding:0 0.75rem;}
.indQues .btnBox{float:right; font-size:1.25rem; color:#555;}
.indQues .btnBox a{display:inline-block; width:2rem; height:2rem;}
.indQues .btnBox a:hover{color:#fb0023;}
.indQues .titF{border-top:1px solid #ddd; padding-top:1rem; margin-top:1rem;}

/* 설문리스트 상태 */
table .sryStu{display:inline-block; min-width:3.5rem; font-size:0.7rem; text-align: center; line-height:1.5rem; padding:0 0.4rem; border:1px solid #ccc;}
table .sryStu.sryIng{color:#c21313; border-color:#e91d1d;}
table .sryStu.sryWait{color:#005ade; border-color:#005ade;}
table .sryStu.sryEnd{color:#555; border-color:#555;}

/* 사용자 응답 */
.rspnCon .titF{margin-bottom:1rem;}
.rspnCon img{max-width:100%; height:auto; max-height:30rem;}
.rspnCon .tImg{padding:1rem; background:#f1f1f1; margin-bottom:1rem; text-align:center; border-radius:1.5rem; overflow:hidden;}
.rspnCon .qustList li{padding-left:0 !important;}
.rspnCon .qustList li:before{display:none !important;}

    /* 응답form - 문항 이미지 view  */
    .rspnCon .imgShow{font-size:0; line-height:0;}
    .rspnCon .imgShow li{width:48%; display:inline-block; vertical-align: top; padding-right:0; margin:0 1% 1rem; }
    .rspnCon .imgShow li + li{margin-top:0;}
    .rspnCon .imgShow li > p{margin-bottom:0.5rem;}
    .rspnCon .imgShow .img{padding:0.75rem; border-radius:0.5rem; background:#f1f1f1; text-align:center;}
    .rspnCon .imgShow .img img{max-height:10rem}

    /* 응답form - 주관식 */
    .rspnCon .sbjctF{border-bottom:0;}

    /* 응답form - 객관식 */
    .rspnCon .objctF li input{margin-right:0.5rem;}
    .rspnCon .objctF.imgShow li + li{margin-top:0;}
    .rspnCon .objctF.imgShow li > p{margin-bottom:0.5rem;}

    /* 응답form - 객관식 */
    .rspnCon .ckBoxF li input{margin-right:0.5rem;}

    /* 응답form - 드롭다운 */
    .rspnCon .drDownF select{min-width:50%;}

    /* 응답form - 직선단계 */
    .rspnCon .stepSet{position:relative; padding:0 25%;}
    .rspnCon .stepSet > p{position: absolute; top:20%; width:20%; text-align:center; color:#fb0023; font-weight:600}
    .rspnCon .stepSet > p.stp_1st{left:0;}
    .rspnCon .stepSet > p.stp_last{right:0;}
    .rspnCon .stepCk{display:table; width:100%; table-layout: fixed;}
    .rspnCon .stepCk li{display:table-cell; vertical-align: top; text-align:Center;}
    .rspnCon .stepCk li em{display:block; font-size:1rem; font-weight: 600; color:#111; margin-bottom:0.5rem;}

    /* 응답form - 날짜 */
    .rspnCon .dateSet{width:100%; }
    .rspnCon .dateSet p:before{border-right:1px solid #ccc;}
    .rspnCon .dateSet p input{width:3rem; float:left; margin-left:5px;}
    .rspnCon .dateSet p input.yy{width:5rem;}

    /* 응답form - 시간 */
    .rspnCon .timeSet{width:100%; }
    .rspnCon .timeSet p:before{border-right:1px solid #ccc;}
    .rspnCon .timeSet p input{width:3rem; float:left; margin-left:5px;}
    .rspnCon .timeSet p select{margin-left:5px;}

    /* 응답form - 기타 */
    .rspnCon .etcF{margin-top:0.75rem;}
    .rspnCon .etcF input[type="text"]{width:calc(100% - 3rem);  margin-left:0.5rem;}

@media screen and (max-width:1240px){
	 #header.sur_header { border-bottom: none; }
	 #header.sur_header:before { display: block; }
	 #header.sur_header .header_wrap { height: 3.5rem !important; }
	 #header.sur_header .header_wrap h1 { position: static;margin: 0.3rem 0 0 0; overflow: hidden; }
	 #header.sur_header .top_link > *:not(.popBtn) { display: inline-block; }
	 .sur_header .top_link { text-align: right; border-bottom:none }
	 .kfPluslst.surveyLst{background:none; height:100%;  overflow:visible;} 
	 .kfPluslst.surveyLst .fixblind{display:block !important;}

	}
 

@media screen and (max-width:1100px){

	 /* layout */
    #header{position: relative; height:auto; overflow:hidden}
    #header > h1{max-width:100%;  font-size:1rem; margin:0.65rem;}
    #header > h1 img{width:auto; height:1.8rem; vertical-align: text-bottom;}
    #header > h1 + p{display:block; position:relative; top:auto; border-left:0; margin:0 0 1rem}
	/* #header .header_wrap h1{display:none;} */
	#header.sur_header:before{top:3.5rem;}
	 
	 #header .top_util { top: 0 !important; }
	 
	 .top_util{position: absolute; left:0; top:0; width:100%; height:1.5rem; margin:0; float:none; background:#3c3c3c; text-align:right;}
    .top_util li{margin:0 0.5rem;}
    .top_util li a{line-height:1.5rem; color:#fff;}
    .top_util li a.btnIco{width:auto; height:1.5rem; border-radius:0; color:#fff; font-size:0.8rem;}
    .top_util li a.btnIco .sr-only{position:relative; width:auto; height:auto; clip: auto; margin:0; padding-left:4px; font-size:0.7rem; color:#ddd;}
    .top_util li a.btnSend{position:absolute; right:0.5rem; top:2.25rem; min-width:5rem; line-height:2rem;}
    .top_util li a.btnCopy {position:absolute; right:6rem; top:2.25rem; line-height:2rem;}

    .sur_top_util li a.btnSend{top:5rem;}
    .sur_top_util li a.btnCopy {top:5rem;}

	#container{margin:0; padding:1rem 0 2rem;}

    .mackQuse{width:auto; min-height:14rem; margin-right:1rem; margin-left:1rem;}
    .mackQuse.fcsIn{margin-right:4.25rem;}
	.kfPluslst.surveyLst{top: 5.1rem !important;}

    .optControl{top:12.6rem; right:0; margin-right:1rem;}

}

@media screen and (max-width:768px){
	#header .header_wrap h1{float:none;}
	#header .header_wrap h1 img{height:2.25rem;}
	#header.sur_header .header_wrap{height:5.75rem !important;}
	#header.sur_header .header_wrap h1{margin:0.6rem 0 0;}
}

@media screen and (max-width:640px){
	.sur_header .top_link .linklst{width:auto;}

    .sryCon{padding:1rem 0.5rem}
    .mackQuse.fcsIn{margin-right:1rem;}

    .optControl{position: fixed; top:auto !important; bottom:0; left:0%; right:auto; width:100%; border-radius:0;}
    .optControl li{float:left; width:16.6%;}

    /* 설문 결과(요약) */
        /* 체크박스 */
        .awerSmry .ckBoxF ul:before{left:5rem;}
        .awerSmry .ckBoxF li .opt{width:5rem;}
        .awerSmry .ckBoxF li .graph{width:calc(100% - 5rem);}


    /* 응답form - 객관식 */
    .rspnCon .imgShow .img{padding:0.5rem;}

	/* 응답form - 드롭다운 */
    .rspnCon .drDownF select{width:100%;}
}

@media screen and (max-width:420px){
	#header.sur_header .top_link > .snslst{display:none;}

	/* layout */
    #header h1 + p em{display:none;}
    #header h1 + p span{display:block;}

   #container{margin:0 0 2rem; padding:1rem 0 2rem;}
   .sur_top_util li a.btnSend, .sur_top_util li a.btnCopy{padding:0 0.5rem;}
	.sur_top_util li a.btnCopy{right:5rem;}

    .titF .tit01, .titF .tit01 textarea{font-size:1rem;}

    /* 결과 - 직선단계 */
    .awerReult .stepSet > p{width:19%;}
    .awerReult .stepSet ul{width:60%; margin:0 1%;}

    /* 응답form - 직선단계 */
    .rspnCon .stepSet{padding:0}
    .rspnCon .stepSet > p{position: relative; top:auto; left:auto !important; right:auto !important; width:auto; text-align:left; display:inline-block; padding:0.25rem 1rem; border:1px solid #ddd; border-radius:0.5rem; }
    .rspnCon .stepCk{display:block; margin:0.5rem;}
    .rspnCon .stepCk li{display:block; text-align:left;}
    .rspnCon .stepCk li em{display:inline-block; margin-bottom:0; margin-right:0.5rem; vertical-align: middle;}
}

@media screen and (max-width:360px){

    /* 주관식 */
    .sryCon .sbjctF{width:100% !important;}

    /* 응답form - 문항 이미지 view  */
    .rspnCon .imgShow li{width:100%; margin:0 0 1rem;}

    /* 응답form - 날짜 */
    .rspnCon .dateSet p input.yy{width:3.5rem;}
}