/* NanumSquare */
@font-face {
  font-family: 'NanumSquare';
  src: url('/font/NanumSquareR.eot');
  src: url('/font/NanumSquareR.eot?#iefix') format('embedded-opentype'),
       url('/font/NanumSquareR.woff') format('woff'),
       url('/font/NanumSquareR.ttf')  format('truetype'),
       url('/font/NanumSquareOTFR.svg#9e23ceb0c858ca37642ba540402577eb') format('svg');
  font-style:  normal;
  font-weight: 400;
}
@font-face {
  font-family: 'NanumSquare';
  src: url('/font/NanumSquareB.eot');
  src: url('/font/NanumSquareB.eot?#iefix') format('embedded-opentype'),
       url('/font/NanumSquareB.woff') format('woff'),
       url('/font/NanumSquareB.ttf')  format('truetype'),
       url('/font/NanumSquareOTFB.svg#a41a1fda1fdf3dafd3394867a156b1cf') format('svg');
  font-style:  normal;
  font-weight: 500;
}
@font-face {
  font-family: 'NanumSquare';
  src: url('/font/NanumSquareEB.eot');
  src: url('/font/NanumSquareEB.eot?#iefix') format('embedded-opentype'),
       url('/font/NanumSquareEB.woff') format('woff'),
       url('/font/NanumSquareEB.ttf')  format('truetype'),
       url('/font/NanumSquareOTFExtraBold.svg#090d6763bc81b49309446d23fbd10e87') format('svg');
  font-style:  normal;
  font-weight: 600;
}

/*notokr*/
@font-face {
  font-family: 'notokr';
  src: url('/font/notokr-thin.eot');
  src: url('/font/notokr-thin.eot?#iefix') format('embedded-opentype'),
       url('/font/notokr-thin.ttf') format('truetype'),
       url('/font/notokr-thin.svg#notokr-thin') format('svg');
  font-style:  normal;
  font-weight: 100
}
@font-face {
  font-family: 'notokr';
  src: url('/font/notokr-light.eot');
  src: url('/font/notokr-light.eot?#iefix') format('embedded-opentype'),
       url('/font/notokr-light.ttf') format('truetype'),
       url('/font/notokr-light.svg#notokr-light') format('svg');
  font-style:  normal;
  font-weight: 200
}
@font-face {
  font-family: 'notokr';
  src: url('/font/notokr-demilight.eot');
  src: url('/font/notokr-demilight.eot?#iefix') format('embedded-opentype'),
       url('/font/notokr-demilight.ttf') format('truetype'),
       url('/font/notokr-demilight.svg#notokr-demilight') format('svg');
 font-style:  normal;
 font-weight: 300
}
@font-face {
  font-family: 'notokr';
  src: url('/font/notokr-regular.eot');
  src: url('/font/notokr-regular.eot?#iefix') format('embedded-opentype'),
       url('/font/notokr-regular.ttf') format('truetype'),
       url('/font/notokr-regular.svg#notokr-regular') format('svg');
  font-style:  normal;
  font-weight: 400
}
@font-face {
  font-family: 'notokr';
  src: url('/font/notokr-medium.eot');
  src: url('/font/notokr-medium.eot?#iefix') format('embedded-opentype'),
       url('/font/notokr-medium.ttf') format('truetype'),
       url('/font/notokr-medium.svg#notokr-medium') format('svg');
 font-style:  normal;
 font-weight: 500
}
@font-face {
  font-family: 'notokr';
  src: url('/font/notokr-bold.eot');
  src: url('/font/notokr-bold.eot?#iefix') format('embedded-opentype'),
       url('/font/notokr-bold.ttf') format('truetype'),
       url('/font/notokr-bold.svg#notokr-bold') format('svg');
  font-style:  normal;
  font-weight: 600
}
@font-face {
  font-family: 'notokr';
  src: url('/font/notokr-black.eot');
  src: url('/font/notokr-black.eot?#iefix') format('embedded-opentype'),
       url('/font/notokr-black.ttf') format('truetype'),
       url('/font/notokr-black.svg#notokr-black') format('svg');
  font-style:  normal;
  font-weight: 800
}

div, span, a, p, select, .administer .admin-list li a div, button{font-family:'notokr' !important}
.tx25,.tx30,.tx40,h2,.ita-logo a, .scoreNum{font-family: NanumSquare, "Apple SD Gothic Neo", "Malgun Gothic", "맑은 고딕", 돋움, dotum, Helvetica, sans-serif !important} 

@media(min-width:768px){
h1,h2,h3,h4,h5,h6,.info dl, .tab a{font-family: NanumSquare, "Apple SD Gothic Neo", "Malgun Gothic", "맑은 고딕", 돋움, dotum, Helvetica, sans-serif !important}

th, td, .heart-list h5{font-family:'notokr' !important}

}

@media(min-width:1070px){
.button,
.admin-list li a div,
th{font-family: NanumSquare, "Apple SD Gothic Neo", "Malgun Gothic", "맑은 고딕", 돋움, dotum, Helvetica, sans-serif !important}

}

.administer .admin{font-size:12px}
@media(min-width:1070px){
  .administer .admin{font-size:14px}
}

.new-btn{position:relative}
.new-btn::before{content:'N'; width:10px; height:10px; color:red; font-size:10px; text-align:center; border-radius:3px; border:1px solid red; display:flex; justify-content:center; align-items:center; float:left; margin-top:3px; margin-right:4px}
@media(min-width:1070px){
  .new-btn::before{width:12px; height:12px;}
}

