@charset "utf-8";
/* cs common */
.cs_header_lnb ul{display: flex; justify-content: center; align-items: center; gap: 0 60px;}
.cs_header_lnb ul li a{position: relative; padding-bottom:6px; font-size: var(--rem-26); color: #000000; }
.cs_header_lnb ul li a::before{content: ""; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); display: none; width:100%; height: 2px; background-color: var(--brand-color-main);}
.cs_header_lnb ul li a.active{color: var(--brand-color-main); font-weight: var(--font-bd);}
.cs_header_lnb ul li a.active::before{display: block;}
@media(max-width:1280px){
  .cs_header_lnb ul {gap: 0 50px;}
  .cs_header_lnb ul li a {font-size: var(--rem-24);}}
@media(max-width:768px){
  .cs_header_lnb ul li a {font-size: var(--rem-22);}
}
@media(max-width:768px){
  .cs_header_lnb ul {gap: 0 28px;}
}

/* list search */
.search_wrap{display: flex; justify-content: center; align-items: center; gap: 0 3.5rem;}
.search_wrap label{font-size: var(--rem-24); font-weight: var(--font-lg);}
.search_wrap label strong{font-weight: var(--font-sb);}
.search_inner{display: flex; gap: 0 5px;}
.search_inner label{font-size: var(--rem-20); width:80px; flex-shrink: 0; font-weight: var(--font-md);}
.search_inner input{padding:1.2rem var(--rem-20); width: 450px; border: 1px solid #dadada; border-radius: 5px; font-size: var(--rem-20); }
.search_inner button{padding:15px var(--rem-24); border-radius:5px; background-color: var(--brand-color-main); font-size: 1em; color: #ffffff; }
@media(max-width:1024px){
  .faq_search_inner input{width:auto; }
}
@media(max-width:768px){
  .search_wrap { flex-direction: column; gap:8px;}
  .search_inner input {padding: 1rem var(--rem-20); font-size: var(--rem-18);}
  .search_inner button {padding: 12px var(--rem-24);}
}
@media(max-width:540px){
  .search_wrap { flex-direction: column; gap:8px;}
  .search_inner{width:100%;}
  .search_inner input {width: 100%;} 
}

/* input custom file */
.input_wrap .file_upload{flex-grow: 1; display: flex; justify-content: space-between; align-items: center; gap: 5px; cursor: pointer;}
.input_wrap .file_upload .file_name {padding: 17px 16px; display: block; width:100%; border:1px solid #969696; color: #999999; font-size: 14px;}
.input_wrap .file_upload input[type="file"] {display: none;}
.input_wrap .file_upload .file_btn {flex-shrink: 0; padding: 18px 16px; background: #B2B2B2; font-size: 14px; color: white; cursor: pointer;}



/* ==================================================
	고객샌터 메인
================================================== */
/* cs banner */
.cs_header_banner{position: relative; margin-top:3.5rem; padding:3.5rem 6rem; background-image: url("../images/sg_images/cs/cs_main_bg.jpg"); background-repeat: no-repeat; background-size: cover; background-position: center right; border-radius: 15px;}
.cs_header_banner h4{font-size: 3.5rem; color: #ffffff;}
.cs_header_banner h4 span{font-weight: var(--font-lg);}
.cs_header_banner p{margin-top:10px; color: #ffffff; line-height: 1.4;}
.cs_header_banner .img_wrap{position: absolute; bottom: 10px; right:80px; }
@media(max-width:1280px){
  .cs_header_banner .img_wrap {right: 40px;}
}
@media(max-width:1110px){
  .cs_header_banner {margin-top: 3.2rem; padding: 3.5rem 4rem;}
  .cs_header_banner .img_wrap {width: 200px;}
}
@media(max-width:1024px){
  .cs_header_banner .img_wrap {width: 180px;}
}
@media(max-width:768px){
  .cs_header_banner{display: flex; justify-content: space-between; align-items: center; gap:0 19px;}
  .cs_header_banner h4 {font-size: 3.2rem;}
  .cs_header_banner .img_wrap {flex-shrink: 0; position: relative; bottom: inherit; right: inherit; width: 160px;}
}
@media(max-width:540px){
  .cs_header_banner{ margin:20px calc( -1 * var(--spacing)) 0; padding: 16px var(--spacing); border-radius: 0; }
  .cs_header_banner h4 {font-size: 3rem;}
  .cs_header_banner p br{display: none;}
  .cs_header_banner .img_wrap {position: relative; bottom: inherit; right: inherit; width: 138px;}
}
/* cs body */
.cs_main .cs_body{--con_gap:100px; margin-top:80px; display: flex; flex-wrap: wrap; gap: 60px var(--con_gap); }
.cs_main .cs_body .list_header{padding-bottom: var(--rem-14); border-bottom: 1px solid #000000;}
.cs_main .cs_body .list_header .list_title{font-size: 2.8rem; color: #000000;}
.cs_main .cs_body .list_header .more_btn{font-size: var(--rem-16); display: flex; align-items: center; gap: 0 10px;}
.cs_main .cs_body .list_header .more_btn:after{content: "+";}
@media(max-width:1440px){
  .cs_main .cs_body {--con_gap:80px; gap: 56px var(--con_gap);}
}
@media(max-width:1280px){
  .cs_main .cs_body {--con_gap:64px;}
}
@media(max-width:1110px){
  .cs_main .cs_body {--con_gap:48px;}
  .cs_main .cs_body .list_header .list_title {font-size: 2.6rem;}
}
@media(max-width:768px){
  .cs_main .cs_body {flex-direction: column;}
}
@media(max-width:540px){
  .cs_main .cs_body {gap: 0;}
  .cs_main .cs_body > div + div{position: relative; margin-top:40px; padding-top:40px; border-top:10px solid #F1F2F3;}
  .cs_main .cs_body > div + div::before{content: ""; position: absolute; top:0; left:50%; transform: translate(-50%, -100%); display: block; width:calc(100% + (var(--spacing) * 2)); height: 10px; background-color: #F1F2F3;}
}

/* 자주 찾는 질문 */
.cs_main_faq{width:calc(60.7059% - (var(--con_gap) / 2));}
.cs_main_faq .cs_main_faq_list {padding:0; border-top: none;}
.cs_main_faq .cs_main_faq_list li {padding:0;}
.cs_main_faq .cs_main_faq_list li a{padding:var(--rem-15) 10px; display: flex; justify-content: space-between; align-items: center; gap: 0 8px; box-sizing: border-box; overflow: hidden;}
.cs_main_faq .cs_main_faq_list li a::after{flex-shrink: 0; content: url('../images/sg_images/icon/list_link_icon.svg'); display: block; width:6px; height: 12px;}
.cs_main_faq .cs_main_faq_list li a p{line-height:1.4;}
/* 고객센터 정보 */
.cs_main_info{width:calc(39.2851% - (var(--con_gap) / 2));  border-bottom: 1px solid #dadada; }
.cs_main_info .cs_main_info_wrap{padding:var(--rem-30) var(--rem-20) 35px;}
.cs_main_info .cs_main_info_num{display:flex; justify-content: center; align-items: center; gap:0 20px; font-size: 4.5rem; color: var(--brand-color-main); font-weight: bold; } 
.cs_main_info .cs_main_info_num i{padding: 11px 10px; display: flex; justify-content: center; align-items: center; width:48px; height: 48px; border-radius: 50%; background-color: var(--brand-color-main); }
.cs_main_info .cs_main_info_time{margin-top:var(--rem-20);}
.cs_main_info .cs_main_info_time h5{text-align: center; font-size:var(--rem-20); font-weight: var(--font-sb);}
.cs_main_info .cs_main_info_time .cs_main_info_time_box{--span-gap:28px; margin-top:8px; display: flex; justify-content: center; gap: 0 var(--span-gap); line-height: 1.4;}
.cs_main_info .cs_main_info_time .cs_main_info_time_box span{position:relative;}
.cs_main_info .cs_main_info_time .cs_main_info_time_box span + span::before{content: ""; position:absolute; top:50%; left:calc(-1 * (var(--span-gap) / 2)); transform: translateY(-50%); display: block; width:1px; height:14px; background-color: #d9d9d9;}
.cs_main_info .cs_main_info_time .cs_main_info_email{margin-top:var(--rem-17); text-align: center;}
/* 공지사항 */
.cs_main_notice{width:100%;}
.cs_main_notice .list_header{padding-bottom: var(--rem-20); border-bottom: none!important;}
.cs_main_notice .card_list_item_title{height: calc((1em * 1.4) * 2); overflow: hidden; line-height: 1.4;}
.cs_main_notice .card_list_item_date{margin-top: var(--rem-20); display: block;}
@media(max-width:1440px){
  .cs_main_info .cs_main_info_num {gap: 0 16px; font-size: 4.2rem;}
}
@media(max-width:1280px){
  .cs_main_info .cs_main_info_num {gap: 0 15px; font-size: 4rem;}
}
@media(max-width:1110px){
  .cs_main_faq {width: calc((100% - var(--con_gap)) / 2);}
  .cs_main_info {width: calc((100% - var(--con_gap)) / 2);}
  .cs_main_info .cs_main_info_num {gap: 0 12px; font-size: 3.2rem;}
  .cs_main_info .cs_main_info_num i {width: 40px; height: 40px;}

  .card_list.cs_main_notice_list {gap: var(--rem-20) var(--rem-20);}  
  .card_list.cs_main_notice_list li {width: calc((100% - (var(--rem-20) * 3)) / 4);}
  .card_list.cs_main_notice_list li a {padding: 20px;}
}
@media(max-width:1024px){
  .card_list.cs_main_notice_list {gap: 10px;}  
  .card_list.cs_main_notice_list li {width: calc((100% - (10px * 1)) / 2);}
}
@media(max-width:768px){
  .cs_main_faq {width: 100%;}
  .cs_main_info {width: 100%;}
  .cs_main_info .cs_main_info_num {gap: 0 15px; font-size: 4rem;}
  .cs_main_info .cs_main_info_num i {width: 44px; height: 44px;}
}
@media(max-width:540px){
  .cs_main_info .cs_main_info_wrap {padding: var(--rem-20) var(--rem-15) }
  .cs_main_info .cs_main_info_time {margin-top: 10px;}
  .cs_main_info .cs_main_info_time .cs_main_info_email {margin-top: 5px;}

  .card_list.cs_main_notice_list {gap: 5px;}  
  .card_list.cs_main_notice_list li {width: 100%;}
  .cs_main_notice .card_list_item_title {height: auto; -webkit-line-clamp: 1;}
  .card_list .card_list_item .card_list_item_date {margin-top:10px; }
}



/* ==================================================
	고객샌터 FAQ
================================================== */
.faq_search{margin-top:35px; padding:var(--rem-40);  border: 1px solid #dadada; border-radius: 15px; background-color: #f4f4f4;}
.cs_faq .cs_body {margin-top: 60px;}
.cs_faq_category ul{display: flex; flex-wrap: wrap; gap:5px;}
.cs_faq_category ul li a{padding:var(--rem-14) var(--rem-24); display: block;box-shadow: 0 0 0 1px inset #dadada; border-radius: 5px; }
.cs_faq_category ul li a.active{box-shadow: 0 0 0 2px inset var(--brand-color-main); font-weight: bold; color: var(--brand-color-main); }

.cs_faq_list_wrap{margin-top:37px;}
.cs_faq_list {padding: 0;  border-width: 2px;}
.cs_faq_list .basic_list_item {padding: 0;}
.cs_faq_list .question{cursor: pointer;}
.cs_faq_list .question .pd_faq_list_title{position: relative; padding: 20px 10px; display: flex; justify-content: space-between; align-items: center; gap: 0 20px;overflow: hidden;  }
.cs_faq_list .question .pd_faq_list_title:after{content:""; display: block; width:20px; height: 10px; background-image: url('../images/sg_images/icon/faq_arrow.svg'); background-repeat: no-repeat; background-size: 100%; background-position: center; transition: transform .3s;}
.cs_faq_list .question.active .pd_faq_list_title:after{transform:rotate(180deg);}
.cs_faq_list .answer{height:0; overflow: hidden;}
.cs_faq_list .answer .answer_content{padding:50px; background-color: #F4F4F4; line-height: 1.4;}
.cs_faq .pagination{margin-top:60px;}
.cs_faq .pagination .paging_inner_wrap .page_num_group .page_num.active {border-color: #323232; background: #323232;
}
@media(max-width:1024px){
  .cs_faq .cs_body {margin-top: 56px;}
  .cs_faq .pagination{margin-top:56px;}
}
@media(max-width:768px){
  .faq_search {padding: var(--rem-30); border-radius: 10px;}

  .cs_faq .cs_body {margin-top: 48px;}
  .cs_faq_list_wrap {margin-top: 24px;}
  .cs_faq_list .answer .answer_content {padding: 32px;}
  .cs_faq .pagination{margin-top:48px;}

  .cs_faq_category ul li a { padding: 11px var(--rem-20); font-size: var(--rem-16);}
}
@media(max-width:540px){
  .faq_search {padding:var(--rem-20) var(--rem-16); border-radius: 10px;}
  .cs_faq_list .answer .answer_content {padding: 28px 24px;}
  .cs_faq_list .question .pd_faq_list_title:after {width: 16px; height: 8px;}
  .cs_faq .pagination{margin-top:32px;}
}

/* ==================================================
	고객샌터 문의하기
================================================== */
.cs_inquiry .cs_body{margin:50px auto 0; max-width:650px; border-top: 2px solid; border-bottom: 1px solid #dadada; background-color:#f8f8f8;}
.cs_inquiry .input_wrap{position: relative; z-index:1; padding:20px 25px; display: flex; align-items: center; gap: 0 45px;}
.cs_inquiry .select_box {border-color: #969696;}
.cs_inquiry .input_wrap:has(.top_title){align-items: flex-start;}
.cs_inquiry .input_wrap .top_title{margin-top:11px;}
.cs_inquiry .input_wrap + .input_wrap{border-top: 1px solid #dadada; }
.cs_inquiry .input_wrap label{font-size: var(--rem-20); width:70px; flex-shrink: 0; font-weight: var(--font-md);}
.cs_inquiry .input_wrap input,
.cs_inquiry .input_wrap textarea{padding:1.2rem var(--rem-20); background-color: #ffffff; border: 1px solid #969696; width: 100%; font-size: var(--rem-20); }
.cs_inquiry .input_wrap .select_box{width:100%; max-width: 100%; background-color: #ffffff;} 
.cs_inquiry .input_wrap .select_box .select_arrow {z-index: 1; pointer-events: none;}
.cs_inquiry .input_wrap .select_box select {padding: 16px 34px 16px 20px;}
.cs_inquiry .input_wrap textarea{height: 260px;}
.cs_inquiry .inquiry_footer{margin-top:60px;}
.cs_inquiry .inquiry_footer .submit_btns{gap: 10px;}
.cs_inquiry .inquiry_footer .submit_btns .submit_btn{width:120px;}
@media(max-width:1024px){
  .cs_inquiry .inquiry_footer{margin-top:56px;}
}
@media(max-width:768px){
  .cs_inquiry .input_wrap {gap: 0 28px;}
  .cs_inquiry .inquiry_footer{margin-top:48px;}
}
@media(max-width:540px){
  .cs_inquiry .input_wrap {flex-direction: column; align-items: flex-start; gap: 8px;}
  .cs_inquiry .input_wrap label {width: 100%;}
  .cs_inquiry .input_wrap textarea{height: 160px;}
  .cs_inquiry .input_wrap .file_upload .file_name {padding: 14px 12px;}
  .cs_inquiry .input_wrap .file_upload .file_btn {padding: 15px 12px;}
  .cs_inquiry .inquiry_footer .submit_btns{gap: 8px;}
}


/* ==================================================
	고객샌터 공지사항
================================================== */
.cs_notice .cs_body{margin:50px auto; max-width:1360px;}
.cs_notice .list_title{font-size: var(--rem-25);}
.cs_notice .search_inner input{  width: 280px; border:1px solid; border-radius: 5px; font-size: 1em; }
.cs_notice .search_inner button{padding:8px var(--rem-16)}
.cs_notice .cs_notice_list_wrap table col:first-child,
.cs_notice .cs_notice_list_wrap table col:last-child{width:160px;}
.cs_notice .cs_notice_list_wrap table tbody td:first-child{text-align: center;}
.cs_notice .cs_notice_list_wrap table tbody td:last-child{text-align: center;}
.cs_notice .cs_notice_list_wrap table td{vertical-align: middle;}
.cs_notice .cs_notice_list_wrap table td:has(a){padding:0; }
.cs_notice .cs_notice_list_wrap table td a{padding: var(--rem-20); display: block; overflow: hidden;}
.cs_notice .pagination{margin-top:60px;}
.cs_notice .pagination .paging_inner_wrap .page_num_group .page_num.active {border-color: #323232; background: #323232;
}
@media(max-width:1024){
  .cs_notice .pagination{margin-top:56px;}
}
@media(max-width:768px){
  .cs_notice .search_inner input {width: 220px;}
  .cs_notice .search_inner button {padding: 8px var(--rem-14);}
  .cs_notice .cs_notice_list_wrap table thead{display: none;}
  .cs_notice .cs_notice_list_wrap table col:first-child,
  .cs_notice .cs_notice_list_wrap table th:first-child,
  .cs_notice .cs_notice_list_wrap table td:first-child{display: none;}
  .cs_notice .cs_notice_list_wrap table,
  .cs_notice .cs_notice_list_wrap table tbody,
  .cs_notice .cs_notice_list_wrap table tr,
  .cs_notice .cs_notice_list_wrap table td{display: block; width:100%; text-align: left;}
  .cs_notice .cs_notice_list_wrap table tbody td:last-child {padding:0 var(--rem-16) var(--rem-16); text-align: left;}
  .cs_notice .cs_notice_list_wrap table td a {padding: var(--rem-16);}
  .cs_notice .pagination{margin-top:48px;}
}
@media(max-width:400px){
  .cs_notice .list_header:has(.list_header_left) {align-items: center; gap: 12px;}
  .cs_notice .list_header .list_header_right{width:100%;}
  .cs_notice .search_inner input {width: 100%}
}


/* ==================================================
	고객샌터 공지사항 상세페에지
================================================== */
.cs_notice_view .list_header:has(.list_header_left) {border-bottom: 2px solid;}
.notice_view_header{padding:var(--rem-40) 10px; border-bottom: 1px solid #dadada;}
.notice_view_header h6{font-size: 3.5rem; line-height: 1.25; font-weight: var(--font-sb);}
.notice_view_header span{margin-top:var(--rem-20); display: block; color: #8c8c8c;}
.notice_view_body{padding:5rem var(--rem-30) 8rem;  border-bottom: 1px solid #dadada;}
.notice_view_body img{max-width: 100%;}
.notice_view_file{margin-top:10px; padding:var(--rem-20) var(--rem-30); border: 1px solid #dadada; background-color: #F8F8F8;}
.notice_view_file ul li + li{margin-top:10px;}
.notice_view_file ul li a{display: inline-flex; align-items: center; gap: 0 var(--rem-15); overflow: hidden;}
.notice_view_file ul li a i{flex-shrink: 0;}
.cs_notice_view .notive_view_footer{margin-top:60px;}

@media(max-width:1024px){
  .notice_view_header {padding: var(--rem-30) 10px;}
  .notice_view_header h6 {font-size: 3.2rem;}
  .notice_view_header span {margin-top: var(--rem-16);}
  .notice_view_body {padding: 4rem var(--rem-30) 6rem;}
  .cs_notice_view .notive_view_footer{margin-top:56px;}
}
@media(max-width:768px){
  .notice_view_header {padding: var(--rem-20) 10px;}
  .notice_view_header h6 {font-size: 2.8rem;}
  .notice_view_header span {margin-top: var(--rem-13);}
  .notice_view_body {padding: 3rem var(--rem-20) 4rem;}
  .notice_view_file {padding: var(--rem-13) var(--rem-16);}
  .notice_view_file ul li a {gap: 0 var(--rem-13);}
  .notice_view_file i{width:28px; height:28px;}
  .cs_notice_view .notive_view_footer{margin-top:48px;}
}