@charset "utf-8";


/* font & color */
:root {
    --fz_12:0.75rem;
    --fz_14:0.875rem;
    --fz_16:1rem;
    --fz_18:1.125rem;
    --fz_20:1.25rem;
    --fz_22:1.375rem;
    --fz_24:1.5rem;
    --fz_26:1.625rem;
    --fz_28:1.75rem;
    --fz_30:1.875rem;
    --fz_32:2rem;
    --fz_34:2.125rem;
    --fz_36:2.25rem;
    --fz_40:2.5rem;
    --fz_46:2.875rem;
    --fz_48:3rem;
    --fz_52:3.25rem;
    --fz_96:5.875rem;
    --fz_130:8.125rem;

    --fcl_3:#333;
    --fcl_6:#666;
    --fcl_9:#999;

    --ff_Regular:'SUIT-Regular';
    --ff_Light:'SUIT-Light';
    --ff_Medium:'SUIT-Medium';
    --ff_Bold:'SUIT-Bold';
    --ff_ExtraBold:'SUIT-ExtraBold';

    --fw_Light:300;
    --fw_Regular:400;
    --fw_Medium:500;
    --fw_Bold:600;
    --fw_ExtraBold:700;

    --cl_point:#536a57;
    --cl_point01:#fa826b;
    --cl_point02:#ff9600;
    --cl_point03:#7fa886;
    --cl_point04:#8b6282;
}

