@charset "utf-8";

/************************************************************************
 * 설  명 : 신청서 통합 페이지
 * 작성자 : 쿤 : kuns@afreecatv.com
 * 시작일 : 2019.05.07
 * 완료일 : 2019.05.14
 * 오픈일 : 2019.07.02
************************************************************************/
@import url("/css/global/common_set.css");

html,body,div,span,iframe,h1,h2,h3,h4,h5,h6,p,a,address,big,del,em,img,s,small,strong,b,u,i,center,dl,dt,dd,ol, ul,li,fieldset,form,label,legend,caption,tbody,tfoot,thead,tr,article,aside,canvas,embed,footer,header,menu,nav,section,summary,audio,video {margin:0; padding:0; border:0; vertical-align:baseline;}
address, em, i {font-style:normal; font-weight:normal;}
article, aside, footer, header, hgroup, menu, nav, section, main {display:block;}
ul, ol, li {list-style:none;}
table {border-collapse:collapse; table-layout:fixed; word-break:break-all;}
legend, caption {display:block; overflow:hidden; position:absolute; top:-9999px; left:-9999px; width:1px; height:1px; line-height:0; font-size:0; text-indent:-9999px;}
button {background-color:transparent; margin:0; padding:0; border:0; vertical-align:top; outline:none; cursor:pointer; font-family:inherit;}
button > * {position:relative;}
body {background-color:#fff; color:#707070; font-size:12px; line-height:1.2;}
input[type="text"],
input[type="number"],
input[type="password"] {margin:0; padding:0; border:1px solid #ddd; color:inherit; font-family:inherit; outline:none; -webkit-appearance:none;}
input[type="text"]::-ms-clear {display:none;}
input[type="text"]:-ms-clear {display:none;}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {-webkit-appearance:none;}
a, textarea {color:inherit; font-family:inherit; text-decoration:none;}
textarea::-webkit-input-placeholder {color:#9e9e9e;}
textarea:-ms-input-placeholder {color:#9e9e9e;}
a:hover {color:#000;}
.blind {display:block; overflow:hidden; position:absolute; top:-9999em; left:-9999em; width:1px; height:1px; font:0/0 a;}
.skip-nav {position:relative;}
.skip-nav a {display:block; position:absolute; top:-100px; left:0; background:#0545af; padding:10px 20px; color:#fff; text-align:center; z-index:9999;}
.skip-nav a:active,
.skip-nav a:focus {top:0;}


#form-wrap {overflow-x:hidden; min-width:1180px;}

/* 신청서용 툴팁 커스텀 */
[tipalign=right][tip]:before {left:38px; top:12px; bottom:auto; width:10px; height:5px; transform:rotate(-90deg);}
[tipalign=right][tip]:after {left:45px; top:0; bottom:auto; border-radius:0; -webkit-transform:translateX(0); -ms-transform:translateX(0); transform:translateX(0);}

.hedaer-tab {background:#f6f6f6; text-align:center;}
.hedaer-tab span {display:inline-block; height:54px; padding:0 18px; border-bottom:2px solid #2020ff; color:#303030; font-size:16px; line-height:54px;}

header {position:relative; height:326px; transition:all .2s ease;}
header .util {position:absolute; top:30px; right:30px;}
header .util:after {content:""; display:block; clear:both;}
header .util button {float:left; width:60px; height:60px; margin-left:15px; border-radius:50%; font:0/0 a;}
header .util button.btn-load {background:#fff url("data:image/svg+xml,%3csvg viewBox='0 0 41.507 35.227' xmlns='http://www.w3.org/2000/svg'%3e%3cpath transform='translate(-990 1300)' d='M1009.677-1264.773v-10.636h3.917v6.7h14v-27.376h-14v6.719h-3.917V-1300h21.83v35.226h-3.917v-.016h-14v.017Zm-9.655-11.629,4.2-4.2H990v-3.9h14.1l-4.076-4.074h0l2.631-2.628,8.717,8.716-8.717,8.718Z' fill='%23345dff'/%3e%3c/svg%3e") 50% 50% no-repeat; background-size:42px 36px;}
header .util button.btn-bg {background:#fff url("data:image/svg+xml,%3csvg viewBox='0 0 39.416 39.031' xmlns='http://www.w3.org/2000/svg'%3e%3cg transform='translate(-130.1 -132.1)'%3e%3cg transform='translate(134 136)'%3e%3cpath d='M16.469,0c9.1,0,16.877,7.272,14.808,14.086S23.191,16.1,19.6,20.354C14.763,25.186,19.751,31.11,14,31.231c-9.1,0-14-5.667-14-14.762A16.469,16.469,0,0,1,16.469,0Z' fill='none'/%3e%3cpath d='m16.469-1.9073e-6c-9.0956 0-16.469 7.3734-16.469 16.469 0 9.0956 4.9081 14.762 14.004 14.762 5.7478-0.1212 0.75887-6.0449 5.5917-10.878 3.5957-4.252 9.6133 0.54729 11.682-6.2672 2.0687-6.8145-5.7127-14.086-14.808-14.086m0-3.9c3.2128 0 6.442 0.74801 9.3386 2.1632 2.8235 1.3794 5.2211 3.3293 6.9336 5.6389 1.2248 1.6518 2.0568 3.4236 2.473 5.2663 0.46195 2.0452 0.39296 4.081-0.20505 6.0509-0.83788 2.76-2.3579 4.7127-4.518 5.8036-1.7789 0.89846-3.6086 1.0155-5.0787 1.1095-1.8417 0.1178-2.4025 0.22312-2.8392 0.73953l-0.10512 0.12431-0.11511 0.11512c-1.1464 1.1463-1.2381 2.3022-1.3015 4.2466-0.04702 1.4422-0.10032 3.0769-0.97258 4.6197-0.79 1.3973-2.471 3.0786-5.9932 3.1528l-0.041109 8.6975e-4h-0.041111c-5.5224 0-10.113-1.8054-13.275-5.2209-1.5562-1.6811-2.7407-3.7221-3.5206-6.0665-0.73549-2.2108-1.1084-4.6921-1.1084-7.3749 0-2.7481 0.53909-5.416 1.6023-7.9297 1.0261-2.426 2.4942-4.6039 4.3636-6.4733 1.8694-1.8694 4.0473-3.3375 6.4733-4.3636 2.5137-1.0632 5.1817-1.6023 7.9297-1.6023z' fill='%23345dff'/%3e%3c/g%3e%3ccircle transform='translate(138.3 155.09)' cx='2.864' cy='2.864' r='2.864' fill='%23345dff'/%3e%3ccircle transform='translate(137.34 146.5)' cx='2.864' cy='2.864' r='2.864' fill='%23345dff'/%3e%3ccircle transform='translate(143.55 139.82)' cx='2.864' cy='2.864' r='2.864' fill='%23345dff'/%3e%3ccircle transform='translate(152.62 139.34)' cx='2.864' cy='2.864' r='2.864' fill='%23345dff'/%3e%3c/g%3e%3c/svg%3e") 50% 50% no-repeat; background-size:40px 40px;}
header .util button.btn-preview {background:#fff url("data:image/svg+xml,%3csvg viewBox='0 0 45.4 28.3' xmlns='http://www.w3.org/2000/svg'%3e%3cg transform='translate(-195.38 -146.05)'%3e%3cg transform='translate(192.48 135.95)'%3e%3cg transform='translate(4.029 12.179)' fill='%23345DFF'%3e%3cpath d='m21.3 26.2c-12.9 0-21.8-13-22.1-13.6-0.4-0.6-0.4-1.5 0-2.1 0.3-0.5 8.6-12.6 22.1-12.6s22.2 12 22.6 12.5c0.5 0.7 0.5 1.6 0 2.2-0.4 0.6-9.7 13.6-22.6 13.6zm-18.1-14.6c2.3 2.9 9.2 10.8 18.1 10.8s16.2-7.8 18.6-10.8c-2.4-2.8-9.3-9.8-18.6-9.8s-15.9 7-18.1 9.8z'/%3e%3cpath d='m21.2 20.3c-4.6 0-8.4-3.8-8.4-8.4s3.8-8.4 8.4-8.4 8.4 3.8 8.4 8.4-3.8 8.4-8.4 8.4zm0-13c-2.5 0-4.6 2-4.6 4.6s2 4.6 4.6 4.6 4.6-2 4.6-4.6-2.1-4.6-4.6-4.6z'/%3e%3c/g%3e%3c/g%3e%3c/g%3e%3c/svg%3e") 50% 50% no-repeat; background-size:46px 29px;}
header .util button.btn-modify {background:#fff url("data:image/svg+xml,%3csvg viewBox='0 0 31.906 35.405' xmlns='http://www.w3.org/2000/svg'%3e%3cg transform='translate(-273 -134)'%3e%3cg transform='translate(294.83 170.4) rotate(180)'%3e%3cg transform='translate(0)'%3e%3cpath d='M17.914,36.227v-.016h-13V32.294h13V4.918h-20v13.72H-6V1H21.83V36.227Z' fill='%23345dff'/%3e%3c/g%3e%3c/g%3e%3cpath transform='translate(292.27 159.76) rotate(225)' d='M6.7,24.579V2.494L9.277.057l2.577,2.437V24.579Z' fill='%23345dff'/%3e%3c/g%3e%3c/svg%3e") 50% 50% no-repeat; background-size:25px 28px;}

/* 우측 SIDE 메뉴 */
.side_util {position:absolute; top:200px; right:-80px; background:#fff; padding:15px; box-shadow:0 3px 5px 0 rgba(0, 0, 0, 0.16); transition:top .2s ease-in-out;}
.side_util li:first-child button {margin-top:0;}
.side_util li button {position:relative; width:30px; height:30px; margin-top:14px; border-radius:50%; font:0/0 a;}
.side_util li button span {display:inline-block; position:relative; margin:0 auto;}
.side_util li button.btn-add {background:#345dff;}
.side_util li button.btn-add span {background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 41 39' %3e%3cpath d='M0.001,17.382 L0.004,21.670 L18.342,21.681 L18.353,38.998 L22.579,39.001 L22.567,21.683 L40.991,21.695 L40.988,17.406 L22.565,17.396 L22.554,-0.005 L18.329,-0.007 L18.339,17.393 L0.001,17.382 Z' fill='%23fff'/%3e%3c/svg%3e") 50% 50% no-repeat; background-size:18px 18px; width:18px; height:18px;}
.side_util li button.btn-text {background:#345dff;}
.side_util li button.btn-text span {background:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 15' preserveAspectRatio='none' style='fill:%23fff;'%3e%3cpath d='M-2087-36V-49h-6v-2h14v2h-6v13Z' transform='translate(2093 51)'/%3e%3c/svg%3e") 50% 50% no-repeat; background-size:14px 15px; width:14px; height:15px;}
.side_util li button.btn-img {background:#345dff;}
.side_util li button.btn-img span {background:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 10.339' preserveAspectRatio='none' style='fill:%23fff;'%3e%3cpath d='M-2077.632-105.416l-7.754,7.754-1.292-1.292,1.814-1.814-1.906-1.906-4.523,4.523-1.292-1.293,5.815-5.815.914.914,2.284,2.285,5.94-5.94,9.047,9.047-1.292,1.292Z' transform='translate(2092.585 108)'/%3e%3c/svg%3e") 50% 50% no-repeat; background-size:26px 11px; width:26px; height:11px;}
.side_util li button.btn-mov {background:#345dff;}
.side_util li button.btn-mov span {background:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 14' preserveAspectRatio='none' style='fill:%23fff;'%3e%3cpath d='M1006-1286H990v-14h18v14Zm-14-2h14v-10H992Zm5.891-7.857,3.8,2.916-3.746,2.849Z' transform='translate(-990 1300)'/%3e%3c/svg%3e") 50% 50% no-repeat; background-size:18px 14px; width:18px; height:14px;}
.side_util li button.btn-sec {background:#345dff;}
.side_util li button.btn-sec span {background:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 14' preserveAspectRatio='none' style='fill:%23fff;'%3e%3cpath d='M1006-1286h-6v-14h8v14Zm-4-2h4v-10h-4Zm-6,2h-6v-14h8v14Zm-4-2h4v-10h-4Z' transform='translate(-990 1300)'/%3e%3c/svg%3e") 50% 50% no-repeat; background-size:18px 14px; width:18px; height:14px;}

#form-container {width:960px; margin:0 auto; transition:all .2s ease; transform:translateY(-139px);}

[class^=form_box] {position:relative; background:#fff; padding:50px 50px 40px; box-sizing:border-box; z-index:1; transition:all .2s ease;}
[class^=form_box]:before {content:""; position:absolute; top:0; bottom:0; left:0; background:#6889fa; width:0; height:100%; transition:all .2s ease;}

/* select */
.select-box {display:inline-block; position:relative; background:#fff; max-width:100%; z-index:10;}
.select-box .selected {display:block; position:relative; overflow:hidden; text-overflow:ellipsis; max-width:100%; height:42px; padding:0 40px 0 20px; border:1px solid #d9dddf; border-radius:3px; box-sizing:border-box; color:#666; font-size:16px; line-height:42px; white-space:nowrap;}
.select-box .selected:after {content:""; position:absolute; top:50%; right:16px; border-style:solid; border-width:5px; border-color:#888 transparent transparent transparent; margin-top:-2px; transform-origin:50% 2px; transition:all .2s ease;}
.select-box .select-layer {display:none; position:absolute; top:40px; background:#fff; max-width:860px; border:1px solid #d9dddf; border-radius:3px; box-sizing:border-box;}
.select-box .select-layer[data-align="right"] {right:0;}
.select-box .select-layer[data-align="left"] {left:0;}
.select-box .select-layer li {padding:0 !important; border:0 !important; white-space:nowrap; animation:none;}
.select-box .select-layer li a {display:block; padding:10px 34px 10px 16px; box-sizing:border-box; color:#333; font-size:14px; text-align:left; line-height:1.2; word-wrap:break-word; word-break:break-word;}
.select-box .select-layer li a:hover {background:#eee;}
.select-box.active .selected:after {transform:rotate(180deg);}
.select-box.active .select-layer {display:block;}

.select-box.small .selected {height:26px; padding-left:16px; border-color:#bbb; line-height:24px; font-size:14px;}
.select-box.small .select-layer {top:24px; border-color:#bbb;}
.select-box.small .select-layer li a {padding:5px 34px 5px 16px; font-size:14px;}

select.default {background:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 5'%3e%3cpath fill-rule='evenodd' preserveAspectRatio='none slice' fill='%23888' d='M10 0L5 5 0 0h10z'/%3e%3c/svg%3e") calc(100% - 10px) 50% no-repeat; background-size:10px 5px; height:26px; padding-left:16px; border:1px solid #bbb; border-radius:3px; color:#707070; font-size:14px; -webkit-appearance:none; -moz-appearance:none; appearance:none; outline:none;}
select::-ms-expand{display:none;}

/* 체크박스 */
[class*=chkBox] {position:relative; width:100%; padding-left:26px; box-sizing:border-box;}
[class*=chkBox] span {position:absolute; top:50%; left:0; width:18px; height:18px; margin-top:-9px; z-index:1;}
[class*=chkBox] span i {position:absolute; top:0; left:0; background-color:#fff; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 11'%3e%3cpath fill-rule='evenodd' d='M5.822 10.502l-4.61-5.311C.855 4.78.9 4.158 1.311 3.801c.412-.356 1.034-.312 1.391.099l3.257 3.752L13.114.848c.394-.376 1.019-.359 1.394.034.375.394.36 1.018-.035 1.393l-8.651 8.227z' fill='%23fff'/%3e%3c/svg%3e"); background-position:50% 50%; background-repeat:no-repeat; background-size:12px auto; width:18px; height:18px; border:2px solid #878787; border-radius:2px; box-sizing:border-box; transition:all .2s ease;}
[class*=chkBox] span input[type=checkbox] {position:absolute; top:0; left:0; width:100%; height:100%; margin:0; padding:0; opacity:0; z-index:5;}
[class*=chkBox] span input[type=checkbox]:checked + i {background-color:#3664fa; border-color:#3664fa;}
[class*=chkBox] label,
[class*=chkBox] .inp {display:inline-block; position:relative; padding:5px 0; color:#aaa; font-size:13px; cursor:pointer; line-height:1.2; z-index:2;}
[class*=chkBox] label a {color:#607DF1;}

[class*=chkBox].etc span {top:4px; margin-top:0;}
[class*=chkBox] .chk_etc {display:table; width:100%;}
[class*=chkBox] .chk_etc > * {display:table-cell; vertical-align:top;}
[class*=chkBox] .chk_etc > div {display:flex; align-items:flex-start;}
[class*=chkBox] .chk_etc > div:before {content:":"; display:inline-block; margin:6px 5px 0;}
[class*=chkBox] .chk_etc em {padding:0 5px;}
[class*=chkBox] .chk_etc label {white-space:nowrap;}
[class*=chkBox] .chk_etc .inp {word-break:break-word;}
[class*=chkBox] select {min-width:177px; margin-left:26px;}

/* 드롭다운 : 관리자 */
[class*=dropdown] .num {color:#888; font-size:14px;}
[class*=dropdown] .inp {display:inline-block; position:relative; margin-left:12px; padding:5px 0; color:#aaa; font-size:13px; cursor:pointer; line-height:1.2; z-index:2;}
[class*=dropdown] select {min-width:177px; margin-left:26px;}

/* 최대 글자 설정 */
.inp_textSize {width:100px; box-sizing:border-box; border-bottom:2px solid #eee;}
.inp_textSize:after {content:""; display:block; clear:both;}
.inp_textSize input,
.inp_textSize span {height:42px; font-size:16px; line-height:42px;}
.inp_textSize input {float:left; width:50px; border:0;}
.inp_textSize span {float:right;}

/* 필수 체크 */
.necessary {position:relative;}
.necessary:after {content:""; display:block; clear:both;}
.necessary label {float:left; height:20px; padding-right:17px; font-size:16px; line-height:20px;cursor:pointer;}
.necessary div {float:right; position:relative; width:38px; height:20px;}
.necessary div input[type=checkbox] {position:absolute; top:0; left:0; width:38px; height:20px; margin:0; opacity:0; z-index:5; cursor:pointer;}
.necessary div i {position:absolute; top:50%; left:0; background:#a8a8a9; width:38px; height:14px; margin-top:-7px; border-radius:30px; transition:all .2s ease;}
.necessary div i:after {content:""; position:absolute; top:-4px; left:0; background:#fff; width:20px; height:20px; border-radius:50%; box-shadow:0 2px 2px 0 rgba(0, 0, 0, 0.24); transition:all .2s ease;}
.necessary div input[type=checkbox]:checked + i {background:#3664fa;}
.necessary div input[type=checkbox]:checked + i:after {left:19px;}

/* 인풋 텍스트 스타일 : 관리자  */
.inp_box-title .inp {font-size:34px; font-weight:600;}
.inp_box-qst .inp {min-height:25px; font-size:21px;}
.inp_box-desc {margin-top:10px;}
.inp_box-desc a {color:#607DF1;}
.inp_box-desc .inp,
.inp_box-answer .inp {min-height:17px; color:rgba(0, 0, 0, 0.87); font-size:14px;}
.inp_box-answer {margin-top:17px;}

/* 인풋 텍스트 스타일 : 사용자  */
.inp_box-title h2,
.inp_box-qst h3,
.inp_box-desc p,
.inp_box-answer p {transition:all .2s ease; word-wrap:break-word; word-break:break-word;}

.inp_box-title h2 {font-size:34px; font-weight:600;}
.inp_box-qst h3 {font-size:21px;}
.inp_box-qst h3 sup {color:#ff0000;}
.inp_box-desc p,
.inp_box-answer p {color:#aaa; font-size:14px;}

.form_setting {opacity:0; visibility:hidden; transition:all .3s ease;}
.form_setting [class^=btn-] {position:absolute; top:0; font:0/0 a;}
.form_setting .btn-moveSection {left:0; background:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 21 9'%3e%3cpath d='M18 9V6h3v3zm-6 0V6h3v3zM6 9V6h3v3zM0 9V6h3v3zm18-6V0h3v3zm-6 0V0h3v3zM6 3V0h3v3zM0 3V0h3v3z' fill='%23aaa'/%3e%3c/svg%3e") 50% 50% no-repeat; background-size:21px 10px; width:100%; height:40px; cursor:move; z-index:4;}
.form_setting .btn-delSection {right:12px; background:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' preserveAspectRatio='none' style='fill:%23888;'%3e%3cpath d='M19,6.4,17.6,5,12,10.6,6.4,5,5,6.4,10.6,12,5,17.6,6.4,19,12,13.4,17.6,19,19,17.6,13.4,12Z' transform='translate(-5 -5)'/%3e%3c/svg%3e") 50% 50% no-repeat; background-size:14px 14px; width:32px; height:56px; z-index:5;}
.form_setting .btn-copy {right:44px; background:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 18'%3e%3cpath fill-rule='evenodd' fill='%23888' d='M13 14h-2v4H0V4h4V0h11v14h-2zM2 6v10h7V6H2zm11-4H6v2H11v8h2V2z'/%3e%3c/svg%3e") 50% 50% no-repeat; background-size:15px 18px; width:33px; height:56px; z-index:5; -webkit-transform: translateZ(0)}
.form_setting .btn-copy[tip]:before {bottom:10px;}
.form_setting .btn-copy[tip]:after {bottom:-14px;}

.form_setting .grid-box {position:absolute; bottom:16px; left:0; width:100%; padding:0 50px; box-sizing:border-box;}
.form_setting .grid-box select.default {height:42px; padding:0 28px 0 16px; line-height:40px;}
.grid-box:after {content:""; display:block; clear:both;}
.grid-box .grid-lt {float:left;}
.grid-box .grid-rt {float:right;}
.grid-box .grid-lt > *,
.grid-box .grid-rt > * {display:inline-block; vertical-align:top;}

.grid-box .inp_textSize {margin-left:16px;}
.grid-box .necessary {margin-right:45px; padding-top:11px;}

/* 전화번호 */
.inp_box-answer.tel:after {content:""; display:block; clear:both;}
.inp_box-answer.tel > * {float:left;}
.inp_box-answer.tel .inp {width:38px; text-align:center;}
.inp_box-answer.tel .inp:first-of-type {width:30px;}
.inp_box-answer.tel span {margin:7px 4px 0; color:#aaa;}

.inp_box-answer.tel .inp_num {width:38px;}
.inp_box-answer.tel .inp_num:first-of-type {width:30px;}
.inp_num {position:relative;}
.inp_num input[type=number]::-webkit-input-placeholder {color:#aaa;}
.inp_num input[type=number]:-ms-input-placeholder {color:#aaa;}
.inp_num input[type=number] {background:transparent; width:100%; height:27px; border:1px dotted #aaa; border-width:0 0 1px; color:rgba(0, 0, 0, 0.87); text-align:left;}
.inp_num i {position:absolute; bottom:-1px; left:50%; background:#345dff; width:0; height:2px; transition:all .2s ease;
	-webkit-transform:translateX(-50%); -ms-transform:translateX(-50%); transform:translateX(-50%);
}
.inp_num input[type=number]:focus + i {width:100%;}
.inp_box-answer.tel .inp_num input[type=number] {text-align:center;}

/* 체크박스 */
.section_box {margin-top:27px;}
.section_box .grid-box {margin-top:8px;}
.section_box .grid-box:first-child {margin-top:0;}
.section_box .grid-rt {width:46px; text-align:right; opacity:0; visibility:hidden;}
.section_box .grid-rt button {float:left; width:18px; height:18px; border-radius:3px; font-size:0; line-height:0;}
.section_box .grid-rt button.btn-del {background:#ccc url("data:image/svg+xml,%3csvg fill='%23fff' preserveAspectRatio='none' viewBox='0 0 10 2' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='m-0-0h10v2h-10v-2z'/%3e%3c/svg%3e") 50% 50% no-repeat; background-size:10px 2px;}
.section_box .grid-rt button.btn-add {background:#ccc url("data:image/svg+xml,%3csvg fill='%23fff' preserveAspectRatio='none' viewBox='0 0 10 10' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='m-0 6v-2h4v-4h2v4h4v2h-4v4h-2v-4'/%3e%3c/svg%3e") 50% 50% no-repeat; background-size:10px 10px; margin-left:9px;}
.section_box .grid-rt button.btn-text {float:right; width:auto; color:#6683fc; font-size:14px; line-height:18px; white-space:nowrap;}
.section_box .grid-rt button.btn-text:hover {color:#345DFF;}

/* 섹션 나누기 */
.section_step {position:relative; background:#fff; margin:40px 0 10px;}
.section_step:after {content:""; display:block; clear:both;}
.section_step:first-of-type {margin-top:0;}
.section_step span {display:inline-block; position:relative; background:#345dff; width:146px; height:38px; color:#fff; font-size:16px; line-height:38px; text-align:center;}
.section_step span:after {content:""; position:absolute; top:0; right:-38px; border-style:solid; border-width:19px; border-color:transparent transparent transparent #345dff;}
.section_step .btn-detail {position:absolute; top:0; right:0; background:url("data:image/svg+xml,%3csvg fill='%23727272' preserveAspectRatio='none' viewBox='0 0 4 16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath transform='translate(-4 -4)' d='m6 8a2 2 0 1 0-2-2 2.006 2.006 0 0 0 2 2zm0 2a2 2 0 1 0 2 2 2.006 2.006 0 0 0-2-2zm0 6a2 2 0 1 0 2 2 2.006 2.006 0 0 0-2-2z'/%3e%3c/svg%3e") 50% 50% no-repeat; background-size:4px 16px; width:36px; height:36px; font:0/0 a; z-index:3;}
.section_step .detail-layer {position:absolute; top:36px; right:-27px; background:#fff; padding:5px 0; box-shadow:0 3px 6px 0 rgba(0, 0, 0, 0.16); z-index:5;}
.section_step .detail-layer a {display:block; width:90px; height:24px; color:#0d0d0d; font-size:14px; line-height:24px; text-align:center;}
.section_step .gopage {display:flex; align-items:center; float:right; height:38px; margin-right:56px;}
.section_step .gopage p {flex:0 1 auto; color:#707070; font-size:14px; font-weight:600;}
.section_step .gopage .select-box {flex:0 1 auto; margin-left:8px;}

/* 이미지 */
[class^=add_file] {margin-top:30px;}
[class^=add_file] .btn-img,
[class^=add_file] .guide_text {display:inline-block; vertical-align:bottom;}
[class^=add_file] .btn-img {position:relative; background:#eee; width:120px; height:80px; margin-right:6px; border:1px dotted #888;}
[class^=add_file] .btn-img span {position:absolute; top:50%; left:50%; background:#ccc url("data:image/svg+xml,%3csvg fill='%23fff' preserveAspectRatio='none' viewBox='0 0 18 14' xmlns='http://www.w3.org/2000/svg'%3e%3cpath transform='translate(-990 1300)' d='m991-1285a1 1 0 0 1-1-1v-12a1 1 0 0 1 1-1h4a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1h4a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1zm4-7a4 4 0 0 0 4 4 4 4 0 0 0 4-4 4 4 0 0 0-4-4 4.005 4.005 0 0 0-4 4zm1 0a3 3 0 0 1 3-3 3 3 0 0 1 3 3 3 3 0 0 1-3 3 3 3 0 0 1-3-3z'/%3e%3c/svg%3e") 50% 50% no-repeat; background-size:18px 15px; width:30px; height:30px; margin:-15px 0 0 -15px; border-radius:50%; font:0/0 a;}
[class^=add_file] img {max-width:100%; vertical-align:middle;}
[class^=add_file] .image {display:inline-block; position:relative; max-width:100%;}
[class^=add_file] .image:after {content:""; position:absolute; top:0; bottom:0; left:0; right:0; background:rgba(0,0,0,.6); z-index:2;}
[class^=add_file] .image .btn-detail {position:absolute; top:0; right:0; background:url("data:image/svg+xml,%3csvg fill='%23fff' preserveAspectRatio='none' viewBox='0 0 4 16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath transform='translate(-4 -4)' d='m6 8a2 2 0 1 0-2-2 2.006 2.006 0 0 0 2 2zm0 2a2 2 0 1 0 2 2 2.006 2.006 0 0 0-2-2zm0 6a2 2 0 1 0 2 2 2.006 2.006 0 0 0-2-2z'/%3e%3c/svg%3e") 50% 50% no-repeat; background-size:4px 16px; width:36px; height:36px; font:0/0 a; z-index:3;}
[class^=add_file] .detail-layer {position:absolute; top:35px; right:0; background:#fff; padding:5px 0; box-shadow:0 3px 6px 0 rgba(0, 0, 0, 0.16); z-index:5;}
[class^=add_file] .detail-layer a {display:block; width:55px; height:24px; color:#0d0d0d; font-size:12px; line-height:24px; text-align:center;}

[class^=add_file] .image:after,
[class^=add_file] .image .btn-detail,
[class^=add_file] .detail-layer {opacity:0; visibility:hidden; transition:all .2s ease;}

[class^=add_file]:hover .image:after,
[class^=add_file]:hover .image .btn-detail {opacity:1; visibility:visible;}
[class^=add_file] .detail-layer.on {opacity:1; visibility:visible;}

[class^=add_file].none .image:after {display:none;}

.add_file-mov .image {width:auto;}
.add_file-mov .image iframe {position:relative; z-index:1;}


/* 개인정보 약관 */
.terms-box {margin-top:30px;}
.terms-box textarea {background:#eee; width:100%; height:130px; margin:0; padding:12px; border:1px dotted #888; box-sizing:border-box; font-size:14px; resize:none; outline:none;}
.terms-box textarea:focus {background:#fff;}

/* 질문 박스 : 기본 */
[class^=inp_box] .inp {position:relative; padding:5px 0; border-bottom:1px dotted #aaa; cursor:text; outline:none;}
[class^=inp_box] .inp[contenteditable=true]:empty:before,
[class^=inp_box] .inp[contenteditable=false]:empty:before {content:attr(placeholder); display:block; color:#aaa;}
[class^=inp_box] .inp:after {content:""; position:absolute; bottom:-1px; left:50%; background:#345dff; width:0; height:2px; transition:all .2s ease;
	-webkit-transform:translateX(-50%); -ms-transform:translateX(-50%); transform:translateX(-50%);
}
[class^=form_box] [class^=inp_box] .inp:focus:after {width:100%;}
[class^=inp_box] .inp.etc {border-bottom:0;}

/* 질문 박스 : 활성화 */
[class^=form_box].active {padding:90px 50px 116px; box-shadow:0 3px 14px 0 rgba(0, 0, 0, 0.16); z-index:2;}
[class^=form_box].active:before {width:5px;}
.form_box-title.active {padding:50px 50px 40px;}
.form_box-text.active,
.form_box-img.active {padding:90px 50px 40px;}
[class^=form_box].active .form_setting,
[class^=form_box].active .section_box .grid-rt {opacity:1; visibility:visible;}
[class^=form_box].active .section_box .grid-rt:after {content:""; display:block; clear:both;}

/* 다중답변 */
.inp_box-qst {position:relative;}
.inp_box-qst .btn_addDesc {position:absolute; top:50%; right:0; height:26px; margin-top:-13px; color:#707070; font-size:14px; line-height:26px;}
.section_box.multiple .grid-box {display:flex; align-items:center; justify-content:space-between;}
.section_box.multiple .grid-box > * {flex:0 1 auto;}
.section_box.multiple .grid-lt {width:100%;}
.section_box.multiple .grid-rt {display:flex; align-items:center; flex:0 1 auto; width:auto; height:26px;}
.section_box.multiple .grid-rt > * {display:block; flex:0 1 auto; float:none;}
.section_box.multiple .grid-rt .btn {flex:1 0 auto; width:46px;}
.section_box.multiple .grid-rt select {min-width:100px; margin-right:17px;}
.section_box.multiple .grid-rt .inp_textSize {width:70px; margin-left:0; margin-right:12px; border-color:#eee;}
.section_box.multiple .grid-rt .inp_textSize input,
.section_box.multiple .grid-rt .inp_textSize span {height:25px; line-height:25px;}
.section_box.multiple .grid-rt .inp_textSize input {width:35px;}
.section_box.multiple .inp_box-answer {display:block; max-width:605px; margin-top:0; margin-right:10px;}


/* 레이어 공통 */
.form-layer_wrap {position:absolute; top:0; left:0; width:100%; z-index:100;}
.form-layer_wrap:after {content:""; position:fixed; top:0; bottom:0; left:0; right:0; background:rgba(0,0,0,.2); z-index:2;}
.form-layer_wrap .form-layer {position:absolute; top:30px; left:50%; background:#fff; min-width:540px; padding:40px 40px 30px; box-sizing:border-box; z-index:3;
	-webkit-transform:translateX(-50%); -ms-transform:translateX(-50%); transform:translateX(-50%);
}
.form-layer_wrap .form-layer h2 {color:#000; font-size:21px; font-weight:600;}
.form-layer_wrap .form-layer .btn-close {position:absolute; top:45px; right:35px; background:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' preserveAspectRatio='none' style='fill:%23888;'%3e%3cpath d='M19,6.4,17.6,5,12,10.6,6.4,5,5,6.4,10.6,12,5,17.6,6.4,19,12,13.4,17.6,19,19,17.6,13.4,12Z' transform='translate(-5 -5)'/%3e%3c/svg%3e") 50% 50% no-repeat; background-size:14px 14px; width:24px; height:24px; font:0/0 a;}
.form-layer_wrap .form-layer .btn-area {margin-top:30px; text-align:center; font-size:0;}
.form-layer_wrap .form-layer .btn-area button {display:inline-block; background:#eee; width:94px; height:36px; border-radius:3px; color:#888; font-size:16px; line-height:36px; text-align:center;}
.form-layer_wrap .form-layer .btn-area button:first-child {margin-right:20px;}
.form-layer_wrap .form-layer .btn-area .btn-ok {background:#345dff; color:#fff;}
.form-layer_wrap .form-layer .btn-area .btn-ok:disabled {background:#8da4ff;}

/* 이미지 첨부 레이어 */
.layer-contents .add-img {position:relative; width:460px; min-height:310px; margin-top:20px; border:1px dashed #ccc;}
.layer-contents .add-img .btn-file {position:absolute; top:50%; left:50%; background:#345dff; width:200px; height:36px; margin:-18px 0 0 -100px; border-radius:3px; color:#fff; font-size:16px; line-height:36px; cursor:pointer;}
.layer-contents .add-img {text-align:center; line-height:310px;}
.layer-contents .add-img img {max-width:100%; vertical-align:middle;}

/* 동영상 첨부 레이어 */
.layer-contents .add-mov {position:relative; width:460px; min-height:310px; margin-top:20px; border:1px dashed #ccc;}
.layer-contents .add-mov.preview {min-height:auto; border:0;}
.layer-contents .add-mov.preview iframe {max-width:100%;}

/* 신청서 불러오기 */
.form-layer_wrap .form-layer.form-load {width:820px;}
.form-layer.form-load .load-tbl {margin-top:20px;}
.form-layer.form-load .load-tbl table {width:100%;}
.form-layer.form-load .load-tbl table th {background:#d4d4d4; height:30px; color:#232323; vertical-align:middle;}
.form-layer.form-load .load-tbl table tbody {border:1px solid #eee; border-top:0;}
.form-layer.form-load .load-tbl table tbody tr {cursor:pointer;}
.form-layer.form-load .load-tbl table tbody tr.active {background:#8da4ff;}
.form-layer.form-load .load-tbl table td {height:34px; border-bottom:1px solid #eee; color:#232323; text-align:center; vertical-align:middle;}

.list_paging {overflow:hidden;width:100%}
.list_paging a {display:block;height:30px;line-height:33px;border:1px solid #e3e3e3;font-size:14px;color:#333;text-align:center;text-decoration:none;background:#fafafa}
.list_paging a em {display:inline-block;width:11px;height:6px;vertical-align:middle;margin:0 0 2px 9px;line-height:100%;background:url("/images/afmain/img_main.png") no-repeat -531px -55px;}


/* 동영상 첨부 레이어 */
.layer-contents .addMov-url {margin-top:20px;}
.layer-contents .addMov-url:after {content:""; display:block; clear:both;}
.layer-contents .addMov-url label {float:left; height:29px; color:#aaa; font-size:14px; line-height:29px;}
.layer-contents .addMov-url input[type=text] {float:right; width:320px; height:29px; padding-left:10px; box-sizing:border-box; border:1px solid #ccc;}
.layer-contents .addMov-url + .add-img {margin-top:17px;}
.layer-contents .addMov-url.img input[type=text] {width:420px;}

/* 배경설정 */
body.setBG .bg-setting {-webkit-transform:translateX(0); -ms-transform:translateX(0); transform:translateX(0);}
.bg-setting {position:fixed; top:0; bottom:0; right:0; background:#fff; width:347px; padding:30px; box-sizing:border-box; box-shadow:0 3px 6px 0 rgba(0, 0, 0, 0.16); transition:all .2s ease;
	-webkit-transform:translateX(100%); -ms-transform:translateX(100%); transform:translateX(100%);
}
.bg-setting h2 {color:#000; font-size:21px;}
.bg-setting .btn-close {position:absolute; top:30px; right:30px; background:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' preserveAspectRatio='none' style='fill:%23888;'%3e%3cpath d='M19,6.4,17.6,5,12,10.6,6.4,5,5,6.4,10.6,12,5,17.6,6.4,19,12,13.4,17.6,19,19,17.6,13.4,12Z' transform='translate(-5 -5)'/%3e%3c/svg%3e") 50% 50% no-repeat; background-size:14px 14px; width:30px; height:30px; font:0/0 a; z-index:5;}
.bg-setting .setting-box h3 {margin:50px 0 20px;}
.bg-setting .setting-box .btn-addImg {display:block; background:#345dff; width:200px; height:36px; border-radius:3px; color:#fff; font-size:16px; line-height:36px; text-align:center;}
.bg-setting .setting-box .addImgUrl {position:relative; width:200px; padding-left:20px; border:1px solid #707070; border-radius:3px; box-sizing:border-box;}
.bg-setting .setting-box .addImgUrl p {overflow:hidden; text-overflow:ellipsis; width:140px; height:36px; color:#707070; font-size:16px; line-height:36px; white-space:nowrap;}
.bg-setting .setting-box .addImgUrl .btn-del {position:absolute; top:0; right:0; background:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' preserveAspectRatio='none' style='fill:%23888;'%3e%3cpath d='M19,6.4,17.6,5,12,10.6,6.4,5,5,6.4,10.6,12,5,17.6,6.4,19,12,13.4,17.6,19,19,17.6,13.4,12Z' transform='translate(-5 -5)'/%3e%3c/svg%3e") 50% 50% no-repeat; background-size:14px 14px; width:30px; height:36px; font:0/0 a; z-index:5;}

.bg-setting .setting-box .imgBgColor {width:200px; height:36px; padding-left:20px; box-sizing:border-box; border-radius:3px; border:1px solid #707070; color:#707070; font-size:16px; line-height:34px;}
.bg-setting .setting-box .imgBgColor::-webkit-input-placeholder {color:#ccc;}
.bg-setting .setting-box .imgBgColor:-ms-input-placeholder {color:#ccc;}


/* 유저 입력 화면 정의 */
.userView .hedaer-tab {display:none;}
.userView #form-wrap {overflow:unset; min-width:auto;}
.form_box-select {z-index:2;}
.userView .terms-box textarea {background:#fff;}
.userView .terms-box .inp_box-chkBox {margin-top:10px;}
.userView .terms-box .inp_box-chkBox label {color:#aaa; font-size:12px;}
.userView .add_file-mov .image {display:block;}
.userView .add_file-mov .image:after {display:none;}

.userView .form_box-select .section_box {position:relative;}
.userView .form_box-select .select-box {position:static;}
.userView .select-box .select-layer li {white-space:normal;}
.userView .form_box-select select.default {height:42px; padding:0 28px 0 16px; line-height:40px;}

.userView [class^=form_box] {position:static;}
@media all and (max-width:660px){
	.userView [class^=form_box] {margin-bottom:-1px;}
}

.form_box-btn {background:#fff; padding:30px 50px; font-size:0;}
.form_box-btn button {display:inline-block; margin-right:20px; padding:0 32px; height:36px; border:1px solid #707070; border-radius:3px; font-size:16px; font-weight:600; font-size:16px; line-height:34px;}
.form_box-btn button:last-child {margin-right:0;}
.form_box-btn button.btn-blue {background:#345dff; border-color:#345dff; color:#fff;}
.form_box-btn button.btn-gray {background:#eee; border-color:#eee; color:#888;}


/* 질문 박스 : 에러 */
[class^=form_box].error {background:#ffe9e9;}
[class^=form_box].error .text_error {margin:5px 0 -20px; color:#ff0000; font-size:12px;}
[class^=form_box].error [class^=inp_box].error .inp:after,
[class^=form_box].error [class^=inp_box].error .inp_num i {background:#b92d00; width:100%;}
	
/* 반응형 */
@media all and (max-width:992px){
	.userView #form-container {width:calc(100% - 32px); margin:0 16px;}
	.add_file-mov .image {padding-bottom:56.25%;}
	.add_file-mov .image iframe {position:absolute; top:0; bottom:0; left:0; right:0; width:100% !important; height:100%;}
}

@media all and (max-width:660px){
	.userView header {background-size:auto 93px !important; height:160px;}
	.userView #form-container {-webkit-transform:translateY(-70px); -ms-transform:translateY(-70px); transform:translateY(-70px);}

	.userView [class^=form_box] {padding:30px 16px;}
	.userView .form_box-btn {text-align:center;}
}

@media all and (max-width:480px){
	.userView .inp_box-title h2,
	.userView .inp_box-qst h3 {font-size:16px;}
	.userView .inp_box-desc p,
	.userView .inp_box-answer p {font-size:12px;}

	.userView .select-box {width:100%;}
	.userView .select-box.active .select-layer {width:100%;}

	.userView [class^=add_file] .guide_text {display:block; margin-top:10px;}
	.userView [class^=add_file] .image {display:block;}
	.userView [class^=add_file] .image img {width:100%; max-width:none;}
}