@font-face {
  font-family: 'ONE-Mobile-Title';
  src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2105_2@1.0/ONE-Mobile-Title.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}
:root{
  /* media query */
  --breakpoint-lg: 1240px;
  --breakpoint-md: 1024px;
  --breakpoint-sm: 978px;
  --breakpoint-xs: 640px;

  /* layout */
  --container-width: 1200px;
  --gutter: 20px;
  --spacing-unit: 8px;
  --border-radius: 4px;
  --box-shadow: 0 0 20px rgba(0, 0, 0, .3);
  --box-shadow-light: 0 0 8px rgba(88, 88, 88, .1);

  /* transition */
  --transition-025s: all .25s ease-in-out;

  /* z-index */
  --z-index-base: 1;
  --z-index-lg: 999;
  --z-index-modal: 9999;
  --z-index-close: 10000;

  /* font */
  --font-family-base: 'Pretendard', -apple-system, sans-serif;
  --font-color: #343434;
  --font-light: #787878;
  --font-dark: #121212;
  --font-white: #fff;
}

/* 기본 (단일 컨텐츠) */
[data-theme="single-content"]{
  /* Primary Colors */
  --primary-color: #1341bb;
  --primary-light: #98b0ef;
  --primary-dark: #0c2363;
  --primary-mega-light: #edf2ff;

  /* Secondary Colors */
  --secondary-color: #8c3b1d;
  --secondary-light: #b25632;
  --secondary-dark: #5f2713;

  /* Tertiary Colors */
  --tertiary-color: #3a5a40;
  --tertiary-light: #588463;
  --tertiary-dark: #253b2c;

  /* Quaternary Colors */
  --quaternary-color: #1e3a5f;
  --quaternary-light: #2f5b8a;
  --quaternary-dark: #14283f;

  /* Quinary Colors */
  --quinary-color: #70592c;
  --quinary-light: #a48b50;
  --quinary-dark: #4e3e1f;

  --button-default: #e0e0e0;
  --button-submit: #28a745;
  --button-cancel: #dc3545;
  --button-edit: #ffc107;

  --content-width: 1080px;
}

/* 스와이프형 */
[data-theme="swipable-content"]{
  --primary-color: #ff5722;
  --primary-light: #ff8a50;
  --primary-dark: #e64a19;

  --secondary-color: #607d8b;
  --secondary-light: #90a4ae;
  --secondary-dark: #455a64;

  --button-default: #cccccc;
  --button-submit: #388e3c;
  --button-cancel: #d32f2f;
  --button-edit: #fbc02d;

  --content-width: 1080px;
}

/* 리스트형 */
[data-theme="list-content"]{
  --primary-color: #673ab7;
  --primary-light: #9575cd;
  --primary-dark: #512da8;

  --secondary-color: #009688;
  --secondary-light: #4db6ac;
  --secondary-dark: #00796b;

  --button-default: #bbbbbb;
  --button-submit: #007e33;
  --button-cancel: #cc0000;
  --button-edit: #ffbb33;

  --content-width: 1080px;
}



html{ min-width:320px; background:var(--primary-dark); }
body{ position:relative; }
body *{ transition:var(--transition-025s); }



