* {margin:0;padding:0;box-sizing:border-box; font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif; vertical-align:top;}
body { line-height:1.5;color:#191521; font-size: 15px; /*background: #f2f7fe;*/} 
ul {list-style:none;}
li{list-style:none;}
a {text-decoration:none;color:inherit;}
img{vertical-align:top; max-width:100%;}
input,
textarea,
select{border:1px solid #ddd;transition:all .2s;color:#191521;  }
select{ appearance:none;  -webkit-appearance:none;  -moz-appearance:none;  background:none;  padding-right:40px;   background:url("/micro/images/icon-select.svg") no-repeat right 10px center / 20px}
input:focus,
textarea:focus,
select:focus{  outline:none;  border-color:#0069F0;  box-shadow:0 0 0 2px rgba(0,122,255,0.1);} 
input[type=date]{  background: #fff;}
::placeholder{color: #aaa;} 
*::-webkit-scrollbar{width:4px;height:4px} 
*::-webkit-scrollbar-track{background:transparent} 
*::-webkit-scrollbar-thumb{background:#d9d9d9;border-radius:10px} 
*::-webkit-scrollbar-thumb:hover{background:#0069F0}
 


/*************************************************** header ***************************************************/
.header{position:fixed;top:0;left:0;width:100%;background:#fff;z-index:1000; font-size: 16px; font-weight: 500; }
.header-inner{display:flex;align-items:center;justify-content:space-between; height:80px; max-width:1180px; margin:0 auto; width: 90%;}
.logo{ width: 150px; aspect-ratio: 150 / 25; background: url('/micro/images/logo.png') no-repeat center center / contain;}
.logo a{display:block; width: 100%; height: 100%;}
.nav{display:flex;gap:40px; margin-left: auto; margin-right: 40px;} 
.menu-btn{display:none;width:24px;height:24px;position:relative;background:none;border:none;cursor:pointer;}
.menu-btn .bar{position:absolute;left:0;width:100%;height:2px;background:#333;transition:0.3s;}
.menu-btn .top{top:2px;}
.menu-btn .middle{top:50%;transform:translateY(-50%);}
.menu-btn .bottom{bottom:2px;} 
.menu-btn.active .top{transform:rotate(45deg);top:50%;}
.menu-btn.active .middle{opacity:0;}
.menu-btn.active .bottom{transform:rotate(-45deg);bottom:auto;top:50%;}
  
.auth {display:flex; gap:clamp(7px,0.521vw,10px); align-items:center;  }
.auth a{padding:10px 12px; border-radius:50px; border:1px solid #ddd; font-size: clamp(12px,0.729vw,14px); line-height: 1;}
  

/*************************************************** footer ***************************************************/

.footer {background:#191521;color:#fff;padding:30px 0;text-align:center; font-size: 14px;}
.footer .inner{display:flex; flex-wrap:wrap; justify-content:space-between; max-width:1180px; gap:5px; }
.footer ul{display:flex; gap:30px; flex-wrap:wrap;}
.footer ul li a{font-weight: 600;}
.footer .copy{color: #999;}



/*************************************************** main ***************************************************/

.main-visual{padding:clamp(80px,8.854vw,170px) 0; width: 96%; max-width:1820px; margin:0 auto; border-radius:clamp(20px,1.563vw,30px); text-align:center;background:url('/micro/images/main-visual.jpg') no-repeat center center / cover;color:#fff}
.visual-title{font-size:clamp(20px,1.979vw,38px);font-weight:600;    word-break: keep-all; }
.visual-title .logo{ display: inline-block; vertical-align: baseline;filter: brightness(0) invert(1);  width: clamp(100px,9.375vw,180px); margin-right: clamp(5px,0.521vw,10px);}
.main-service{padding:clamp(30px,4.167vw,80px) 0 clamp(80px,8.333vw,160px);}
.service-list{display:flex;gap:clamp(15px,1.563vw,30px);}
.service-item {flex:1;}
.service-item > a{position:relative;display: flex;  background: #fff; z-index:0; flex-direction: column;    justify-content: space-between;    align-items: flex-start;    min-height: clamp(280px,18.75vw,360px); height: 100%;  padding:clamp(30px,2.083vw,40px);border-radius:clamp(20px,1.563vw,30px); box-shadow:4px 4px 30px #E9EBED; transition:all ease .35s; overflow:hidden;}
.service-item > a::after{content:''; position:absolute; inset:0;  background:linear-gradient(160deg, #0041A0, #0069F0);  opacity:0; transition:all ease .35s; z-index:-1;} 
.service-item .stit{position:relative; z-index:0; color:#fff;  padding:clamp(8px,0.521vw,10px) clamp(12px,0.781vw,15px); font-size: 13px; border-radius:50px; font-weight: 500; overflow:hidden;   transition:all ease .35s; line-height: 1; }
.service-item .stit::after{content:''; position:absolute; inset:0;  background:linear-gradient(160deg, #0041A0, #0069F0);   transition:all ease .35s; z-index:-1;}
.service-item .icon{margin-top: auto;   transition:all ease .35s; max-width:clamp(50px,3.229vw,62px);}
.service-title{font-size:clamp(21px,1.25vw,24px);font-weight:700;margin-bottom:clamp(8px,0.521vw,10px); margin-top: clamp(15px,1.042vw,20px);} 
.service-desc{font-size: clamp(14px,0.833vw,16px); word-break: keep-all; }
.service-item > a:hover{ color:#fff; }
.service-item > a:hover::after{opacity:1;}
.service-item > a:hover .icon{ filter: brightness(1.2);}
.service-item > a:hover .stit{background: #fff; color: #0041A0;}
.service-item > a:hover .stit::after{opacity:0;} 


/*************************************************** contents ***************************************************/
.inner {max-width:1080px; width: 90%; margin:0 auto; } 
.container{padding-top: clamp(70px,4.167vw,80px);}
.sub-content{padding:clamp(20px,4.167vw,80px) 0 clamp(60px,8.333vw,160px); min-height:calc(100vh - 150px);} 

.contents{background: #fff; box-shadow:4px 4px 30px #E9EBED; border-radius:30px; padding:clamp(10px,4.167vw,80px) clamp(20px,3.125vw,60px);}
.contents-header {margin-bottom: 20px;}
.contents-header h3{font-size: clamp(24px,1.771vw,34px);  }
.contents-header p{  margin-top: 10px;  color: #666;}
 
 
  
/* 좌 우 레이아웃 */
.layout-split{display:flex; justify-content:space-between;}
.layout-split-left{width:calc(100% - 370px);}
.layout-split-left .contents-header{margin-bottom: 0;}
.layout-split-right{width:330px}
.layout-split-right .btns{flex-direction:column;}

 

.ticket-wrap{padding:60px 20px}
.ticket-inner{max-width:800px;margin:0 auto} 
.ticket-info{background:#f8f9fb;padding:20px;border-radius:10px;margin-bottom:20px;font-size:clamp(13px,0.729vw,14px); }
.ticket-info > p{display:flex; gap:5px; align-items:center; margin-bottom: clamp(7px,0.521vw,10px); font-weight: 600;}
.ticket-info > p:before{content:''; width: 16px; aspect-ratio:1; background: url('/micro/images/icon-warning.png') no-repeat center center / contain;}
.ticket-info ul{display:flex; gap:clamp(7px,0.521vw,10px);}
.ticket-info ul li{width: 50%; display:flex; gap:10px;}

.form-wrap .form-group{margin-bottom:clamp(15px,1.042vw,20px);}
.form-wrap .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 20px}
.form-wrap label{display:block;font-weight:600;margin-bottom:10px}
.form-wrap label span{color:#0069F0}
.form-wrap input:not([type="checkbox"]),
.form-wrap textarea,
.form-wrap select{width:100%;padding:16px; border-radius:10px; font-size: clamp(14px,0.781vw,15px);}
.form-wrap textarea{min-height:190px;resize:vertical} 
.form-wrap .date-range{display:flex; gap:5px; align-items:center; }

.file-box{display:flex; justify-content:space-between; align-items:center;gap:10px; border:1px solid #ddd; padding:6px; border-radius:10px;}
.file-box input{display:none}
.file-box .file-btn{padding:10px clamp(10px,1.042vw,20px);background:#191521;color:#fff;border-radius:6px;cursor:pointer;font-size:13px; margin:0;}
.file-name{font-size:13px; padding-left: 10px; font-size: clamp(14px,0.781vw,15px);}

.form-wrap .agree{display:flex;align-items:center; gap:10px;}
.form-wrap .agree .terms-btn{background:none; text-decoration:underline; font-weight: 600; font-size:14px;cursor:pointer} 
.form-wrap .check-wrap{  cursor:pointer; margin:0; font-weight: 500;}
.form-wrap .check-wrap input{display:none}
.form-wrap .checkmark{display:inline-block;width:20px;height:20px;border:2px solid #ddd;border-radius:6px;position:relative;transition:.2s; vertical-align:top; margin-right: 4px; margin-top: 1px;}
.form-wrap .checkmark::after{content:"";position:absolute;left:5px;top:1px;width:4px;height:8px;border:2px solid #fff;border-top:none;border-left:none;transform:rotate(45deg);transition:.2s}
.form-wrap .check-wrap input:checked + .checkmark{background:#0069F0;border-color:#0069F0}
.form-wrap .check-wrap input:checked + .checkmark::after{}
.form-wrap .check-wrap:hover .checkmark{border-color:#0069F0} 
.form-wrap .check-wrap input:focus + .checkmark{box-shadow:0 0 0 3px rgba(0,122,255,0.2)}

 
.desc{font-size:14px;color:#666;margin-top:8px;}
.error{font-size:14px;color:#0069F0;margin-top:8px; font-weight: 500; } 
.desc + .error{margin-top: 4px;}
.has-error{  outline:none;  border-color:#0069F0;  box-shadow:0 0 0 2px rgba(0,122,255,0.1);}


/* 티켓 리스트 */
.ticket-list{display:flex;flex-direction:column;gap:clamp(10px,0.781vw,15px); max-height:clamp(400px,41.667vw,800px); overflow-y:auto; scrollbar-gutter:stable;  padding-right:clamp(10px,1.042vw,20px);} 
.ticket-list .ticket-item:not(.no-data):hover{border-color:#0069F0;box-shadow:0 4px 20px rgba(0,0,0,0.05)} 
.ticket-item{padding:clamp(15px,1.25vw,24px) clamp(18px,1.25vw,24px);border:1px solid #ddd;border-radius:16px;background:#fff; transition:.2s}  
.ticket-item.no-data{text-align: center; background: #f8f8f8; border:none; color: #666;} 
.ticket-top{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:10px; gap:10px; width: 100%;} 
.ticket-title{font-size:clamp(17px,0.938vw,18px);font-weight:600; flex:1; overflow:hidden;  text-overflow:ellipsis;  white-space:nowrap;  min-width:0; }  
.ticket-meta{font-size:clamp(13px,0.729vw,14px);color:#666;  margin-top: 15px; justify-content:flex-end; display:flex; align-items:center; gap:10px;}
.ticket-desc{font-size:clamp(14px,0.781vw,15px); display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
/*.ticket-status{display:block; font-size:12px;padding:6px;border-radius:6px; width: 50px; text-align: center; font-weight: 600; flex-shrink:0}*/
.ticket-status{display:block; font-size:12px;padding:6px;border-radius:6px; text-align: center; font-weight: 600; flex-shrink:0}
.ticket-status.is-error{background:#eee;color:#666} 
.ticket-status.is-progress{background:#E6F0FE;color:#0069F0} 
.ticket-status.is-done{background:#0041A0;color:#fff}

/* 티켓 상세 */
.ticket-view{width: 100%;display:grid;grid-template-columns:1fr 1fr; gap:clamp(5px,0.521vw,10px);} 
.ticket-view li.content{   grid-column:1 / -1;}
.ticket-view li.content .ticket-value{min-height:150px;}
.ticket-label{display:block; color:#666;margin-bottom:5px} 
.ticket-value{  font-size: clamp(15px,0.833vw,16px); font-weight: 500; }
.ticket-value.file a{display:inline-flex; align-items:center; gap:5px;  }
.ticket-value.file a:after{content:''; display:inline-block; width: 18px; aspect-ratio:1; background: url('/micro/images/icon-download.svg') no-repeat center center / contain; }  
 

/* button */
.btns{display:flex; gap:10px; margin-top: 20px;}
.btn{width:100%;padding:18px 10px; background: #eee; color:#666;border:none;border-radius:10px;font-size:16px;font-weight:600;cursor:pointer;}
.submit-btn{ background:linear-gradient(160deg, #0041A0, #0069F0); color:#fff; } 
.find-btn{text-align:right;  display:block; margin-top: 20px; text-decoration:underline; font-weight: 500; font-size:14px;cursor:pointer} 
  
 
/* 로그인 */
.login-page .logo{width: 100px; margin-bottom: 20px;}
.login-page .layout-split-left{width: 43%;}
.login-page .layout-split-right{width: 43%;}




/* popup */
.layer-popup {position:fixed;top:0;left:0;width:100%;height:100%;display:none;z-index:9999;}
.layer-popup.active {display:block;}
.layer-dim {position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.5);}
.layer-content {position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:#fff;padding:40px 20px;border-radius:20px;text-align:center;min-width:350px; min-height:140px; display:flex; flex-direction:column; align-items:center; justify-content:center;}
.layer-text { font-size:16px;} 
.layer-content .btn{ font-size: 15px;  padding:clamp(7px,0.521vw,10px) 20px; background: #fff; border:1px solid #ddd;}



/* privacy */
.privacy-policy {  width: 100%;   }
.privacy-policy section {  margin-top: clamp(30px,2.604vw,50px);} 
.privacy-policy h3 {  position: relative;  margin-bottom: clamp(12px,0.833vw,16px);   font-size: clamp(20px,1.146vw,22px); font-weight: 600; } 
.privacy-policy p {  margin-top: 10px; color: #555;}
.privacy-policy strong {  color: #111;font-weight: 700;}
.privacy-policy section > ul {  margin-top: 20px;  padding-left: 18px; }
.privacy-policy section > ul > li {  margin-top: 10px;  color: #555;  list-style: decimal;}
.privacy-policy section > ul > li > ul{margin-top: 10px;}
.privacy-policy section > ul > li > ul > li{margin-top: 6px; padding-left: 16px; text-indent: -16px;}
.privacy-policy .note { margin-top: 20px; }
.privacy-policy .table-wrap {  margin-top: 24px;  overflow-x: auto;  background: #fff;}
.privacy-policy table { width: 100%; border-collapse: collapse; }
.privacy-policy thead th {font-size:clamp(13px,0.781vw,15px);  padding: 10px clamp(10px,1.042vw,20px) ;  border: 1px solid #ddd;  background: #f8f8f8;   word-break: keep-all;     vertical-align: middle;}
.privacy-policy tbody td { font-size:clamp(13px,0.781vw,15px); padding: 10px clamp(10px,1.042vw,20px);  border: 1px solid #ddd;  color: #555;} 
.privacy-policy .company {  margin-top: 40px;  color: #111;font-size: 16px; font-weight: 600; }

/*************************************************** responsive ***************************************************/
@media (max-width:768px){ 

	.nav{position:absolute;top:70px;left:0;width:100%;background:#fff;flex-direction:column;gap:0;display:none;border-bottom:1px solid #eee;}
	.nav a{padding:15px 20px;border-top:1px solid #eee;} 
	.menu-btn{display:block;}
	.nav.active{display:flex;}
	.auth {margin-left: auto; margin-right: 20px;}
	.logo{width: 120px;}
	.header-inner{height: 70px;} 
	.form-grid{grid-template-columns:1fr}   
	.layout-split{flex-direction:column; gap:30px;}
	.page-tickets .layout-split{flex-direction:column-reverse;}
	.layout-split-left{width:100%;}
	.layout-split-right{width:100%;}
	.login-page .layout-split-left{width: 100%;}
	.login-page .layout-split-right{width: 100%;}
	.service-list{flex-direction:column}
	.service-item > a{min-height:auto;}
	.service-item .icon{margin-top: 24px;  }
	.footer ul{flex-direction:column; gap:5px; align-items:flex-start;}
	.visual-title{  margin:0 auto;}
	.contents{box-shadow:none; border-radius:0;}
	.login-page .logo{display:none;}
	.ticket-desc{    -webkit-line-clamp: 2;}
	.ticket-info ul{flex-direction:column;  }
	.ticket-info ul li{width: 100%;flex-direction:column;  gap:3px;}
	.form-wrap .form-grid{grid-template-columns:1fr}   
	.sub-content .inner{width: 100%;} 

	.service-item .stit{ margin-left: -10px;   margin-top: -10px;}
	.ticket-view{grid-template-columns:1fr}   
	.ticket-list{max-height:none; padding-right: 0;}
	.ticket-item.no-data{border-radius:10px;}
}

/** 팝업기능 사용위해서 영카트기본에서 가져온 CSS 시작 **/
button {cursor:pointer}

#hd_pop {z-index:1000;position:relative;margin:0 auto;height:0}
#hd_pop h2 {position:absolute;font-size:0;line-height:0;overflow:hidden}
.hd_pops {position:absolute;border:1px solid #e9e9e9;background:#fff}
.hd_pops img {max-width:100%}
.hd_pops_con {}
.hd_pops_footer {padding:0;background:#000;color:#fff;text-align:left;position:relative}
.hd_pops_footer:after {display:block;visibility:hidden;clear:both;content:""}
.hd_pops_footer button {padding:10px;border:0;color:#fff}
.hd_pops_footer .hd_pops_reject {background:#000;text-align:left}
.hd_pops_footer .hd_pops_close {background:#393939;position:absolute;top:0;right:0}

/* 페이징 */
.pg_wrap {clear:both;float:left;display:inline-block}
.pg_wrap:after {display:block;visibility:hidden;clear:both;content:""} 
.pg {text-align:center}
.pg_page, .pg_current {display:inline-block;vertical-align:middle;background:#eee;border:1px solid #eee}
.pg a:focus, .pg a:hover {text-decoration:none}
.pg_page {color:#959595;font-size:1.083em;height:30px;line-height:28px;padding:0 5px;min-width:30px;text-decoration:none;border-radius:3px}
.pg_page:hover {background-color:#fafafa}
.pg_start {text-indent:-999px;overflow:hidden;background:url('../img/btn_first.gif') no-repeat 50% 50% #eee;padding:0;border:1px solid #eee}
.pg_prev {text-indent:-999px;overflow:hidden;background:url('../img/btn_prev.gif') no-repeat 50% 50% #eee;padding:0;border:1px solid #eee}
.pg_end {text-indent:-999px;overflow:hidden;background:url('../img/btn_end.gif') no-repeat 50% 50% #eee;padding:0;border:1px solid #eee}
.pg_next {text-indent:-999px;overflow:hidden;background:url('../img/btn_next.gif') no-repeat 50% 50% #eee;padding:0;border:1px solid #eee}
.pg_start:hover,.pg_prev:hover,.pg_end:hover,.pg_next:hover {background-color:#fafafa}

.pg_current {display:inline-block;background:#3a8afd;border:1px solid #3a8afd;color:#fff;font-weight:bold;height:30px;line-height:30px;padding:0 10px;min-width:30px;border-radius:3px}
/** 팝업기능 사용위해서 영카트기본에서 가져온 CSS 끝 **/