.up,.down{position:relative; cursor:pointer; display:inline-block; margin-left:6px; color:#666; font-size:13px;}
.up::before{content:'\a015'; font-family:'fontello'}
.down::before{content:'\a016'; font-family:'fontello'}
.up::before, .down::before {display:inline-block; width:18px; height:18px; vertical-align:middle; border:1px solid #bdbdbd; border-radius:4px; text-align:center}

/* Page */
/* Framework CSS */
/* Page Typography */
.tx45 {font-size:25px; font-weight:600; letter-spacing:-0.3px; line-height:1.3}
.tx40 {font-size:25px; font-weight:600; letter-spacing:-0.3px; line-height:1.3}
.tx35 {font-size:22px; font-weight:600; letter-spacing:-0.3px; line-height:1.4}
.tx30 {font-size:20px; font-weight:600; letter-spacing:-0.3px; line-height:1.4}
.tx25 {font-size:18px; font-weight:600; letter-spacing:-0.2px; line-height:1.4}
.tx22 {font-size:17px}
.tx20 {font-size:15px; font-weight:600}
.tx18  {font-size:15px}
.tx17  {font-size:15px; line-height:1.6; letter-spacing:-0.2px}
p, .tx16{font-size:15px; margin-top:7px; line-height:1.7; font-weight:500}
.tx15  {font-size:14px; line-height:1.6}
.tx14  {font-size:12px; line-height:1.5}
.tx13  {font-size:12px; line-height:1.5}
@media(min-width:768px){
  /* h1, h2, h3, h4, h5, h6, p, small{text-align:inherit} */
  .tx45 {font-size:31px; letter-spacing:-1px}
  .tx40 {font-size:31px; letter-spacing:-0.5px}
  .tx35 {font-size:26px; letter-spacing:-0.7px}
  .tx30 {font-size:26px; letter-spacing:-0.7px}
  .tx25 {font-size:23px; letter-spacing:-0.5px}
  .tx22 {font-size:20px}
  .tx20 {font-size:18px}
  .tx18  {font-size:17px; letter-spacing:-0.3px}
  .tx17  {font-size:16px; line-height:1.7; letter-spacing:-0.3px}
  p, .tx16{font-size:15px; margin-top:10px;}
	p{line-height:1.9}
  .tx15  {font-size:14px}
  .tx14  {font-size:14px}
  .tx13  {font-size:13px}
}
@media(min-width:1070px){
  .tx45 {font-size:45px; letter-spacing:-2px}
  .tx40 {font-size:40px; letter-spacing:-1px}
  .tx35 {font-size:35px}
  .tx30 {font-size:30px}
  .tx25 {font-size:25px}
  .tx22 {font-size:22px}
  .tx20 {font-size:20px}
  .tx18  {font-size:18px; letter-spacing:-0.5px}
  .tx17  {font-size:17px}
  p, .tx16{font-size:16px;margin-top: 10px;}
  .tx15  {font-size:15px}
  .tx14  {font-size:14px}
  .tx13  {font-size:13px}
}

* {word-break:keep-all}
pre{font-family:Consolas; color:#444; font-weight:500}

/* empty sapce */
.mg-t-10{margin-top:10px}
.mg-t-20{margin-top:10px}
.part-t-05x{margin-top:15px}
.part-t{margin-top:30px}
@media(min-width:768px){
  .part-t{margin-top:50px}
  .mg-t-20{margin-top:20px}
}
@media(min-width:1070px){
  .part-t{margin-top:70px}
  .part-t-05x{margin-top:30px}
}

/* contents */
.contents{margin-top:48px; clear:both}
@media(min-width:1070px){
  .contents{margin-top:64px}
}

/* containter */
.container{padding-left:20px; padding-right:20px}
.container-1200{max-width:1200px; width:100%; position:absolute; height:100%}
@media(min-width:768px){
  .container{max-width:600px; margin-left:auto; margin-right:auto; padding-left:0; padding-right:0}
}
@media(min-width:1070px){
  .container{max-width:700px; margin-left:auto; margin-right:auto}
}

/* surv-list */
.surv-list > li{margin-top:30px}
/* .surv-list > li:first-child{margin-top:30px} */
.surv-list > li h3{position:relative; font-weight:500; letter-spacing:0;}
.surv-list > li h3 b{width:auto; flex:none; margin-right:10px}
.surv-list > li h3 div{color:#3581F6; font-weight:500}
.surv-list > li > span{display:inline-block; color:#3581F6; font-size:14px; margin-bottom:8px; font-weight:500;}
.surv-list label{color:#555; font-weight:400}
.surv-list li ul{margin-top:10px}
.surv-list li ul li{margin-top:6px}
.surv-list li ul li:first-child{margin-top:0}
textarea, label{width:100%; display:block}
.surv-list textarea,textarea{background:#fff; border:1px solid #E6E8EA; min-height:100px; margin-top:15px; padding:10px 13px; max-width:700px; line-height:1.6; min-width:100%}
.surv-list input[type="text"]{background:#fff; border:1px solid #E6E8EA; width:100%; margin-top:10px; min-height:40px; padding:10px 13px}
.surv-list .explain{color:#777; font-size:14px; margin-top:5px}
.student .notice{background:#F5FAFF; padding:20px 25px}
.notice p br{display:none}

.tx-count{font-size:14px; text-align:right; margin-top:10px; color:#666;}
.tx-count span{color:#3581F6; font-weight:500;}

.editor_required {color:red; font-weight:400; padding:0 0 0 3px; font-size:14px}
textarea{border-radius:8px}

.textarea-answer{border:1px solid #E6E8EA; padding:10px 13px; margin-top:8px; border-radius:8px; min-height:80px; font-family:'맑은 고딕' !important;}

@media(min-width:768px){
  .surv-list > li{margin-top:50px}
  .surv-list textarea, textarea{min-height:140px; font-size:15px}
  .editor_required{font-size:16px}
	.surv-list .explain{font-size:16px; margin-top:10px; letter-spacing:0;}
}
@media(min-width:1070px){
  .surv-list > li{margin-top:70px}
  .surv-list > li h3{line-height:1.6}
  .surv-list textarea, textarea{min-height:180px; font-size:16px}
}

/* user-picture */
.user-info{display:flex; gap:20px;}
.pic-area{flex:0 0 100px;}
.user-info .user-pic{height:130px; background:#F9FAFC; border:1px solid #EAECF5; border-radius:12px; display:flex; align-items:center; justify-content:center; padding-bottom:0 !important; position:relative}

.thumb-edit{position:absolute; top:-16px; right:0}
.thumb-edit .btn-edit svg{fill:#fff}
.thumb-edit .btn-edit{background:#595C76; width:34px; height:34px; position:absolute; right:-15px; border-radius:50%; display:flex; justify-content:center; align-items:center; cursor:pointer; border:2px solid #fff; box-sizing:border-box; box-shadow:0 0 3px 1px rgba(0,0,0,0.2); z-index:1}
.thumb-edit:hover .ul-thumb-edit{display:block}
.thumb-edit .ul-thumb-edit{display:none; border:1px solid #dcdee7; position:absolute; background:#fff; top:15px; min-width:170px; z-index:1; font-size:15px; padding:8px; border-radius:8px;}
.thumb-edit .ul-thumb-edit li a{padding:4px 8px; display:block; cursor:pointer}
.thumb-edit .ul-thumb-edit li a:hover{background:#edf6ff; border-radius:4px; color:#3182F6;}

/* info */
.info dl{border-top:2px solid #333; flex:1;}
.info dt{font-weight:600; min-width:100px; display:inline-block; float:left}
.info dd, .info dt{padding-bottom:15px; padding-top:15px}
hr{border:0; border-bottom:1px solid #DCE0E6; visibility:visible; margin:0; clear:both}

.user-pic .img{width:100%; height:100%; display:flex; align-items:center; justify-content:center; border-radius:12px; overflow:hidden;}
.user-pic .img img{z-index:1;}
.user-pic .img::before{content:'\c002'; font-family:'fontello'; color:#e3e6eb; font-size:24px; position:absolute; }

.student .user-pic .img::before{margin-top:-30px}
.student .user-pic .img::after{content:'지원자 사진 첨부'; margin-top:35px; color:#bfc4cb; line-height:1.3; text-align:center; position:absolute;}

@media(min-width:768px){
  .info dd{font-weight:500}
  .user-info{gap:40px}
  .pic-area{flex:0 0 140px;}
  .user-info .user-pic{height:170px;}
  .user-pic .img::before{font-size:30px}
}
@media(min-width:1070px){
  .info dd, .info dt{padding-bottom:20px; padding-top:20px}
  .info dt{min-width:150px}
}

/* button */
.button{background:#3581F6; color:#fff; padding:10px 20px; font-weight:600; display:inline-block; text-align:center; cursor:pointer; border-radius:4px}
.button.submit{background:#363C44}
.button:hover{background:#1a67de}
.button.submit:hover{background:#14171b}
.next{background:#19CE60}
.next:hover{background:#19CE60}

.complete{color:#707680; position:relative; font-weight:500}
.complete::before{content:''; display:inline-block; background:#707680 url(/images/ico_bigcheck.png) center no-repeat; width:20px; height:20px; border-radius:50%; background-size:14px; position:relative; top:4px; margin-right:4px}
.btn-group{text-align:center; min-width:72px}
/* .heart-num a{display:flex !important; align-items:center; color:#FF6161; font-size:12px; font-weight:500}
.heart-num a.on{background:#f5f5f5; border-radius:50px; padding:0 7px 0 3px; max-width:50px} */

@media(min-width:768px){
  .button{min-width:140px}
  .complete::before{top:2px}
}

@media(min-width:1070px){
  .button{font-weight:500; padding:14px 30px; min-width:160px}
  .complete::before{width:25px; height:25px; margin-right:8px}
}

.icoCheck{-webkit-appearance:none; position:absolute; display:none}
.privacy{padding-top:20px; font-weight:500}
input[type=checkbox] + label,
input[type=radio] + label {display:inline-block; cursor:pointer; position:relative; padding-left:25px; font-size:14px; color:#555; line-height:1.4}
input[type=checkbox]+ label:before,
input[type=radio]+ label:before {content:""; display:inline-block; width:16px; height:16px; position:absolute; top:2px; left:0; border-radius:50%; background-color:#fff; border:1px solid #d5dbe0; box-sizing:border-box}
input[type=checkbox]+ label:before{border-radius:0}
input[type=checkbox]:checked + label:before,
input[type=radio]:checked + label:before {content:'\e813'; font-family:"fontello"; border:0; color:#fff; background-color:#3182F6; font-size:14px; text-align:center;     padding-top:1px;}
input[type=checkbox]:checked + label,
input[type=radio]:checked + label{border:none !important}
.saveID{text-align:left; position:relative}

@media(min-width:768px){
  input[type=radio] + label{font-size:16px}
}
@media(min-width:1070px){
  input[type=checkbox] + label,
  input[type=radio] + label{font-size:18px; padding-left:30px}
  input[type=checkbox] + label:before,
  input[type=radio] + label:before{top:2px; width:20px; height:20px}
  input[type=checkbox]:checked + label:before,
  input[type=radio]:checked + label:before{background-size:14px; width:20px; height:20px}
}

/* footer */
.footer{padding:40px 20px 50px; text-align:center; font-size:12px; color:#888; border-top:1px solid #ddd; margin-top:50px}
.footer .logout{background-color:#f6f6f6; border:1px solid #dfdfdf; border-radius:4px; font-size:13px; padding:5px 7px; display:inline-block; color:#888}
.footer div{padding-top:10px}

@media(min-width:768px){
  .footer .logout{display:none}
  .footer{margin-top:70px}
}
@media(min-width:1070px){
  .footer{margin-top:100px}
}

/* gotop */
#gotop{position:fixed; width:38px; height:38px; bottom:20px; right:20px; display:inline-block; border-radius:2px; box-shadow:0 0 0 1px rgba(0,0,0,.12); background-color:rgba(250,250,250,.9); background-image:url(/images/ico-top@2x.png); background-size:12px; background-repeat:no-repeat; background-position:center; padding:10px; z-index:1}

/* loader */
.loader{display:block; position:fixed; top:0; left:0; right:0; bottom:0; width:100%; height:100%; background:rgba(0,0,0,0.6);text-align:center;z-index:1000; padding-top:200px}
.loader > div{margin:0 auto; border-radius:10px; padding:20px; display:inline-block; background:#FFF; min-width:280px}
.loader img{width:60px;padding-bottom: 10px;}
.loader p{color:#444; margin-top:0}
html.loadershow,
html.loadershow body{height:100%; overflow:hidden}
.loader a{padding:10px 20px; display:inline-block; margin-top:5px; color:#fff; background:#3683F9; cursor:pointer; min-width:100px; border-radius:4px}
.loader a#cancel{background:#333}
.loader a:hover{background:#1a67de}
.loader a#cancel:hover{background:#14171b}
.loader-complete img{margin-bottom:12px}

@media(min-width:768px){
  .loader > div{padding:40px}
  .loader{padding-top:250px}
}
@media(min-width:1070px){
  .loader > div{padding:70px 120px}
  .loader{padding-top:300px}
}

/*Admin*/
.administer .container{max-width:1300px; padding-left:0; padding-right:0}
.administer .container.text{text-align:center}
.administer.detail .container{max-width:800px; clear:both}
.administer.detail .surv-list textarea{max-width:800px; resize:vertical}
.administer .notice{background:#F5FAFF; padding:20px 25px; border-radius:8px; font-size:15px; letter-spacing:0}
.administer .notice2 a{padding:5px 10px; font-weight:400; border-radius:4px; margin-top:20px; display:inline-block; background:#1a67de; color:#fff; font-size:13px}
.notice2{padding:10px 15px; color:#888; text-align:center; margin-bottom:10px; background:#f3f5f7 !important; border:1px solid #E6E8EA}

/* memo-icon */
.info .btn-group a{font-weight:400; color:#bbb; display:inline-block; width:36px; height:36px; padding:0; text-align:center; vertical-align:middle; cursor:pointer; font-size:24px}
.no-smile::before{content:'\e82f'; font-family:'fontello'; font-size:10px; border-radius:40px; padding:2px; vertical-align:middle}
.msg::before{content:'\f1d8'; font-family:'fontello'}
.heart::before{content:'\b012'; font-family:'fontello'}
.trash::before{content:'\b060'; font-family:'fontello'}

.info .no-smile::before{margin-right:6px; font-size:14px; padding:4px; border:2px solid #bbb;}
.info .heart::before{position:relative; top:1px}
.info .msg::before{font-size:20px; position:relative; top:-2px}

.no-smile.on::before{color:red; border-color:red; }
.heart.on::before{color:red;}

/* memo-history */
.memo-history li{background:#F8F9FB; padding:15px; margin-top:10px; border-radius:6px}
.memo-history p{color:#666; font-weight:400;}
.memo-history .heart::before, 
.memo-history .heart.on::before,
.memo-history .no-smile.on::before{width:16px; height:16px; background-size:16px;}
.memo-history .heart,
.memo-history .no-smile{float:right; margin-top:4px; margin-right:4px}

@media(min-width:768px){
  .memo-history li{padding:20px}
  .memo-history .heart::before, 
  .memo-history .heart.on::before,
  .memo-history .no-smile.on::before{width:22px; height:22px; background-size:22px}
  .memo-history .heart,
  .memo-history .no-smile{margin-top:2px}
}

/* memo-icon */
.memo{position: relative;}
.memo::before{content:'\c007'; font-family:'fontello';}

.like-group .heart.on::before,.like-group .no-smile::before{width:20px}
.like-group .no-smile::before{background-size:16px; border:1px solid #707680; color:#707680;}
.like-group{min-width:50px; text-align:center !important;}

/* back-btn */
.back{position:relative; display:inline-block; border:1px solid #ddd; padding:10px 20px; border-radius:4px;}
.back:hover{border-color:#333;}
.back::before{content:'\e801'; font-family:'fontello'; margin-right:10px}
.text-center{text-align:center}
.text-right{text-align:right}
.info > div:not(.info-title){padding-bottom:10px}
@media(min-width:768px){
  .info > div:not(.info-title){padding-bottom:20px}
}

.btn-memo{background:#3182F6; color:#fff; display:inline-block; padding:12px 16px; font-size:15px; text-align:center; min-width:80px; border-radius:4px; margin-top:8px}

.write{position:relative}
.write textarea{max-height:100px}

/* AIUX디자인 포트폴리오 확인 부분 */
.notice2 h4{color:#444; font-weight:500; letter-spacing:-0.03em}
.notice2.box{text-align:left; padding:20px}
.notice2.box .text{background:#fff; border:1px solid #E6E8EA; padding:5px 20px; margin-top:15px; border-radius:4px}
.notice2.box .text p{color:#444; font-weight:400}
.notice p br{display:none}
.text .desc{margin-top:10px; font-weight:400}
.text .desc b{color:#999}
.text .desc em{font-weight:600; color:#ff4343}
@media(min-width:768px){
  .notice2{padding:20px !important}
  .notice2.box{padding:30px !important}
  .administer .notice2 a{font-size:14px}
}
@media(max-width:1340px){
  .administer:not(.detail) .container{padding-left:20px; padding-right:20px}
}
@media(min-width:1070px){
  .text .desc{margin-top:20px}
}

@media(max-width:860px){
  .detail .container{padding-left:20px; padding-right:20px}
}

.submit-list{margin-top:20px}
.admin-list li a{display:flex; padding:10px 7px; border-bottom:1px solid #eee; align-items:center} 
.name{font-weight:600; color:#333}
@media(min-width:1070px){
  .submit-list{margin-top:40px}
}

.comment{float:right;margin:15px 0px 10px;}
.red{color: #ff1d26;}
.admin{clear:both;display:flex; padding:10px 7px; border-top:2px solid #7d7d7d; margin-top:20px; border-bottom:1px solid #bbb}
.admin > div{color:#444; font-weight:400}
@media(min-width:1070px){
  .admin{font-size:16px; padding-top:8px}
  .admin-list li a{font-size:18px; font-weight:500; letter-spacing:-0.04em; padding-top:15px; padding-bottom:15px}
}

/* select box */
.select-box select{border:none; border-bottom:1px solid #7d7d7d; padding-bottom:10px; padding-top:10px}
@media(max-width:1069px){
  .select-box select{width:49%}
  .select-box{padding-bottom:20px}
}
@media(max-width:568px){
  .select-box select{display:block; width:100%}
}
@media(min-width:1070px){
  .select-box select{font-size:16px; margin-right:15px; min-width:150px; letter-spacing:-0.05em}
  .filter{display:flex}
}

/* search box */
.search-box{position:relative; display:flex; margin-left:auto}
.search-box #search{ height:40px; border-radius:4px; border:1px solid #E1E1E1; padding:0 10px; width:100%}
input[type="search" i]{-webkit-appearance:none}
.search-box .btn {width:40px; height:32px; display:inline-block; position:absolute; top:4px; right:4px; margin:0; border:0; background:#fff; font-size:20px}

@media(min-width:1070px){
  .search-box{display:flex; align-items:center; min-width:260px}
}

.pastor .no           {width:10%}
.pastor .name         {width:25%}
.pastor .age          {width:20%}
.pastor .position     {width:25%}
.pastor .common-btn   {width:20%}
.no-data{padding-top:30px; padding-bottom:30px; text-align:center; font-size:18px}
.no-data .bn.faq{margin-top:30px}

a .common-btn  {width:90px !important; padding:10px; text-align:center; color:#fff; border-radius:4px; font-size:17px}
a .blue{background-color:#3683F9}
a .white{background-color:#fff; border:1px solid #BABFC7; color:#666}
a .white:hover{color:#333; border-color:#333}
a .grey {background-color:#BABFC7; color:#fff}
.pastor .notice{background:#F5FAFF; padding:20px 25px}
.notice p br{display:none}
.container.tab{display:flex; flex-direction:column}
.tab{text-align:center}
.tab a{display:inline-block; margin-right:20px; margin-top:20px; color:#BAC2CD; cursor:pointer}
.tab a.on span{color:#333; border-bottom:2px solid #3683F9}
.tab div a:last-child{margin:0}
.finished{color:#888; font-weight:500; top:-25px; text-align:center; display:inline-block; width:100%}
.finished.on{color:#3683F9}
.confirm{position: relative}
.answer{font-weight:400}
div.answer{background:#fff; border:1px solid #E6E8EA; padding:10px 13px; margin-top:10px; border-radius:8px; min-height:50px}
.answer li{position:relative; font-weight:400; color:#444}
.answer li::before{content:'\e813'; font-family:"fontello"; background:#3182F6; color:#fff; text-align:center; font-size:12px; width:16px; height:16px; display:inline-block; border-radius:50%; position:relative; margin-right:6px; top:-1px;}

@media(max-width:767px){
  .tab a.on{border:none; border:1px solid #3182F6 !important; z-index:99; position:relative}
  .tab a.on span{border-bottom:none}
  .tab a{width:50%; margin-right:0; margin-top:0; float:left; border:1px solid #ddd !important; min-height:56px; display:flex; flex-direction:column; justify-content:center; margin-right:-1px; margin-top:-1px !important}
  .finished{position:relative; top:0}
  .finished.tx15{font-size:12px;}
  .tab.tx20{font-size:14px;}
  .notice{clear:both}
}

@media(min-width:768px){
  .pastor .notice{padding:40px}
}
@media(min-width:1070px){
  .notice p br{display:block}
  /* .info dl{margin-top:20px} */
  .finished{top:-30px}
  .answer li::before{width:18px; font-size:14px; height:18px; margin-right:10px; vertical-align:middle; padding:1px}
}

/* === itaguide === */
.itaguide .container{max-width:800px; padding-left:20px; padding-right:20px}
@media(min-width:900px){
  .itaguide .container{padding-left:0; padding-right:0}
}
/* itaguide table */
.itaguide table{width:100%; margin-top:10px}
.itaguide thead{background:#f3f5f7; border-top:2px solid #333; font-weight:500}
.itaguide tbody tr{border-bottom:1px solid #eee}
/* .itaguide tbody tr:last-child{border-bottom:1px solid #ccc} */
.itaguide th,.itaguide td{font-size:12px; font-weight:500; color:#444; padding:10px 10px 10px 0; word-break:keep-all; vertical-align:middle; letter-spacing:-0.02em}
.itaguide th{text-align:left;  font-weight:600}
.itaguide thead th{letter-spacing:1em}
.itaguide td ul li{position:relative; margin-left:10px; padding-top:3px; padding-bottom:3px}
.itaguide td ul li::before{position:absolute; content:''; width:3px; height:3px; background:#555; top:10px; left:-10px; border-radius:3px}
@media(min-width:414px){
  .itaguide th,.itaguide td{font-size:13px}
}
@media(min-width:768px){
  .itaguide th,.itaguide td{font-size:15px}
  .itaguide th{padding:12px 15px 12px 0}
  .itaguide td{padding:15px 15px 15px 0}
  .itaguide table{margin-top:15px}
}
@media(min-width:1070px){
  .itaguide th,.itaguide td{font-size:18px}
  .itaguide th{padding:15px 20px 15px 0}
  .itaguide td{padding:20px 20px 20px 0}
}

.itaguide .desc{font-weight:500; color:#444}
.itaguide .desc span{color:#777}
.itaguide ul.desc{margin-top:10px}
.itaguide ul.desc li{margin-top:4px}
.itaguide ul.desc li:first-child{margin-top:0}
/* .itaguide ul.desc li::before{position:absolute; content:''; width:4px; height:4px; background:#555; top:10px; left:-15px; border-radius:3px} */
@media(min-width:768px){
  .itaguide ul.desc{margin-top:15px}
  .itaguide ul.desc li{margin-top:8px; line-height:1.6}
}

/* figure */
.itaguide figure{margin-top:10px}
@media(min-width:768px){
  .itaguide figure{margin-top:15px}
}

/* === test page === */
.test-list{width:85%}
.student-test{width:15%}
a .common-btn{cursor:pointer}
a .complete-test{color:#666; cursor:default;}
.board{background-color:#f3f5f7; padding:10px 15px}
div.board{font-weight:500}
pre.board{white-space:pre-wrap}
.board figure{text-align:center}
.board figure img{max-width:368px; width:100%}
pre em{color:blue}
pre em.pink{color:red}
.surv-list pre .width100[type="text"]{width:100%}
.surv-list .height70{min-height:70px;max-height:70px;}
.surv-list .textareaRead{background:rgb(243, 249, 255);}
.surv-list pre input[type="text"]{width:120px; height:26px; background:#fff; vertical-align:middle; margin-top:0;margin-right:10px}
.itaguide.test th,.itaguide.test td{padding:8px}
.itaguide.test thead th{letter-spacing:0}
.itaguide.test table{margin-bottom:30px}

@media(min-width:768px){
  .itaguide.test th{padding:8px 15px}
  .itaguide.test td{padding:10px 15px}
  .itaguide.test table{margin-top:15px}
}
@media(min-width:1070px){
  .itaguide.test th,.itaguide.test td{font-size:18px}
  .itaguide.test th{padding:10px 20px}
  .itaguide.test td{padding:12px 20px}
}

/* alertWatch */
.alertWatch{background:rgba(0,0,0,0.8); border-radius:5px; color:#fff; padding:6px 10px; display:inline-block; position:fixed; left:0; right:0; bottom:20px; min-width:auto; max-width:350px; margin-left:auto; margin-right:auto; z-index:2}
@media(min-width:768px){
  .alertWatch{bottom:50px}
}
@media(min-width:1070px){
  .alertWatch{bottom:150px}
}

/* portfolio */
.portfolio .surv-list p{color:#555; font-weight:400}
/* .imginfo{font-weight:400} */
.portfolio .con{border:1px solid #E6E8EA; padding:20px 13px; border-radius:8px}
.portfolio .con,
.portfolio textarea{margin-top:15px}
.portfolio .con p a{color:#333; cursor:pointer; max-width:320px}
.portfolio .con p a:hover{text-decoration:underline}
.portfolio .con p a span{color:#888}
.portfolio .block{display:block !important; margin-top:15px;}
.attach-wrap{display:flex; align-items:center}
.filecustom {position:absolute; width:40px !important; height:40px; opacity:0; margin:0; border:0; z-index:1}
.attach .bn-attach{width:40px; height:40px; background:url(../images/ico_attach@2x.png) no-repeat center; background-size:19px}
.attach-file {background:#eee; border-radius:4px}
.attach .attachdel {display:inline-block; width:20px; height:20px; background:url(../images/btn_attach_del@2x.png) no-repeat 0 0; background-size:15px; margin:1px 2px 0 0; cursor:pointer; text-indent:-9999px; border:none; vertical-align:middle; position:relative; top:1px; opacity:0.7}
.attach-item{display:inline-block; border:1px solid #ddd; border-radius:8px; padding:2px 0 2px 8px; margin:2px 0; color:#555; background:#fafafa; max-width:500px}
div.attached.tx16.attach_file{margin:0 0 0 10px !important}


/* countdown */
#countdown{position:fixed; top:52px; background:#333; display: inline-block; min-width:100px; font-size:15px; font-weight:600; text-align:center; padding:6px 10px; border-radius:40px; height:auto; left:50%; margin-left:-50px; color:#fff; z-index:99;}
#countdown::before {content:''; background:url(/images/ico-alarm.png); width:16px; height:16px; background-size:100%; display:inline-block; position:relative; top:2px; margin-right:5px}

@media(min-width:1070px){
  #countdown{top:62px}
}

.width80,.width20{display:inline-block; vertical-align:top}
.width80{width:75%}
.width20{width:20%; float:right; text-align:center;}
.width20 p{color:#555}
.number div{display:flex; flex-direction:column}
.scoreNum{align-items:center; justify-content:center; font-size:25px; color:#94A0AC; font-weight:600;text-align:center; border:1px solid #DCE0E6; padding:0}
.upbtn, .downbtn{height:60px; justify-content:center; align-items:center; display:flex; background:#F3F5F7; border-left:1px solid  #E2E8EE; position:relative}
.downbtn{border-top:1px solid #E2E8EE}
.upbtn::before, 
.downbtn::before{content:''; display:inline-block; width:16px; height:9px}
.upbtn::before{background:url(/images/arrow-up.png) center no-repeat; background-size:100%}
.downbtn::before{background:url(/images/arrow-down.png) center no-repeat; background-size:100%}
.tabWrap hr{margin-top:60px}
.tab_gb{position:relative}
.on .finished{color:#3683F9}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button{display:block}

@media(min-width:1070px){
  .scoreNum{font-size:45px}
}

/* administer : new */
.table-responsive {display:block; width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch}
.administer .table {min-width:780px; margin-bottom:1rem; color:#212529}
.table td, .table th {padding-top:10px; padding-bottom:10px; vertical-align:top; border-bottom:1px solid #DCE0E6; text-align:left; vertical-align:middle}
.table thead th {border-top:2px solid #7d7d7d; padding-top:6px; padding-bottom:6px;}
.student-name{font-weight:600; min-width:60px}
.age{min-width:56px}
.adminwrap th, .adminwrap td{font-size:12px !important; cursor:default; padding-right:5px}

@media(min-width:1070px){
  .adminwrap th, .adminwrap td{font-size:14px !important; padding-right:10px}
  .table td, .table th{padding-top:13px; padding-bottom:13px}
  .administer .table {width:1300px}
}

/* btn-group */
.heart{position:relative}
.ico-bn-gr a{display:inline-block; width:30px; height:30px; border:1px solid #A9B0B8; text-align:center; line-height:26px; border-radius:4px; cursor:pointer}
.ico-bn-gr a:hover{background:rgba(0,0,0,.08);}

/* detail */
.info a.view:hover::before{background:url(/images/arrow-right-2-hover.png) center no-repeat; background-size:13px}
.info a.view:hover{background:#333; color:#fff; border:1px solid #333}
.info a.view{font-size:14px; font-weight:500; vertical-align:top; border:1px solid #A9B0B8; border-radius:4px; top:-5px; min-height:32px; height:32px; padding:5px 8px 5px 2px}

.info-title{display:flex; align-items:center; justify-content:space-between}
.info-title + hr{margin-top:16px}

/* 하트 */
.table:hover tbody tr:hover td{background:#f6fbff}
.table:hover tbody tr:hover .student-name{text-decoration:underline}
.student-name:hover{text-decoration:underline}

@media(max-width:414px){
  a.msg ::before{width:25px; height:25px}
  a.trash ::before{width:25px; height:25px}
}

/* pastor : new */
.table{width:100%}
.pastor th, .pastor td{font-size:13px}
@media(min-width:768px){
  .pastor th, .pastor td{font-size:16px}
  .pastor .new-btn::before{margin-top:5px}
}
@media(min-width:1070px){
  .pastor th, .pastor td{font-size:18px}
}
@media(max-width:767px){
  .pastor table{width:100%}
}
@media(max-width:440px){
  .pastor table{width:400px}
}

/* 하이라이트 밑줄 부분 */ 
.highlight {box-shadow:inset 0 -12px 0 #c2ecfb}
.detailhistory {color:red}

/* === FAQ ==== */
/* button */
.faq-bn{text-align:right; border-bottom:1px solid #333}
.faq-bn button{padding:5px 0 5px 10px; border:none; font-weight:500; background-color:transparent}

@media(min-width:768px){
  .faq-bn button{font-size:17px}
}

/* 아코디언 */
#accordion .con-acco {overflow:hidden; height:0; color:#606167}
#accordion .con-acco.open{height:auto}
#accordion .con-acco.close{height:0}
#accordion a.tit-acco{position:relative; display:block}
#accordion .ico{position:absolute; width:25px; height:100%; top:0; right:0; display:flex; align-items:center; justify-content:center}
#accordion .ico::before,
#accordion .ico::after{content:''; position:relative; width:6px; height:1px; display:block; background:#000}
#accordion .ico::before{transform:rotate(45deg)}
#accordion .ico::after{transform:rotate(-45deg); margin-left:-2px}
#accordion .tit-acco.open .ico{transform:rotate(-180deg)}
#accordion > div ul{border-bottom:1px solid #ddd}
#accordion > div:last-child ul.open{border-bottom:none}

@media(min-width:768px){
  #accordion .ico{width:35px}
  #accordion .ico::before,
  #accordion .ico::after{width:9px}
  #accordion .ico::after{margin-left:-3px}
}

.tit-acco h3{position:relative; display:flex; align-items:center; width:calc(100% - 35px); font-weight:500; cursor:pointer}
.tit-acco h3::before{content:'Q. '; color:#4567FC; position:absolute; left:-25px}
.faq-item{padding:12px 12px 12px 35px; border-bottom:1px solid #E8E9E9}
.faq-item div.open{margin-top:10px}

@media(min-width:768px){
  .faq-item{padding:20px 12px 20px 40px;}
  .tit-acco h3::before{font-size:21px; vertical-align:middle; left:-30px}
}

/* bn */
.bn{background:#3581F6; color:#fff; min-width:200px; padding:16px 20px; display:inline-block; text-align:center; border-radius:30px}
.bn:hover{background:#1a67de; color:#fff}

.bn.faq{background:#1a427e; margin:10px 0px}
.bn.faq:hover{background:#14305a;}

.fw400{font-weight:400}
.fw500{font-weight:500}
.fw600{font-weight:600}

/* survey-step */
.con-box{font-weight:400; font-size:16px; background:#fafbfc; border:1px solid #E5E8EB; border-radius:8px; padding:20px 24px}
.survey-step span{display:inline-block; background:#EEF2EF; color:#8F8F8F; font-family:'roboto' !important; width:23px; height:23px; border-radius:4px; text-align:center; line-height:23px}
.survey-step span.on{background:#19CE60; color:#fff}

.surv-desc{color:#FF4E59; font-size:16px; font-weight:400; margin-top:16px}
.result-box{background:#fafbfc; border:1px solid #E5E8EB; border-radius:8px; padding:20px 24px}
.ico-check-custom{color:#19CE60; border:3px solid #19CE60; border-radius:40px; font-weight:400; width:28px; font-size:18px; height:28px; display:inline-block; text-align:center;}
.ico-check-custom::before{margin:0;}
.result-box ul{margin-top:16px}
.result-box ul li{margin-top:8px}
.result-box div{color:#197ACE; font-weight:400}

@media(min-width:768px){
    .ico-check-custom{width:34px; font-size:24px; height:34px}
    .result-box{padding:36px 40px}
}

/* info-msg */
.info-msg{text-align:center; padding:16px; border-radius:15px; color:#fff; font-weight:500; font-family:'NanumSquare' !important}
.info-msg-1{background:#19CE60;}
.info-msg-2{background:#FC9B52;}
.info-msg-3{background:#7F65FF;}
.info-msg-4{background:#F88080;}
.info-msg-5{background:#5BC3EC;}
.msg-point{color:#FFFB94; margin-top:4px}
a.msg-point{display:inline-block;}
a.msg-point:hover{text-decoration:underline}

/* msg-icon */
.info-msg i{position:relative;}
.ico-msg-1::before{content:''; background:url(/images/alarm.svg) center no-repeat; width:24px; height:24px; background-size:100%; vertical-align:middle; position:relative; top:-4px;}
.ico-msg-2::before{content:''; background:url(/images/calendar.svg) center no-repeat; width:20px; height:20px; background-size:100%; vertical-align:middle; position:relative; top:-3px;}
.ico-msg-3::before{content:''; background:url(/images/smile.svg) center no-repeat; width:18px; height:18px; background-size:100%; vertical-align:middle; position:relative; top:-2px;}
.ico-msg-4::before{content:''; background:url(/images/bell.svg) center no-repeat; width:17px; height:19px; background-size:100%; vertical-align:middle; position:relative; top:-2px;}
.ico-msg-5::before{content:''; background:url(/images/clap.svg) center no-repeat; width:22px; height:22px; background-size:100%; vertical-align:middle; position:relative; top:-3px;}

@media(min-width:768px){
    .info-msg{padding:24px}
    .ico-msg-1::before{width:35px; height:35px}
    .ico-msg-2::before{width:27px; height:27px}
    .ico-msg-3::before{width:27px; height:27px}
    .ico-msg-4::before{width:23px; height:26px}
    .ico-msg-5::before{width:30px; height:30px}
}

.ai-guide{background:#F5FAFF; padding:18px 24px; border-radius:15px}
.ai-guide ul{display:flex; flex-direction:column; gap:4px;}
.ai-guide ul li{position:relative; margin-left:12px; color:#666;}
.ai-guide ul li::before{content:''; width:5px; height:5px; border-radius:4px; background:#666; display:inline-block; 
	position:absolute; top:10px; left:-12px;}
.ai-guide ul li .bold{color:#3581F6; font-weight:500}
/* .ai-guide ul li{list-style: disc;} */

/* hys */
.survey > li{display:none}
.survey > li.active{display:list-item}
.survey > li{margin-top:30px}
.button.next.disable{background:#a3a3a3}
.input-cnt{font-size:14px; color:#aaa; text-align:right}
.english-ctn input[type="text"]:disabled, .english-ctn textarea:disabled{background:#f8f8f8; color:#999}

/*  */
.table-container table{table-layout:initial; border-top:1px solid #333}
.table-container table td{font-weight:400}
.table-container table th{white-space:nowrap}
.table-container table td li{font-family:'notokr';}
.text-deco b{font-weight:600}

/* */
.hidden{display:none !important}

/* 환영 메시지 애니메이션 */
.welcome-animation {
    animation: welcomePulse 2s ease-in-out infinite;
    transform-origin: center;
}

@keyframes welcomePulse {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(25, 206, 96, 0.7);
    }
    50% {
        transform: scale(1.02);
        box-shadow: 0 0 0 10px rgba(25, 206, 96, 0.3);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(25, 206, 96, 0);
    }
}

/* 환영 메시지 텍스트 애니메이션 */
.welcome-text {
    animation: welcomeText 1.5s ease-in-out;
}

@keyframes welcomeText {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 아이콘 회전 애니메이션 */
.welcome-icon {
    animation: welcomeIcon 2s ease-in-out infinite;
}

@keyframes welcomeIcon {
    0%, 100% {
        transform: rotate(0deg);
    }
    25% {
        transform: rotate(-10deg);
    }
    75% {
        transform: rotate(10deg);
    }
}

/* 범용 형광펜 애니메이션 */
.highlight-animation {
    position: relative;
    display: inline-block;
    transition: all 0.3s ease;
    --highlight-color-1: #FFE066;
    --highlight-color-2: #FFD700;
    --highlight-color-3: #FFE066;
}

.highlight-animation::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 60%;
    background: linear-gradient(120deg, var(--highlight-color-1) 0%, var(--highlight-color-2) 50%, var(--highlight-color-3) 100%);
    opacity: 0.3;
    z-index: -1;
    transition: width 0.8s ease-in-out, opacity 0.8s ease-in-out;
    border-radius: 3px;
}

.highlight-animation.animate-highlight::before {
    width: 100%;
    opacity: 0.7;
}

/* 스크롤 애니메이션을 위한 기본 상태 */
.scroll-reveal {
    opacity: 0.3;
    transform: translateY(30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.scroll-reveal.scroll-visible {
    opacity: 1;
    transform: translateY(0);
}

/* 다양한 형광펜 색상 변형 */
.highlight-animation.highlight-blue {
    --highlight-color-1: #87CEEB;
    --highlight-color-2: #4169E1;
    --highlight-color-3: #87CEEB;
}

.highlight-animation.highlight-green {
    --highlight-color-1: #90EE90;
    --highlight-color-2: #32CD32;
    --highlight-color-3: #90EE90;
}

.highlight-animation.highlight-pink {
    --highlight-color-1: #FFB6C1;
    --highlight-color-2: #FF69B4;
    --highlight-color-3: #FFB6C1;
}

.highlight-animation.highlight-purple {
    --highlight-color-1: #DDA0DD;
    --highlight-color-2: #9370DB;
    --highlight-color-3: #DDA0DD;
}

.highlight-animation.highlight-orange {
    --highlight-color-1: #FFA500;
    --highlight-color-2: #FF8C00;
    --highlight-color-3: #FFA500;
}