* {color: #333; font-family: 'SUIT-Regular';font-size: var(--fz_16);}

.fwB {font-weight: var(--fw_Bold);}
.cl_3 {color: #333 !important;}
.cl_point {color: var(--cl_point) !important;}
.cl_point01 {color: var(--cl_point01) !important;}
.cl_point02 {color: var(--cl_point02) !important;}
.cl_point03 {color: var(--cl_point03) !important;}


.cl_9 {color: var(--fcl_9) !important;}
.bgcl_point04 {background-color:var(--cl_point04) !important;}
.bgcl_point03 {background-color:var(--cl_point03) !important;}
.bgcl_point {background-color:var(--cl_point) !important;}
.bdcl_point03 {border: 1px solid var(--cl_point03);}
.bgcl_9 {background-color:var(--fcl_9);}
.bdcl_3 {border: 1px solid var(--fcl_3);}
.bdcl_point {border: 1px solid var(--cl_point);}
.btn {color: #fff; padding: 10px 15px; border-radius: 6px;}
.btn:last-of-type {margin-left: 10px;}
.cf {color: #fff !important;}
.bgf {background-color: #fff !important;}

#sub_visual {width: 100%;height: 430px;position: relative;}
#sub_visual .visual_tit {position: absolute;left: 0%; top: 50%; z-index: 6; text-align: left; width: 100%; padding: 0; transform: translateY(-15%);}
#sub_visual .visual_tit.visual_tit03 {transform: translate(-50%,0%);}
#sub_visual .visual_tit h2{color: #fff; font-weight: 600;font-family: 'SUIT',sans-serif;font-size: var(--fz_96);}
#sub_visual .visual_tit p{color:#fff; font-size:18px; font-weight:400;}
.sub_visual01 {background: url(../images/sub/sub_visual01.jpg) no-repeat center bottom / cover;}
#sub_visual .sublogo {position: absolute; top:50%;  transform: translateY(-30%); text-align: right;  width:100%;  }
#sub_visual .sublogo .logo1 {margin-right:10%}
#sub_visual .sublogo .logo2 {margin-right:2%; margin-top:1%}



/*공통*/
.moduleCall{padding:100px 0 100px; overflow:hidden;}
.moduleCall02{padding:90px 0 0 0;}
.moduleCall03{padding:100px 0 120px 0;}
p{font-family:'SUIT-Regular', sans-serif;}
strong{font-family:'SUIT-Regular', sans-serif;}
.play_font{font-family: 'SUIT-Regular', sans-serif !important; font-weight:600;}
.sub_tit {  font-family: 'SUIT-Regular', sans-serif;display: block;text-align: center;font-weight: 800;font-size: 44px;margin-bottom:40px;color: #333; position:relative;}
section{padding: 95px 0;}
.sub_tit h3.int_tit{font-family: 'SUIT', sans-serif;font-size:var(--fz_46); font-weight: 700;margin-bottom: 60px;}
.sub_tit p.int_tit_sub {font-size: 24px; text-align: center;}
.sub_tit p.int_tit_sub b{font-family: 'SUIT-Regular', sans-serif;}
.sub_tit p.int_tit_sub b:nth-of-type(1) {padding-right: 50px;}
.sub_tit p.int_tit_sub span:nth-of-type(2) {padding-left: 50px; position: relative;}
.sub_tit p.int_tit_sub span:nth-of-type(2):after {position: absolute; content: ''; width:1px; height:24px; background-color: #999999; left:0; top:50%; transform: translateY(-50%);}
.sub_tit h4{  font-family:'SUIT-Regular', sans-serif;font-size:34px;text-align:center;color: #333;font-weight: 300;line-height: 44px;margin-top: 30px;padding: 0 5px;}
.sub_tit h4 strong{font-weight: 500; font-size: 34px;}
.title03{font-size:30px; color:#333; font-weight:800; position:relative;  margin-bottom:20px; display:inline-block; word-break: keep-all; font-family:'SUIT-Regular', sans-serif;}
.navtab {width: 100%; font-size: 0; text-align: center; margin-top:0px; z-index:10; border-bottom: 1px solid #ddd;}
#sub_contents .inner {width:1410px; margin:0 auto; position: relative;}
.navtab .inner{width: 100%; max-width: 1410px; margin: 0 auto;}
.navtab li{height:80px;  display: inline-block; position: relative; float: left; line-height:80px;}

.navtab.lnb01 li{width:16.6% }
.navtab.lnb02 li{width:33.3%}
.navtab.lnb03 li{width:25%;}
.navtab.lnb04 li{width:50%;}
.navtab.lnb05 li{width:calc(100%/5)}
.navtab li a{font-weight:400; display: block; box-sizing: border-box; height: 80px; line-height:80px;  font-size: var(--fz_20); text-align: center; cursor: pointer; color:var(--fcl_9); background:#fff;font-family:'SUIT-Regular', sans-serif;  transform: skew(-0.001deg); border-right:none;  letter-spacing:-1px; position: relative; }
.navtab li:hover a{background:var(--cl_point); color:#fff; font-family:'SUIT', sans-serif; font-weight: 600; }
.navtab li.active a{background:var(--cl_point); color:#fff; border-bottom:none; font-family:'SUIT', sans-serif; font-weight: 600;  }
.navtab li.active a:after {display: none;}
.navselect{display:none;}
.navtab li.active + li a:after{display: none;}

/********************** 리스트 페이지 *************************/

.list_page {text-align: center; margin-top: 30px; }
.list_page .inner02 { margin: 0 auto; }
.list_page .inner02>a { margin: 0 20px; }
.list_page .inner02>a:nth-child(1) { background: url(../images/sub/arr_l_h.png) no-repeat center; display: inline-block; width: 20px; height: 60px; line-height: 60px; text-indent: -9999px;white-space: nowrap; overflow: hidden; }
.list_page .inner02>a:nth-child(3) {background: url(../images/sub/arr_r_h.png) no-repeat center; display: inline-block; width: 20px;  height: 60px; line-height: 60px; text-indent: -9999px;  white-space: nowrap;  overflow: hidden;  }
.list_page ul {display: inline-block; margin: 0; }
.list_page ul li a {color: #999; text-align: center;  display: inline-block; font-family: 'SUIT-Light', sans-serif; font-weight: 500; width: 60px; height: 60px;  line-height: 60px;}
.list_page ul li { float: left; margin: 0;  margin-bottom: 0; }
.list_page ul::after {clear: both; content: ''; display: block; }
.list_page ul li a.on {background: var(--cl_point); border-radius: 50%;color: #fff;  margin: 0 15px; font-family:'SUIT-Bold', sans-serif; }
#A_Wrap {width:100%; height: auto; overflow-x: hidden;}

/* inner */
.inner {width:1410px; margin:0 auto; position: relative;}
#sub_visual .inner {height: inherit;}


/* 회원정보수정 */
.online{width:100%;}
.write_form {width: 100%; margin-bottom: 85px; }
.write_form .row { min-height: 50px; border-bottom: 1px solid #d8d8d8; }
.write_form .password {/* display: none; */}
.write_form .password #w_name::placeholder {color: #999; font-size: 14px; font-weight: 200;}
.write_form .row:nth-child(1) { border-top: 1px solid #333; }
.write_form .row:after { display: block; clear: both; *zoom: 1; content: ''; }
.write_form .row.col-2 .col { float: left; width: 50%; }
.write_form .row.col-2 .col:after { display: block; clear: both; content: ''; }
.write_form .row .label {float: left; display: block; box-sizing: border-box; width: 180px; padding: 13px 20px; line-height: 42px; font-weight: 600; color: #333;  text-align: left; background: #fafafa;}
.write_form .row .label span{color:#333; font-weight:600;}
.write_form .row .input_box {float: left; box-sizing: border-box; width: 370px; padding:11px 20px; }
.write_form .name .input_box{width: 230px;}
.write_form .row .input_box input { box-sizing: border-box; width: 100%; height: 46px; padding: 0 20px; color: #8e8e8e; border: 1px solid #d8d8d8; border-radius: 12px;}
.write_form .row .input_box textarea { display: block; width: 100%; height: 234px; padding: 10px 20px; box-sizing: border-box; font-size: 1rem; color: #8e8e8e; border: 1px solid #d8d8d8; border-radius: 12px; }
.write_form .row .input_box input.readonly {background-color: #fafafa;}
.write_form .row.textarea_row .label {height: 260px;}
.write_form .emailrow .input_box{display:flex;}
.write_form .emailrow .input_box span{color:#999; line-height:42px; }
.write_form .phone .input_box {display: flex; }
.write_form .phone .input_box span{color:#999; line-height:42px; }
.emailrow select {width: 100%; background: url(../images/sub/sub_select.png) no-repeat 95% center; background-size: 12px; color: #8e8e8e; height: 46px; border: 1px solid #d8d8d8; padding-left:10px; border-radius:6px; margin-left: 10px;}
.emailrow select option{font-family: "Noto Sans KR";}
.emailrow input {float: left; width: 50%;}
.qnabut {margin: 0 auto;text-align: center;margin-top: 100px;}
.write_form .row .input_box.file input{width:400px;}
.write_form .row .filebox{position: relative;}
.write_form .row .filebox::after{display: block; content: ''; clear: both;}
.write_form .row .filebox input[type=file]{position:absolute;width:0;height:0;padding:0;overflow:hidden;border:0 }
.write_form .row .filebox label{display:inline-block;color:#fff ;background: #999;cursor:pointer;height: 46px; width: 100px; text-align: center;line-height: 46px;text-align:center;float:left; margin-left:10px; margin-top: 10px;   border-radius: 6px;}
.filebox .upload-name{display:inline-block;font-size:14px; width:calc(100% - 1162px);overflow:hidden; float:left; color: #8e8e8e; border: 1px solid #d8d8d8; border-radius: 6px; margin-left: 20px; text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 1; -webkit-box-orient: vertical;word-wrap:break-word; height: 46px; line-height: 46px; float:left; margin-top: 9px; padding: 0 10px;}
.write_form .row .filebox .reset{position: absolute;right: 0;top: 50%; transform: translateY(-50%);}
.write_form .title_box span {color: #8e8e8e; font-family: 'play'; font-size: 14px; display: inline-block; margin-top: 20px;}

.agree .agreeArea {overflow-y:scroll; height:180px; border:1px solid #d8d8d8; padding:20px; box-sizing:border-box; margin:20px 0; font-size:15px; color:#8e8e8e; font-family:'Noto Sans KR'; border-radius: 6px;}
.agree .agreeArea p {font-size: var(--fz_14); color: #999; line-height: 1.8;}
.agree .th{font-size:var(--fz_18); margin-bottom: 20px; font-weight: bold; margin-top: 40px;}
.agree .agreeBtn {float:right; font-size:14px;}
.agree .agreeBtn input[type="checkbox"] {margin-right:10px; width:24px; height:24px;}
.agree .agreeBtn input[type="checkbox"]+label{top:-6px; position:relative;}

.chk_box input{display:none}
.chk_box input+label{display:block;overflow:visible;cursor:pointer;width:auto; margin-bottom:0; text-align: right;}
.chk_box input+label > span{display:block;position:relative; display: inline-block;box-sizing:border-box;border:1px solid #ddd;margin-right:0;margin-top:0; }
.chk_box input+label > span:before{position:absolute;top:50%;transform:translateY(-50%);left:0;right:0;margin:0 auto;transition:all .1s ease-in-out;content:''; background: rgba(0,0,0,0.1); border-radius: 10px;}
.chk_box input:checked+label > span{border: 1px solid #a3c13f;}
.chk_box input[type=checkbox]+label > span{width:24px;height:24px;margin-top:0;vertical-align: middle;margin-right: 10px; border-radius: 24px; border: 1px solid #d8d8d8;    }
.chk_box input[type=checkbox]+label > span:before{width:10px;height:10px; }
.chk_box input:checked+label > span:before{visibility:visible;opacity:1; background: var(--cl_point); border-radius: 50%;}
.chk_box p{display: inline-block; font-size: var(--fz_16); color: #333; }
.listBtn02 {text-align:center;}
.listBtn02 a {display:inline-block; margin:0 5px; text-align:center; box-sizing:border-box; width:160px; height:60px; line-height:60px; font-size:var(--fz_20); color:#fff; background:var(--cl_point);  transition: ease 0.3s; border-radius: 12px;}


/* 결제내역 */
.reference .table_
.reference .table_type1{width:100%; border-top:2px solid#333; margin-bottom:60px;}
.reference .table_type1 > ul{display:table; width:100%;border-top:2px solid #333 }
.reference .table_type1 > ul > li{display:table-row; width:100%; box-sizing:border-box;}
.reference .table_type1 > ul > li > div {display:table-cell;}
.reference .table_type1 > ul > li.tbTh {background:#fafafa; }
.reference .table_type1 > ul > li.tbTh > div{padding:22px 0; border-bottom:1px solid #ddd; color:#333; vertical-align:middle; text-align:center; font-size:16px; font-weight:normal;  font-weight:600;}
.reference .table_type1 > ul > li.tbTd > div {text-align:center; padding:30px 5px; border-bottom:1px solid #ddd; vertical-align:middle; color: var(--fcl_6);}
.reference .table_type1 > ul > li.tbTd .td_tit {text-align:left;  text-align: center;}
.reference .table_type1 > ul > li.tbTd .td_tit a { color:#666; -webkit-transition-duration: 0.2s; -webkit-transition-timing-function: ease; transition-duration: 0.2s; transition-timing-function: ease; display:block; text-overflow:ellipsis; white-space:nowrap; overflow:hidden; text-align: center; cursor: default; }
.reference .table_type1 .td_day {width:120px;text-align:center; color:#666666;font-size:16px;  }
.reference .table_type1 .td_answer{width:120px;text-align:center; color:#666;font-size:16px;  }
.reference .table_type1 .td_view {width:120px;text-align:center;font-size:16px; color:#666;}
.reference .table_type1 .td_state {width:120px;text-align:center;font-size:16px; }
.reference .table_type1 .td_num {width:100px;text-align:center; font-size:16px; color:#666;}
.reference .table_type1 .td_state span {display:inline-block; width:62px; height:28px; line-height:28px; font-size:13px; font-weight:500; color:#fff; text-align:center; border-radius:3px;}
.reference .table_txt {margin-bottom: 10px;}
.reference .table_txt p span {color: var(--fcl_6);}
.reference .table_txt p b {color: var(--fcl_3); font-weight: 600;}

/* 이용내역 팝업 */



/* popup03 */
.popLayer {position: fixed; background: #0000003d; width: 100%; height: 100%; left: 0; top: 0; z-index: 123;}
#popLayer03 {display: none;}
.popLayer .popup {position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); background-color: #fff; min-width: 480px; min-height: 550px;}
.popLayer .popup .popTitle {background-color: var(--cl_point); padding: 15px; display: flex; align-items: center; justify-content: space-between;}
.popLayer .popup .popTitle p {color: #fff; font-size: var(--fz_18); font-weight: 600; font-family: var(--ft_Bold);}
.popLayer .popup .popTitle img {cursor: pointer;}
.popLayer .popup .popContent {padding: 35px 30px 20px; }
.popLayer .popup .popContent .subBox {text-align: center; padding-bottom: 35px; }
.popLayer .popup .popContent .subBox b{text-align: center; font-size: var((--fz_18)); font-weight: 600; font-family: var(--ft_Bold); display: block;}
.popLayer .popup .popContent .subBox p{text-align: center;}
.popLayer .popup .popContent .radioBox { display: flex; align-items: center;}
.popLayer .popup .popContent .radioBox .radiowrap { display: flex; align-items: center;  }
.popLayer .popup .popContent .radioBox .radiowrap p {color: var(--fcl_6);}
.popLayer .popup .popContent .radioBox input+label {display: flex; align-items: center;}

.radioBox input{display:none}
.radioBox input+label{display:block;overflow:visible;cursor:pointer;width:auto; margin-bottom:0; text-align: right; margin-right: 5px;}
.radioBox input+label > span{display:block;position:relative; display: inline-block;box-sizing:border-box;border:1px solid #ddd;margin-right:0;margin-top:0;  margin-left: 5px;}
.radioBox input+label > span:before{position:absolute;top:50%;transform:translateY(-50%);left:0;right:0;margin:0 auto;transition:all .1s ease-in-out;content:''; background: rgba(0,0,0,0.1); border-radius: 10px;}
.radioBox input:checked+label > span{border: 1px solid #a3c13f;}
.radioBox input[type=radio]+label > span{width:24px;height:24px;margin-top:0;vertical-align: middle;margin-right: 5px; border-radius: 24px; border: 1px solid #d8d8d8;    }
.radioBox input[type=radio]+label > span:before{width:10px;height:10px; }
.radioBox input:checked+label > span:before{visibility:visible;opacity:1; background: var(--cl_point); border-radius: 50%;}
.radioBox p{display: inline-block;  }

.popLayer .popup .popContent .listBox {padding: 15px 0;}
.popLayer .popup .popContent .listBox ul li {display: flex; justify-content: space-between; padding-bottom: 15px;}
.popLayer .popup .popContent .listBox ul li:last-of-type {border-top: 1px solid #ddd; padding-bottom: 15px; padding-top: 15px;}
.popLayer .popup .popContent .listBox ul li:first-of-type {border-top: 1px solid #ddd;padding-top: 15px;}
.popLayer .popup .popContent .listBox ul li p {color: #666;}
.popLayer .popup .popContent .listBox ul li:last-of-type p:last-of-type {font-size: var(--fz_24); color: var(--cl_point); font-weight: 600; font-family: var(--ft_Bold);}

.popLayer .popup .popContent .btnBox {display: flex; align-items: center; justify-content: center;}
.popLayer .popup .popContent .btnBox .btn {border-radius: 12px; height: 40px; line-height: 40px; width:auto; padding: 0 15px;}
.popLayer .popup .popContent .btnBox .btn {margin-top: 40px;}

/* popup 02 */
#popLayer02 {display: none;}
.popLayer02 .popup {min-height: auto;}
.popLayer02 .popup .popContent p {color: var(--fcl_6);}
.popLayer02 .popup .popContent .radioBox {justify-content: center;}
.popLayer02 .popup .popContent .radioBox .radiowrap {align-items: center;}
.popLayer02 .row .input_box.file input{width:400px;}
.popLayer02 .row .filebox{position: relative; margin-bottom: 0;}
.popLayer02 .row .filebox::after{display: block; content: ''; clear: both;}
.popLayer02 .row .filebox input[type=file]{position:absolute;width:0;height:0;padding:0;overflow:hidden;border:0 }
.popLayer02 .row .filebox label{display:inline-block;color:#fff ;background: #999;cursor:pointer;height: 46px; width: 100px; text-align: center;line-height: 46px;text-align:center;float:left; margin-left:10px; margin-top: 10px; border-radius: 12px; font-size: var(--fz_18);}
.filebox .upload-name{display:inline-block;font-size:14px; width:calc(100% - 132px);overflow:hidden; float:left; color: #8e8e8e; border: 1px solid #d8d8d8; border-radius: 12px; margin-left: 20px; text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 1; -webkit-box-orient: vertical;word-wrap:break-word; height: 46px; line-height: 46px; float:left; margin-top: 9px; padding: 0 10px;}
.popLayer02 .row .filebox .reset{position: absolute;right: 0;top: 50%; transform: translateY(-50%);}
.popLayer02 .row.rowBank {display: none;}
.popLayer02 .row.rowBank.active {display: block;}

/* popup01 */
#popLayer01 {display: none;}
.popLayer01 .popup {min-height: auto;}
.popLayer01 .popup .popContent .subBox {padding-top: 20px;}

#popLayer04 {display: none;}
.popLayer04 .popup {min-height: auto;}

#popLayer01.active {display: block;}
#popLayer02.active {display: block;}
#popLayer03.active {display: block;}
#popLayer04.active {display: block;}


.popLayer .filebox .upload-name {margin-left: 0; width: calc(100% - 110px);}
#popLayer02 .wrap  {display: flex; margin-bottom: 10px;}
#popLayer02 .wrap select {width:calc((100% - 10px) / 2); margin-right: 10px; line-height: 46px; height: 46px; padding: 0 10px; color: #666; border-radius: 12px; border: 1px solid #ddd; background: url(../images/sub/arr_d.png) no-repeat center right 10px;}
#popLayer02 .wrap input {width:calc((100% - 10px) / 2); margin-right:0px; line-height: 46px; height: 46px; padding: 0 10px; color: #666; border-radius: 12px;}
#popLayer02 .wrap02 input {width:100%; margin-right:0px; line-height: 46px; height: 46px; padding: 0 10px; color: #666; border-radius: 12px;}

/* 문의내역 서치 */
.tableWrap {display: flex; justify-content: space-between; align-items: end; position: relative;}
.table_search {margin-bottom: 10px; position: relative;}
.table_search input {padding: 15px; padding-right:40px; border-radius: 12px; width: 280px; color: #666;}
.table_search button {position: absolute; right: 15px; top:50%; transform: translateY(-50%); cursor: pointer;}

/* 문의내역 상세 */

.refView {width:100%; border-top:2px solid #333; margin-top:20px; }
.refView.answer {margin-top:60px ;}
.refView .titArea {min-height:130px; background:#fff;  position:relative; padding:30px 10px; box-sizing: border-box; border-bottom: 1px solid #ddd;}
.refView .titArea h5.tit {font-size:var(--fz_24); color:#333;  font-weight:600; text-align: left; font-family: 'SUIT',sans-serif;}
.refView .titArea h5.tit span{ background:#333; color:#fff; padding:5px 15px; border-radius: 30px; vertical-align: middle; margin-left:10px;}
.refView .titArea p {color:#999; display:inline-block;  text-align: center; width: 100%; padding-top: 10px;}
.refView .titArea p.date {display: flex; justify-content: space-between; }
.refView .titArea p span{ color:#999;  }
.refView.answer .titArea p.date {flex-direction:column; text-align: left;}
.refView.answer .titArea p.date span {display: flex;width: auto; margin-left: auto; margin-right: 0;}
.refView.answer .titArea p.date span:nth-of-type(1) {position: absolute; right: 0; top: 50%; transform: translateY(-50%);}
.refView.answer .titArea p.date span:nth-of-type(2) {margin-left: 0; margin-right: auto;}
.refView .titArea em{padding:10px 15px; float:right; margin-top: -35px; background: #65a147; border-radius:30px; color:#fff; border:1px solid #65a147;}
.refView .titArea em.end{color: #65a147; background:#fff; border:1px solid #65a147;}
.refView .txtArea {padding:40px 0px 60px; color:#999; font-size:17px; position:relative;}
.refView .txtArea p {font-size:15px; color:#999; line-height:1.7;}
.refView .txtArea .txt_img{width:100%; position:relative; margin-bottom:40px;}
.refView .txtArea img { width:100%; }
.refView.answer .titArea h5.tit {width: calc(100% - 100px);}

.refView .txtArea .article{
    position:absolute;
    border:1px solid #333;
    border-radius:30px;
    color:#333;
    padding:5px 15px;
    bottom:10px;
    right:10px;
    font-weight:500;
}

.reference_view .fileArea {border-top:1px solid #333 ; border-bottom:1px solid #ddd; margin-bottom:20px;}
.reference_view .fileArea span {display:inline-block; width:160px;padding:24px 0; text-align:left;font-size:16px; color:#333; background:#fafafa;   padding-left:15px;}
.reference_view .fileArea a {color:#333; padding-left:10px; ;}

.reference_view .listBtn {text-align:center; margin-top:60px; padding:0 0 100px;}
.reference_view .listBtn a {display:inline-block; margin:0 5px; text-align:center; box-sizing:border-box; width:160px; height:60px; line-height:60px; font-size:20px; color:#fff; background:#45b035;border-radius: 0 20px 0 20px  }
.reference_view .listBtn a.w_btn.ed {display:inline-block; margin:0 5px; text-align:center; box-sizing:border-box; width:200px; height:60px; line-height:60px; font-size:20px; color:#fff; background:#333; border-radius:30px;cursor:default;}
.reference_view .listBtn a.w_btn.ed:hover { color:#333; background:#fff; cursor:default;}
.reference_view .listBtn a:hover{color:#fff; background: #333;}
.reference_view .listBtn a.w_btn{display:inline-block; margin:0 5px; text-align:center; box-sizing:border-box; width:200px; height:60px; line-height:60px; font-size:20px; color:#fff; background:#333; border-radius:30px;}
.reference_view .listBtn .cancelBtn {background:#aaa;}


/* 전국 파트너 지점 */
.branch {}
.branch ul {display: flex; flex-wrap: wrap;}
.branch ul li {width: calc((100% - 60px) / 3); margin-right: 30px; margin-bottom: 90px; height: auto; position: relative;}
.branch ul li:nth-of-type(3n){margin-right: 0;}
.branch ul li a.thumb {position: relative; display: block; width: 100%; height: 0; padding-bottom: 64% !important; border-radius: 12px; overflow: hidden; }
.branch ul li a.thumb > img {display: block; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; object-fit: cover;}
.branch ul li a.thumb  .overlay {position: absolute; z-index: 1; left: 0; top: 0; display: flex; align-items: center; justify-content: center; flex-direction: column; background-color: #536a57be; width: 100%; height: 100%; display: none;}
.branch ul li a.thumb  .overlay .txt {color: #fff; font-size: var(--fz_14); margin-top: 10px;}
.branch ul li a.thumb + p {display: flex; justify-content: space-between; padding: 10px; align-items: center;}
.branch ul li a.thumb + p b {font-size: var(--fz_26); color: var(--fcl_6); font-weight: 600; font-family: var(--ff_Bold); display: inline-block; text-align: center;}
.branch ul li a.thumb + p span {font-size: var(--fz_18); text-align: center;}
.branch ul li a.thumb  .overlay.active {display: flex;}
.branch ul li:nth-last-child(1),.branch ul li:nth-last-child(2),.branch ul li:nth-last-child(3) {margin-bottom: 0;}


/* 지점소개 상세 */
.tabLine {display: flex;}
.tabLine + select {display: none;}
.tabLine li {width: calc(100% / 4); box-sizing: border-box; text-align: center; border-right: 1px solid #ddd; padding: 20px 0; background-color: #f8f9f8; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd;}
.tabLine li:first-of-type {border-left: 1px solid #ddd}
.tabLine li a {display: block; font-size: var(--fz_20);}
.tabLine li.on  {background-color: #fff; border-bottom: none; border-top: 2px solid var(--cl_point);}
.tabLine li.on a { font-weight: 600; font-family: var(--ff_Bold);}
.tabCnt {padding: 60px 0;}
.tabCnt .tabFirst {display: flex;}
.tabCnt .tabFirst > * {width: 50%;}
.tabCnt .tabFirst .swiper{overflow: hidden; position: relative; height: 100%;}
.tabCnt .tabFirst .swiper-slide
{ position: relative;  width: 100%; height: 0; padding-bottom: 62% !important; border-radius: 12px; overflow: hidden; }
.tabCnt .tabFirst .swiper img {display: block; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; object-fit: cover;}

/* swiper */
.swiper-container-horizontal>.swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction {bottom: 0 !important; background-color: #00000065; padding:15px 0; border-radius: 0 0 12px 12px;}
.swiper-pagination-bullet-active {background-color: #fff !important; width: 50px; border-radius: 12px;}
.swiper-pagination-bullet {background-color: transparent; border: 1px solid #fff; opacity: 1;}
.swiper-button-next, .swiper-button-prev {top: auto !important; bottom: 15px !important;}
.swiper-button-next, .swiper-button-prev {width: 10px !important; height:20px !important;color: #fff !important;}
.swiper-button-next:after, .swiper-button-prev:after {font-size: 20px !important;}


.swiperTxt {margin-left: 80px; margin-top: 20px;}
.swiperTxt h5 {font-size:  var(--fz_34); font-weight: 600; margin-bottom: 10px;}
.live  {display: flex; margin-bottom: 45px;}
.live > p {color: var(--cl_point); font-size: var(--fz_26); padding: 10px 20px; border-radius: 12px; border: 1px solid #ddd; background-color: #fafafa; width: 120px; text-align: center; font-weight: 600; font-family: var(--ff_Bold); margin-right: 40px;}
.live .wrap {display: flex; width: calc(100%  - 140px); align-items: center;}
.live .wrap p { display: flex; align-items: center; font-size: var(--fz_24); }
.live .wrap p b {font-size: inherit; font-weight: 600; font-family: var(--ff_Bold); margin-left: 5px; margin-right: 15px;}
.live .wrap p span {font-size: inherit; color: var(--fcl_6);}
.live .wrap p:first-of-type {margin-right: 40px;}
.txtList li {display: flex; align-items: self-start; font-size: var(--fz_24); margin-bottom: 30px;}
.txtList li  b {width: 140px; font-size: inherit; font-weight: 600;}
.txtList li  p {width: calc(100% - 140px); font-size: inherit; color: var(--fcl_6);}

.tabSecond {background-color: #fafafa; margin-top: 80px; padding:80px 0 120px}
.tabSecond .inner {display: flex;}
.tabSecond .inner .inTit {width: 210px;}
.tabSecond .inner .inTit p {font-size: var(--fz_34); font-weight: 600; font-family: var(--ff_Bold); position: relative; padding-top: 30px;}
.tabSecond .inner .inTit p:after {content: ''; position: absolute; width:63px ; height:3px ; background-color: var(--cl_point); left: 0; top: 0;}
.tabSecond .inner .inCnt {width: calc(100% - 210px);}
.tabSecond .inner .inCnt ul {display: flex; flex-wrap: wrap;}
.tabSecond .inner .inCnt ul li {width: calc((100% - 240px) / 5); margin-right: 60px; display: flex; flex-direction: column ; margin-bottom: 45px; }
.tabSecond .inner .inCnt ul li:nth-of-type(5n) {margin-right: 0px;}
.tabSecond .inner .inCnt ul li .box {background-color: #fff; padding: 40px; border-radius: 24px; text-align: center}
.tabSecond .inner .inCnt ul li .box p {font-size: var(--fz_22);}
.tabSecond .inner .inCnt ul li span {font-size: var(--fz_18); display: block;; color: var(--fcl_6); display:-webkit-box; overflow:hidden;   text-overflow:ellipsis; white-space: normal;  -webkit-line-clamp: 2; -webkit-box-orient: vertical; margin: 10px; line-height: 1.8;}

.btnBox.btnWrap {display: flex; justify-content: center; align-items: center; }
.btnBox a {display: block; font-size: var(--fz_20); width: 170px; text-align: center; height: 60px; line-height: 60px; padding: 0; margin-top: 80px; border-radius: 12px; }

/* 공간배치 */
.imgWrap {margin: 0 auto; text-align: center; border: 1px solid #ddd;  background-color: #fbfbfb; padding:40px 40px 0 40px; overflow: auto;}
.tableWrap table {margin: 0 20px;}
.tableWrap table:first-of-type {margin-left: 0; margin-bottom: -100px;}
.tableWrap table:last-of-type {margin-right: 0;}
.tableWrap table td {padding-bottom: 5px; padding-right: 5px;}
.tableWrap table td p {color: #fff; background-color: #93272c; border-radius: 6px; display: flex; align-items: center; justify-content: center; flex-direction: column;}
.tableWrap table td.XL p {min-width:114px; min-height: 50px;}
.tableWrap table td.XL2 p {min-width:57px; min-height: 100px;}
.tableWrap table td.R p {min-width:114px; min-height: 95px;}
.tableWrap table td.L p {min-width:57px; min-height: 76px;}
.tableWrap table td.M p {min-width:57px; min-height: 48px;}
.tableWrap table td.S p {min-width:57px; min-height: 24px;}
.tableWrap table td.S p span {display: block; font-size: inherit; color: inherit;}
.tabCnt .inner .btnBox01 a {margin: 0 auto;  margin-top: 80px ;}
td.disabled p{background-color:#888 !important;}

.location p,.door p {font-size: var(--fz_26); color: #93272c; font-weight: var(--fw_Bold); font-family: var(--ff_Bold);}
.door {background-color: #fff; border-radius: 59px 59px 0 0; box-shadow: 0 0 10px #ddd; width: 130px; height: 63px; display: flex; align-items: center; justify-content: center;}
.location  {width: 80px; margin-left: 46.5%; margin-right: auto; text-align: center; margin-top: 20px;}
.location img {width: 100%;}
.door {margin-left: 50%; margin-top: 100px;}


/* 20231017 롤테이너,사다리 추가 */
.btn_Box {position: absolute; right: 5%; bottom: 0; background-color: #fff; border-radius: 12px 12px 0 0; padding: 10px; border-top: 1px solid #93272c; border-right:1px solid #93272c; border-left: 1px solid #93272c;}
.btn_Box p {color: #93272c; font-weight: 500; font-family: var(--ff_Bold);}
.btn_Box p i {color: inherit;}


/* 사이즈정보 */
.tabCnt .size {display: flex; flex-wrap: wrap; height: auto; position: relative;}
.tabCnt .size li {width: calc((100% - 50px) / 2); margin-right: 50px; margin-bottom: 70px; display: flex; height: auto; position: relative; align-items: center;}
.tabCnt .size li:nth-of-type(2n) {margin-right: 0;}
.tabCnt .size li p:first-of-type {border: 1px solid #ddd; position: relative; width: 300px; height: 300px; border-radius: 6px; }
.tabCnt .size li p:first-of-type img { width: 100%; height: 100%;  object-fit: contain;}
.tabCnt .size li p:last-of-type {width: calc(100% - 300px); padding-left: 30px;}
.tabCnt .size li p:last-of-type b {font-size: var(--fz_32); display: block; font-weight: 600; font-family: var(--ff_Bold); margin-bottom: 50px;}
.tabCnt .size li p:last-of-type b span {font-size: var(--fz_32); color: var(--cl_point); font-weight: 600; font-family: var(--ff_Bold);}
.tabCnt .size li p:last-of-type em {display: block; font-size: var(--fz_22); font-weight: 600; font-family: var(--ff_Bold); margin-bottom: 10px;}
.tabCnt .size li p:last-of-type em + span {font-size: var(--fz_22); display: block;}


/* 이용하기(결제) */
.payWrap .chooseLine {display: flex; border-bottom: 1px solid #ddd; }
.payWrap .chooseLine li {width: calc((100% - 90px) / 4); margin-right: 30px; margin-bottom: 60px;}
.payWrap .chooseLine li> p {font-size: var(--fz_24); font-weight: 600; font-family: var(--ff_Bold); padding-bottom: 10px;}
.payWrap .chooseLine li input,.payWrap .chooseLine li select {border: 1px solid #ddd; border-radius:12px; padding: 15px 7px; width: 100%; font-size: var(--fz_18); color: var(--fcl_6);}
.payWrap .chooseLine li select {background: #fff url(../images/sub/arr_d.png) no-repeat center right 15px; -o-appearance: none; -webkit-appearance: none;  -moz-appearance: none; appearance: none;}
.payWrap .chooseLine li:last-of-type {margin-right: 0;}
.cntWrap {margin-top: 60px; }
.cntWrap.cntWrap02 {margin-top: 0;}
.cntWrap .ulWrap {background-color: #fafafa; border-radius: 24px; padding: 40px;}
.cntWrap .ulWrap:first-of-type {margin-bottom: 30px;}
.cntWrap .ulWrap:last-of-type {margin-bottom: 60px;}
.cntWrap .ulWrap > p {font-size:var(--fz_24) ; font-weight: 600; font-family: var(--ff_Bold); margin-bottom: 10px;}
.cntWrap .ulWrap > p + ul {display: flex; flex-wrap: wrap;}
.cntWrap .ulWrap > p + ul li {width: calc((100% - 70px) / 2); margin-right: 70px; background-color: #f0f0f0; display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; border-radius: 12px; border: 1px solid #ddd; padding: 15px;}
.cntWrap .ulWrap > p + ul li:nth-of-type(2n) {margin-right: 0;}
.cntWrap .ulWrap > p + ul li p {font-size: var(--fz_18);}
.cntWrap .ulWrap > p + ul li p:first-of-type {font-size: var(--fz_18); font-weight: 600; font-family: var(--ff_Bold);}
.cntWrap .totalWrap {margin-top: 60px; border-top: 1px solid #dddd;}
.cntWrap .totalWrap p {margin-top: 30px; padding: 45px; display: flex; width: 100%; border-radius: 50px; color: #fff; text-align: center; justify-content: center; align-items: center; margin-left: 0; }
.cntWrap .totalWrap p > * {color: #fff; font-weight: 600; font-family: var(--ff_Bold);}
.cntWrap .totalWrap p > span {font-size: var(--fz_24); font-weight: 600; font-family: var(--ff_Bold); padding-right: 35px;}
.cntWrap .totalWrap p > b {font-size: var(--fz_40); font-weight: 600; font-family: var(--ff_Bold);}
.cntWrap .totalWrap > span { text-align: center; display: block; margin-top: 25px; font-size: var(--fz_18); color: #99a89b; line-height: 1.8;}
.cntWrap .ulWrap > p + ul li  {align-items: start; justify-content: space-between;}
.cntWrap .ulWrap > p + ul li p:first-of-type {width: 80px;}
.cntWrap .ulWrap > p + ul li p:last-of-type {width: calc(100% - 80px); text-align: right;}
.cntWrap .ulWrap > p + ul li p:last-of-type span {font-size: inherit; color: var(--cl_point);}


input[type="date"]::-webkit-calendar-picker-indicator,
input[type="date"]::-webkit-inner-spin-button {
    display: none;
    appearance: none;
}

input[type="date"]::-webkit-calendar-picker-indicator {
    opacity: 1;
    display: block;
    background: url('../images/sub/calandar.png') no-repeat center ;
    width: 25px;
    height: 22px;
}

/* 고객문의 */
.agree .agreeArea {overflow-y:scroll; height:180px; border:1px solid #d8d8d8; padding:20px; box-sizing:border-box; margin:20px 0;  color:#8e8e8e; font-family:'Noto Sans KR'; border-radius: 6px;}
.agree .agreeArea p {font-size: 16px; color: #999;}
.agree .th{font-size:18px; margin-bottom: 20px; font-weight: bold;}
.agree .agreeBtn {float:right;}
.agree .agreeBtn input[type="checkbox"] {margin-right:10px; width:24px; height:24px;}
.agree .agreeBtn input[type="checkbox"]+label{top:-6px; position:relative;}

.inquiry .write_form .row .input_box select {background: #fff url(../images/sub/arr_d.png) no-repeat center right 15px; -o-appearance: none; -webkit-appearance: none;  -moz-appearance: none; appearance: none; width: 100%; border: 1px solid #ddd; border-radius: 12px;  height: 46px;
    padding: 0 20px; color: var(--fcl_6);
}
.inquiry .write_form .row.textarea_row .input_box {width: calc(100% - 180px);}
.inquiry .write_form .row .filebox {display: flex; padding: 11px 20px;}
.inquiry .write_form .row .filebox label {margin-top: 0; margin-left: 0;}
.inquiry .filebox .upload-name {width: 230px;}
.inquiry .write_form .row.agree {border-bottom: none;}
.inquiry .filebox .upload-name {margin-top: 0; margin-left: 10px;}

.inquiry .write_form .row .filebox span {padding-left: 10px;  line-height: 44px;}

/* 자주묻는질문 */

.qna {border-top: 3px solid #333;  }
.qna li {   }
.qna li.nodata {padding:30px 0; text-align: center; border-bottom: 1px solid #333; color: #999; font-weight: normal;}
.qna_result {background-color: #fafafa; display: none;  padding: 25px 20px; border-bottom: 1px solid #ddd;  }
.qna_tit {  padding: 25px 20px; font-weight:500; font-family: var(--ff_Medium); position: relative; min-height: 70px ; border-bottom: 1px solid #ddd; padding-right: 70px; cursor: pointer;}
.qna_tit:after {content: ''; position: absolute; top: 50%; right:40px; background: url(../images/sub/arr_d.png) no-repeat center; width:16px; height: 9px;}
.qna_tit.active:after { transform: rotate(180deg);}

/* 견적요청 */
.radioform {width: calc(100% - 180px ) !important; display: flex; align-items: center; line-height: 42px;}
.radioform .radiowrap {display: flex; align-items: center;}
.radioform input {width: 80px !important;}
.radioform  .radioBox input+label {min-width: 200px; margin-right: 0; text-align: left;}
.radioform  .mar {margin: 0 10px;}
.chkform {width: calc(100% - 180px) !important; display: flex; align-items: center; line-height: 42px;}
.chkform .checkWrap {display: flex; align-items: center;}
.chkform .checkWrap input[type=checkbox] +label >  span {border-radius: 0; position: relative;}
.chkform .checkWrap input[type=checkbox] +label >  span:before {background: #fff;}
.chkform .checkWrap input[type=checkbox]:checked +label > span:before {background: url(../images/sub/checkbox.png) no-repeat center; position: absolute; width: 23px; height: 22px; transform: translateY(-70%);}
.chkform .checkWrap input[type=checkbox]:checked +label > span {border: 1px solid var(--cl_point);}
.chkform .chk_box input+label {display: flex; align-items: center; margin-right: 50px;}
.txtBox br {display: none;}


/* 창고 */
.write_form .row .txtBox {display: none;}
.write_form .row .txtBox.active {display: block;}

/* 로그인 */
.login .inner {display: flex; flex-direction: column; align-items: center; justify-content: center;}
.login .loginArea {margin-top: 50px;  background-color: #fafafa; padding: 60px; border-radius: 12px;}
.login .loginArea .loginWrap {display: flex; flex-direction: column; border-radius: 24px; min-width: 700px; align-items: center; width: 100%;}
.login .loginArea .loginWrap input {max-width: 480px; width: 100%; padding:20px; border: 1px solid #ddd; border-radius: 12px; margin-bottom: 10px; font-size: var(--fz_18); color: #999;}
.login .loginArea .loginWrap input::placeholder {color: #999; font-size: var(--fz_18);}
.login .loginArea .loginBtn {margin-top: 10px; width: 100%; max-width: 480px; padding: 20px; border-radius: 12px; margin-left: 0; font-size: var(--fz_20); text-align: center;}
.login .loginArea .findArea {width: 100%; max-width: 480px; margin: 0 auto; margin-top: 10px; display: flex; justify-content: space-between;}
.chk_login {width: 100%; max-width: 480px; margin: 0 auto; margin-top: 10px; }
.chk_login.chk_box input[type=checkbox]+label > span {border-radius: 0; background: #fff;}
.chk_login.chk_box input[type=checkbox]+label > span:before {background: #fff;}
.chk_login.chk_box input[type=checkbox]:checked + label > span:before {background: var(--cl_point); border-radius: 0;}
.chk_login.chk_box p {font-size: var(--fz_14);}
.login .loginArea .findArea .left a {display: inline-block; color: var(--fcl_6);}
.login .loginArea .findArea .left a:last-of-type {margin-left: 10px;padding-left: 10px; position: relative;}
.login .loginArea .findArea .left a:last-of-type:after {content: ''; width: 1px; height: 80%; position: absolute; left: 0; top: 50%; transform: translateY(-50%); background-color: #666;}
.login .loginArea .findArea .left a:last-of-type.afternone {margin-left: 0; padding-left: 0;}
.login .loginArea .findArea .left a:last-of-type.afternone:after {display: none;}


.loginArea .result {font-size: var(--fz_34); font-weight: 600; color: var(--cl_point); font-family: var(--ff_Bold);margin-top: 25px; text-align: center;}
.loginArea .resultView {font-size: var(--fz_30); font-weight: 600; color:#333; font-family: var(--ff_Bold);margin-top: 35px;}
.loginArea .btnBox {display: flex; width: 380px; justify-content: space-between; margin: 0 auto;}
.loginArea .btnBox a {margin-top: 40px;}
.loginArea .resultView.fz16 {font-size: var(--fz_16); text-align: center; line-height: 1.8;}
.loginArea .btnBox.btnfull  {width: 480px;}
.loginArea .btnBox.btnfull a {width: 100%;}

/* 회원가입 */
.infoTit {font-size: var(--fz_18); font-weight: 600; font-family: var(--ff_Bold); margin-bottom: 20px;}
.write_form .row.dflx .input_box + .confirm {display: flex; align-items: center; margin: 11px 0; line-height: 46px; background-color: #999; color: #fff; font-size: var(--fz_18); width: 128px; text-align: center; float: left; border-radius: 12px; justify-content: center;  cursor: pointer;}
.write_form .row.dflx .input_box {padding-right: 10px;}
.agreeAll {margin-top: 40px; padding-top: 20px; border-top: 1px solid #ddd;}


/* 팝업 버튼 */
.btnBox.btnBoxmt a {margin-top: 40px; width: 62px; height: 40px; line-height: 40px;}


/* swiper custom */
.swiper-button-next, .swiper-container-rtl .swiper-button-prev {right: 38%;}
.swiper-button-prev, .swiper-container-rtl .swiper-button-next {left: 38%;}

/* 회사소개 20230927*/
.company {}
.company .section {padding-top: 100px; padding-bottom: 100px;}
.company .section01 {padding-top: 0;}
.company .section01 .inner {position: relative;}
.company .section01 .inner .txtBox {position: absolute; right: 0; padding:65px 80px; background-color: #fff; top: 50%; transform: translateY(-50%); box-sizing: border-box; max-width: 590px;}
.company .section01 .inner .txtBox b {font-size: var(--fz_34); font-weight: var(--fw_Bold); font-family: var(--ff_Bold); margin-bottom: 20px; display: block;}
.company .section01 .inner .txtBox h2 {font-size: var(--fz_52); font-weight: var(--fw_Bold); font-family: var(--ff_Bold); margin-bottom: 35px;}
.company .section01 .inner .txtBox p {font-size: var(--fz_20); color: #666; line-height: 1.5;}
.company .section01 .inner .txtBox p br {display: block; }

.company .section02 {background: url(../images/sub/companyBack.png) no-repeat center; background-size: cover;}
.company .section .sectionTit {font-weight: var(--fw_Bold); font-family: var(--ff_Bold);}
.company .section .sectionTit b {font-size: var(--fz_34); margin-bottom: 20px; display: block; font-weight: inherit; font-family: inherit;}
.company .section .sectionTit h2 {font-size: var(--fz_52);margin-bottom: 35px;font-weight: inherit; font-family: inherit;}

.company .section02 ul {display: flex; width: 100%; background: url(../images/sub/longArr.png) no-repeat center; min-height: 400px; background-size: contain;}
.company .section02 ul li {width: calc((92% / 4)); text-align: center; position: relative;  display: flex; justify-content: center; align-items: center; flex-direction: column; height: inherit;}
.company .section02 ul li p { color: #fff; position: relative; height: inherit; height: 290px;
    display: flex; flex-direction: column;align-items: center; justify-content: center; width: 290px; background: url(../images/sub/c_bg02.png) no-repeat center; background-size: contain;}
.company .section02 ul li:nth-of-type(even) p {background: url(../images/sub/c_bg01.png) no-repeat center;}
.company .section02 ul li p * {color: inherit;}
.company .section02 ul li p b {font-size: var(--fz_32); display: block; margin-bottom: 10px; font-weight: var(--fw_Bold); font-family: var(--ff_Bold);}
.company .section02 ul li p span {font-size: var(--fz_18); display: block; line-height: 1.8;}
.company .section02 ul li p span strong {font-size: inherit; font-weight: var(--fw_Bold); font-family: var(--ff_Bold);}
.company .section02 ul li > strong {position: absolute; bottom: 0; font-size: var(--fz_32); font-weight: var(--fw_Bold); font-family: var(--ff_Bold);}
.company .section02 ul li p:after {content: ''; width: 6px; height: 6px; border-radius: 50%; border: 4px solid #fff; position: absolute; background: #578782; bottom: 0; left: 50%; transform: translate(-50%,6px);}
.company .section02 ul li:nth-of-type(even) p:after {background: #7fa886;}

.company .section03 .sectionCnt {text-align: center;}
.company .section03 .sectionCnt p {font-size: var(--fz_20);}
.company .section03 .sectionCnt p b {display: block; font-size: inherit; font-weight: var(--fw_Bold); font-family: var(--ff_Bold);}

/* 개인정보, 약관 23.10.11 */

.privacyBox b {display: block; font-weight: 600; margin-bottom: 10px; color: inherit;}
.privacyBox p span {display: block; margin-left: 10px; text-indent: 10px; color: inherit;}
.privacyBox table{border-collapse: collapse; width: 100%; margin: 10px 0 25px; box-sizing: border-box;}
.privacyBox table th {background-color: #fafafa;}
.privacyBox table th,.privacyBox table td {border: 1px solid #666; padding:  5px; box-sizing: border-box; word-break: initial;}

/* 모바일 하단 스티키 메뉴 24.03.21 */
#mobile-bottom {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 60px;
    z-index: 11;
}
/* modal용 작은 버튼 */
.btn-modal {
    display: grid;
    min-height: 36px;
    padding: 8px;
    border-radius: 6px;
    background-color: var(--cl_point);
    color: #fff;
    width: max-content;
    position: absolute;
    right: 0;
    translate: 0 -125%;
    font-size: 18px;
}
/* modal */
body:has(.modal[open]) {
    overflow-y: hidden;
}
.modal {
    max-width: min(100%, 1410px);
    width: max-content;
    max-height: 100vh;
    overflow: auto;
    position: fixed;
    left: 50%;
    top: 50%;
    translate: -50% -50%;
    border: 0;
}
.modal .title {
    display: flex;
    align-items: center;
    height: 60px;
    border-bottom: 1px solid #ddd;
    padding: 0 16px;;
}
.modal:has(.imgWrap) .title {
    border-bottom: 0;
}
.modal .title .close {
    margin-left: auto;
    width: 32px;
    aspect-ratio: 1/1;
    display: block;
    background-image: url("data:image/svg+xml,%3Csvg width='200px' height='200px' viewBox='0 0 64 64' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23000000'%3E%3Cg id='SVGRepo_bgCarrier' stroke-width='0'%3E%3C/g%3E%3Cg id='SVGRepo_tracerCarrier' stroke-linecap='round' stroke-linejoin='round'%3E%3C/g%3E%3Cg id='SVGRepo_iconCarrier'%3E%3Cline x1='16' y1='16' x2='48' y2='48'%3E%3C/line%3E%3Cline x1='48' y1='16' x2='16' y2='48'%3E%3C/line%3E%3C/g%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
}
.modal:not(:has(.imgWrap)) .content {
    padding: 16px;
}
.modal .content {
    overflow: auto;
    max-height: calc(100vh - 60px);
}
/* responsive start */
@media screen and (max-width:1440px) {
    .inner {width: 95%;}
    #sub_contents .inner {width:95%;}
    .navtab .inner {max-width: 100%;}

    #sub_visual .visual_tit {transform: translateY(0%);}
    #sub_visual .visual_tit h2 {font-size: calc(var(--fz_96) * 0.8);}
    #sub_visual .sublogo .logo1 {margin-right: 0%;}
    #sub_visual .sublogo .logo2 {margin-right: 0%;}
    #sub_visual .sublogo {width: 40%; left:auto; right:2%; top: 70%;}
    #sub_visual .sublogo .logo1 img {width: 100%;}
    #sub_visual .sublogo .logo2 img {width: 82%;}

    /* 지점 상세 */
    .tabSecond .inner .inCnt ul li .box img {height: 60px;}
    .tabSecond .inner .inCnt ul li {margin-right: 30px; margin-bottom: 25px;  width: calc((100% - 120px) / 5)}
    .root_daum_roughmap .wrap_map { height: calc(100vw * 0.4) !important;}

    /* 이용하기(결제) */
    .payWrap .chooseLine {flex-wrap: wrap;}
    .payWrap .chooseLine li {width:calc((100% - 60px) / 2); margin-right: 60px;}
    .payWrap .chooseLine li:nth-of-type(2n) {margin-right: 0;}

    .company .section03 .sectionCnt img {width: 100%;}
}

@media screen and (max-width:1280px) {
    .reference .table_type1 > ul > li.tbTd > div {text-overflow: ellipsis; overflow: hidden; white-space: nowrap;}
    .reference .table_type1 .td_num {width: 70px; }
    .reference .table_type1 > ul > li.tbTd > div:nth-of-type(2) {width:100px; }

    /* 지점소개 */
    .branch ul li a.thumb + p {flex-direction: column;}
    .swiperTxt h5 {font-size: calc(var(--fz_34) * 0.8);}
    .live > p {font-size: calc(var(--fz_26) * 0.8); width: 90px;}
    .live .wrap p{font-size: calc(var(--fz_24) * 0.8);}
    .txtList li {font-size: calc(var(--fz_24) * 0.8);}
    .live .wrap {width: calc(100% - 90px);}
    .live .wrap p b {margin-right: 5px;}

    .swiperTxt {margin-left: 50px; margin-top: 0px;}
    .live {margin-bottom: 25px;}
    .txtList li {margin-bottom: 15px;}

    /* 지점상세 */
    .tabSecond .inner .inCnt ul li {width: calc((100% - 40px) / 3); margin-right: 20px;}
    .tabSecond .inner .inCnt ul li:nth-of-type(5n) {margin-right: 20px;}
    .tabSecond .inner .inCnt ul li:nth-of-type(3n) {margin-right: 0px;}

    /* 사이즈정보 */
    .tabCnt .size li p:first-of-type {width: 200px; height: 200px;}
    .tabCnt .size li p:last-of-type {width: calc(100% - 200px); padding-left: 20px;}
    .tabCnt .size li p:last-of-type b {margin-bottom: 25px;}

    /* 견적 */
    .radioform {flex-direction: column; align-items: start;}
    .write_form .row .label02 {height: 109px;}
    .radioform .radioBox input+label {min-width: 160px;}
    .chkform .chk_box input+label {margin-right: 10px;}
    .radioform input {width: 50px !important;}

    /* swiper custon */
    .swiper-button-next, .swiper-container-rtl .swiper-button-prev {right: 32%;}
    .swiper-button-prev, .swiper-container-rtl .swiper-button-next {left: 32%;}

    /* 회사소개 */
    .company .section01 .imgBox {width: 100%;}
    .company .section01 .imgBox img {width: 100%;}
    .company .section01 .inner .txtBox {max-width: 60%;}
    .company .section02 ul {flex-wrap: wrap;}
    .company .section02 ul li {width: calc(100% / 2);margin-bottom: 20px;  margin-top: 20px;padding-bottom: 50px; }
}

@media screen and (max-width:1024px) {
    .table_type2  {overflow-y:scroll;}
    .reference .table_type2 > ul {width: 1100px;}
    .branch ul li {width: calc((100% - 15px) / 2); margin-right: 15px; margin-bottom: 45px;}
    .branch ul li:nth-of-type(3n) {margin-right: 15px;}
    .branch ul li:nth-of-type(2n) {margin-right: 0;}

    .tabSecond .inner {flex-direction: column;}
    .tabSecond .inner .inTit {width: 100%;margin-bottom: 20px;}
    .tabSecond .inner .inCnt {width: 100%;}

    /* 공간배치 */
    .tabCnt .imgWrap img {width: 100%;}

    /* 이용하기(결제) */
    .cntWrap .ulWrap > p + ul li {width: calc((100% - 30px) / 2); margin-right: 30px;}
    .payWrap .chooseLine li {width: calc((100% - 30px) / 2); margin-right: 30px;}

    .inquiry .write_form .row .filebox span {left: 0; position: absolute; top: 55px;}
    .write_form .row .label {line-height: 72px;}

    .company .section01 .inner .txtBox {position: static; max-width: 100%; margin-left:auto; transform: translateY(0); padding: 45px 40px;}
    .company .section01 .inner .txtBox p br.break {display: none;}

    /* 창고배치 */
    /* .imgWrap {overflow-x: scroll; width: 100%;}
    .imgWrap .tableWrap {min-width:1000px;} */
}

@media screen and (max-width:867px) {
    .tabCnt .tabFirst {flex-direction: column;}
    .tabCnt .tabFirst > * {width: 100%;}
    .swiperTxt {margin-top: 50px; margin-left: 0;}

    /* 사이즈 정보 */
    .tabCnt .size li {width: 100%; margin-right: 0;}

    /* 이용하기(결제) */
    .cntWrap .ulWrap > p + ul li {width: 100%; margin-right: 0px;}
    .payWrap .chooseLine li {width: 100%; margin-right: 0px;}
    .cntWrap .totalWrap p {padding: 30px; margin-left: 0;}

    /* 로그인 */
    .login .loginArea {width: 100%;}
    .login .loginArea .loginWrap {min-width: auto;}

    /* swiper custon */
    .swiper-button-next, .swiper-container-rtl .swiper-button-prev {right: 38%;}
    .swiper-button-prev, .swiper-container-rtl .swiper-button-next {left: 38%;}
}


@media screen and (max-width:768px) {
    .moduleCall {padding:60px 0 60px;}
    .navselect {display: block;}
    .navselect select {display: block;position: relative;z-index: 2;width: 100%; margin: 0 auto; background: #fff url(../images/sub/arr_d.png) no-repeat 96% center; color: #333; margin-top: 30px;        border: 1px solid #ddd; padding: 0 35px 0 20px; height: 50px; font-size: 18px; }

    .navselect select option { font-size: var(--fz_14); padding: 10px; }

    #sub_visual{height: 280px;}
    .navtab {display: none;}

    #sub_visual .visual_tit h2 {font-size: calc(var(--fz_96) * 0.6);}

    /****************** list page **************/

    .list_page ul li a {width: 40px; height: 40px;line-height: 40px;}
    .list_page .inner02>a:nth-child(1) { height: 40px;line-height: 40px;}
    .list_page .inner02>a:nth-child(3) {height: 40px;line-height: 40px;}

    /* 회원정보수정 */
    .write_form .row .label {width: 140px;}
    .write_form {margin-bottom: 42px;}

    /* 결제내역 */
    .reference .table_type1 > ul > li.tbTd .td_tit a{width:200px; margin: auto; }

    /* 지점 상세 */
    .live {flex-direction: column;}
    .live .wrap {margin-top: 15px;}

    /* 고객문의 */
    .inquiry .write_form .row.textarea_row .input_box {width: calc(100% - 140px);}
    .radioform {width: calc(100% - 140px) !important;}
    .chkform {width: calc(100% - 140px) !important;}
}

@media screen and (max-width:640px) {
    /* 회원정보수정 */
    .write_form .name .input_box {width: calc(100% - 140px)}
    .write_form .row .input_box {width: calc(100% - 140px);}

    /* 결제내역 */
    .reference .table_type1 .td_num {width: 40px; }
    .reference .table_type1 > ul > li.tbTd > div:nth-of-type(2) {width:70px; }
    .reference .table_type1 > ul > li.tbTd .td_tit a{width:220px; margin: auto; }
    .reference .table_type1 {overflow-x: scroll;}
    .reference .table_type1 > ul  {width:640px}

    /* 이용내역 팝업 */
    .popLayer .popup {min-width: auto; width: 95%; min-height: auto; max-height: 50vh; overflow-y: scroll; }

    /* 지점상세 */
    .tabSecond .inner .inCnt ul {width: 100%;}
    .tabSecond .inner .inCnt ul li {width: calc((100% - 20px) / 2);}
    .tabSecond .inner .inCnt ul li:nth-of-type(3n) {margin-right: 20px;}
    .tabSecond .inner .inCnt ul li:nth-of-type(2n) {margin-right: 0;}

    .tabLine  + select {display: block; margin:10px auto; padding: 20px; width: 100%; border-radius: 12px; border: 1px solid #ddd; font-size: var(--fz_18); color: var(--fcl_6); background: #fff url(../images/sub/arr_d.png) no-repeat center right 20px;}
    .tabLine  {display: none;}

    /* 고객문의 */
    .inquiry .filebox .upload-name {width: calc(100% - 110px);}

    .txtBox br {display:block;}
    .chkform .checkWrap {flex-direction: column; align-items: start;}
    .write_form .row .label.chklabel {height: 147px;;}
    .write_form .row .label02 {height: 152px;}

    /* 로그인 */
    .loginArea .btnBox {width: 100%;}
    .loginArea .btnBox.btnfull {width: 100%;}
    .write_form .row.dflx .input_box {width: calc(100% - 280px);}

    /* swiper custon */
    .swiper-button-next, .swiper-container-rtl .swiper-button-prev {right: 28%;}
    .swiper-button-prev, .swiper-container-rtl .swiper-button-next {left: 28%;}

    /* 문의내역 서치 */
    .tableWrap  {flex-direction: column; align-items: start;}
    .tableWrap .table_search {margin-left: auto; margin-right: 0; order:1;}
    .tableWrap .table_txt {order: 2;}

    .company .section02 ul {flex-direction: column;;background: none; position: relative; margin-bottom: 48px;}
    .company .section02 ul:before {content: ''; background: #578782; position: absolute; background-size: contain;   opacity: 0.2 ; width: 48px; height: 100%; left:50%; transform: translateX(-50%);}
    .company .section02 ul:after {content: ''; background: url(../images/sub/arr_long.png); width: 88px; height: 48px; position: absolute; left: 50%; transform: translateX(-50%); bottom: -48px;}
    .company .section02 ul li {width:100%;}

    .company .section01 .inner .txtBox b,.company .section .sectionTit b {font-size: calc((var(--fz_34) * 0.8));}
    .company .section01 .inner .txtBox h2 ,.company .section .sectionTit h2{font-size: calc((var(--fz_52) * 0.8));}

    .imgWrap .tableWrap {flex-direction: row;}

}

@media screen and (max-width:480px) {
    #sub_visual .visual_tit h2 {font-size: calc(var(--fz_96) * 0.4); text-align: center;}
    #sub_visual .sublogo {top: auto; bottom: 5%; transform: translateY(0);}

    /****************** list page **************/
    .list_page ul li a {font-size: 14px; width:35px; height:35px; line-height: 35px; margin:0;}
    .list_page .inner02>a {margin: 0;}
    .list_page .inner02>a:nth-child(1) {height:35px; line-height: 35px;}
    .list_page .inner02>a:nth-child(3) {height:35px; line-height: 35px;}
    .list_page ul li a.on {margin:0 5px;}
    .list_page {padding-bottom:40px;}

    /* 회원정보 수정 */
    .write_form .name .input_box {width:100%;}
    .write_form .row .input_box {width: 100%;}
    .write_form .row .label {width: 100%;}

    /* 결제내역 */
    .reference .table_type1 > ul > li.tbTd > div:nth-of-type(2) {width: auto;}

    /* 이용내역 팝업 */
    .popLayer .popup .popContent .radioBox {flex-direction: column;}
    .radioBox p {margin-bottom: 10px;}
    .radioBox .radiowrap {flex-wrap: wrap; justify-content: start;}
    .radioBox input+label {width: calc((100% - 10px) / 2); text-align: left;}
    .popLayer .popup .popContent .listBox ul li p:first-of-type {width: 150px;}
    .popLayer .popup .popContent .listBox ul li p:last-of-type {width: calc(100% - 150px); text-align: right; word-break: keep-all;}

    .popLayer02 .radioBox input+label {width: 100%;}
    .filebox .upload-name {margin-left: 0;}

    /* 이용내역 상세 */
    .reference_view .fileArea {display: flex; align-items: center;}
    .reference_view .fileArea span {width: 120px;}
    .reference_view .fileArea a {width: calc(100% - 140px); text-overflow: ellipsis; white-space: nowrap; overflow: hidden; display: inline-block; }
    .refView.answer .titArea p.date span:nth-of-type(1) {position: static; transform: translateY(0);}
    .refView.answer .titArea h5.tit {width: 100%;}


    /* 지점소개 */
    .sub_tit h3.int_tit {font-size: calc(var(--fz_46) * 0.7);}
    .branch ul li {width: 100%; margin-right: 0;}
    .branch ul li:nth-of-type(3n) {width: 100%; margin-right: 0;}

    /* 지점상세 */
    .tabSecond .inner .inCnt ul li .box {padding: 25px;}
    .tabSecond .inner .inCnt ul li .box img {height: 40px;}
    .btnBox.btnWrap a {width: 140px; height: 50px; line-height: 50px;}

    .tabSecond {padding: 40px 0 60px; margin-top: 40px;}
    .live .wrap {width: 100%;}

    /* 공간배치 */
    .tabCnt .inner .btnBox01 a {width: 140px; height: 50px; line-height: 50px;}
    .tableWrap table td p {font-size: var(--fz_12);}
    .tableWrap table td.XL p {min-width:94px; min-height: 30px;}
    .tableWrap table td.XL2 p {min-width:37px; min-height: 80px;}
    .tableWrap table td.R p {min-width:94px; min-height: 75px;}
    .tableWrap table td.L p {min-width:37px; min-height: 56px;}
    .tableWrap table td.M p {min-width:37px; min-height: 28px;}
    .tableWrap table td.S p {min-width:37px; min-height: 4px;}

    /* 사이즈정보 */
    .tabCnt .size li {flex-direction: column;}
    .tabCnt .size li p:first-of-type {width: 100%; height: 100vw;}
    .tabCnt .size li p:last-of-type {width: 100%; margin-top: 30px; margin-left: 0;}

    /* 이용하기(결제) */
    .payWrap .chooseLine li select {overflow: hidden !important; text-overflow: ellipsis; white-space: nowrap; padding-right: 40px;}
    .cntWrap .ulWrap {padding: 30px 20px;}
    .cntWrap .ulWrap > p + ul li {flex-direction: column;}
    .cntWrap .ulWrap > p + ul li p:last-of-type {width: 100%; text-align: left; margin-top: 5px;}
    .cntWrap .totalWrap p {flex-direction: column; align-items: center; text-align: center; justify-content: center;}
    .cntWrap .totalWrap p > span {padding-right: 0;}

    /* 고객문의 */
    .write_form .row.textarea_row .label {height: auto;}
    .inquiry .write_form .row.textarea_row .input_box {width: 100%;}
    .write_form .row .label {line-height: 42px;}
    .inquiry .write_form .row .filebox span {top:60px;}
    .agree .th {margin-top: 60px;}


    /* 견적 */
    .write_form .row .label02 {height: auto;}
    .write_form .row .label.chklabel {height: auto;}

    /*로그인 */
    .login .loginArea {padding:40px 20px}
    .logoArea {width: 60%;}
    .logoArea img {width: 100%;}

    /* 회원가입 */
    .write_form .row.dflx .input_box {width: calc(100% - 110px);}
    .write_form .row.dflx .input_box + .confirm {width: 100px}

    /* swiper custon */
    .swiper-button-next, .swiper-container-rtl .swiper-button-prev {right: 5%;}
    .swiper-button-prev, .swiper-container-rtl .swiper-button-next {left: 5%;}

    .tableWrap .table_search {width: 100%; margin-bottom: 10px;}
    .tableWrap .table_search input {width: 100%;}

    .company .section01 .inner .txtBox {padding: 25px 20px;}

    /* 모바일 하단 스티키 메뉴 24.03.21 */
    #mobile-bottom {
        display: flex;
    }
    #mobile-bottom .btn {
        border-radius: 0;
        display: grid;
        place-items: center;
        height: 100%;
        font-weight: 600;
        font-size: 20px;
        background-color: #fff;
        color: #536a57;
        flex-grow: 1;
        margin: 0;
    }
    #mobile-bottom .btn.btn-primary {
        background-color: #536a57;
        color: #fff;
    }
}

@media screen and (max-width:360px) {
    #sub_visual .visual_tit h2 {font-size: calc(var(--fz_96) * 0.35); text-align: center;}
}