.wrap{ width:100%; max-width:640px; min-height:100vh; background:#fff; border-radius:15px 15px 0 0; margin:50px auto 100px; position:relative; overflow:hidden; box-shadow:var(--box-shadow); }
.wrap header{ padding:10px 15px; }
.wrap header div{ display:flex; justify-content:space-between; align-items:center; position:relative; }
.wrap header div p{ max-height:24px; }
.wrap header div p > img{ max-width:120px; }
.wrap header div p a{ width:15px; height:24px; position:relative; }
.wrap header div p a:before{ content:''; width:15px; height:2px; background:#000; border-radius:50px; position:absolute; top:7px; left:0; transform:rotate(-40deg); }
.wrap header div p a:after{ content:''; width:15px; height:2px; background:#000; border-radius:50px; position:absolute; bottom:6px; left:0; transform:rotate(40deg); }
.wrap header div .title{ font-size:18px; font-weight:900; text-align:center; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); }
.wrap header div button{ display:flex; flex-direction:column; justify-content:center; width:48px; height:24px; position:relative; z-index:var(--z-index-close); }
.wrap header div button .line{ display:block; width:100%; height:3px; background:#000; margin:2.5px auto; transition:all .4s ease-in-out; }
.wrap header div button .line:nth-child(1){ width:50%; background:var(--primary-light); margin-right:0;}
.wrap header div button .line:nth-child(3){ width:50%; margin-left:0; }

.wrap .visual{ padding:0 10px; position:relative; }
.wrap .visual .visual_img{ border-radius:20px; overflow:hidden; }
.wrap .visual .visual_title{ max-width:90%; font-family:'ONE-Mobile-Title'; font-size:28px; font-weight:900; background:#fff; border-radius:0 20px 0 0; padding:15px 20px; position:absolute; left:0; bottom:0; }
.wrap .visual .visual_title:before{ content:''; width:20px; height:20px; background:url('../img/visual_round.png') no-repeat center center; position:absolute; top:-20px; left:10px; }
.wrap .visual .visual_title:after{ content:''; width:20px; height:20px; background:url('../img/visual_round.png') no-repeat center center; position:absolute; bottom:0; right:-20px; }

.wrap .sympoInfo{ width:calc(100% - 30px); background:var(--primary-mega-light); border-radius:20px; padding:30px 15px; margin:30px auto 0; }
.wrap .sympoInfo .sympo_title{ font-family:'ONE-Mobile-Title'; font-size:24px; font-weight:600; text-align:center; }
.wrap .sympoInfo .sympo_info{ text-align:center; margin-top:10px; }
.wrap .sympoInfo .sympo_info li{ margin-top:5px; }

.wrap .sympoMenu{  }
.wrap .sympoMenu .sympoMenu_inner{ padding:0 15px; }
.wrap .sympoMenu .sympoMenu_inner .link_title{ font-size:24px; font-weight:600; margin-bottom:20px; }
.wrap .sympoMenu .sympoMenu_inner .link_box{ display:flex; flex-wrap:wrap; }
.wrap .sympoMenu .sympoMenu_inner .link_box .link{ margin:5px 10px 5px 0; }
.wrap .sympoMenu .sympoMenu_inner .link_box .link a{ background:#f1f2f3; border-radius:50px; padding:16px 24px; position:relative; overflow:hidden; z-index:1; }
.wrap .sympoMenu .sympoMenu_inner .link_box .link a .link_hover{ width:0%; height:0%; background:transparent; border-radius:50px; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); opacity:0; }
.wrap .sympoMenu .sympoMenu_inner .link_box .link a:hover .link_hover{ width:100%; height:100%; background:var(--primary-color); opacity:1; transition:var(--transition-025s); transition-delay:.2s; }
.wrap .sympoMenu .sympoMenu_inner .link_box .link a .btn{ position:relative; z-index:2; }
.wrap .sympoMenu .sympoMenu_inner .link_box .link a .txt{ font-weight:600; }
.wrap .sympoMenu .sympoMenu_inner .link_box .link a:hover .txt{ color:var(--font-white); transition:var(--transition-025s); transition-delay:.15s; }
.wrap .sympoMenu .sympoMenu_inner .link_box .link a .arrow{ display:inline-flex; justify-content:center; align-items:center; width:24px; height:24px; background:var(--primary-color); border-radius:50%; margin-left:5px; }
.wrap .sympoMenu .sympoMenu_inner .link_box .link a:hover .arrow{ background:var(--font-white); transition:var(--transition-025s); transition-delay:.15s; }
.wrap .sympoMenu .sympoMenu_inner .link_box .link a .arrow i{ color:var(--font-white); font-size:14px; font-weight:600; }
.wrap .sympoMenu .sympoMenu_inner .link_box .link a:hover .arrow i{ color:var(--primary-color); transition:var(--transition-025s); transition-delay:.15s; }
.wrap .sympoMenu .sympoMenu_inner .link_wrap{ margin-top:50px; }
.wrap .sympoMenu .sympoMenu_inner .link_list{ margin-top:50px; }

.wrap .sympoMenu .sympo_feedback{ color:var(--font-white); text-align:center; background:var(--primary-color); padding:20px 15px 30px; margin-top:50px; }
.wrap .sympoMenu .sympo_feedback .feedback_title{ font-size:24px; font-weight:900; margin-bottom:15px; }
.wrap .sympoMenu .sympo_feedback .feedback_txt{ line-height:1.5; }
.wrap .sympoMenu .sympo_feedback a{ color:var(--primary-color); font-weight:600; background:var(--font-white); border-radius:50px; padding:16px 24px; margin:20px 0 0; }
.wrap .sympoMenu .sympo_feedback a:hover{ color:var(--font-white); background:var(--primary-dark); padding:12px 20px; margin:24px 0 4px; }

.wrap .page_info{ padding:0 10px; margin-top:30px; }
.wrap .page_info .tabs_wrap{ display:flex; background:var(--primary-mega-light); border-radius:50px; padding:5px; }
.wrap .page_info .tabs_wrap .tab{ display:inline-flex; justify-content:center; width:50%; font-weight:600; border-radius:50px; }
.wrap .page_info .tabs_wrap .tab.active{ color:var(--font-white); background:var(--primary-color); }
.wrap .page_info .tabs_wrap .tab a{ display:inline-flex; justify-content:center; align-items:center; width:100%; height:100%; padding:15px 0; }
.wrap .page_info .list_wrap .list{ text-align:center; border:1px solid #ddd; border-radius:20px; padding:30px 10px; margin:50px auto; }
.wrap .page_info .list_wrap .list .img{ width:100%; max-width:150px; border:1px solid #ddd; border-radius:50%; margin:0 auto; overflow:hidden; }
.wrap .page_info .list_wrap .list .info_title{ color:var(--primary-color); font-size:16px; font-weight:600; margin:20px 10px 10px; }
.wrap .page_info .list_wrap .list .info_btn{ margin-top:20px; }
.wrap .page_info .list_wrap .list .info_btn a{ background:#f1f2f3; border-radius:50px; padding:16px 24px; position:relative; overflow:hidden; z-index:1; }
.wrap .page_info .list_wrap .list .info_btn a .link_hover{ width:0%; height:0%; background:transparent; border-radius:50px; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); opacity:0; }
.wrap .page_info .list_wrap .list .info_btn a:hover .link_hover{ width:100%; height:100%; background:var(--primary-color); opacity:1; transition:var(--transition-025s); transition-delay:.2s; }
.wrap .page_info .list_wrap .list .info_btn a .btn{ position:relative; z-index:2; }
.wrap .page_info .list_wrap .list .info_btn a .txt{ font-weight:600; }
.wrap .page_info .list_wrap .list .info_btn a:hover .txt{ color:var(--font-white); transition:var(--transition-025s); transition-delay:.15s; }
.wrap .page_info .list_wrap .list .info_btn a .arrow{ display:inline-flex; justify-content:center; align-items:center; width:24px; height:24px; margin-left:5px; }
.wrap .page_info .list_wrap .list .info_btn a .arrow i{ font-size:16px; font-weight:500; }
.wrap .page_info .list_wrap .list .info_btn a:hover .arrow i{ color:var(--font-white); transition:var(--transition-025s); transition-delay:.15s; }

.wrap .page_info .survey_status{ text-align:left; background:var(--primary-mega-light); border-radius:10px; line-height:1.4rem; padding:20px 20px; }
.wrap .page_info .survey_status p{ margin:5px 0; }
.wrap .page_info .title-sub{ margin-bottom:10px; }
.wrap .page_info .title-sub h4{ font-size:16px; }
.wrap .page_info .title-sub h4 span{ color:var(--button-submit); font-weight:600; }
.wrap .page_info .survey_form{ margin-top:30px; }
.wrap .page_info .survey_form .form_bx{ border-top:2px solid #111; border-bottom:2px solid #111; margin-bottom:50px; }
.wrap .page_info .survey_form .form_bx ul{ margin:30px 0; }
.wrap .page_info .survey_form .form_bx ul .th{ font-size:18px; font-weight:600; line-height: 24px;}
.wrap .page_info .survey_form .form_bx ul .th sup{ color:var(--button-submit); font-weight:600; margin-left:3px; }
.wrap .page_info .survey_form .form_bx ul .td{ width:100%; }
.wrap .page_info .survey_form .form_bx ul .td > input{ width:100%; max-width:480px; height:48px; font-size:16px; border:1px solid #ddd; border-radius:5px; padding:0 10px; }
.wrap .page_info .survey_form .form_bx ul .td > input::placeholder{ font-size:16px; }
.wrap .page_info .survey_form .form_bx ul .td > input#fileToUpload{ font-size:14px; padding:10px; }
.wrap .page_info .survey_form .form_bx ul .td .survey-inner{ margin-top:15px; }
.wrap .page_info .survey_form .form_bx ul .td .radio_bx{ display:flex; flex-direction:column; justify-content:space-evenly; width:100%; background:#f8f8f8; border-radius:10px; padding:20px 15px; }
.wrap .page_info .survey_form .form_bx ul .td .radio_bx .radio{ display:flex; align-items:center; margin:5px 0; }
.wrap .page_info .survey_form .form_bx ul .td .radio_bx input[type="radio"]{ display:none; }
.wrap .page_info .survey_form .form_bx ul .td .radio_bx .custom-radio{ display:inline-block; width:20px; height:20px; background:#fff; border:1px solid #ddd; border-radius:50%; margin-right:10px; position:relative; }
.wrap .page_info .survey_form .form_bx ul .td .radio_bx input[type="radio"]:checked + .custom-radio{ background:var(--primary-color); border:1px solid var(--font-white); }
.wrap .page_info .survey_form .form_bx ul .td .radio_bx input[type="radio"]:checked + .custom-radio:before{ content:''; width:12px; height:12px; border:2px solid #fff; border-radius:50%; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); }
.wrap .page_info .survey_form .form_bx ul .td .radio_bx .radio:hover .custom-radio, .wrap .page_info .survey_form .form_bx ul .td .radio_bx .radio:focus .custom-radio{ border:1px solid #454545; }
.wrap .page_info .survey_form .form_bx ul .td .radio_bx p{ width:calc(100% - 26px); font-size:16px; }
.wrap .page_info .survey_form .form_bx ul .td .radio_bx input[type="text"]{ width:100%; font-family:var(--font-family-base); font-size:16px; border:1px solid #ddd; border-radius:3px; padding:10px; resize:none; }
.wrap .page_info .survey_form .form_bx ul .td .checkbox_bx{ display:flex; flex-direction:column; justify-content:space-evenly; width:100%; background:#f8f8f8; border-radius:10px; padding:20px 15px; }
.wrap .page_info .survey_form .form_bx ul .td .checkbox_bx .checkbox{ display:flex; align-items:center; margin:5px 0; }
.wrap .page_info .survey_form .form_bx ul .td .checkbox_bx input[type="checkbox"]{ display:none; }
.wrap .page_info .survey_form .form_bx ul .td .checkbox_bx .custom-checkbox{ display:inline-block; width:20px; height:20px; background:#fff; border:1px solid #ddd; border-radius:3px; margin-right:10px; position:relative; }
.wrap .page_info .survey_form .form_bx ul .td .checkbox_bx input[type="checkbox"]:checked + .custom-checkbox{ background:var(--primary-color); border-radius:3px; }
.wrap .page_info .survey_form .form_bx ul .td .checkbox_bx input[type="checkbox"]:checked + .custom-checkbox:before{ content:''; width:8px; height:2px; background:var(--font-white); position:absolute; top:8px; left:2px; transform:rotate(45deg); }
.wrap .page_info .survey_form .form_bx ul .td .checkbox_bx input[type="checkbox"]:checked + .custom-checkbox:after{ content:''; width:6px; height:2px; background:var(--font-white); position:absolute; top:8px; left:8px; transform:rotate(-45deg); }
.wrap .page_info .survey_form .form_bx ul .td .checkbox_bx .checkbox:hover .custom-checkbox, .wrap .page_info .survey_form .form_bx ul .td .checkbox_bx .checkbox:focus .custom-checkbox{ border:1px solid #454545; }
.wrap .page_info .survey_form .form_bx ul .td .checkbox_bx p{ width:calc(100% - 26px); font-size:16px; }
.wrap .page_info .survey_form .form_bx ul .td .survey-inner textarea{ width:100%; min-height:150px; font-family:var(--font-family-base); font-size:16px; border:1px solid #ddd; border-radius:5px; padding:10px; resize:none; }
.wrap .page_info .btn.comp-over{ display:flex; justify-content:center; }
.wrap .page_info .btn.comp-over .comp-over_btn{ display:flex; justify-content:center; align-items:center; width:45%; max-width:200px; height:60px; font-size:18px; font-weight:500; border-radius:50px; margin:0 3px; transition:all .3s ease; }
.wrap .page_info .btn.comp-over .comp-over_btn-primary{ color:var(--font-white); background:var(--primary-color); }
.wrap .page_info .btn.comp-over .comp-over_btn-primary:hover, .wrap .page_info .btn.comp-over .comp-over_btn-primary:focus{ background:var(--primary-dark); }
.wrap .page_info.complete .survey_status{ margin-bottom:70px; }
.wrap .page_info.complete .btn.comp-over .comp-over_btn{ cursor:pointer; }

.wrap.refund .page_info .survey_form .form_bx ul{ background:var(--primary-mega-light); border-radius:12px; padding:25px 20px; }
.wrap.refund .page_info .survey_form .form_bx ul .th{ font-size:16px; font-weight:600; padding-left:5px; }
.wrap.refund .page_info .survey_form .form_bx ul .td .survey-inner{ margin-top:10px; box-shadow:var(--box-shadow-light); }
.wrap.refund .page_info .survey_form .form_bx ul .td .survey-inner.file{ display:flex; flex-wrap:wrap; justify-content:space-between; box-shadow:none; }
.wrap.refund .page_info .survey_form .form_bx ul .td .survey-inner.file .wrap-custom-file{ width:calc(50% - 3px); height:125px; text-align:center; background:var(--font-white); border-radius:5px; padding:10px; margin-bottom:6px; position:relative; box-shadow:var(--box-shadow-light); }
.wrap.refund .page_info .survey_form .form_bx ul .td .survey-inner.file .wrap-custom-file input[type="file"]{ width:2px; height:2px; position:absolute; top:0; left:0; opacity:0; overflow:hidden; }
.wrap.refund .page_info .survey_form .form_bx ul .td .survey-inner.file .wrap-custom-file label{ width:100%; background:var(--font-white); border:1px solid #ddd; border-radius:4px; padding:0 0 5px; position:absolute; top:0; right:0; bottom:0; left:0; cursor:pointer; }
.wrap.refund .page_info .survey_form .form_bx ul .td .survey-inner.file .wrap-custom-file label p{ display:block; font-size:18px; position:absolute; bottom:32px; left:50%; transform:translateX(-50%); }
.wrap.refund .page_info .survey_form .form_bx ul .td .survey-inner.file .wrap-custom-file label i{ display:block; font-size:24px; margin-top:36px; }
.wrap.refund .page_info .survey_form .form_bx ul .td .survey-inner.file .wrap-custom-file label:hover p, .wrap.refund .page_info .survey_form .form_bx ul .td .survey-inner.file .wrap-custom-file label:hover i{ color:var(--primary-color); }
.wrap.refund .page_info .survey_form .form_bx ul .td .survey-inner.file .wrap-custom-file label.file-ok{ background-size:cover; background-position:center; transition:background 0s; }
.wrap.refund .page_info .survey_form .form_bx ul .td .survey-inner.file .wrap-custom-file label.file-ok p{ width:100%; color:var(--font-white); font-size:16px; background:rgba(0, 0, 0, .7); padding:8px 3px; position:absolute; bottom:0; left:0; transform:translateX(0); transition:none; }
.wrap.refund .page_info .survey_form .form_bx ul .td .survey-inner.file .wrap-custom-file label.file-ok i{ display:none; }
.wrap.refund .page_info .survey_form .form_bx ul .td .radio_bx{ background:var(--font-white); }
.wrap.refund .page_info .survey_form .form_bx ul .td input[type="text"], .wrap.refund .page_info .survey_form .form_bx ul .td input[type="tel"]{ width:100%; font-size:16px; border:none; border-radius:5px; padding:16px 12px; }
.wrap.refund .page_info .survey_form .form_bx ul .td .survey-inner textarea{ border:none; border-radius:5px; box-shadow:var(--box-shadow-light); }

.wrap.brochure .page_info .list_wrap .list .info_title{ font-size:20px; }

.wrap.voting .page_info .survey_form .form_bx{ border:none; }
.wrap.voting .page_info .survey_form .form_bx ul .th p{ text-indent:-21px; padding-left:21px; }
.wrap.voting .page_info .survey_form .form_bx ul .th p i{ color:var(--primary-color); margin-right:3px; }
.wrap.voting .page_info .survey_form .form_bx ul .th span{ display:inline-block; font-size:16px; margin-top:8px; margin-left:21px; }
.wrap.voting .page_info .btn.comp-over{ margin-top:50px; }
.wrap.voting .page_info .survey_status p img{ margin:0 auto 20px; }

.wrap footer{ margin-top:50px; }
.wrap footer div{ color:var(--font-white); font-size:12px; text-align:center; background:var(--primary-color); border-radius:15px 15px 0 0; padding:16px 10px; }
.wrap footer div p span{ font-weight:900; }

.wrap nav{ width:100%; height:100vh; background:#fff; position:absolute; top:-100vh; left:0; opacity:0; transition:all .4s ease-in-out; z-index:var(--z-index-modal); }
.wrap nav div{ padding:10px 15px; }
.wrap nav div img{ width:calc(100% - 70px); max-width:120px; }
.wrap nav ul{ text-align:center; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); }
.wrap nav ul li{ font-weight:500; padding:15px; opacity:0; transform:translateY(-20px); transition:all 0s; }



#modal-qna{ display:none; }
.session_fancy #modal-qna{ width:90%; /*max-width:540px; height:auto !important;*/ }
.session_fancy #modal-qna h6{ font-size:24px; font-weight:600; border-bottom:1px solid #ddd; padding-bottom:20px; margin-bottom:20px; }
.session_fancy #modal-qna textarea{ width:100%; min-height:150px; font-family:var(--font-family-base); font-size:16px; border:1px solid #ddd; padding:10px; }
.session_fancy #modal-qna p{ text-align:center; margin-top:30px; }
.session_fancy #modal-qna p a{ display:inline-flex; justify-content:center; align-items:center; background:#f1f2f3; border-radius:50px; padding:16px 24px; transition:var(--transition-025s); }
.session_fancy #modal-qna p a:hover{ color:var(--font-white); background:var(--primary-color); }


.active .wrap{ height:100vh; overflow:hidden; }
.active .wrap header div button .line:nth-child(1){ background:#000; transform:translate(-12px, 8px) rotate(45deg); }
.active .wrap header div button .line:nth-child(2){ opacity:0; }
.active .wrap header div button .line:nth-child(3){ transform: translate(12px, -8px) rotate(-45deg); }
.active .wrap nav{ top:0; opacity:1; }
.active .wrap nav ul li{ opacity:1; transform:translateY(0); transition:all .8s; }
.active .wrap nav ul li:nth-child(1){transition-delay:0.3s;}
.active .wrap nav ul li:nth-child(2){transition-delay:0.4s;}
.active .wrap nav ul li:nth-child(3){transition-delay:0.6s;}
.active .wrap nav ul li:nth-child(4){transition-delay:0.7s;}
.active .wrap nav ul li:nth-child(5){transition-delay:0.9s;}
.active .wrap nav ul li:nth-child(6){transition-delay:0.9s;}
.active .wrap nav ul li:nth-child(7){transition-delay:1.1s;}
.active .wrap nav ul li:nth-child(8){transition-delay:1.3s;}
.active .wrap nav ul li:nth-child(9){transition-delay:1.5s;}

@media screen and (max-width: 640px) {
  html{ background:var(--font-white); }
  .wrap{ border-radius:0; margin:0 auto; box-shadow:none; }
  .wrap .visual .visual_title{ padding:10px 10px 10px 20px; }
  .wrap .visual .visual_title{ font-size:24px; }
}

@media screen and (max-width: 480px) {
  .wrap .visual .visual_title{ font-size:18px; }
}