@charset "utf-8";

/*
* Copyright 2022 WoongjinThinkbig Mathpid TX-PJT Team Authors All rights reserved.
*
* Licensed under the WoongjinThinkbig.
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* https://www.wjthinkbig.co.kr/en/index.do
*/

.sub_page.customer{background-image: linear-gradient(25deg, var(--gradationStart), var(--gradationEnd));}
.sub_page.customer .container .main_contents{padding-top:30px; padding-bottom: 13rem;}
.sub_page.customer .container .wrap{max-width: 550px;}
.sub_page.customer .cs_view_wrap,
.sub_page.customer .inquiry_con{font-size:10px;}
/* state */
.sub_page.customer .cs_state{padding:.5em 1em; display: flex; justify-content: center; align-items: center; height:2.7em; border-radius: var(--borderRadius); box-shadow: 0 0 0 1px #666666 inset; }
.sub_page.customer .cs_state span{font-size: 1.2em; font-weight: bold; line-height: 1.67; color: #666666;}
.cs_list_wrap .cs_complete .cs_state,
.cs_view_wrap .cs_view_cat .cs_state{box-shadow: 0 0 0 1px var(--contentColor) inset;}
.cs_list_wrap .cs_complete .cs_state span,
.cs_view_wrap .cs_view_cat .cs_state span{color: var(--contentColor);}

/* No data */
.sub_page.customer .container .none_list_wrap {height: calc(100vh - 340px);}
.sub_page.customer .none_list_wrap .img_wrap{display: flex; justify-content: center; max-width:29.5rem}
.sub_page.customer .none_list_wrap .none_list p{font-size:1.6rem; margin-top:var(--contentGap25); color:#303030}

/* FAQ */
.currency_cat_btn + .accordion_wrap{margin-top:2rem}
.accordion_list li .accordion_click .icon_16{transform: rotate(0); transition: .2s; flex-shrink: 0; font-size:1em}
.accordion_pannel{border-radius: 2em; background-color: #fff; font-size:10px}
.accordion_pannel_head .accordion_click{display: flex; justify-content: space-between; align-items: center; padding:2em 2.5em; gap:0 10px}
.accordion_pannel_head .accordion_click .title{font-size:1.6em; font-weight: 700;}
.accordion_pannel_content{display:none; padding:0 1.786em 2.143em; font-size:1.4em; line-height:1.72; color:#666}
.accordion_list li.active .accordion_pannel_content{display:block}
.accordion_list li.active .accordion_click .icon_16{transform: rotate(180deg);}
.accordion_list li + li{margin-top: var(--contentGap20);}

/*cs select */
.cs_select{position:relative; margin: 0 auto; height:5em;}
.cs_select .cs_select_inner{position: absolute; top:0; right:0; left:0; z-index: 2; border-radius: 1.5em; background-color: #ffffff;  }
.cs_select .cs_select_inner::before{content: ""; position: absolute; top: 0; left:0; right:0; bottom:0; display: block; width:100%; height:100%; border:1px solid #999999; border-radius:1.5em; pointer-events: none; box-sizing: border-box;  transition: border-color .3s;}
.cs_select .cs_select_inner.on_wrap::before{border-width: 2px; border-color: var(--contentColor); }
.cs_select .cs_select_btn{padding:1.4em 2em; display: flex; justify-content: space-between; align-items: center;}
.cs_select .cs_select_btn .cs_select_text{height:1.375em; font-size:1.6em; line-height: 1.5; font-weight: 500; color:#999999; overflow:hidden; text-overflow: ellipsis; white-space:nowrap;}
.cs_select .cs_select_inner .cs_select_btn i{transition: transform .3s; flex-shrink: 0; font-size:1em}
.cs_select .cs_select_inner.on_wrap .cs_select_btn i{transform: rotate(180deg);}
.cs_select .cs_select_list{height: 0; overflow: hidden; }
.cs_select .cs_select_list li:nth-child(n+2){margin-top:5px; }
.cs_select .cs_select_list li:last-child{padding-bottom:20px;}
.cs_select .cs_select_list li a{padding:10px 18px; display: flex; justify-content: space-between; align-items: center;}
.cs_select .cs_select_list li a span{font-size:1.6em; line-height: 1.5; font-weight: 500; overflow:hidden; text-overflow: ellipsis; white-space:nowrap;}
.cs_select .cs_select_list li a i{display: none; width: 1.6em; height: 1.6em; font-size: 10px;}
.cs_select .cs_select_list li a.active{background: var(--boxBg);}
.cs_select .cs_select_list li a.active span{color:var(--contentColor); font-weight: bold;}
.cs_select .cs_select_list li a.active i{display: block; flex-shrink: 0;}

/* cs list */
.cs_list_wrap{margin-top: var(--contentGap30);}
.cs_list_wrap > ul li{padding:3em 1em; border-bottom: 1px solid #ddd;}
.cs_list_wrap > ul li:first-child{padding-top: 0;}
.cs_list_wrap > ul li a .cs_list_item_con{display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap:0 10px;}
.cs_list_wrap > ul li a .cs_list_item_con .cs_state_wrap{ flex-shrink: 0;}
.cs_list_wrap > ul li a .cs_list_item_con time{font-size: 1.4em; font-weight: 500; color: #999999;}
.cs_list_wrap > ul li a .cs_list_item_con p{margin-top:1em; width:calc(100% - 2em);/*gap + icon*/  height: 1.375em; font-size: 1.6em; font-weight: bold; line-height: 1.5;}
.cs_list_wrap > ul li a .cs_list_item_con i{align-self: flex-end; flex-shrink: 0; font-size:1em}
/* 하단버튼 */
.bottom_zero_btn_wrap {position: fixed; height:90px;}
.bottom_zero_btn_wrap .bottom_zero_btn{height:100%;}

/* cs_write form */
.cs_write_wrap .cs_input_title{padding-left:10px; display: block; font-size: 1.8em; font-weight: 700; line-height: 1.56; letter-spacing: -0.01px;}
.cs_write_wrap .cs_select_wrap .cs_select{margin-top:var(--contentGap20); border-radius: 1.5em;}
.cs_write_wrap .input_out{margin-top:var(--contentGap30);}
.cs_write_wrap .input_out .input_wrap{margin-top:var(--contentGap20);}
/* s: 2023.11.06 현재 운영에서 카운터 처리 보이지 않음, 기존 font-size:0 되어 있었음. */
.cs_write_wrap .content_wrap .input_wrap .textarea_counter{position: absolute; bottom:15px; right:20px;}
.cs_write_wrap .content_wrap .input_wrap .textarea_counter span{font-size:1.4em; font-weight: 500; color: #999999;}
/* e */
.cs_write_wrap .email_wrap .input_wrap,
.cs_write_wrap .title_wrap .input_wrap{height:5em;} 
.cs_write_wrap .email_wrap .input_wrap input,
.cs_write_wrap .title_wrap .input_wrap input{font-size:1.6em; padding:0.75em 0; line-height:normal}
.cs_write_wrap .content_wrap .input_wrap{position: relative; padding:0; height: auto; overflow: hidden;line-height: 1em; border-radius: 1.5em;}
.cs_write_wrap .content_wrap textarea{height:280px; resize: none; font-size:1.6em;}
.cs_write_wrap .bottom_zero_btn_wrap {position: fixed; height:90px;}
.cs_write_wrap .bottom_zero_btn_wrap .bottom_zero_btn{height:100%;}

/* cs_view  */
.cs_view_wrap .cs_view_cat{display: flex;}
.cs_view_wrap .cs_view_title{margin-top:1em; font-size:1.6em}
.cs_view_wrap .cs_view_title h3{font-size: 16px; line-height: 1.5;}
.cs_view_wrap .cs_view_state{margin-top:10px; display: flex; justify-content: space-between; align-items: center; }
.cs_view_wrap .cs_view_state.q_state{margin-top:5px; align-items: flex-end;}
.cs_view_wrap .cs_view_state time{font-weight: 500; color: #999; font-size:1.4em}
.cs_view_wrap .cs_view_state .icon_24{font-size:1em}
.cs_view_wrap .cs_view_con_wrap{padding:0 1em 2em; }
.cs_view_wrap .cs_view_con_wrap:nth-child(n+2){padding:2em 1em 2em; border-top:1px solid #ddd;}
.cs_view_wrap .cs_view_con_wrap .cs_view_question_text{margin-top:var(--contentGap30); font-size: 1.4em;}
.cs_view_wrap .cs_view_con_wrap .cs_view_question_text p{font-weight: 700;}
.cs_view_wrap .cs_view_con_wrap .cs_view_answer_text{font-size: 1.4em;}
.cs_view_wrap .cs_view_con_wrap .cs_view_answer_text p{font-weight: 500;}
.cs_view_wrap .comment_box{padding:2em 1em 2em 3em; border-top:1px solid #ddd;}
.cs_view_wrap .comment_box span{font-weight: bold; font-size: 1.4em;}
.cs_view_wrap .comment_box p{font-weight: 500; font-size: 1.4em;}
.cs_view_wrap .comment_write_form{margin-top:var(--contentGap20)}
.cs_view_wrap .comment_write_form .input_wrap {padding: 0 2em; display: flex; align-items: flex-end; gap:0 17px; height: 5em; transition:height, .3s;}
.cs_view_wrap .comment_write_form .input_wrap .comment_write_area{padding:.875em 0 0; width:100%; height:100%; border:none; resize: none; font-size:1.6em}
.cs_view_wrap .comment_write_form .input_wrap .commnet_submit{margin-bottom:.9em; padding:.4em; width:3.2em; height:3.2em; border-radius:1em; background-color:#bfcfe7; transition: background-color, background-image, .3s;}
.cs_view_wrap .comment_write_form .input_wrap .commnet_submit .icon_24{font-size:1em}
.cs_view_wrap .comment_write_form .input_wrap.active {position: fixed; left:2em; right:2em; bottom:3.7em; align-items: flex-end; height: 9.8em;}
.cs_view_wrap .comment_write_form .input_wrap.active .commnet_submit{background-color: transparent; background-image: linear-gradient(to right, var(--gradationStart), var(--gradationEnd));}

/* 고객지원 이메일 */
.cs_email .container {height: auto; background-color: #ffffff;}
.cs_email .main_contents .cs_email_wrap .img_wrap figure{margin:0 auto; max-width:295px;}
.cs_email .main_contents .cs_email_wrap .text_wrap{margin-top:40px; padding:0 20px;}
.cs_email .main_contents .cs_email_wrap .text_wrap h3{padding:0 11px; font-size: 20px; font-weight: bold; line-height: 1.3; letter-spacing: -0.01px; text-align: center;}
.cs_email .main_contents .cs_email_wrap .text_wrap p{margin-top:20px; font-size: 14px; font-weight: 500; line-height: 1.43; text-align: center;   color: #666;}
.cs_email .main_contents .cs_email_wrap .text_wrap p br:nth-child(1){display: none;}
.cs_email .main_contents .cs_email_wrap .text_wrap .btn_wrap{margin-top:30px; display: flex; justify-content: center;}
.cs_email .main_contents .cs_email_wrap .text_wrap .btn_wrap a{font-size: 16px; font-weight: bold; line-height: 1.5; text-align: center; color:var(--subText); text-decoration: underline;}

@media(max-width:321px){
  .sub_page.customer .inquiry_con{font-size:9px;}
}

@media (min-width:600px){ 
  .sub_page.customer .container .wrap{padding:0;}
  .sub_page.customer .cs_view_wrap,
  .sub_page.customer .inquiry_con{font-size:11px;}
  .cs_select .cs_select_btn .cs_select_text{font-size:1.48em;}
  .accordion_pannel{font-size:12px}
  .cs_view_wrap .comment_write_form .input_wrap.active {position: relative; left: inherit; right: inherit; bottom: inherit;}
  .currency_cat_btn.scroll_type ul{justify-content: center;}
}

/* s: old */
/* @media(max-width:319px){
  .cs_view .comment_write_form .input_wrap .comment_write_area::placeholder{font-size:12px;}
}

@media(max-width:374px){
  .cs_email .main_contents .cs_email_wrap .text_wrap p br{display: none;}
  .cs_email .main_contents .cs_email_wrap .text_wrap h3 {padding: 0;}
}

@media (min-width:600px){ 
  .cs .container .main_contents{padding-top:5vh}
  .cs_list .container .main_contents{padding-top:2vh}
  .cs .container .main_contents .none_list{padding-top:calc(15vh - 20px);}
  .cs .container .main_contents .cs_email_wrap{padding-top:10vh;}

  .cs_select{max-width: 335px; }  
  .cs_list .cs_list_wrap ul li{padding:20px 0; }
  .cs_list .cs_list_wrap ul li a .cs_list_item_con {flex-wrap: nowrap; gap:0;}
  .cs_list .cs_list_wrap ul li a .cs_list_item_con .cs_state_wrap{display: flex; width:98px;}
  .cs_list .cs_list_wrap ul li a .cs_list_item_con time {order: 2; flex-shrink: 0; margin:0 19px 0 22px; text-align: right; }
  .cs_list .cs_list_wrap ul li a .cs_list_item_con p {order: 1; margin-top: 0; width: 100%;}
  .cs_list .cs_list_wrap ul li a .cs_list_item_con i {order: 3; margin-top: 0;}

  .cs .none_list .img_wrap figure{max-width: 371px;}

  .cs_write_form{padding-top:0}
  .cs_write .cs_select{max-width: 100%;}
  .cs_write .cs_input_title {font-size: 20px; line-height: 1.3;}
  .cs_write .bottom_zero_btn_wrap {position: fixed;}

  .cs_view .comment_write_form .input_wrap.active {position: relative; left: inherit; right: inherit; bottom: inherit;}

  .cs_email .main_contents .cs_email_wrap .img_wrap figure { max-width: 370px;}
  .cs_email .main_contents .cs_email_wrap .text_wrap {margin-top: 50px; padding:0;}
  .cs_email .main_contents .cs_email_wrap .text_wrap p br{display: none;}
  .cs_email .main_contents .cs_email_wrap .text_wrap p br:nth-child(1){display: block;}
  .cs_email .main_contents .cs_email_wrap .text_wrap .btn_wrap {margin-top: 49px;}  
}

@media (min-width:600px) and (orientation: portrait) {
  .cs .container .main_contents{padding-top:10vh}
  .cs_list .container .main_contents{padding-top:5vh}
  .cs_list .cs_list_wrap { margin-top: 80px;}
}

@media (min-width:1024px) and (orientation: landscape) {
  .cs_list .cs_list_wrap { margin-top: 70px;}
  .cs .container .main_contents .wrap{padding: 0; max-width: 550px;}
} */
/* e: old */