@charset "UTF-8";
/*@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap');*/
* { font-family: 'Poppins', 'Noto Sans KR', sans-serif;color: var(--color); box-sizing: border-box}
html,body{ font-size: 3.5896vw} /*14px*/
body{ height:calc(var(--vh, 1vh) * 100);color: var(--color); } 
.wrap{ height: calc(var(--vh, 1vh) * 100);height: var(--app-height);padding: 0 5.128vw; min-height:100%} 
.wrap [class*="_wrap"]:not(.gnb_wrap){ height:calc(var(--vh, 1vh) * 100);height: var(--app-height); position: fixed; width: 100%; left:100vw; background: #fff; z-index: -1; opacity: 0; transform-origin: left 0;padding: 0 5.128vw; display: none; top: 0; overflow: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; display:none; min-height:100%} /*padding-bottom: 27.433vw; */
.wrap [class*="_wrap"].focusing{ padding-bottom: 0} 
.wrap [class*="_wrap"]:first-of-type{ left: 0; z-index: 2; opacity: 1;} 
.wrap [class*="_wrap"].active{ display: block; left: 0; z-index: 2; opacity: 1; display: block;animation: show_in_left 0.35s} 

.swiper-pagination{ display: flex; gap:1.7948vw; justify-content: center; align-items: center; bottom: 3.3332vw} 
.swiper-pagination-bullet{ background:var(--bg-gray); width:2.3076vw; margin: 0 !important;height:2.3076vw; opacity: 1 !important   } 
.swiper-pagination-bullet-active:before{ display: none} 
.swiper-pagination-bullet-active{ background:var(--primary) } 
.wrap > div:not(.home_wrap) header h1{ display: none} 
.wrap:not([data-id="intro"]) section{ padding:0 2.564vw; padding-top:15.384vw; min-height: 100% } 
h4{ font-weight: 400} 
.nodata{ min-height: auto} 

:not(".mycard_bx") .nodata{ border: 1px solid var(--second-line); border-radius:3.333vw; padding:7.692vw 6.410vw; display: flex; flex-direction: column; gap:1.282vw; align-items: center; background: #fff; } 
.nodata h4{ font-weight: 700; font-size: var(--size16)} 
.nodata h4+p{font-size: var(--size13); color: var(--color-secondary) } 
.nodata:before{ display: block; width: 7.179vw; height: 7.179vw; background: url("../img/front/icon_infomation.svg") no-repeat 50% 50%; background-size: 100%; content: ""; margin-bottom: 2vw; flex: none} 



.badge{ background: var(--primary); color: #fff; min-height:3.077vw; padding: 0 1vw; min-width: 3.077vw; border-radius: 1.5vw; font-size: 0.571rem; align-items: center; line-height: 1; position: relative; justify-content: center; display: inline-block; vertical-align: middle  } 
.badge.new{ font-size: 0;display: inline-flex; background:var(--red)  } 
.badge.new:before{ font-size: 0.571rem;  content: "N"; font-family:'Noto Sans KR', sans-serif; position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block; line-height:3.077vw; text-align: center } 

.badge.default, 
.badge.times,
.badge.end, 
.badge.enroll{ height:5.3844vw; font-size: 0.714rem; font-weight: 300; line-height: 5.3844vw; background: var(--primary-light-bg); color:var(--primary-active-bg); border-radius: 5vw; min-width: 14.3584vw; text-align: center; flex: none  }

.badge.times{ background: #F1E7FE; color:#4C00AC} 
.badge.end{ background:var(--gray-light-bg) ; color:var(--color) } 
.badge.enroll{ background:#E0F0FF; color:#045BAB } 
.red{ color: var(--red)} 
.blue{ color: var(--blue)} 
:root { --app-height: 100%;}
html,body { padding: 0; margin: 0; overflow: hidden; width: 100vw; height: calc(var(--vh, 1vh) * 100); height: var(--app-height); min-height:100%;}
@keyframes show_in_left {0% {left:100vw;}100% {left: 0;}}
.bt_back{ width:6.1536vw; height: 6.1536vw; background:url("../img/front/icon_back.svg") no-repeat 1vw 50%; background-size:100%; flex: none } 
.topbtn{ z-index: 3; bottom: -20vw; display: block; right:5.128vw; background:rgba(242, 242, 242,0.7); box-shadow:  1px 2px 4px rgba(0, 0, 0, 0.2); width: 10.256vw; height:10.256vw }
.topbtn button{ font-size: 0; background: url("../img/front/icon_top.svg") no-repeat 50% 50%; background-size:3.692vw; width: 100%; height: 100%; padding: 0 } 
.topbtn.fixed{ bottom:6.5vw} 
.topbtn.fixed.noFix{ } 
.gnb_wrap.show + .topbtn.fixed{bottom: 25.64vw; top: auto; position: fixed} 

/* 로딩 
-------------------------------------------------------------- */

.loading{ width: 100%; height: 100%; background: rgba(0,0,0,0.5); border-radius: 0; position: fixed; transition: .2s; opacity: 0; z-index: -1; display: none } 
.loading.active{opacity: 1; z-index:22; display: block} 
.loading p{position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); color: #fff; font-weight: 500;}
.loading .loading_bar + p{ margin-top:23vw} 
.loading .loading_bar{ background: url("../img/front/loading.svg") no-repeat 50% 50%; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width:25.1272vw; height:33.0756vw; margin-top: 0; background-size: 100% } 
.loading .loading_bar i{ display: block; width: 2.0512vw; height: 2.0512vw; background: var(--primary); position: absolute; top:3.846vw; left: 7.692vw; border-radius: 100%;animation: show_hide 3s ease-in-out  infinite; opacity: 0 } 
.loading .loading_bar i.i1{ left:3.846vw; animation-delay: 0s } 
.loading .loading_bar i.i2{ animation-delay: 0.5s} 
.loading .loading_bar i.i3{ left:11.7944vw; animation-delay:1.0s} 
.loading .loading_bar i.i4{  top:10.256vw; left: 7.692vw; animation-delay: 1.5s} 
.loading .loading_bar i.i5{  top:10.256vw; left: 11.794vw; animation-delay: 2.0s} 
.loading .loading_bar i.i6{  top:16.1532vw; left: 11.794vw; animation-delay: 2.5s} 
@keyframes show_hide {
     0% {opacity: 0; background: #fff }  10% {opacity:1; background: #fff } 30% {opacity:1;background: var(--primary); } 100% {opacity:1;background: var(--primary); }
}


/* 탭
-------------------------------------------------------------- */
.tab-container{ position: relative} 
.tab_list_w{ justify-content: space-between; background:rgba(95, 184, 183,0.25); margin: 0 auto; width: auto; border-radius: 10vw ;padding:1.026vw 1.231vw; align-items: center; display: flex } 
.tab_list_w li{  height: 100%; width: 100%} 
.tab_list_w li button{ display: flex; align-items: center; height:9.487vw; background: rgba(255,255,255,0); justify-content: center; border-radius: 10vw;color:var(--primary); width: 100%} 
.tab_list_w li.active button{ background: #fff; color:var(--color) }
.tablink_bx:before{ display: none} 
.tab-container.type2 .tab_list_w{ background: none; justify-content: flex-start; gap:2.564vw; position: relative; padding: 0; padding-bottom:3.5vw; overflow: hidden; overflow-x: auto;-webkit-overflow-scrolling: touch; border-radius: 0; width: calc(100% + 7.692vw); padding-right: 7.692vw } 
.tab-container.type2 .tab_list_w::-webkit-scrollbar{ display:none; }


.type2 .tab_list_w li{ width: auto} 
.type2 .tab_list_w li button{ background:var(--gray-light-bg); border-radius:var(--radius8); min-width: 23.076vw; padding: 0 2.5vw; color:var(--color); font-size:var(--size12)  } 
.type2 .tab_list_w li.active button{ background:var(--primary); color: #fff; font-weight: 400} 
.tab_list_w.fixed{ padding-left:8.923vw }
.type2 .tab_list_w.fixed{padding-left: 7.692vw}
.type2 .tab_list_w.fixed:after{ content: ""; display: block; width:  7.692vw; position: absolute; left: 0; top: 15.384vw; height: 12.982vw; background: #fff000} 

.tab-container.type2 .tab_contents_w:before{ position: absolute; left:50%; top:3.5vw; width: 100vw; height:9.230vw;background: linear-gradient(-180deg, #F2F2F2 0%, rgba(255, 255, 255, 0) 61.46%); content: ""; display: block; transform: translate(-50%, 9.230vw); z-index: -1}  
.type2 .tab_list_w.fixed + .tab_contents_w:before{ position: fixed;top:18.884vw;} 




/* form 
-------------------------------------------------------------- */
.form_bx ul{ display: flex; flex-direction: column; gap:8.974vw} 
.form_bx li > div{ position: relative} 
.form_bx li > div:focus-within input[type="text"]:not[read-only], 
.form_bx li > div:focus-within input[type="password"]:not[read-only], 
.form_bx li > div:focus-within input[type="number"]:not[read-only], 
.form_bx li > div:focus-within input[type="email"]:not[read-only], 
.form_bx li > div:focus-within input[type="tel"]:not[read-only], 
.form_bx li > div:focus-within input[type="time"]:not[read-only],
.form_bx li > div:focus-within select:not[read-only],
.form_bx li > div:focus-within textarea:not[read-only],

.form_bx li > div:focus-within input[type="text"]:not(:disabled), 
.form_bx li > div:focus-within input[type="password"]:not(:disabled), 
.form_bx li > div:focus-within input[type="number"]:not(:disabled), 
.form_bx li > div:focus-within input[type="email"]:not(:disabled), 
.form_bx li > div:focus-within input[type="tel"]:not(:disabled), 
.form_bx li > div:focus-within input[type="time"]:not(:disabled),
.form_bx li > div:focus-within select:not(:disabled),
.form_bx li > div:focus-within textarea:not(:disabled){ border-color: var(--primary) !important} 
.form_bx li > div:focus-within .bt_clear{} 
.form_bx li > div input:valid ~ .bt_clear,.form_bx li > div input:valid ~ .bt_pass_view{ display: block}
.form_bx li > div input:focus ~ .bt_clear,.form_bx li > div input:focus ~ .bt_pass_view{ display: block}

.form_bx li > div .bt_clear,.form_bx li > div .bt_pass_view, .form_bx li > div input:placeholder-shown ~ .bt_clear, .form_bx li > div input:placeholder-shown:focus ~ .bt_clear{ display: none} 

/* 20230719 kj 추가 half class용 bt_clear2 추가 */
.form_bx li > div:focus-within .bt_clear2{} 
.form_bx li > div input:valid ~ .bt_clear2{ display: block}
.form_bx li > div input:focus ~ .bt_clear2{ display: block}
.form_bx li > div .bt_clear2, .form_bx li > div input:placeholder-shown ~ .bt_clear2, .form_bx li > div input:placeholder-shown:focus ~ .bt_clear2{ display: none}
.form_bx li > div .flex .flex .bt_clear2{ top: 0}
/* 20230719 kj 추가 half class용 bt_clear2 추가 END*/

.form_bx li > div label.tit{ margin-bottom: 2.564vw; display: block; padding-left: 2.0524vw; font-size: 1rem; color: var(--color)} 
.form_bx li > div label.tit > strong{ font-weight: 500} 
p[class^="guide"]{ position: absolute; left:2.0512vw;; bottom: -5.5vw; font-size: var(--size12); color:var(--color-secondary); z-index: 1  } 
p.guide_error{ color:var(--alert) } 
.form_bx li > div .flex{ gap:2.564vw; position: relative; width: 100%} 
.form_bx li > div > .flex{ justify-content: space-between} 
.form_bx li > div .flex .bt_inner + .counter{ position: absolute; font-size: var(--size12); color:var(--blue); z-index: 2;height: 11.538vw; right: 30vw; top: 0.25vw; line-height:  11.538vw} 
.form_bx li > div .flex .flex .bt_clear, .form_bx li > div .flex .flex .bt_pass_view{ top: 0} 
.form_bx li > div.sel_box + .input_box{ margin-top:4.359vw } 
.form_bx li > div .flex i.datetime{ position: absolute; left: 0; top: 0; display: block; width:12.3072vw; height: 100%; display: flex; align-items: center; justify-content: center; border-right: 1px solid var(--gray-light-bg)}
.form_bx li > div .flex i.datetime + input.datetime{ padding-left: 14.5vw}
.form_bx li > div .flex i.datetime img{ width:5.128vw }  
/* 체크 박스 */
.chk{ min-height:6.41vw;  } 
.chk input + span:before{ width: 5.128vw; height: 5.128vw; border: none; background:var(--gray-dark) }
.chk input + span:after{width: 5.128vw; height: 5.128vw;font-size: 1.24rem; line-height: 1; top:50%; font-weight: 200; color: #fff; opacity: 1; transform: translateY(-50%); margin-top:0.5px} 
.chk input:checked + span{ color:var(--colors) } 
.chk.all{} 
.chk.all input + span{  height: 11.538vw;padding-left: 3.846vw;border: 1px solid var(--second-line); border-radius:var(--radius8);  } 
.chk.all input + span:before{ background: #fff;} 
.chk.all input + span:after{ color: var(--color)} 
.chk.all input:checked + span:after{ color: var(--primary);}
.chk.all input:checked + span{ border-color:var(--primary);color:var(--primary) } 
.chk.all input + span:after{ left: 3.846vw} 

/* 셀렉트 박스 */
.sort{ float: none} 
.sort > button.bt_sel{border-radius: 2.0512vw; background-position: right 6vw top 50%; background-size:3.333vw; font-size: 1rem }
.sort .dimmed{background: rgba(0,0,0,0.5); position: fixed; left: 0; right: 0; top: 0; bottom: 0; width: 100%; height: 100%; display: none;  } 
.sort.on .dimmed{ display: block; } 
.sort.on{ z-index: 15 } 
.sort .content{ position: fixed; top:auto; bottom: -100px; top: auto; overflow: hidden; background: #fff; max-height: 50vh; border: none; transition: .3s; padding:6.154vw 0; border-radius: 6.410vw 6.410vw 0 0}
.sort.on .content{ z-index: 16 !important;bottom: -1px; } 
.sort .content h4.tit{ position: absolute; left: 0; top: 0; padding: 6.154vw 7.692vw; font-size: var(--size16); width: 100%; font-weight: 700; display: block } 
.sort .content h4{ display: none} 
.sort .content ul{ gap:0; padding: 0} 
.sort.on .content .overf_y{ overflow: hidden; width: 100%;overflow-y: scroll; } 
.sort.on .content h4.tit ~ .overf_y{ max-height: calc(50vh - 22vw); margin-top: 5vw }
.sort .content ul li a{padding: 2.6vw 7.692vw; font-size: 1rem}
.sort .content li.on{ background: none} 
.sort .bt_close{}
.sort > button.bt_sel .plhold{ color:var(--color-secondary) } 
.sort.on .content .overf_y{ max-height: calc(50vh - 20vw)} 
/* 탭 */
.tab_list_w{ margin-bottom: 5.384vw} 
.tab_list_w li button{ } 
.tab_list_w li.active button{ font-weight: 500  }
/**/
.jconfirm .jconfirm-holder{ }
.jconfirm.jconfirm-my-theme .jconfirm-bg{ background: rgba(0,0,0,0.5)}
.jconfirm.jconfirm-my-theme .jconfirm-box{ border-radius: 0}
.jconfirm.jconfirm-my-theme .jconfirm-box.loading{}
.jconfirm.jconfirm-my-theme .jconfirm-box.loading:before{}
.jconfirm.jconfirm-my-theme .jconfirm-box.loading:after{}
.jconfirm.jconfirm-my-theme .jconfirm-box .jconfirm-closeIcon{}
.jconfirm.jconfirm-my-theme .jconfirm-box .jconfirm-title-c{}
.jconfirm.jconfirm-my-theme .jconfirm-box .jconfirm-content-pane{}
.jconfirm.jconfirm-my-theme .jconfirm-box .jconfirm-content{}
.jconfirm.jconfirm-my-theme .jconfirm-box .jconfirm-buttons{}
.jconfirm.jconfirm-my-theme .jconfirm-box .jconfirm-buttons button{}
.jconfirm.jconfirm-my-theme .jconfirm-holder{ max-width: 100% !important; width: 100%;} 
.jconfirm.jconfirm-my-theme .jconfirm-cell{}
/*.jconfirm.jconfirm-my-theme .jconfirm-holder {position: absolute;   bottom: 0;} 
.jconfirm .jconfirm-box.jconfirm-animation-myhomes_bottom{}

.jconfirm.jconfirm-my-theme .jconfirm-box{ position: absolute; left: 0; bottom:-100px} 
.jconfirm.jconfirm-my-theme .jconfirm-box.jconfirm-type-animated{transform: translateY(100px);}
*/


/* 페이지 헤더 */
.page_head{ display: flex; flex-direction: column; gap:2.564vw; padding-top: 3.3332vw; margin-bottom: 5.128vw} 
.page_head h2{ font-size: var(--size22); font-weight: 700}
.page_head p{ font-size:var(--size14); } 
.page_head p > strong{ font-weight: 500 } 
.page_head h2 + p{ } 
header{ width: 100%; height:15.384vw;font-size:var(--size18); font-weight: 700; display: flex; align-items: center; position: fixed; left: 0; top: 0; background: #fff; padding: 0 5.128vw; z-index: 6; justify-content: space-between } 
header h1 span{ display: none}
header h1 >strong{ font-size:var(--size22); font-weight: 700;  } 
header .tool{ display: flex; align-items: center; gap:3.846vw} 
header .tool button{ width:5.641vw; height:5.384vw; background: url("../img/front/header_alarm.svg") no-repeat 50% 50%; background-size: auto 5.384vw; flex: none} 
header .tool button.bt_car{ background-image: url("../img/front/header_car.svg")} 
header .tool button.bt_cctv{ background-image: url("../img/front/header_cctv.svg")} 
header .tool button.bt_alarm{ position: relative; } 
header .tool button.bt_alarm span.num{ font-size:0.68rem; position: absolute; line-height:1; padding:0 0.769vw; min-width:3.4vw; height: 3.4vw; border-radius: 3vw; background:var(--red); color: #fff; display: flex; align-items: center; justify-content: center; right: 0%; top: 0; transform:translate(0.821vw, -4px)} 


/* 풋 버튼 */
.bottom_btn{  width: 100vw; z-index: 4; display: flex; justify-content: center;background: #fff;   background: -moz-linear-gradient(-90deg, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 50%);  background: -webkit-linear-gradient(-90deg, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 50%);  background: linear-gradient(-180deg, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 20%); gap:2.4vw; background: #fff; padding:10.256vw 5.128vw 10.256vw 5.128vw;  transform: translateX(-7.692vw); } 
article > .bottom_btn{ transform: translateX(-7.692vw); margin-top: 5.6408vw; position: relative; left: auto; bottom: auto} 
.bottom_btn button{ width: 100%; background:var(--gray-dark); color: var(--color);  border-radius:var(--radius8); height: 13.0764vw; font-size:1.142rem } 
.bottom_btn button:hover, .bottom_btn button:focus{ background: #C6C6C6;} 
.bottom_btn button.colors{ background: var(--primary); min-width: 70%; color: #fff} 
.bottom_btn button.colors:not(:disabled):hover, .bottom_btn button.colors:not(:disabled):focus{ background: var(--primary-hover-bg)}
.bottom_btn button.colors:disabled{ background:var(--primary-disable-bg) } 
/*.focusing .bottom_btn{ position: relative; transform: translateX(-7.692vw)} */
.bottom_btn button.bt_txt{width: auto; background: none;color: var(--color-secondary); height: auto; font-size:var(--size12); padding: 0 2vw; font-weight: 400; position: relative; } 
.bottom_btn button.bt_txt+button.bt_txt:before{ position: absolute; left: 0; top: 50%; width: 1px; height:3.5896vw; background: var(--color-secondary); transform: translate(-1.2vw,-50%); content: ""} 

.bottom_btn button.bt_txt:hover{} 
.bottom_btn.small{ justify-content: flex-end;    gap: 4vw;} 
.bottom_btn.small button{ width: auto; background: none;color: var(--color); height: 8vw; font-size:var(--size13); padding: 0 2vw; font-weight: 400} 
.bottom_btn.small button:hover, .bottom_btn.smal button:focus{ background: none; color: var(--color-secondary);} 
.bottom_btn.small button.colors{ background:none; min-width: auto; color:var(--primary); font-weight: 500} 
.bottom_btn.small button.colors:not(:disabled):hover, .bottom_btn.small button.colors:not(:disabled):focus{ color: var(--primary-focus); background: none}
.bottom_btn.small button.colors:disabled{ background:none;} 
.bottom_btn.small button:disabled{ opacity: 0.4} 

/* 텍스트 버튼 */
.bt_txt{ text-decoration: underline; color:var(--color-secondary);font-size:var(--size12); } 
.bt_txt.focus:not(:disabled){ color: var(--color);text-decoration: underline; } 
.bt_txt:not(:disabled):hover{ color: #7E7E7E;text-decoration: underline;  } 

.bt_more{ font-size: var(--size12); color: var(--color-secondary); display: flex; justify-content: flex-end; gap:0.53vw; padding: 1.3vw 0; align-items: center} 
.bt_more:after{ border: 1px solid var(--color-secondary); content: ""; width: 1.32vw; height: 1.32vw; border-width: 1px 1px 0 0; display: block; transform: rotate(45deg)} 
.bt_more.focus:not(:disabled){ color: var(--color)} 
.bt_more:not(:disabled):hover{ color: #7E7E7E; } 

/* innerbtn */
.bt_inner{min-width:  21.5vw; height:8.974vw; background:var(--gray-dark); color:var(--color); flex: none; border-radius:var(--radius8); font-size: var(--size12)  } 
.bt_inner:hover{ background: var(--color-secondary)} 
.bt_inner.colors{  background:var(--primary); color: #fff} 
.bt_inner.colors:hover{background:var(--primary-bg); } 
.bt_inner:disabled{ opacity: 0.5;} 
.bt_inner.colors:disabled{ opacity: 1; background: var(--second-disable-bg); color:#7DA9A9 } 
.form_bx li .bt_inner{width:  23.8492vw; height:11.538vw; background:var(--gray-dark); color:var(--color-secondary); flex: none; border-radius: 2.0512vw; font-size: 1rem  } 
.form_bx li div.flex:focus-within .bt_inner:not(:disabled){ background:var(--primary-bg); color: #fff } 
.form_bx li div.flex:focus-within .bt_inner:not(:disabled) :hover{background:var(--primary-active-bg); } 

/* */
.tdbtn{} 
.tdbtn{min-width:16.4096vw; height:6.92288vw; background:var(--gray-dark); color:var(--color); flex: none; border-radius:4vw; font-size: 0.7857rem; flex: none; padding: 0 3vw } 
.tdbtn:not(:disabled):hover{background:var(--color-secondary); } 
.tdbtn:disabled{ opacity: 0.5}


/* intro
-------------------------------------------------------------- */
[data-id="intro"] header{ display: none} 
.intro_wrap:not(#enter) .page_head{ display: none} 
.wrap .intro_wrap{min-height:calc(var(--vh, 1vh) * 100);min-height: var(--app-height);  position: fixed; width: 100%; left:100vw; background: #fff; z-index: -1; opacity: 0; transform-origin: left 0;padding: 0 5.128vw; display: none; top: 0;padding-bottom: 27.433vw;  min-height:100%} 
.intro_wrap.active{  left: 0; z-index: 2; opacity: 1; display: block;animation: show_in_left 0.35s } 
.intro_wrap section{ display: flex; flex-direction: column; width: 100%; } 
.intro_wrap .page_head{ width: 100%; height:15.384vw;font-size:var(--size18); font-weight:400; display: flex; align-items: center; justify-content: center; flex-direction: column; padding: 0 2.564vw; margin: 0} 
.intro_wrap .page_head h2{font-size:var(--size18); font-weight: 700; } 
#splash{ display: block; left: 0; z-index: 1; opacity: 1; padding-bottom: 0} 
#splash > *{width: 100%; height: calc(var(--vh, 1vh) * 100);min-height: var(--app-height);  padding-bottom: 0 ;min-height:100%} 
.splash_bx{ position: relative; display: flex; flex-direction: column-reverse; width: 100%; height: 100%;  align-items: center; justify-content: center; gap:8vw ;}
.splash_bx .img{ position: absolute; left: 0; top: 0; width: 100%; height: 100%} 
.splash_bx .img img{ min-width: 100%; height: 100%} 
.splash_bx .icon{ display: flex; width:28.4615vw; height:28.4615vw; border-radius: 100%;position: relative; z-index: 1; overflow: hidden; flex: none; align-items: center; justify-content: center  } 
.splash_bx h3{ font-size: var(--size18); text-align: center; font-weight: 400; position: relative; z-index: 1} 
.splash_bx h3 > strong{ font-size: 1.642rem; display: block; font-weight: 700} 
#enter .page_head{ height: auto; gap:0; align-items: flex-start; margin-bottom:7.692vw; margin-top: 0; padding-top: 0 } 
#enter .page_head h2{ height:15.384vw; flex: none; display: flex; align-items: center; justify-content: center; width: 100%}
#enter .page_head h2+p{ margin: 0; padding: 0} 
.enter_bx{border-bottom: 1px solid #e6e6e6; padding: 0 2.564vw} 
.enter_bx:last-of-type{ border-bottom: none} 
.enter_bx + .enter_bx{ margin-top: 6.41vw } 
.enter_bx h3{font-size: var(--size15); font-weight: 700; margin-bottom:3.846vw } 
.enter_box{ display: flex; flex-direction: column; gap:5.128vw; padding-left:8.462vw; margin-bottom: 9.4868vw   } 
.enter_box dl{ display: flex; gap:0.7692vw; position: relative; padding-left: 14vw; flex-direction: column } 
.enter_box dl:before{ position: absolute; left: 0; top: 50%; width:6vw; height: 6.2vw; overflow: visible; content: ""; background: url("../img/front/intro_ico_Version.svg") no-repeat 50% 50%; background-size: auto 5.8972vw; display: block; transform: translateY(-50%)} 
.enter_box dl.enter_ver:before{ background-image:url("../img/front/intro_ico_Version.svg")  }
.enter_box dl.enter_id:before{ background-image:url("../img/front/intro_ico_id.svg")  }
.enter_box dl.enter_wifi:before{ background-image:url("../img/front/intro_ico_wifi.svg")  }
.enter_box dl.enter_call:before{ background-image:url("../img/front/intro_ico_call.svg")  }
.enter_box dl.enter_media:before{ background-image:url("../img/front/intro_ico_media.svg")  }
.enter_box dl.enter_sms:before{ background-image:url("../img/front/intro_ico_SMS.svg")  }
.enter_box dl.enter_location:before{ background-image:url("../img/front/intro_ico_location.svg")  }
.enter_box dl dt{ font-weight: 500} 
.enter_box dl dd{ font-size:var(--size12); color: var(--color-secondary)} 
.enter_bx >p{ padding-top: 4.1024vw; font-size:var(--size12); color: var(--color-secondary); letter-spacing: -0.25px} 
.intro_wrap .bottom_btn{ position: fixed; left: 0; bottom: 0; background: #fff; padding: 4.1024vw 5.128vw 10.256vw 5.128vw; transform: none } 
.intro_wrap#int{ padding: 0} 
.intro_wrap#int .int_bx{height: calc(var(--vh, 1vh) * 100 - 27.433vw); overflow: hidden; position: relative; } 
.intro_wrap#int .int_bx h3{width: 100%; height:15.384vw;font-size:var(--size18); font-weight:400; display: flex; align-items: center; justify-content: center; flex-direction: column; padding: 0 2.564vw; position: absolute; left: 0; top: 0;font-size:var(--size18); font-weight: 700; z-index: 3 } 
.intro_wrap#int .int_bx .swiper-slide{ position: relative; width: 100%; height: 100%; overflow: hidden} 
.intro_wrap#int .int_bx .swiper-slide .img{ width: 100%; height: 100%;padding-top:15.384vw }
.intro_wrap#int .int_bx .swiper-slide .img img{min-width: 100%; height: 100%; } 
.intro_wrap#int .int_bx .swiper-slide .txt{ width: 100%; padding: 0 5.128vw; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); text-align: center} 


/* 임시 
.splash_bx, #splash{ background: var(--primary); color: #fff} 
.splash_bx .icon img{} 
.splash_bx .icon{ background: #fff} 
*/

/* 로그인 */

.wrap .login_wrap{ padding-bottom: 0} 
.etc_btn{ display: flex; align-items: center; justify-content: center; gap:5.128vw; } 
.form_bx li div+.etc_btn{ margin-top:6.41vw } 
.etc_btn button + button{ display: flex; align-items: center; gap:5.128vw;  } 
.etc_btn button + button:before{content: ""; width: 1px; height: 3vw; background: var(--color-secondary); display: block } 
.login_bx{ margin-bottom:  5.128vw;} 
.login_wrap .guide_join{ position: absolute; bottom: 13.8456vw; left: 0; width: 100%; display: flex; gap:2.564vw; justify-content: center; font-size: var(--size12); color:var(--color-secondary) } 
.guide_join .bt_txt{ color:var(--primary) } 
.guide_join .bt_txt:hover{ color:var(--primary-focus) } 
.login_wrap section{} 

/* 아이디찾기 */
/*.result_wrap.focusing .bottom_btn{  position: fixed; transform:none} */


@media all and (max-height:150vw) {
    .login_wrap .guide_join{
      position: relative; bottom: auto; margin-top:5.6vw; padding-bottom: 5.6vw
    }
  }

/* 약관동의 */
.bt_detail{width: 5.128vw; flex: none}
.bt_detail:before{ width: 100%; height: 5.128vw; display: block;font-family: "remixicon"; font-style: normal; speak: none;  text-decoration: inherit; text-align: center; font-variant: normal;  text-transform: none; -webkit-font-smoothing: antialiased;  -moz-osx-font-smoothing: grayscale;content: "\EA6E";  color: var(--color); line-height:  5.128vw; font-weight: 200; font-size: 1.54rem;opacity: 0.6} 
.agree_box{ display: flex; flex-direction: column; gap:3vw; position: relative} 
.agree_box .form_list{display: flex; flex-direction: column; gap:1.5vw; padding-left: 3.846vw} 
.agree_box .form_list li{ display: flex; justify-content: space-between} 
.agree_box .form_list + .form_list:before{ border-top: 1px solid var(--second-line); content: ""; display: block; width: calc(100% + 5.128vw); transform: translateX(-2.564vw); margin-bottom: 3vw} 
.agree_box .form_list li .bt_detail:before{ height: 6.41vw; line-height: 6.41vw; } 
.agree_box .form_list .chk{ width: 100%} 
.agree_box .chk.all{margin-bottom: 3vw} 


/* 본인인증 */
.wrap .auth_wrap{ padding-bottom: 0} 
.agree_box + .form_bx{ margin-top: 8.718vw}
.birth [type="number"]{font-variant-east-asian: full-width;font-feature-settings: 'fwid' on; letter-spacing: 1vw} 
.birth [type="password"]{ padding: 0 !important; font-size: 2.3rem !important; text-align: center}
i.masking{ display: flex; align-items: center; justify-content: center; width:2.308vw; height: 2.308vw; background: var(--color); border-radius: 100%} 
.birth  div .flex{ align-items: center} 
/* */

/* 메뉴
-------------------------------------------------------------- */
.gnb_wrap{ position: fixed; bottom: -20vw ; left: 0 ; width: 100% ; height:18.974vw; z-index: 19 ;padding: 0 ; opacity: 1; border: 1px solid #ECECEC; border-radius:3.333vw 3.333vw 0 0;padding: 0 5.128vw; background: #fff; transition: .2s; line-height: 0; font-size: 0; border-bottom: none } 
.gnb_wrap.show{ bottom: 0} 


.main_menu{ display: flex; justify-content: space-between;height:18.974vw;}
.main_menu li{ width: 20%; flex: none; height: 100%; line-height: 3.333vw} 
.main_menu li > *{ display: flex; flex-direction: column; gap:0.769vw; width: 100%; height: 100%; justify-content: center; font-size:2.308vw; align-items: center; padding-bottom: 2.564vw } 

.main_menu li > *:before{ display: block; content: ""; width:6.666vw; height: 6.66vw; background: url("../img/front/menu_home.svg") no-repeat 50% 50%; background-size: auto 5.897vw} 
.main_menu li.home > *:before{ background-image:url("../img/front/menu_home.svg")} 
.main_menu li.comport > *:before{ background-image:url("../img/front/menu_comport.svg")} 
.main_menu li.complain > *:before{ background-image:url("../img/front/menu_complain.svg")} 
.main_menu li.community > *:before{ background-image:url("../img/front/menu_community.svg")} 
.main_menu li.myinfo > *:before{ background-image:url("../img/front/menu_myinfo.svg")} 

.main_menu li.community2 > *:before{ background-image:url("../img/front/icon_question.svg")}/* 20230616 - 생숙 관리문의 아이콘 추가 */


.main_menu li.home.current > *:before{ background-image:url("../img/front/menu_home_on.svg")} 
.main_menu li.comport.current > *:before{ background-image:url("../img/front/menu_comport_on.svg")} 
.main_menu li.complain.current > *:before{ background-image:url("../img/front/menu_complain_on.svg")} 
.main_menu li.community.current > *:before{ background-image:url("../img/front/menu_community_on.svg")} 
.main_menu li.myinfo.current > *:before{ background-image:url("../img/front/menu_myinfo_on.svg")} 

.main_menu li.community2.current > *:before{ background-image:url("../img/front/icon_question_on.svg")}/* 20230616 - 생숙 관리문의 아이콘 추가 */


.gnb_wrap nav{ position: relative; width: 100%} 
.gnb_wrap nav .bar{height:2px; width: 20%; margin: 0;  border: none; transition: .3s ease-in-out;  position: absolute; left: 0; top: 0; display: flex; justify-content: center}
.gnb_wrap nav .bar:before{ width:5.897vw; height: 100%; display: block; content: ""; background: var(--primary) } 

.gnb_wrap nav li:nth-of-type(1).current ~ .bar{left:0} 
.gnb_wrap nav li:nth-of-type(2).current ~ .bar{left:20%} 
.gnb_wrap nav li:nth-of-type(3).current ~ .bar{left:40%} 
.gnb_wrap nav li:nth-of-type(4).current ~ .bar{left:60%} 
.gnb_wrap nav li:nth-of-type(5).current ~ .bar{left:80%} 

.gnb_wrap nav li:nth-of-type(1):hover ~ .bar{left:0} 
.gnb_wrap nav li:nth-of-type(2):hover ~ .bar{left:20%} 
.gnb_wrap nav li:nth-of-type(3):hover ~ .bar{left:40%} 
.gnb_wrap nav li:nth-of-type(4):hover ~ .bar{left:60%} 
.gnb_wrap nav li:nth-of-type(5):hover ~ .bar{left:80%} 





/* 홈 : data-id="home" > .home_wrap
-------------------------------------------------------------- */
.wrap .home_wrap{ } 
.wrap .home_wrap section{ padding-left: 0; padding-right: 0; display: flex; flex-direction: column; gap:2.564vw;padding-bottom: 26.666vw !important} 
/* 개인정보 */
.page_head{ position: relative} 
.mycard_bx{ display: flex;  align-items: flex-start; flex-direction: column; padding:0vw 0 5.384vw 18.974vw; position: relative; gap:0}
.mycard_bx .pic{ background:var(--second2); border-radius: 100%; width: 13.333vw; height: 13.333vw; display: flex; align-items:center; justify-content: center; flex: none; position: absolute; left:1.026vw; top: 0; z-index: 1; flex: none; overflow: hidden } 
.mycard_bx .pic img{width:100%;overflow: hidden; height: 100%} 
.mycard_bx .nodata{ height: auto; min-height: auto; gap:0; line-height: 4.872vw} 
.mycard_bx .nodata:before{ display: none} 
.mycard_bx .welcome{ font-size: var(--size18); padding-top: 1.17vw} 
.mycard_bx .info{ font-size: var(--size14);line-height: 4.872vw} 
.weather_bx{ position: absolute; bottom: 5.384vw; right:2.564vw} 
.weather_box{display: flex; font-size: var(--size13); align-items: center; justify-content: flex-end; gap:1.538vw} 
.weather_box .weather{ width: 3.590vw; line-height: 1; position: relative} 
.weather_box .weather:hover:after{content: attr(data-alt); position: absolute; left:-1vw; top: 4vw; display: inline-block; font-size: 1rem; z-index: 2;  background: #DFF5F5; border-radius: var(--radius8); padding: 3vw; font-size: var(--size12)} 

.page_head > .mycard_bx:after{ position: absolute; left:50%; bottom: 0; width: 100vw; height:9.230vw;background: linear-gradient(-180deg, #F2F2F2 0%, rgba(255, 255, 255, 0) 61.46%); content: ""; display: block; transform: translate(-50%, 9.230vw); z-index: -1}  
/* 우리집 정보 */
.myhouse_bx{ } 
.myhouse_bx > [class*="_enter"]:not(.ok_enter){ border: 1px solid var(--second-line); border-radius:3.333vw; padding:7.692vw 6.410vw; display: flex; flex-direction: column; gap:1.282vw; align-items: center; background: #fff; margin-top: -3.846vw} 
.myhouse_bx > [class*="_enter"]:before{ display: block; width: 7.179vw; height: 7.179vw; background: url("../img/front/icon_infomation.svg") no-repeat 50% 50%; background-size: 100%; content: ""; margin-bottom: 1.282vw; flex: none} 
.home_wrap h3{font-size: var(--size16); font-weight: 700;text-align: left; margin-bottom: 2.564vw } 
.home_wrap .myhouse_bx div:not(.ok_enter) h3{ text-align: center; margin-bottom: 0} 
.ok_enter  h3{ } 

.myhouse_bx > [class*="_enter"]:not(.ok_enter) p{ text-align: center; font-size: var(--size13); color:var(--color-secondary)  }
.myhouse_bx > .ok_enter:before{ display: none}

.myhouse_bx button.colors{ background: var(--primary); color: #fff; display: flex; width: 100%; height: 11.538vw; justify-content: center; align-items: center; margin-top: 2.564vw; border-radius: var(--radius8) } 

.house_box{ display: flex; min-width: calc(100% + 5.128vw); gap:2.564vw; padding-right: 5.128vw; padding-bottom: 1px} 
.overf_x{ overflow: hidden; overflow-x: auto;-webkit-overflow-scrolling: touch; } 
.overf_x::-webkit-scrollbar{ display:none; }
.house_box > div{ min-width:64.1vw; width: 100%; border: 1px solid var(--second-line);border-radius:3.333vw;; padding:3.590vw; color: var(--color)  } 
.house_box .basicinfo{ display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap:8.47vw;position: relative} 
.house_box h4{ background:#DFF5F5; border-radius: 2.564vw; display: flex; align-items: center; justify-content: center; color:var(--primary-active-bg); font-size: 0.7rem; line-height: 1; min-height:5.384vw; min-width: 12.307vw; padding: 0 1vw;  font-weight: 400} 
.house_box .date, .house_box .size{ position: absolute; right: 0; top: 0; font-size: var(--size12)} 
.house_box .size{ top: auto; bottom: 0} 
.house_box .date a.bt_txt{ color: var(--color); text-decoration: none  } 
.house_box .basicinfo .date{ text-decoration: underline} 


.house_box .money{ font-size: 1.643rem; font-weight: 700; color: var(--color); line-height: 1; display: flex; align-items: flex-end} 
.house_box .money .unit, .house_box .money .type{ font-size: var(--size12); font-weight: 500; margin-bottom:0.513vw  } 
.house_box .basicinfo + .compare, .house_box .basicinfo + .date{ border-top: 1px solid #E6E6E6; padding: 2.564vw 0 0 0; margin-top: 2.564vw} 
.house_box .compare{ display: flex; justify-content: space-between; gap:1vw} 
.house_box .compare em, .house_box .compare strong{ font-size: 0.78rem; font-weight: 400; color:var(--color-secondary)}
.house_box .compare strong{color: var(--color) } 
.house_box .compare strong.up{ color: var(--red)} 
.house_box .compare strong.dn{ color: var(--blue)} 
.house_box .compare strong{ display: flex; align-items: center; gap:0.82vw} 
.house_box .compare strong.up:after{ content: ""; flex: none; display: block; border-bottom: 2.038vw solid  var(--red); border-left: 1.026vw solid  rgba(223, 74, 74, 0);border-right:1.026vw solid  rgba(223, 74, 74, 0); margin-bottom: 1vw} 
.house_box .compare strong.dn:after{ content: ""; flex: none; display: block; border-top: 2.038vw solid  var(--blue); border-left: 1.026vw solid  rgba(223, 74, 74, 0);border-right:1.026vw solid  rgba(223, 74, 74, 0); } 
.house_box .card02 h4{ background:#FEF2D3;color: #685525; } 
.house_box .card02 .compare{ justify-content: flex-start}

.house_box .badges{display: flex;gap: 1.795vw;}
.house_box .badge{ border: 1px solid var(--color-secondary); background: #fff; font-size: 0.714rem; color:var(--color); padding: 0 1.5vw; height: 5.384vw; line-height: 5.384vw; min-width:13vw; text-align: center; border-radius: 3.5vw  } 
.house_box .basicinfo > .tit{ margin-top:-4.5vw; display: flex; align-items: flex-end; min-height: 11.430vw} 
.house_box .basicinfo > .tit > span{ display: block; font-weight: 700; font-size:var(--size16); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: normal; line-height: 1.34  } 

.house_box .basicinfo + .date{ position: relative; right: auto; top: auto; margin-top:1.96vw;font-size: 0.78rem;font-weight: 400;color: var(--color-secondary);}
.house_box .card03  .basicinfo{ background: url("../img/front/icon_poll.svg") no-repeat right 0 top 0.7vw; background-size: 7.2vw} 

/* 공지 */
.noti_bx{ border: 1px solid var(--primary); border-radius:2.051vw; display: flex; padding: 2.564vw;font-size: var(--size13); align-items: center;gap:1.2vw; justify-content: space-between; height:  8.974vw; overflow: hidden} 
.noti_bx h3{ display: flex; gap:1.2vw; align-items: center;flex: none;font-size: var(--size13); margin-bottom: 0; font-weight: 500; color: var(--primary) } 
/*.noti_bx h3:after{ content: ""; width: 1px; height: 3.102vw; display: block; background: var(--color)} */
.noti_bx p{display: flex; align-items: center; justify-content: space-between; gap:0}
.noti_bx .swiper-wrapper{width: calc(100% - 9vw); } 

.noti_bx p a{display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;max-width: calc(100% - 13vw);} 
.noti_bx *{line-height: 1}
.noti_bx .date{ width:12.820vw; flex: none; font-size: 0.75rem; text-align: right;color:var(--color-secondary); display: flex; align-items: center; justify-content: flex-end  }  
/* 전체서비스*/
.sv_bx{ margin-top:3.846vw; position: relative } 
.sv_bx .bt_more{ background: #F8F8F8; color: var(--color); text-align: center; font-size: var(--size12); height:8.718vw; width: 100%; justify-content: center; padding: 0; border-radius:var(--radius8); margin-top: 1.795vw }
.sv_bx .bt_more:after{ display: none} 

.sv_list{ display: flex; flex-wrap: wrap; justify-content: flex-start; gap:1.795vw 2.564vw ; }  
.sv_list li{ width:28.204vw; height:23.845vw; background:#F6FAFA; border-radius:3.333vw; overflow: hidden    } 
.sv_list a{ display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; height: 100%; gap:2.564vw; font-size: var(--size13)} 
.sv_list li i{ display: flex; width:9.743vw; height:7.692vw; align-items: center; justify-content: center} 
.sv_list li i img{ width: auto; height: 100%} 
.sv_list li a:hover{ background:rgba(77, 153, 152, 0.03)} 
.sv_list[data-num="8"]{gap:1.795vw } 
.sv_list[data-num="8"] li{ width:21.025vw; height:17.692vw;   } 
.sv_list[data-num="8"] a{ font-size: 0.785rem; text-indent: -1px; gap:1.795vw} 
.sv_list[data-num="8"] li i{ width: 7.179vw; height:5.769vw }
.sv_list[data-num="6"] li:nth-of-type(7), .sv_list[data-num="6"] li:nth-of-type(8){ display: none} 

/* 이용중인서비스*/
.use_bx{ margin-top:3.846vw; position: relative } 
.use_list{ display: flex; flex-wrap: wrap; gap:1.795vw 0; justify-content: space-between } 
.use_list li{width:calc(50% - 1.282vw); background: #fff; position: relative; border: 1px solid #E0F0FF; border-radius:3.333vw; overflow: hidden; min-height: 17.435vw} 
.use_list li:after{ background:#E0F0FF; content: ""; width: 3.077vw; height: 100%; display: block; position: absolute; right: 0; top: 0 } 
.use_list li a{ display: flex; width: 100%; height: 100%; padding:2.564vw 4vw 2.564vw 2.564vw; justify-content: center; align-items: flex-start; flex-direction: column; background: #fff}
.use_list li a:hover:after{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; content: ""; display: block; background: rgba(0,0,0,0.02); z-index: 5} 
.use_list li .type{ display: flex; background:#E0F0FF; color:#045BAB; font-size: 0.7rem;line-height: 1;min-height: 5.384vw;min-width: 12.307vw;padding: 0 2vw;
font-weight: 400;border-radius: 2.564vw;align-items: center;justify-content: center; margin-bottom: 1vw} 
.use_list li .tit{ padding-left: 1.026vw; font-weight: 500; font-size: var(--size16); display: flex; gap:2vw; align-items: center} 
.use_list li .tit:after{border: 1.5px solid var(--color);content: ""; width: 1.482vw;height: 1.482vw; border-width: 1.5px 1.5px 0 0; display: block;transform: rotate(45deg); transform-origin: center center} 
.use_list li.type02{ border-color:#FDEDED; } 
.use_list li.type02:after{ background:#FDEDED;}
.use_list li.type02 .type{background:#FDEDED; color:#DF4A4A;}
.use_list li.type03{ border-color:#DFF5F5; } 
.use_list li.type03:after{ background:#DFF5F5;}
.use_list li.type03 .type{background:#DFF5F5; color:var(--primary-active-bg);}
.use_list li.type04{ border-color:#FEF2D3; } 
.use_list li.type04:after{ background:#FEF2D3;}
.use_list li.type04 .type{background:#FEF2D3; color: #685525;}
.use_list li.nodata{ width: 100%; border: none; padding:0 2.564vw ; align-items: center} 
.use_list li.nodata:after{ display: none;} 

/* 소통공간 */
.commu_bx{ margin-top:3.846vw; position: relative } 
.commu_list,.board_list{ border: 1px solid var(--second-line); border-radius: 3.333vw; padding: 5.128vw 2.564vw;; display: flex; flex-direction: column; gap: 3.077vw}
.commu_bx .bt_more{position: absolute; right: 0; top: 0; height: 5.933vw}
.commu_list li, .board_list li{ padding: 0  21.538vw 0 2.564vw; position: relative; font-size: var(--size13)} 
.commu_list li a, .board_list li a{ display: flex; flex-direction: column; gap:0.78vw; overflow: hidden} 
.commu_list li a:hover, .board_list li a:hover{ background:rgba(246, 250, 250, 0.8)}
.commu_list li+li, .board_list li+li{ border-top: 1px solid #f2f2f2; padding:2.564vw 21.538vw 2.564vw 2.564vw; padding-bottom: 0 } 
.commu_list li .pic, .board_list li .pic{ width:14.102vw; height: 14.102vw; position: absolute; right: 2.564vw; top: 0; overflow: hidden; border-radius:var(--radius8); background:var(--light-bg-gray); font-size: 0.7rem; line-height: 1; display: flex; justify-content: center; align-items: center; text-align: center; margin-top: 0.73vw   } 
.commu_list li .pic img, .board_list li .pic img{ position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); object-fit: cover; min-width: 100%; min-height: 100%} 
.commu_list li:not(:first-of-type) .pic, .board_list li:not(:first-of-type) .pic{top: 2.564vw} 
.commu_list .cate, .board_list .cate, .board_list .badges,  .board_head .badges{  font-size: var(--size12); color:var(--color-secondary); display: flex; align-items: center; gap:1.2vw  } 
.commu_list .etc, .board_list .etc{ font-size: 0.78rem;color: #8E9AA6; display: flex; align-items: center; gap:2vw} 
.commu_list .etc .writer + .date:before, .comview_bx .etc .writer + .date:before, .board_list .etc .writer + .date:before{ width: 1px; height: 2vw; background:#8E9AA6; content:""; display: inline-block; vertical-align: middle; margin-right: 2vw; flex: none}
.commu_list .tit, .board_list .tit{display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.commu_list .etc .hit,.commu_list .etc .rply, .comview_bx .etc .hit, .comview_bx .etc .rply,.board_list .etc .hit,.board_list .etc .rply{ display: flex; align-items: center; gap:0.61vw} 
.commu_list .etc .hit:before,.commu_list .etc .rply:before, .comview_bx .etc .hit:before,.comview_bx .etc .rply:before,.board_list .etc .hit:before,.board_list .etc .rply:before{ content:""; width:3.077vw; height: 2.564vw; display: block; background: url("../img/front/ico_hit.svg") no-repeat 50% 50%; background-size: auto 100%; flex: none}
.commu_list .etc .rply:before,.comview_bx .etc .rply:before,.board_list .etc .rply:before{ background-image: url("../img/front/ico_reply.svg")} 

/* 시설안내 */
.commu_bx + .apt_bx, .sv_bx + .apt_bx{ margin-top:3.846vw; position: relative } 
.commu_bx[style*="display: none"] + .apt_bx{ margin-top: 0} 


.apt_bx .bt_more{position: absolute; right: 0; top: 0; height: 5.933vw} 

.office_box{ border-radius:3.333vw; overflow: hidden; border: 1px solid var(--second-line); position: relative; background: url("../img/front/icon_call2.svg") no-repeat 5.710vw 50%; background-size:8.718vw; padding:0 3.692vw 0 18.5vw;height:19.743vw; display: flex; align-items: flex-start; flex-direction: column; justify-content: center } 
.office_box a{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: flex-end; padding-right: 3.692vw; flex-wrap: wrap} 
.office_box .tit{ width: 100%; display: block } 
.office_box .ph{ font-size:1.429rem; font-weight: 500; width: 100%; display: block } 
.office_box a.call span{background: #ebebeb; border-radius: 2.3vw; line-height:1.82; font-size: 0.7rem; padding: 0 2.564vw;  } 
.office_box a.call span:after{ content: ">"} 



/*배너 */
.banner_bx{ display: flex;gap:2.564vw; flex-direction: column} 
.banner_bx [class*="_box"]{background-color: #F2EBD9; border-radius:3.333vw; overflow: hidden; height:134px; position: relative;} 
.banner_bx [class*="_box"] h4{} 
.banner_bx [class*="_box"] .swiper-wrapper > *{ background-position: center center; background-size: cover; background-repeat: no-repeat; display: flex; width: 100%; height: 100%; padding:4.40vw 5.128vw; align-items: center} 
.banner_bx .banner_box .swiper-wrapper p{ overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: normal; } 



.banner_box{ color: #fff; font-size:var(--size13) } 
.banner_box h4{  font-size: var(--size16); font-weight: 700} 
/*.banner_box a:before{ content: ""; width: 100%; height: 100%; display: block; background:linear-gradient(90deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 100%); position: absolute; left: 0; top: 0} */
.banner_box a > *{ position: relative} 
.banner_box h4 + p{ margin-top: 1vw} 
.banner_box a:hover:before{background:linear-gradient(90deg, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0.1) 100%); } 
.banner_box a:after{border: 2px solid #fff;content: "";width: 2.6vw;height: 2.6vw;border-width: 2px 2px 0 0;display: block;transform-origin: center center; position: absolute; right: 6.154vw; top: 50%; transform: translateY(-50%) rotate(45deg)}

/*.banner_bx .store_box{ display: flex; align-items: center; padding:4.40vw 5.128vw;}*/ 
.banner_bx .store_box a{ display: flex !important; gap:4vw; align-items: center }  
.store_box h4{ font-size: 5.128vw;letter-spacing: -0.03em; border: 1px solid #A8A08D; line-height:7.692vw; height: 7.692vw; font-weight: 700; border-width: 1px 0} 
.store_box h4+p{ font-size: 0.79rem} 


.banner_bx .store_box .swiper-slide{ background-color:#F2EBD9; background-size: 100% 100%; background-position: center center; background-repeat: no-repeat} 
.banner_bx .swiper-pagination{ position: absolute; width: 100%; left: 0; bottom: 1.52vw; z-index: 4; gap:1vw} 
.banner_bx .swiper-pagination-bullet{ background: #DADADA; width:1.1538vw;height:1.1538vw } 
.banner_bx .swiper-pagination-bullet-active{ background:#fff}

/* bluecom */
.foot_bx{ font-size:0.79rem; color:var(--color-secondary); padding-left:18.717vw; position: relative; margin-top: 2.564vw} 
.foot_bx .logo{ position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 16.410vw}
.foot_bx .logo a[target="_blank"]:after{ display: none} 
.foot_bx .contact{ display: table} 
.foot_bx .contact > span{ display: table-cell} 
.foot_bx .contact > span +span:before{ display: inline-block; content: ""; width: 1px; height: 2vw; background: var(--gray-dark); vertical-align: middle; margin: 0 1vw} 
.foot_bx .contact > span strong{ font-weight: 400} 



/* 홈 > 서브페이지 : data-id="home" > 
-------------------------------------------------------------- */
/* 검색 */
.bt_sch{ width:11.538vw; height: 11.538vw; background: url("../img/front/btn_search.svg") no-repeat 50% 50%; background-size:3.5896vw } 
.input_box .bt_sch{ position: absolute; right: 0; bottom:0} 

/* 입주민 인증 */
.aptauth_bx .input_box .flex + .flex{ margin-top:1.5384vw } 
.aptauth_bx .input_box .flex .bt_clear{ top: 0} 
.aptauth_bx [type="text"]#selected{ padding-right: 12.5vw} 
.aptauth_bx [type="text"]#selected + .bt_sch{ width: 100%; background-color: rgba(0,0,0,0); background-position: right 4vw top 50%; z-index: 2} 
.apt_pop .input_box{ position: relative; margin-bottom:6.41vw} 
.apt_pop .input_box .blind ~ .bt_clear{ bottom: auto; top: 0; right:9vw} 
.apt_pop [type="text"]:focus ~ .bt_sch{filter: sepia(0.5) saturate(4) hue-rotate(114deg)} 
.apt_pop [type="text"]{ padding-right: 16vw} 
.apt_pop .downupPopup-content h4{ margin-bottom: 3vw; font-weight: 500} 
.apt_pop .sel_wrap{height: calc(100% - 10vw);} 
.apt_pop .sel_list.overf_y{ height: calc(100% - 10.768vw);} 

.sel_list{ display: flex; flex-direction: column; gap:2.564vw; padding:0 3vw } 
.sel_list .chk_txt > span{ padding: 1.5vw 0} 


.apt_pop .input_box input:focus ~ .bt_clear{ display: block}
.apt_pop .input_box .bt_clear,.apt_pop .input_box input:placeholder-shown ~ .bt_clear, .apt_pop .input_box input:placeholder-shown:focus ~ .bt_clear{ display: none} 
/* 방문차량 */
.visitcar_wrap h3, .ourcar_wrap h3{ font-size: var(--size16); font-weight: 700 } 

.page_head + .guide_bx{ padding-top: 2.564vw; display: flex; flex-direction: column; gap:2.564vw} 

.visitcar_wrap .nodata, .ourcar_wrap .nodata{ border: 1px solid var(--second-line); border-radius:3.333vw; padding:7.692vw 6.410vw; display: flex; flex-direction: column; gap:1.282vw; align-items: center; background: #fff; width: calc(100% + 5.128vw); margin-left: -2.564vw } 
.visitcar_wrap .nodata h4, .ourcar_wrap .nodata h4{ font-weight: 700; font-size: var(--size16)} 
.visitcar_wrap .nodata h4+p, .ourcar_wrap .nodata h4+p{font-size: var(--size13); color: var(--color-secondary) } 
.visitcar_wrap .nodata:before, .ourcar_wrap .nodata:before{ display: block; width: 7.179vw; height: 7.179vw; background: url("../img/front/icon_infomation.svg") no-repeat 50% 50%; background-size: 100%; content: ""; margin-bottom: 2vw; flex: none} 
.nodata .bottom_btn{ width: 100%; padding:2.564vw 0 0 0; transform: none} 
.nodata .bottom_btn button{ font-size: 1rem; height: 11.53vw} 
.visitcar_wrap#list h3, .ourcar_wrap#list h3{ display: flex; align-items: center; gap:1.564vw; margin-bottom: 2.564vw} 
.bt_toggleinfo{ position: relative; z-index: 1; border: 1px solid var(--primary); width:3.589vw; height: 3.589vw; color:var(--primary); font-size:0.75rem; border-radius: 100%  } 

.bt_toggleinfo:before{ content: "i"; display: block; width: 100%; height: 100%; line-height:3.589vw; text-align: center } 
.fav_bx .overf_x{ } 
.visitcar_wrap article+article, .ourcar_wrap article+article{ margin-top: 8.974vw} 
.car_list{ display: flex; flex-direction: column; gap:2.564vw; width: calc(100% + 5.128vw); margin-left: -2.564vw} 
.car_list li{border: 1px solid var(--second-line); border-radius: 3.333vw; padding:3.84vw 3.8vw; display: flex; flex-direction: column;  gap:1.2vw }
.fav_bx  ul.overf_x.car_list{ display: flex; padding-right: 2.564vw;width: calc(100% + 7.692vw); flex-direction: row; gap:2.564vw;} 
.fav_bx .car_list li{ min-width: 64.1vw; width: 100%;border: 1px solid var(--second2); }
.star{ background: url("../img/front/icon_star.svg") no-repeat 50% 50%; width: 6.41vw; height: 6.41vw;filter: grayscale(1); background-size: 90%} 
.star.on{ filter: none} 
.car_list .badgebox{ display: flex; justify-content: space-between; align-items: center; margin-bottom: 2.0512vw} 
.car_list .badges{ display: flex; gap:1.8vw} 
.car_list .tit{ font-size:1.642rem; font-weight: 700; padding-left: 1.8vw } 
.car_list .etcbox{ display: flex; justify-content: space-between; padding-left: 1.8vw; align-items: center} 
.car_list .etcbox p{ font-size: 0.7857rem; color: var(--color-secondary); font-weight: 400; } 
.car_list .etcbox p strong{font-weight: 400} 
.car_list .etcbox p.plan{ color:var(--primary-active-bg)}
.car_list .etcbox .bt_carredg{ color:var(--color); font-size:var(--size13); display: flex; align-items: center; gap:0.8vw  } 
.car_list .etcbox .bt_carredg:after{ content:"" ; width:1.62vw; height: 1.62vw; display: block; border:1px solid var(--color); border-width: 1px 1px 0 0; transform: rotate(45deg)} 
.carlist_bx .car_list .etcbox{ flex-direction: column; gap:0; align-items: flex-start} 
.car_list .etcbox p.time, .car_list .etcbox p.time span { display: flex;gap:1.2vw; align-items: center; justify-content: flex-start} 
.car_list .etcbox p.time span + span:before{ width:1px; height: 3vw; background:var(--color-secondary); display: inline-block; content: ""; vertical-align: middle }
.car_list .etcbox p.time strong{ word-spacing: -0.5px} 
#visitPopup .downupPopup-content{  max-height: calc(100% - 44vw);} 
#visitPopup .sel_wrap{height: calc(100% - 16vw);} 
.downupPopup-content .bottom_btn{padding:2.564vw 0 8vw 0; width: 100%; transform: none} 
.tit.chk_txt span{margin-bottom: 3vw;font-weight: 500;} 
.visitcar_bx .form_bx ul{gap:5.6vw} 
.visitcar_bx .form_bx ul p[class^="guide"] { bottom: -4.5vw}
.visitcar_bx .form_bx li > div label.tit{ margin-bottom: 1.62vw}

[data-id="home"] .visitcar_wrap #revisit .carlist_bx + .bottom_btn{ position: fixed; left: 0; bottom:0; width: 100%; transform: none}  
[data-id="home"] .visitcar_wrap #revisit .carlist_bx .car_list{ padding-bottom:33.845vw } 
/* cctv */
.cctv_wrap .cctv_bx{ width: calc(100% + 5.128vw); transform: translateX(-2.564vw)} 
.video_box{ margin-top:2.564vw; border-radius:var(--radius8); overflow: hidden  }

/* 알람 */
.alarm_list{ display: flex; flex-direction: column; gap:5.128vw} 
.alarm_list li{ } 
.alarm_list .badgebox{ display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 1.0256vw}
.alarm_list .cate{ font-size: var(--size12); color: var(--primary)} 
.alarm_list .date{ display: flex; justify-content: flex-end; align-items: flex-start; gap:1.2vw; flex: none; font-size:0.7857rem;color: var(--color-secondary)} 
.alarm_list .date .badge.new{ width:1.0256vw; height:1.0256vw; min-width: auto; min-height: auto; padding: 0; flex: none;  flex-shrink: 1; display: block; line-height: 1.0256vw} 
.alarm_list .date .badge.new:before{ display: none} 

/* 시설안내*/
.comports_wrap .tab_contents_w{padding-bottom:10vw; } 
.comports_wrap .page_head{ margin-bottom: 2.564vw} 
.comports_list{} 
.comports_list li{ padding: 3.846vw 0 4.8716vw 0; position: relative}
.comports_list li:first-of-type{ padding-top: 0} 
.comports_list li:after{ display: block; width: calc(100% + 2.564vw); height: 1px; background:#e6e6e6;  content: ""; position: absolute; bottom: 0; left:0; transform: translateX(-1.282vw)} 
.comports_list li:before{ content: ""; position: absolute; right: 2.564vw; top: 50%; display: block; border: 2px solid var(--color);  width: 2.4vw;height: 2.4vw;border-width: 2px 2px 0 0;transform: rotate(45deg) translateY(-50%);transform-origin: center center;} 
[data-id="home"] .comports_list li:before{ display: none} 

.mine_wrap  .comports_list li:before{ display: none} 

.comports_list .tit{ font-size: var(--size18); font-weight: 500; margin-bottom:3vw }
[data-id="home"] .comports_wrap .comports_list .tit{ padding-right:18vw } 

.comports_list .detail{ font-size:var(--size12); display: flex; flex-direction: column; gap:1vw } 
.comports_list .detail dl{ display: flex; gap:1.5384vw; align-items: flex-start} 
.comports_list .detail dl dd{ display: flex; flex-direction: column; gap:0vw} 
.comports_list .detail dl dd> span, .comports_list .detail dl dd> div{ display: flex; align-items: center; min-height: 4.451vw} 
.comports_list .detail dl dd> div span{ display: flex; align-items: center} 
.comports_list .detail dl dd> div span+span{ margin-left: 2.564vw} 
.comports_list .detail dl dd span>strong, .comports_list .detail dl dd >div>strong{ font-weight: 400; padding-right: 2vw} 
.comports_list .detail dl dt{ flex: none; gap:1.5384vw; display: flex; align-items: center; } 
.comports_list .detail dl dt:after{ content: ""; width: 1px; height: 2.5vw; background:var(--color); display: block } 
.comports_list .etcbox{ position: absolute; right: 0; top:3.46vw; display: flex; flex-direction: row-reverse; gap:3.333vw} 
.comports_list li:first-of-type .etcbox{ top:-0.386vw}

.comports_list .etcbox button{ width: 6.41vw; height: 6.41vw; background:url(../img/front/icon_call.svg) no-repeat 50% 50%; background-size:6vw; overflow: visible} 
.comports_list .etcbox button.bt_url{background:url("../img/front/icon_url.svg") no-repeat center center; background-size:7vw; filter: brightness(2.1)} 
.comports_list .etcbox button.bt_call{filter:sepia(1) saturate(3)  brightness(1.4)  hue-rotate(130deg);}
i.day{ font-size:  0.643rem; color: #fff; display: inline-block; vertical-align: middle; width:3.333vw; height: 3.333vw; background: var(--primary); line-height:3.333vw; border-radius: 100%; margin: 0 2px 0 0; font-style: normal; text-align: center;  } 
i.day.sat{ background: var(--blue)} 
i.day.sun{ background: var(--red)} 



.comview_bx .detailbox dl dd button.bt_call{ width: 3.333vw; height:3.333vw; background:url(../img/front/icon_call.svg) no-repeat 50% 50%; background-size:3.333vw; overflow: visible;filter:sepia(1) saturate(3)  brightness(1.4)  hue-rotate(130deg);} 
.comview_bx .detailbox dl dd > span > button.bt_call{ margin-left: 8px} 


/* 마이페이지 :  data-id="mypage"  > .home_wrap
-------------------------------------------------------------- */
[data-id="mypage"] h3 {font-size: var(--size16);font-weight: 700;text-align: left;margin-bottom: 2.564vw;}
[data-id="mypage"] .home_wrap header{ display: none} 
.wrap[data-id="mypage"] .home_wrap section{ padding-top: 0; position: relative; } 

[data-id="mypage"] .mycard_bx{ margin-top: 1.7948vw} 
[data-id="mypage"] .menu_bx{ padding: 0 2.564vw} 
[data-id="mypage"] .menu_bx h3{ margin-bottom: 1.282vw}
.mycard_bx .adrs{ font-size: var(--size13)} 
.mycard_bx .type{ font-size: var(--size13); color:var(--color-secondary);} 
.mycard_bx .info{ display: flex; align-items: center; gap:1.5384vw} 
.mycard_bx .info > span{ display:flex; align-items: center;gap:1.5384vw} 
.mycard_bx .info > span + span:before{ content: ""; width: 1px; height:2.8204vw; background: var(--primary); display: block; } 
.mycard_bx .tool_bx{ position: absolute; display: flex;  right: 0; top: 0; } 
.bt_set{ background: url("../img/front/icon_setting.svg") no-repeat center center}
.mycard_bx .tool_bx button{ width: 7.692vw; height: 7.692vw; background-size: 5.3844vw} 
.mycard_bx .tool_bx button:hover{ border-radius: var(--radius8); background-color:var(--gray-light)} 
.menu_list .tit{ display: flex; gap:5.128vw; width: 100%; align-items: center; padding:2.564vw 0  }
.menu_list li i{ width:6.6664vw; display: flex; align-items: center  } 
.menu_list li i img{}
[data-id="mypage"] .home_wrap .banner_bx{ } 

@media all and (max-device-height:750px) {
    [data-id="mypage"] .home_wrap .banner_bx{  position: relative; bottom: auto }
  }


/* 마이페이지 > 서브페이지 : data-id="mypage"  
-------------------------------------------------------------- */
/* 풋터 버튼 위치*/
/*.wrap > .profile_wrap .bottom_btn, .wrap > .sethp_wrap .bottom_btn{ position: absolute; bottom:0} */


/* 프로필 */
.profile_wrap .form_bx li > div label.tit{ font-weight: 500} 
.profile_wrap .mycard_bx{ flex-direction: column; padding-left: 0; justify-content: center; align-items: center; text-align: center; gap:1vw; padding-bottom:6.41vw } 
.profile_wrap .mycard_bx .pic{ position: relative; left: auto; top: auto; width: 21.5376vw; height: 21.5376vw } 
.profile_wrap .mycard_bx .welcome{ padding-top:4.3588vw;font-size: var(--size16); font-weight: 500 } 
.profile_wrap .mycard_bx .welcome >*{font-weight: 500;font-size: var(--size16); color: var(--color) } 
.profile_wrap .mycard_bx .tool_bx{ position: relative; right: auto; top: auto; gap:1.7948vw; align-items: center; justify-content: center; margin-top: 3vw} 
.profile_wrap .mycard_bx .tool_bx button{ min-width:28.204vw; padding: 0 1.2vw; background:var(--gray-dark); white-space: nowrap; font-size: var(--size12); border-radius: var(--radius8); height: 8.974vw } 

.profile_wrap .mycard_bx .tool_bx button:hover{ background: var(--color-secondary)} 
.bt_edit{ background: url("../img/front/icon_edit.svg") no-repeat center center} 
.mycard_bx .bt_del:before{ content: ""; display: block;font-style: normal;font-weight: normal;speak: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;font-family: "remixicon";content:"\EB99"; font-size: 1.24rem; color: #fff; line-height: 5.128vw }  
.mycard_bx .bt_edit,.mycard_bx .bt_del{ width: 5.128vw; height: 5.128vw; background-size: 2.564vw; background-color:#c4c4c4; position: absolute; right: 0; bottom:0; border-radius: 100% } 
.mycard_bx .bt_edit:hover, .mycard_bx .bt_del:hover{ background-color:var(--color-secondary)} 




/* 설정 */
.setting_bx h3{ margin-bottom:5.12vw} 
.setting_list{ display: flex; flex-direction: column; gap:3.846vw} 
.setting_list li{ display: flex; justify-content: space-between; align-items: center; padding: 0 1.2vw} 
.setting_bx + .setting_bx{ margin-top:7.692vw } 
.bt_update{ background:var(--primary); min-width:16.666vw; padding: 0 2vw; height:6.9228vw; border-radius:7.692vw; font-size:0.7857rem; color: #fff;      } 
.bt_update:disabled{ background-color:#c4c4c4} 
.drop_pop{height: auto;  max-height:140vw } 
.drop_pop .downupPopup-content>p{color: var(--red); font-size: var(--size13); text-align: center; padding:2.564vw 0}
.drop_pop .downupPopup-content > .input_box{ margin:5vw 0 } 
/* 약관 */
.wrap .agree_wrap section > article:last-of-type{ padding-bottom:10.256vw } 
.agress_bx .box{position: relative; padding: 3.846vw 1.282vw; font-size: 0.7857rem; /* color: var(--color-secondary) */} 
.agress_bx .box:before{content: ""; position: absolute; left: 0; top: 0; width: calc(100% + 5.128vw); transform: translateX(-2.564vw); height: 100%; display: block; border: 1px solid var(--gray-dark); border-radius: 3.333vw; } 
.agress_bx .box *{ margin: 0; padding: 0;font-size: 0.7857rem; /* color: var(--color-secondary) */} 
.agree_wrap#agree .page_head{ margin-bottom: 2.564vw} 
.agree_wrap .tab-container.type2 .tab_contents_w:before{ display: none} 
.agree_wrap .tab-container.type2 .tab_list_w{ margin-bottom: 0;} 
.agree_wrap .tab-container.type2{ padding-bottom: 10.256vw} 

/* 관리비 */
.toggleinfo.bank{ display: none; flex-direction: column; gap:4.3588vw } 
.toggleinfo.bank.on{ z-index: 5; left: 50%; transform: translate(-50%,5.3vw ); width: 53.844vw; margin-left: -2vw; display: flex !important; flex-direction: column; gap:4.3588vw } 
.toggleinfo .cmt{ white-space: normal; font-size: 0.714rem; display: block} 

.toggleinfo.bank > strong{ font-weight: 500} 
.toggleinfo.bank >.bt_txt{ display: block; color: var(--blue); font-weight: 500; text-align: left; padding: 0;text-decoration: none} 
.toggleinfo.bank >.bt_txt > span{ text-decoration: underline} 
.toggleinfo.bank >.bt_txt > span:first-of-type{ text-decoration: none} 

.fee_wrap .page_head, .feedetail_wrap .page_head{ margin-bottom: 2.564vw}

.fee_wrap section > article, .feedetail_wrap section > article{ width:calc(100% + 5.128vw); margin-left:  -2.564vw; padding-bottom: 10vw} 
/*transform: translateX(-2.564vw)*/


.todayfee_bx{ display: flex; flex-direction: column; gap:2.564vw } 
.todayfee_bx .sort > button.bt_sel{ border-color: var(--primary) !important} 
.feethum_box{ border: 1px solid var(--primary); border-radius: var(--radius8); display: flex; gap:2.564vw; flex-direction: column; padding: 3.846vw 7.0vw} 
.feethum_box .bt_txt{ align-self: flex-end; display: flex; align-items: center; gap:1vw; color: var(--color)} 
.feethum_box .bt_txt i{ display: block; width: 3.5896vw} 
.feethum_box .bt_txt i img{vertical-align: middle} 

.feethum_box .bt_txt:after{ content: ""; display: block; width: 1.064vw; height: 1.064vw; transform: rotate(45deg); border: 1px solid var(--color); border-width: 1px 1px 0 0} 
.feethum_box > .money{ padding: 1vw 0.692vw; border-bottom: 1px solid #e6e6e6; font-size: var(--size12); font-weight: 500; margin-bottom: 0.9vw} 
.feethum_box > .money > strong{ font-size:1.642rem; padding-right: 0.5vw } 
.feethum_box .passed{ display: flex; justify-content: space-between; font-size:0.7857rem; padding: 0 .692vw  } 

.chartlabel_box{ display: flex; justify-content: center; font-size:0.714rem; gap:7.7vw; padding-top: 2vw } 
.chartlabel_box > p{ position: relative; height:4.1024vw; padding-left: 12vw; color: #000} 
.chartlabel_box > p:before{ position: absolute; left: 0; top: 50%; content: ""; width:10.256vw; height:1.5px;border-top: 1.5px dashed var(--color-secondary); transform: translate(0, -50%); margin-top: 0.5px } 
.chartlabel_box > p:after{ position: absolute; left: 0; top: 50%; content: ""; width:2.564vw; height:2.564vw; background: var(--color-secondary); transform: translate(4vw, -50%); border-radius: 100%} 

.chartlabel_box > p.label1:before{border-top: 1.5px solid var(--primary);  } 
.chartlabel_box > p.label1:after{ background: var(--primary)}


.feethum_box .passed .money{ display: flex; align-items: center; gap:0.8vw} 
.feethum_box .passed .up, .feethum_box .passed .dn, .feethum_box .passed .same{ font-size: 0; line-height: 0} 

.feethum_box .passed .up:after{ content: ""; flex: none; display: block; border-bottom: 2.038vw solid  var(--red); border-left: 1.026vw solid  rgba(223, 74, 74, 0);border-right:1.026vw solid  rgba(223, 74, 74, 0); margin-bottom: 1vw; vertical-align: middle} 
.feethum_box .passed .dn:after{ content: ""; flex: none; display: block; border-top: 2.038vw solid  var(--blue); border-left: 1.026vw solid  rgba(223, 74, 74, 0);border-right:1.026vw solid  rgba(223, 74, 74, 0); vertical-align: middle } 
.feethum_box .passed .same:after{ content: "";flex: none; display: block; width: 1.64vw; height: 2px; background:  var(--color); vertical-align: middle}

.nonpay_box{ display: flex; justify-content: space-between; gap:2.564vw} 
.nonpay_box > .box,  .feechart_box{ width: 100%; display: flex; flex-direction: column; gap:2.564vw; border: 1px solid var(--second-line); border-radius: var(--radius8); padding:3.846vw; position: relative } 

.nonpay_box.flex_w{ flex-wrap: wrap} 
.nonpay_box.flex_w > .box{ width: calc(50% - 1.282vw)} 


.nonpay_box h4, .feechart_box h4{ font-weight: 500; font-size: var(--size12)} 
.nonpay_box .money{ text-align: right; font-weight: 500; font-size: var(--size12)} 
.nonpay_box .money > strong{ font-size: var(--size20); font-weight: 500} 

.feechart_box h4{ font-size: 1rem} 
.feechart_box .togglebox{ position: absolute; right: 0; top: 0} 
.togglebox .bt_toggleinfo{ border: none; width: auto; min-width: 4vw; height: 6.9228vw; background:var(--second-line); border-radius:4vw; padding: 0 2vw 0 4vw; display: flex; gap:1vw; align-items: center; color: var(--color)} 
.togglebox .bt_toggleinfo:before{ display: none} 
.togglebox .bt_toggleinfo:after{content: ""; display: block;font-style: normal;font-weight: normal;speak: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;font-family: "remixicon";content:"\EA4E"; font-size: 1rem} 
.togglebox .toggleinfo{ width: auto; transform: none; background:#DFF5F5;; width: 100%; padding: 0 3.846vw  }
.togglebox .toggleinfo.on{ z-index: 6} 
.togglebox .toggleinfo:before{ display: none} 
.togglebox .toggleinfo .chk_txt{ display: block} 
.togglebox .toggleinfo .chk_txt input + span{ background:#DFF5F5;; font-size: var(--size12); padding:1.8vw} 
.togglebox .toggleinfo .chk_txt + .chk_txt{ border-top: 1px solid var(--second2)} 


.feechart_box .togglebox { right: 3.846vw; top: 3.846vw}
.compare_info{ text-align: center; color:#8E8E8E; } 
.compare_info strong{ font-weight: 500} 

.fee_list{ padding:3.846vw; display: flex; flex-direction: column; gap:2.564vw} 
.fee_list dl{ display: flex; justify-content: space-between; align-items: flex-start; font-size: var(--size13)} 
.primary{ color: var(--primary)} 


/* 차량 등록, 가족관리 */

.ourcar_wrap .car_list .tit{ font-size: var(--size20)} 
.etcbox p.carno,  .etcbox p.caruser{ color: var(--color)} 
.board_wrap .etcbox p > strong{ font-weight: 500; position: relative; padding-left:2vw; margin-left: 2vw } 
.board_wrap .etcbox p > strong:before{ position: absolute; width: 1px; height: 2.7vw; display: block; background: var(--color); left: 0; top: 50%; transform: translateY(-50%); content: ""; opacity: 0.57 } 


[data-id="mypage"] [class^="list_"]{ margin-bottom: 2.564vw} 
[data-id="mypage"] [class^="list_"] [class$="_list"] li{ border-color:var(--second2); position: relative} 
[data-id="mypage"] [class^="list_"] [class$="_list"] li .tdbtn{ position: absolute; right:3.8vw; top: 50%; transform: translateY(-50%)} 

/* 입점문의 */
.store_step ol{ display: flex; justify-content: space-between; gap:2vw} 
.store_step ol li{ display: flex; justify-content: flex-start; flex-direction: column; align-items: center; font-size:0.714rem; width: 25%; text-align: center; gap:1vw; letter-spacing: -0.5px; position: relative} 
.store_step ol li i{ display: block; width:8.7176vw }
.store_step ol li i img{ width: 100%} 
.store_step ol li + li:before{ content: ""; width: calc(100% + 1vw); height: 9.2304vw; background:url("../img/front/arrow_01.svg") no-repeat 45% 50%; display: block; position: absolute; left: 0; top: 0; transform: translateX(-50%); background-size: 4.1024vw} 


/* 파일업로드 */
.newfile_box{ position:relative; text-align:left;color:#999;  }
.newfile_box input[type="file"]{ opacity:0;position:absolute; left:0px; top:0px;width: 110px;  height: 100%; z-index: 2}
.newfile_box button.tdbtn{ padding: 0 3.4vw; line-height: 7.1792vw; white-space: nowrap; flex: none}
.file_box .pic_list{ display: flex; gap:2vw;align-items: flex-start; position: relative; margin-top:2.564vw; overflow: hidden; overflow-x: auto; width: calc(100% + 7.692vw); padding-right: 7.692vw;-webkit-overflow-scrolling: touch; } 
.file_box .pic_list::-webkit-scrollbar{ display:none; }
.file_box .pic_list .pic{ width:23.076vw; position: relative; border-radius:var(--radius8); overflow: hidden; background: var(--light-bg-gray); height: 23.076vw; flex: none} 
.file_box .pic_list .pic img{ position: absolute; left: 50%; top: 0; transform: translate(-50%,0)} 
.file_box button.bt_del{ width:3.5vw; height:3.5vw; position: absolute; right: 1.2vw; top: 1.2vw; border-radius:100%; background:rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center} 
.file_box button.bt_del:before{content:"\EB98";font-family: 'remixicon';speak: none;font-style: normal;font-weight: normal;font-variant: normal; text-transform: none;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale; display: inline-block; vertical-align: middle;  text-align: center; color:rgba(255,255,255,0.8);  font-size: 0.7rem}
.file_box .btn_upload{ text-align: center}


/* faq 형 게시판 */
.boardlist_box, .board_wrap .tab-container{ padding-bottom: 10vw} 
.boardlist_box .nodata{ border: none; opacity: 0.7; font-size: var(--size16); min-height: 40vw} 
.boardlist_box .nodata > p{ font-size: var(--size16)}
.boardlist_box .list li{ border-bottom: 1px solid #e6e6e6; padding: 3.3vw 0 3.0vw 0; min-height: 15.384vw;display: flex;flex-direction: column;justify-content: center;  } 
.boardlist_box .tit{ font-size:1rem; font-weight: 500;display: flex; gap:1vw; align-content: center  } 
[data-id="mypage"] .boardlist_box .tit{display: block; } 
.boardlist_box .date, .boardlist_box .etc{ font-size:0.7857rem;color: var(--color-secondary)} 
 .boardlist_box .etc{display: flex; align-items: center; gap:2vw} 


.boardlist_box .etc .writer + .date:before{ width: 1px; height: 2vw; background:var(--color-secondary); content:""; display: inline-block; vertical-align: middle; margin-right: 2vw; flex: none}

.boardlist_box .etc .hit{display: flex;align-items: center;gap: 0.61vw;} 
.boardlist_box .etc .hit:before{content:""; width:3.077vw; height: 2.564vw; display: block; background: url("../img/front/ico_hit.svg") no-repeat 50% 50%; background-size: auto 100%; flex: none}


.boardlist_box .tit strong{ font-weight: 500;    flex: none;} 
.boardlist_box .tit strong.numbering{ font-weight: 700; color: var(--primary); width:9vw; padding-left: 0.75vw; flex-shrink: 1; white-space: nowrap} 
.boardlist_box .badge.new{ width:1.0256vw; height:1.0256vw; min-width: auto; min-height: auto; padding: 0; flex: none;  display: block; line-height: 1.0256vw} 
.boardlist_box .badge.new:before{ display: none} 
.boardlist_box .list li .a{ padding: 3.5vw 0; font-size: var(--size13); display: none} 
.boardlist_box .list li .q{ position: relative; padding-right: 7vw;} 
.boardlist_box .list li .q:after{ content: ""; display: block; width: 5vw; height: 5vw; position: absolute; right: 0; top: 0; display: block;font-family: "remixicon"; font-style: normal; speak: none;  text-decoration: inherit; text-align: center; font-variant: normal;  text-transform: none; -webkit-font-smoothing: antialiased;  -moz-osx-font-smoothing: grayscale;content: "\EA4E";  color: var(--color); line-height:  5vw; font-weight:400; font-size: 1.34rem; transition: .3s} 
.boardlist_box .list li.open .q:after{ transform: rotate(180deg)} 
.board_wrap .tab-container .tab_list_w{ margin-bottom: 2vw} 
[data-id="mypage"] .boardlist_box .badge.new{ background: var(--primary); color: #fff; min-height:3.077vw; padding: 0 1vw; min-width: 3.077vw; border-radius: 1.5vw; font-size: 0.571rem; align-items: center; line-height: 1; position: relative; justify-content: center; display: inline-block; vertical-align: middle ;font-size: 0;display: inline-flex; background:var(--red); align-items: center;margin-left:1.2vw  } 


[data-id="mypage"] .boardlist_box .badge.new:before{ font-size: 0.571rem;  font-size:xx-small; content: "N"; font-family:'Noto Sans KR', sans-serif; position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block; line-height: 1; text-align: center;  } 

[data-id="mypage"] div:not(.tab-container) .boardlist_bx{width: calc(100% + 5.128vw);margin-left: -2.564vw;}


/* 글쓰기 */
.comwrite_bx .form_bx >ul{ gap:6.95vw} 
.form_bx li > div label.tit span.guide{ font-size: var(--size12); color: var(--color-secondary)}
.comwrite_bx .form_bx + .agree_box{ margin-top:6.95vw } 
.comwrite_bx .form_bx + .agree_box .form_list{ padding-left: 0} 


/* 소통공간 : data-id="commu"  
-------------------------------------------------------------- */
[data-id="commu"] .home_wrap .tab_list_w{ margin-bottom: 2.564vw} 
[data-id="commu"] .home_wrap .tab-container{ margin-top: 2.564vw; z-index: 2} 

[data-id="commu"] header .tool{gap: 1.6vw;}
[data-id="commu"] header .tool button{ width:7.692vw; height: 7.692vw } 
header .tool button.bt_sch{background: url("../img/front/btn_search2.svg") no-repeat 50% 50%;background-size: 4.602vw;} 
header .tool button.bt_mine{background: url("../img/front/btn_user.svg") no-repeat 50% 50%;background-size:4.0vw;}
.sch_bx{ display: none; transition:all .2s .2s; opacity: 0; position: fixed; left: 0; top: 0; width: 100%; background:#fff;height: 15.384vw; z-index: -1; box-shadow:  0 0vw 4vw rgba(0,0,0,0.2)} 
.sch_bx.active{display: block; opacity: 1; z-index: 5} 

.sch_box{ width: 100%; background:#fff;height: 100%; display: flex; align-items: center;padding: 0 5.128vw 0 13.333vw; justify-content: space-between; position: relative; z-index: 2} 

.sch_box  button.bt_sch{background: url("../img/front/btn_search2.svg") no-repeat 50% 50%;background-size: 4.602vw; width:7.692vw; height: 7.692vw} 
.sch_box .bt_clear{ position: absolute; right:14vw ; top: 0; height: 100%} 
.sch_box:hover input:valid ~ .bt_clear, .sch_box input:focus ~ .bt_clear{ display: block}
.sch_box input:valid ~ .bt_sch{ display: block; filter: sepia(0.25) saturate(4) hue-rotate(115deg)}
.sch_box  .bt_clear, .sch_box input:placeholder-shown ~ .bt_clear, .sch_box input:placeholder-shown:focus ~ .bt_clear{ display: none} 
.sch_box input[type="text"]{ width: calc(100% - 15.6vw); border: none !important; font-size: var(--size16)} 
.sch_bx .bt_back{ position: absolute; left:  5.128vw; top: 50%; transform: translateY(-50%); opacity: 0.47; z-index: 3} 
.sch_bx .dimmed{ background: rgba(0,0,0,0.5); width: 100%; height: 100%; position: fixed; left: 0; top: 0; z-index: 1} 

.nodata.sching{ position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%)} 
[data-id="commu"] .home_wrap .tab_contents > div{ position: relative} 
[data-id="commu"] .home_wrap .tab_contents > div +div{  margin-top: 11.5vw } 
[data-id="commu"] .home_wrap .tab_contents > div.hot_box +div{margin-top: 4.3588vw;}
[data-id="commu"] .commu_list, .board_list { border: none; padding: 0} 
[data-id="commu"] .commu_list li,  .board_list li{  padding-left: 0; padding-right: 19vw} 
[data-id="commu"] .commu_list .cate,  .board_list .cate{ color: var(--color); flex-wrap: wrap; line-height: 1 }
[data-id="commu"] .commu_list .cate >strong,  .board_list .cate >strong{ font-weight: 500} 
[data-id="commu"] .badge:not(.new), .board_list .badge:not(.new), .board_head .badge:not(.new){ height:5.3844vw; border-radius: 3vw; padding: 0 2.3vw; line-height:1; white-space: nowrap; font-size: 0.714rem;  font-weight:200; align-items: center; justify-content: center; display: flex; gap:0 } 
.badge.frendly{ background:#E0F0FF; color:rgba(4, 91, 171, 1);   } 
.badge.etc{ background:var(--gray-light-bg); color:var(--color) } 
.badge.sell, .badge.step02{ background:var(--primary-light-bg); color:var(--primary-active-bg)} 
.badge.buy, .badge.step01,.badge.pay { background:#E0F0FF; color:#045BAB;} 
.badge.free{ background:#FEF2D3; color: #685525;} 
.badge.sellok{ background:#fff; color:var(--color); border: 1px solid var(--color-secondary)} 
.badge.scrt{ font-size: 0 !important; background: url("../img/front/icon_lock.svg") no-repeat center center; background-size: 3.3332vw; border-radius: 0 !important; width:3.3332vw; height: 5.3844vw;  } 

[data-id="commu"] .commu_list li .tit, .board_list li .tit { font-size: var(--size12); line-height: 1.3} 
[data-id="commu"] .commu_list li .pic, .board_list li .pic{ right: 0} 

[data-id="commu"]  p.money{ font-size: var(--size12);line-height: 1.3; font-weight: 700} 
[data-id="commu"] .commu_list li a,.board_list li a{ gap:1.2vw} 

[data-id="commu"] .commu_list .etc .writer + .date:before{} 
[data-id="commu"] .commu_list .etc, .comview_bx .etc, .board_list .etc{ gap:1.5vw} 
[data-id="commu"] .commu_list .etc .date, .comview_bx .etc .date,  .board_list .etc .date{ white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } 
.commu_list li a .etc .writer, .comview_bx .etc .writer, .board_list li a .etc .writer{ max-width:21vw; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } 
.commu_list li .tit .badge.new, .board_list li .tit .badge.new{ margin-left:1.2vw} 
[data-id="commu"] .home_wrap .tab_contents > div .bt_more{ position: absolute; right: 0; top: 0; z-index: 4} 
[data-id="commu"] .commu_list, .board_list { position: relative} 
[data-id="commu"] .commu_list li .pic .badge.sellok, [data-id="home"] .commu_list li .pic .badge.sellok{ position: absolute; left: 0; bottom:0; background: rgba(0,0,0,0.7); padding: 1vw; color: #fff; width: 100%; border-radius: 100%; text-align: center; border-radius: 0; border: none} 

.board_list li{ padding-left: 0 !important; padding-right: 27vw !important} 
.board_list li .pic{ width: 22.0504vw; height: 22.0504vw}
.board_list .badges{ margin-bottom: 0.7vw} 
.board_list li a {gap: 1.28vw;}
.commu_list li.type3{ padding-right: 0; display: flex; width: 100%} 
.commu_list li.type3 a{ flex-direction: row; padding-right: 0; justify-content: space-between; overflow: hidden; width: 100%} 
.commu_list li.type3 a > div{ display: flex; flex-direction: column; width: 100%; gap: 1.2vw; min-width: calc(100% - 19vw)} 
.commu_list li.type3 a .pic{ position: relative; right: auto; top: auto !important; flex: none} 
/* 인기글 */
.hot_box{ padding-top:3vw; position: relative; padding-bottom:4.3588vw } 
.hot_box:before{ position: absolute; left: 0; top: 0; background:#f8f8f8; content: ""; display: block; width: calc(100% + 10.256vw); height: 100%; transform: translate(-5.128vw,0);} 
[data-id="commu"] .home_wrap h4{ font-size: var(--size16); font-weight: 700; margin-bottom: 2.564vw; position: relative; z-index: 3} 
.hot_box .commu_list{ display: flex; overflow: hidden; overflow-x: auto; flex-direction: row; gap:1.282vw; border: none; padding: 0 5.128vw 0 0; width: calc(100% + 5.128vw) } 
.hot_box .commu_list::-webkit-scrollbar{ display:none; }
.hot_box .commu_list li{ width: 57.69vw; flex: none; padding: 0; background: #fff; padding: 36.6652vw 2.564vw 2.564vw 2.564vw; border-radius: var(--radius8); overflow: hidden; border: none !important;} 
.hot_box .commu_list li .pic{ position: absolute; left: 0; top: 0; width: 100%; height: 34.1012vw; border-radius: 0; margin: 0} 
.hot_box .commu_list .tit{font-weight:400; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: normal; min-height: 7.997116vw}
.hot_box .commu_list .cate{ height:5.3844vw; justify-content: flex-end; width: 100%; position: relative } 
.hot_box .commu_list .cate .badge:not(.new){ line-height: 1.7} 
.hot_box .commu_list .cate strong{ position: absolute; left: 0; top: 50%; transform: translate(0,-50%)} 
.hot_box .commu_list li a .etc .writer{ max-width: 10.72vw} 
[data-id="commu"] .tab_contents.new_bx{ padding-top: 2.3vw}
.hot_box .nodata, .hot_box .nodata > *,.hot_box .nodata:before{ position: relative; z-index: 2} 
.hot_box .nodata:after{ content: ""; position: absolute; left: 0;top: 0; background:#fff; width: 100%; height: 100%; width: calc(100% + 10.256vw); height: calc(100% + 16.1532vw); transform: translate(-5.128vw,-11.538vw); z-index: 0}
.hot_box .nodata p{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; padding-top: 11.179vw} 
.hot_box .nodata:before{ margin-bottom:5.65vw} 
.hot_box .nodata p:before{ position: absolute; left: 0; top: 0; content: ""; width: 100%; height: 100%; display: block; border: 1px solid var(--second-line); border-radius:3.333vw; }
[data-id="commu"] .tab_contents:not(.new_bx) .nodata, .list_box .nodata{ min-height: 35vw; opacity: 0.75} 
.new_bx.tab_contents .nodata{ border: 1px solid var(--second-line); border-radius:3.333vw; min-height: 26.922vw } 
.new_bx.tab_contents .nodata p{ font-size:var(--size12); color: var(--color-secondary) } 
.new_bx.tab_contents .nodata:before{ opacity: 0.5} 
.bt_comm_writer{ position: fixed; right: 5.128vw; bottom:25vw; z-index:5; width: 10.256vw; height: 10.256vw; background: var(--primary) url("../img/front/comm_writer.svg") no-repeat 50% 50%;    transition: all 0.3s; border-radius: 100%; box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.2); background-size:4.736vw } 
.bt_comm_writer.top{ bottom:21vw} 
.bt_comm_writer.max-top{ bottom:40vw} 
[data-id="commu"] .home_wrap .filter,.list_bx .filter{ display: flex; overflow: hidden; overflow-x: auto;gap:1.282vw; width: calc(100% + 5.128vw); margin-bottom: 2.564vw; padding-right: 5.128vw} 
[data-id="commu"] .home_wrap .filter::-webkit-scrollbar,.list_bx .filter::-webkit-scrollbar{ display:none; }
[data-id="commu"] .filter .chkbtn,.list_bx .filter .chkbtn{ flex: none; min-width:25vw; padding: 0; display: flex; align-items: center; width: auto; } 
[data-id="commu"] .filter .chkbtn input + span,.list_bx .filter .chkbtn input + span{ padding: 0 3.589vw; width: 100%; height:8.974vw; line-height: 8.974vw; font-size: var(--size12); background:var(--gray-light-bg); text-align: center; border: none} 
[data-id="commu"] .filter .chkbtn input:checked + span,.list_bx .filter .chkbtn input:checked + span{ background: var(--primary); color: #fff; font-weight: 500}
[data-id="commu"] .filter .chkbtn input + span:before,.list_bx .filter .chkbtn input + span:before{ display: none} 
[data-id="commu"] .home_wrap .sort > button.bt_sel, .mine_bx .sort > button.bt_sel{ border-color: var(--primary) !important} 
[data-id="commu"]  .filterbox + div, .list_bx .filterbox + div{ margin-top:4.3588vw !important} 
.list_bx .filterbox .bt_align{position:relative;width:100%;height:11.538vw;padding:0 7.692vw 0 2.564vw ;border:1px solid var(--primary);text-align:left;background: url("../img/select.svg") no-repeat right 6vw top 50%;box-sizing:border-box; background-size: 3.333vw;border-radius: 2.0512vw;font-size: 1rem;}

.mine_wrap .list_bx .filter{ margin-left: -2.564vw;    width: calc(100% + 10.256vw);} 
.mine_wrap .list_bx .list_box{ width:calc(100% + 5.128vw); margin-left: -2.564vw } 

[data-id="commu"] .commu_list.card_list{ flex-direction: row; flex-wrap: wrap; gap:4vw 0vw; justify-content: space-between; align-items: flex-start} 
[data-id="commu"] .commu_list.card_list li{ width: calc(50% - 1.2vw); border: none; padding-top: 30vw} 
[data-id="commu"] .commu_list.card_list li,[data-id="commu"] .commu_list.card_list li+li{ padding: 0; padding-top: 30vw} 
[data-id="commu"] .commu_list.card_list + .commu_list{ margin-top: 5vw} 

.commu_list.card_list li .pic{ position: absolute; left: 0; top: 0; width: 100%; height: 28.1012vw; border-radius: 0; margin: 0} 
.commu_list.card_list .tit{font-weight:400; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: normal; min-height: 7.997116vw}
.commu_list.card_list .cate{ height:5.3844vw;  width: 100%; position: relative } 
.commu_list.card_list .cate .badge:not(.new){ line-height: 1.7} 
.commu_list.card_list .cate .badge.etc{ position: absolute; right: 0; top: 50%; transform: translate(0,-50%)} 
.commu_list.card_list .cate strong{ } 
.commu_list.card_list .etc{ display: block;} 

.commu_list.card_list li a .etc>*{ float: left; display: block; align-items: center; margin-right: 2vw} 
.commu_list.card_list li a .etc .hit{  clear: both} 
.commu_list.card_list li a .etc .writer{ max-width: 14.102vw; display: block} 
.commu_list.card_list li a .etc .date{ white-space: normal; overflow: visible; display: block } 
.commu_list.card_list li a .etc .hit, .commu_list.card_list li a .etc .rply{ display: flex} 



/* 글작성 */
[data-id="commu"] #write .page_head h2 + p{ font-size: var(--size12)} 
.comwrite_bx .chkbtn_box .flex, .inout_bx .chkbtn_box .flex{padding-left: 2.0524vw;}
.comwrite_bx .chk, .sel_wrap .chk, .inout_bx .chk{ width: 100%} 
.comwrite_bx .chk input[type="radio"] + span:after, .sel_wrap .chk input[type="radio"] + span:after, .inout_bx .chk input[type="radio"] + span:after{ display: none} 
.comwrite_bx .chk input[type="radio"] + span:before, .sel_wrap .chk input[type="radio"] + span:before, .inout_bx .chk input[type="radio"] + span:before{ width: 4.8716vw; height: 4.8716vw; background: #fff; border:0.8vw solid var(--second-line)}
.comwrite_bx .chk input[type="radio"]:checked + span:before, .sel_wrap .chk input[type="radio"]:checked + span:before, .inout_bx .chk input[type="radio"]:checked + span:before{ border-color: var(--primary)} 
.comwrite_bx .chk input[type="radio"]:disabled + span:before, .sel_wrap .chk input[type="radio"]:disabled + span:before, .inout_bx .chk input[type="radio"]:disabled + span:before{ border-color: var(--color-secondary); background:var(--second-line)  } 
.comwrite_bx .chk input[type="radio"]:disabled + span, .sel_wrap .chk input[type="radio"]:disabled + span, .inout_bx .chk input[type="radio"]:disabled + span{ color:var(--color-secondary); } 
.comwrite_bx .form_bx li > div+div, .inout_bx  .form_bx li > div+div{ margin-top: 4.64vw} 
.form_bx li .char_chk{ position: absolute; right: 3px; bottom:3px; font-size:0.7142rem; padding: 2vw; background: rgba(255,255,255,0.5)} 
.form_bx li .char_chk > strong{ font-weight:400; color: var(--red) } 

/* 글보기 */

.comview_bx, .comreply_bx{ width: calc(100% + 5.128vw); transform: translateX(-2.564vw)} 
.comview_bx .box, .comreply_bx .box{ border: 1px solid var(--second-line); border-radius: 3.333vw; padding:5.128vw; font-size: var(--size12) } 
.comview_bx .cate, .comreply_bx .cate{ display: flex; align-items: center; gap:1.2vw; flex-wrap: wrap; padding-right: 8vw } 
.board_img{ overflow: hidden; position: relative; margin-bottom: 3.5896vw; border-radius:2.3076vw } 
.board_img .swiper-pagination{}
.board_img .swiper-pagination-bullet{ background: #DADADA; width:1.1538vw;height:1.1538vw } 
.board_img .swiper-pagination-bullet-active{ background:#fff}
.board_img .swiper-slide img{ min-width: 100%} 
.board_head{ display: flex; flex-direction: column; gap:1vw; position: relative} 
.board_head + .board_img{margin-top: 2.564vw;} 
.comview_bx p.etc, .comreply_bx  p.etc{font-size: 0.78rem;display: flex;align-items: center;gap: 1.5vw; color:var(--color-secondary); min-height:5.3844vw; }

[class$="view_bx"] .togglebox, [class$="reply_bx"] .togglebox{ position: absolute; right: 0; top: -0.8vw} 
[class$="view_bx"] .togglebox .bt_toggleinfo, [class$="reply_bx"] .togglebox .bt_toggleinfo{ padding:0; background: none; line-height: 1; align-items: flex-start; border-radius: var(--radius8)} 
[class$="view_bx"] .togglebox .bt_toggleinfo:after, [class$="reply_bx"] .togglebox .bt_toggleinfo:after{ content:"\EF78"; font-size:1.6rem; color: var(--color-secondary); width: 100%; height: 100% } 
[class$="view_bx"] .togglebox .toggleinfo,[class$="reply_bx"] .togglebox .toggleinfo{ min-width:28.204vw; left: auto; right: 0; top: 5vw; padding: 1vw 3.846vw; } 

[class$="view_bx"] .togglebox .toggleinfo > *,[class$="reply_bx"] .togglebox .toggleinfo > *{ display: block; text-align: center; padding:2.6vw 5vw; width: 100%; line-height: 1; white-space: nowrap } 
[class$="view_bx"] .togglebox .toggleinfo > * + *,[class$="reply_bx"] .togglebox .toggleinfo > * + *{ border-top: 1px solid var(--second2)} 

.board_txt{ margin-top:2.564vw } 


.comview_bx +.comreply_bx, .comview_bx +.comview_bx{ margin-top: 3.846vw;} 
.comreply_bx .reply, .comreply_bx .reply2{ position: relative} 


.comreply_bx h3,.comview_bx h3, .goods_bx h3{ font-size: var(--size16); font-weight: 700; margin-bottom: 2.564vw; padding-left: 2.564vw} 
.comreply_bx li{ padding: 2.564vw} 
.comreply_bx li + li{ border-top: 1px solid #e6e6e6;} 
.comreply_bx .box{ padding: 2.564vw 2.564vw}
.comreply_list li > div{ display: flex; flex-direction: column; gap:1vw} 
.comreply_bx .writer{ font-size: var(--size12); color: var(--color); font-weight: 500;} 
.comreply_bx .date{ font-size:0.7857rem; color:var(--color-secondary)} 

.reply2{ background:var(--gray-light-bg); border-radius: var(--radius8); padding: 2.564vw 3.4vw; margin-left:5.6408vw; width: calc(100% - 3.564vw ); position: relative; margin-top: 2.564vw; position: relative  } 
.reply2:before{ position: absolute; left: -5.6408vw; top: 0; width: 2.564vw; height: 2.564vw; background: url("../img/front/icon_reply.svg") no-repeat 50% 50%; display: block; content: ""; background-size: 2.564vw} 
[class$="view_bx"] .reply2 .togglebox, [class$="reply_bx"] .reply2 .togglebox{ top: 2vw; right: 2vw} 
.board_wrap#view{ padding-bottom: 30vw} 
.board_wrap#view .bottom_btn{ padding: 0; position: fixed; left: 0; bottom:0;  box-shadow: 0 -2.564vw 2.564vw rgba(0,0,0,0.05); transform: none; gap:8vw; justify-content: space-between} 
.board_wrap#view .bottom_btn button{ background: none; font-size: var(--size12);height: 16.9224vw; padding:2.6vw 5.128vw 3vw 7.41vw; text-align: left; width:28.948vw; position: relative  }
.board_wrap#view .bottom_btn button.bt_list{background: url("../img/front/btn_list.svg") no-repeat 5.128vw 50%; background-size: 3.5896vw; padding-left:10.41vw} 
.board_wrap#view .bottom_btn button.bt_reply{background: url("../img/front/btn_reply.svg") no-repeat 5.128vw 50%; background-size: 3.5896vw; text-align: right; padding-left: 0 ; width: 26.6vw} 
.board_wrap#view .bottom_btn button.bt_list:hover:before{ position: absolute; left: 0; top: 0; width:50vw; height: 100%;background: linear-gradient(-90deg, #FFFFFF 0%, #DFF5F5 100%); display: block; content: ""; z-index: -1 } 
.board_wrap#view .bottom_btn button.bt_reply:hover:before{position: absolute; right: 0; top: 0; width:50vw; height: 100%;background: linear-gradient(90deg, #FFFFFF 0%, #DFF5F5 100%); display: block; content: ""; z-index: -1} 

.board_wrap#view ~ .topbtn.fixed{ bottom: 22vw} 
.comview_bx .detail{ border: 1px solid #F2F2F2; border-width: 1px 0; padding: 2.564vw 0} 
.comview_bx .detail dl{ display: flex; font-size: 0.7857rem; gap:1.2vw} 
.comview_bx .detail dd{}
.comview_bx .detail dd:before{ width: 1px; height: 2.4vw; background:var(--color); content:""; display: inline-block; vertical-align: middle; margin-right: 1vw; flex: none}

.board_img .badge.sellok{ position: absolute; left: 0; bottom: 0; width: 100%; z-index:11; border-radius: 0; border: none; background: rgba(0,0,0,0.7); color: #fff} 

.write_reply{ position: fixed; width: 100vw; height: 100%; z-index: 30;  left: 0; top: 0; display: none} 
.write_reply.active{ display: block} 
.write_reply .dimmed{background: rgba(0,0,0,0.5); position: fixed; width: 100vw; height: 100%; left: 0; top: 0; z-index: 31} 
.reply_input{ position: fixed; bottom:0; left: 0; width: 100%; height:14.102vw; background: #fff; padding: 0 5.128vw 0 0; display: flex; justify-content: space-between; border-radius: 3.333vw 3.333vw 0 0; z-index: 32} 
.reply_input [type="text"]{ height: 100% !important; width: 100%; border: none !important} 
.reply_input .weite_ok{ font-weight: 500; color: var(--color-secondary); } 
.reply_input [type="text"]:valid + .write_ok{ color: var(--primary)} 


/* 작성글 */

.board_wrap#list .tab-container .tab_list_w{ margin-bottom: 2.564vw} 
.board_wrap#list .tab-container{ width: calc(100% + 5.128vw); margin-left: -2.564vw } 
/*.mine_bx .list_box{ padding: 0 2.564vw}*/


/* 민원보수 : data-id="complain"  
-------------------------------------------------------------- */
.align_pop{ max-height:90vw } 
.align_pop .downupPopup-content h4{ margin-bottom: 2.564vw} 
.align_pop .chkbtn_box{ display: flex; padding: 0 3vw}
.align_pop .sel_wrap +  .sel_wrap{ border-top: 1px solid #e6e6e6; margin-top: 3.8vw; padding-top:3.8vw } 
.align_pop .sel_list{ gap:1vw}
.gnb_dimmed{ position: fixed; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 17} 
.main_menu li .depth2{ display: none} 
.main_menu li.on{ position: relative} 
.main_menu li.on .depth2{ position: absolute; left: 0; top: -20vw; display: flex; flex-direction: row; gap:2.564vw} 
.main_menu li.on .depth2:before{ display: none} 
.main_menu li.on .depth2 button{ min-width: 34.8704vw; height: 14.3584vw; white-space: nowrap; padding: 0 5.128vw; background: var(--primary-light-bg); border-radius:var(--radius8); font-size: 1rem; color:var(--primary-active-bg); font-weight: 700; display: flex; flex-direction: row; gap:2vw; align-items: center; justify-content: center   } 
.main_menu li.on .depth2 button:hover{ background: #AFC6C6} 
.main_menu li.on .depth2 button:after{ display: block; content: ""; width:5.128vw; height: 5.128vw; background: url("../img/front/2depth_complain01.svg") no-repeat 50% 50%; background-size: 5.128vw} 
.main_menu li.on .depth2 button.bt_complain02:after{ width: 4.6152vw; height: 4.6152vw; background-image: url("../img/front/2depth_complain02.svg"); background-size: 4.6152vw} 
/* 보기 */
.board_head .badges{ margin-bottom: 1vw} 
.comreply_bx .nodata, .result .nodata {opacity: 0.75;border: 1px solid var(--line-gray);border-radius: 3.333vw;padding: 5.128vw;font-size: var(--size12);} 
.comreply_bx .nodata p, .result .nodata p { font-size: var(--size12); } 
.comreply_bx .nodata:before,.result .nodata:before{ opacity: 0.6} 

/* 보수 리스트 */
.filterbox h4{ margin-bottom: 2.564vw; position: relative; } 
.filterbox h4 .during.on{ z-index: 5} 
.toggleinfo.during{ transform: translateX(4vw)} 
.toggleinfo.during:before{ left: 10vw} 
.toggleinfo.during > strong{ display: block; font-weight: 500} 
.list_bx .filter.during .chkbtn{ min-width: 20vw} 
.repair_list{ padding-bottom: 30vw} 
.repair_list li{ border: 1px solid var(--second-line) !important; border-radius: 3.333vw; padding:3.846vw 3.846vw 1.5vw 3.846vw !important } 
.repair_list .orderbox, .repair_list .replybox{ position: relative} 
.repair_list .orderbox{} 
.repair_list .replybox{ border-top: 1px solid #e6e6e6; padding-top:3.5vw; margin-top: 3.333vw;font-size:0.7857rem  } 
.repair_list .orderbox .pic{ width:19.4864vw; height: 19.4864vw; right: 1.282vw; top:11.564vw !important;    border-radius: var(--radius8); } 
.repair_list .orderbox a{  width: 100%; height: 100%;  display: flex; overflow: hidden; padding-right: 25vw} 
.repair_list .orderbox a + .btnbox { margin-top: 2vw; display: flex; justify-content: flex-end;    border-top: 1px solid #e6e6e6;} 
.repair_list .orderbox a + .btnbox button{ padding: 2.564vw 2.5vw; font-weight: 500; font-size: var(--size13)}
.repair_list .orderbox a + .btnbox button.colors{ color: var(--primary)} 



.repair_list .tit{font-weight:400; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: normal; min-height: 7.997116vw; white-space: normal} 
.repair_list .etc{ flex-direction: column; align-items: flex-start; gap:0.5vw; color:var(--color-secondary); margin-top: 1.2vw} 
.board_list .badges{  margin-bottom: 1.2vw} 


.repair_list .replybox .btnbox{ margin-top: 2vw; display: flex; justify-content: flex-end} 
.repair_list .replybox .btnbox button{ padding: 2.564vw 2.5vw; font-weight: 500; font-size: var(--size13)}
.repair_list .replybox .btnbox button.colors{ color: var(--primary)} 

.repair_list .orderbox p:not(.badges){ padding-left: 1.282vw} 

.repair_list .replybox .company{ font-weight: 500} 
.repair_list .replybox > p:not(.pic){ padding-left: 19vw; } 
.repair_list .replybox > p + p{ margin-top: 0.8vw} 
.repair_list .replybox .pic{ right: auto; left:1.282vw; width: 14.6148vw; height: 14.6148vw; border: 1px solid #e6e6e6; top: 3.333vw !important; margin-top: 0 !important; font-size: 0; line-height: 0; position: absolute;    border-radius: var(--radius8);} 
.repair_list .replybox p.wait{ text-align: center; font-size: var(--size13); color:var(--color-secondary); padding: 2vw} 
.repair_list p.date{color:var(--color-secondary); display: flex } 
.repair_list p.date > span{ position: relative; display: flex; gap:1.5vw; align-items: center; margin-left: 1.5vw } 
.repair_list p.date > span:before{ content: ""; width: 1px; height:2.2vw; background:var(--color-secondary)} 
.repair_list p.date > strong{ font-weight: 400} 
.repair_list .contact{ position: absolute; right: 1.282vw; top:3.333vw; display: flex; gap:2vw} 
.repair_list .contact button{ width:5.6408vw; height: 5.6408vw; background: url("../img/front/icon_message.svg") no-repeat center center; background-size:4.1024vw; flex: none } 
.repair_list .contact button.bt_call{ background-image: url("../img/front/icon_call.svg"); background-size:3.7178vw }  
.repair_list .replybox .result p.red,
.repair_list .replybox .result p.blue{ text-align: center; padding: 2vw} 
.repair_list .badges .badge{ min-width:14.3vw } 
.badge.repair01, .badge.book01{ background: #E0F0FF; color:#045BAB } 
.badge.repair02{ background: #FEF2D3; color:#685525 } 
.badge.repair03, .badge.book03{ background: #EBEBEB; color:#4E4E4E } 
.badge.repair04, .badge.book04{ background: #FDEDED; color:#DF4A4A } 
.badge.repair05{ background: #FDEDED; color:#DF4A4A } 
.badge.book02, .badge.free{background: #DFF5F5; color:#338383 }


.badge.as{ background:#fff; color:#4E4E4E; border: 1px solid #A7A7A7} 
.cancel_pop .downupPopup-content{height: calc(100% - 13vw);}
.cancel_pop .form_bx li+li{ margin-top:3.2vw}
.cancel_pop .form_bx li .agree_box{ gap:1vw; flex-direction: row; justify-content: space-between; font-size: var(--size13)} 
.cancel_pop .form_bx li .agree_box +  .agree_box{ margin-top: 2vw} 
.cancel_pop .form_bx { margin-bottom: 3vw} 
.cancel_pop .form_bx .tit{ margin-bottom: 2.564vw; display: block} 
.cancel_pop .form_bx li [type="text"]:disabled, .cancel_pop .form_bx li [type="text"]:readonly{ background:var(--bg-gray); color: var(--color-secondary) } 
@media (max-height: 800px){
.downupPopup.cancel_pop {height: 55%;}
}
.comview_bx.repair_list{ padding-bottom: 0} 
.comview_bx.repair_list .replybox{ border: 1px solid #e6e6e6;    padding: 5.4vw 3.846vw 1.5vw 5.128vw !important; border-radius: 3.333vw; margin-top: 2.564vw} 
.comview_bx.repair_list .replybox .pic{ left:5.128vw; top:5vw !important} 
.comview_bx.repair_list .contact{ right:5.128vw;top:5vw }
.comview_bx.repair_bx .box{ padding:3.846vw } 
.comview_bx.repair_bx .box .board_head p:not(.badges){ padding-left:1.282vw } 
.comview_bx.repair_bx .box .board_head p.badges{  padding-right: 8vw; flex-wrap: wrap; margin-bottom: 1.82vw}
.comview_bx.repair_bx .box .board_head{ gap:1.2vw; font-size: var(--size12)} 
.comview_bx.repair_bx .box .board_head div.etc{ flex-wrap: wrap; justify-content: space-between; display: flex; gap:0} 
.comview_bx.repair_bx .box .board_head p.date{color:var(--color-secondary); display: flex; font-size: 0.7857rem; margin-top: 1vw } 
.comview_bx.repair_bx .box .board_head p.date > span{ position: relative; display: flex; gap:1.5vw; align-items: center; margin-left: 1.5vw } 
.comview_bx.repair_bx .box .board_head p.date > span:before{ content: ""; width: 1px; height:2.2vw; background:var(--color-secondary)} 
.comview_bx.repair_bx .box .board_head p.date > strong{ font-weight: 400; color: var(--color)} 
.comview_bx.repair_bx .box .board_txt{ padding-left: 1.282vw} 
.comview_bx.repair_bx .box .board_head >.bt_modi{ width: 6.1536vw; height: 6.1536vw; display: block; background: url("../img/front/icon_pencil.svg") no-repeat 50% 50%; background-size:3.5896vw; position: absolute; right: 0; top: 0 } 

[data-id="complain"] .home_wrap .repair_list .orderbox a{ position: relative} 
[data-id="complain"] .home_wrap .repair_list .orderbox a .pic{ top: auto !important; bottom: 0 !important} 



.ourcar_wrap .page_head h2+div{ position: relative} 
.ourcar_wrap .toggleinfo.during{ left: auto; right: 0; z-index: 3}
.ourcar_wrap .toggleinfo.during:before{ left: 27vw} 
.carlist_bx.pay_car > h3{position: relative; z-index: 2} 
.ourcar_wrap .carlist_bx.pay_car > h3 .toggleinfo.during{ right: auto; left: 0;font-weight: 400} 
.ourcar_wrap .carlist_bx.pay_car > h3 .toggleinfo.during:before{ left: 13vw} 

.homecar_bx{ position: relative;  padding:7.692vw 0 6.410vw 0; font-size: var(--size16); font-weight: 500; text-align: center} 
.homecar_bx:before{ content: ""; display: block; background:#f8f8f8; width: 100vw; height: 100%; position: absolute; left: 0; top: 0; z-index: -1; ; transform: translate(-7.692vw)} 
.homecar_bx .txt{ font-size: var(--size12); display: flex; align-items: center; justify-content: center; gap:2vw; margin-top: 3.4vw} 
.homecar_bx .txt span{ display: flex; align-items: center; gap:2vw} 
.homecar_bx .txt span+span:before{content: "";width: 1px;height: 2.2vw;background: var(--color-secondary);} 
.homecar_bx p strong{ color: var(--primary); font-weight: 500 } 
.ourcar_wrap .carlist_bx{ width: calc(100% + 15.384vw); margin-left: -7.692vw;padding: 0 5.128vw; overflow: hidden; position: relative; padding-bottom:6vw } 
.ourcar_wrap .carlist_bx .swiper-wrapper{ } 
.ourcar_wrap .carlist_bx .list_box{ padding: 4.539vw 5.128vw 5vw 5.128vw; border: 1px solid var(--primary); border-radius: 3.333vw; position: relative; min-height: 28.460vw; } 
.ourcar_wrap .carlist_bx .list_box .badge{ height:5.3844vw; border-radius: 3vw; padding: 0 2.3vw; line-height:1; white-space: nowrap; font-size: 0.714rem;  font-weight:200; align-items: center; justify-content: center; display: flex; gap:0; position: absolute; right: 5.128vw; top: 4.539vw } 
.ourcar_wrap .carlist_bx .list_box .tit{ font-size: var(--size20); font-weight: 700; margin-bottom: 2vw; padding-right:20vw;white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } 
.detailbox dl{ display: flex; gap:3vw; font-size: var(--size12); align-items: center } 
.detailbox dl dd{display: flex; gap:3vw; align-items: center} 
.detailbox dl dd:before{content: "";width: 1px;height: 2.2vw;background: var(--color);} 
.ourcar_wrap .carlist_bx .bt_cardel,.ourcar_wrap .carlist_bx .bt_redg{padding: 2.564vw 2.5vw;font-weight: 500;font-size: var(--size13); position: absolute; right: 3.35vw; bottom: 2.85vw} 
.ourcar_wrap .carlist_bx button.colors{ color: var(--primary)} 
.ourcar_wrap .carlist_bx .list_box.nodata{ margin-left: 0; color:var(--color-secondary);; border-color:var(--second-line)  } 
.ourcar_wrap .carlist_bx .list_box.nodata p{ margin-top: -4vw;font-size: var(--size13);} 
.ourcar_wrap .carlist_bx .list_box.nodata:before{ display: none} 

.ourcar_wrap .carlist_bx .swiper-horizontal>.swiper-pagination-bullets, .ourcar_wrap .carlist_bx .swiper-pagination-bullets.swiper-pagination-horizontal{ bottom: 1.8vw; gap:2vw} 

.ourcar_wrap .carlist_bx .swiper-pagination-bullet{ width: 1.2vw; height: 1.2vw; flex: none} 

.ourcar_wrap .carlist_bx + .carlist_bx{ margin-top: 4vw} 
.file_guide{ font-size:0.786rem;color:var(--color-secondary);padding-left: 2.0524vw;} 
.pic_list + .filebox{ margin-top: 2.564vw} 
.form_bx li > div.file_box .filebox { display: flex; gap:2.564vw}
.file_list { display: flex; gap:2vw;flex-wrap: wrap; margin-top: 2vw} 
.file_list a.dn.file{position: relative; display: flex; align-items: center; gap:1vw; font-size: var(--size12);color:var(--color-secondary);}

.file_list a.dn.file:before{ display: block; width:2.820vw; height: 2.820vw; content: ""; background: url("../img/front/icon_download.svg") no-repeat 50% 50%; background-size: 100% } 


.form_bx li > div.file_box .filebox .file_list{ display: flex; gap:2vw;  flex-wrap: wrap; margin-top: 0} 
.form_bx li > div.file_box .filebox .file_list .file{position: relative; display: flex; align-items: center; gap:1.6vw; font-size: var(--size12);color:var(--color-secondary);} 
.filebox .file_list .file button.bt_del{ position: relative; right: auto; top: auto; background:#C4C4C4; width: 3.333vw; height: 3.333vw } 
.ourcar_wrap#write .toggleinfo.during:before{ left: auto; right: 10vw} 
.badge.carok{ background:#DFF5F5; color:#338383;} 
.badge.carwait{ background:#FEF2D3; color:#685525;} 




/* 생활편의 : data-id="comports"  
-------------------------------------------------------------- */
[data-id="comports"] .menu_list .tit{ padding: 0; font-weight: 500; font-size: var(--size16); display: flex; align-items: center; gap:2vw } 
[data-id="comports"] .menu_list .tit:after{border: 1.2px solid var(--color);content: "";width: 1.8vw;height: 1.8vw;border-width: 1.2px 1.2px 0 0;display: block;transform-origin: center center; transform:rotate(45deg)}

[data-id="comports"] .menu_list .txt{ font-size: 0.7857rem; margin-top: 1vw; padding-right:22vw; position: relative; z-index: 2  } 
[data-id="comports"] .menu_list{ display: flex; flex-direction: column; gap:2.564vw} 

[data-id="comports"] .menu_list li{ background:#FDEDED;  height:19.7428vw; display: flex; flex-direction: column; justify-content: center; border-radius: 3.333vw; overflow: hidden; position: relative} 
[data-id="comports"] .menu_list li.m02{ background:#FFF6E0; }
[data-id="comports"] .menu_list li.m03{ background:#EFF5DF; }
[data-id="comports"] .menu_list li.m04{ background:#DFF5F5; }
[data-id="comports"] .menu_list li.m05{ background:#F4F1F9; }
[data-id="comports"] .menu_list li:before{ width: 50vw; height: 50vw; position: absolute; right: -17vw; top: 0; background:#FDDADA; display: block; content: ""; transform: rotate(30deg)} 
[data-id="comports"] .menu_list li.m02:before{ background:#FEEFCA } 
[data-id="comports"] .menu_list li.m03:before{ background:#E4EBCF } 
[data-id="comports"] .menu_list li.m04:before{ background:#CFEBEB }
[data-id="comports"] .menu_list li.m05:before{ background:#E7E2ED }
[data-id="comports"] .menu_list li a{ display: flex; width: 100%; height: 100%; padding-left:5.3vw; flex-direction: column; justify-content: center } 

[data-id="comports"] .menu_list li:after{ position: absolute; right:6vw; top: 50%; transform: translateY(-50%); background: url("../img/front/comports_office.png") no-repeat 0 0; width:15.1276vw; height: 15.1276vw; content: ""; display: block; z-index: 2; background-size: 100% } 
[data-id="comports"] .menu_list li.m02:after{ background-image: url("../img/front/comports_commu.png"); background-position:1.5vw 50%; width:18vw; height: 18vw; background-size: 17.4vw } 
[data-id="comports"] .menu_list li.m03:after{ background-image: url("../img/front/comports_doorman.png"); width:17vw; height: 17vw  } 
[data-id="comports"] .menu_list li.m04:after{ background-image: url("../img/front/comports_life.png"); width:15.384vw; height: 15.384vw  } 
[data-id="comports"] .menu_list li.m05:after{ background-image: url("../img/front/comports_link.png"); width:15.384vw; height: 15.384vw  } 

[data-id="comports"] .home_wrap .banner_bx{ position: sticky; left: 0; bottom:18.974vw; width: 100%;    padding: 0 ; z-index: 4; padding-top:5vw; background-color: #fff; padding-bottom:0vw;} 
[data-id="comports"] .home_wrap .menu_bx{ margin-top: 5.128vw} 
.comview_bx .detailbox{ font-size:var(--size12); display: flex; flex-direction: column; gap:1vw } 
.comview_bx .detailbox dl{ display: flex; gap:1.5384vw; align-items: flex-start} 
.comview_bx .detailbox dl dd{ display: flex; flex-direction: column; gap:0vw} 
.comview_bx .detailbox dl dt{ flex: none; gap:1.5384vw; display: flex; align-items: center;width: 19vw; justify-content: space-between  } 
.comview_bx .detailbox dl dt:after{ content: ""; width: 1px; height: 2.5vw; background:var(--color); display: block } 
[data-id="comports"] .comview_bx .detailbox dl dd:before{ display: none}
[data-id="comports"] .comview_bx .detailbox dl dd{ align-items: flex-start} 
[data-id="comports"] .comview_bx .detailbox dl dd strong{ font-weight: 400} 


[data-id="comports"] .comview_bx .detailbox dl dd> span, [data-id="comports"] .comview_bx .detailbox dl dd> div{ display: flex; align-items: center; min-height: 4.451vw} 
[data-id="comports"] .comview_bx .detailbox dl dd> div span{ display: flex; align-items: center} 
[data-id="comports"] .comview_bx .detailbox dl dd> div span+span{ margin-left: 2.564vw} 
[data-id="comports"] .comview_bx .detailbox dl dd span>strong, [data-id="comports"] .comview_bx .detailbox dl dd >div>strong{ font-weight: 400; padding-right: 2vw} 


.comview_bx + .goods_bx{ margin-top:3.846vw } 
.goods_bx {width: calc(100% + 5.128vw); transform: translateX(-2.564vw);} 
.goods_bx .goods{ border: 1px solid var(--primary); border-radius: 3.333vw; padding:3.0768vw 5vw 3.0768vw 4.3588vw; position: relative; display: flex; flex-direction: column; justify-content: center   } 
.bt_booking{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; } 
[data-id="comports"] .comports_list a{ display: block; width: 100%; height: 100% } 
[data-id="comports"] .comports_list a:hover{ background: rgba(223, 245, 245, 0.25); } 
.bt_booking:hover{ background: rgba(223, 245, 245, 0.25)} 

.goods_bx .goods{ font-size: var(--size12); min-height: 21.1788vw; padding-right: 20vw} 
.goods_bx .goods .tit{ font-weight: 500} 
.goods_bx .goods .tit + .money{ margin-bottom: 1.5vw; font-weight: 700} 
.goods_bx .goods .txt{ font-size:0.786rem; color: var(--color-secondary);white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%} 
.goods_bx .goods .pic{ position: absolute; right: 1.282vw; top:1.282vw;  width:18.204vw; height: 18.204vw;max-width: 18.204vw;max-height: 18.204vw;}/* 20220919 kj 이미지 사이즈 맞춤 css 추가*/
.goods_bx .goods .pic img{ width: 100%;height:100%;} /* 20220919 kj 이미지 사이즈 맞춤 css 추가*/
.goods_bx .goods + .goods{ margin-top: 2.564vw} 
.goods_bx .goods.soldout{ border-color:var(--second-line) }
.goods_bx .goods.soldout .money{ text-decoration: line-through} 
.badge.soldout{ color: var(--color); background:var(--second-line); line-height: 14px  } 

[data-id="comports"] .board_wrap#view ~ .topbtn.fixed{bottom: 6.5vw;} 

.goods_amount{ border: 1px solid var(--primary);    border-radius: 2.0512vw; display: flex; justify-content: space-between; padding:3.846vw} 
.goods_amount .goods_box{font-size: var(--size12);}
.goods_amount .goods_box .tit{ font-weight: 500} 
.goods_amount .goods_box .tit + .money{font-weight: 700} 


div.amount_box{ display: flex; justify-content: space-between; align-items: center} 
div.amount_box label.tit{ margin-bottom:  0} 
div.amount_box > .flex{ justify-content: flex-end; gap:2vw} 
div.amount_box > .flex button{ width:5.128vw; height: 5.128vw; background:var(--bg-gray); border-radius: 100%; position: relative } 
div.amount_box > .flex p.amount{ min-width: 3.6vw; text-align: center; font-size: var(--size12)} 
div.amount_box > .flex button:before{ position: absolute; width: 100%; height: 100%;font-family: "remixicon"; font-style: normal; speak: none;  text-decoration: inherit; text-align: center; font-variant: normal;  text-transform: none; -webkit-font-smoothing: antialiased;  -moz-osx-font-smoothing: grayscale;content: "\F1AF";; display: block; text-align: center; left: 0; top: 0; line-height: 5.128vw } 
div.amount_box > .flex button.bt_plus:before{content:"\EA13";}
div.amount_box > .flex button:hover{ background:var(--color-secondary) } 



.page_head + .comports_bx.tab_contents{ position: relative; margin-top: 10.256vw; padding-bottom: 10vw} 
.page_head + .comports_bx.tab_contents:before{ position: absolute; left:50%; top:3.5vw; width: 100vw; height:9.230vw;background: linear-gradient(-180deg, #F2F2F2 0%, rgba(255, 255, 255, 0) 61.46%); content: ""; display: block; transform: translate(-50%, -10.128vw); z-index: -1}  

[data-id="comports"] .mine_wrap .filterbox .filter+h4{ margin-top: 3.3vw}
[data-id="comports"] .mine_wrap .comports_list{ padding-bottom: 20vw} 
[data-id="comports"] .mine_wrap .comports_list li{border: 1px solid var(--second-line) !important;border-radius: 3.333vw;padding: 3.846vw 3.846vw 1.5vw 3.846vw !important;} 
[data-id="comports"] .mine_wrap .comports_list .result .btnbox{margin-top: 2vw;display: flex;justify-content: flex-end;}
[data-id="comports"] .mine_wrap .comports_list .result .btnbox button { padding: 2.564vw 2.5vw;font-weight: 500;font-size: var(--size13);}
[data-id="comports"] .mine_wrap .comports_list .result .btnbox button.colors {color: var(--primary);}
[data-id="comports"] .mine_wrap .comports_list .tit{ font-size: 1.6428rem; font-weight: 700; } 
[data-id="comports"] .mine_wrap .comports_list .badges + .tit{ margin-top: 3vw} 
[data-id="comports"] .mine_wrap .comports_list li:after{ display: none} 

/* 22.0719 생활편의 상세 수정 */
.board_img + .tab_container{ border-top: 1.538vw solid #F8F8F8; border-bottom: 1.538vw solid #F8F8F8}
[data-id="comports"] .board_wrap .tab_container{ width: 100vw; margin-left:-5.128vw } 
.tabbt_bx { width: 100%; display: flex; justify-content: space-between; border-bottom: 1px solid #F8F8F8; gap:2.564vw; height: 8.974vw; overflow: visible} 
.tabbt_bx button{ width: 100%; height: 8.974vw; color: #a7a7a7; font-weight: 500} 
.tabbt_bx button.on{ color: var(--color); border-bottom: 1px solid var(--primary)} 
.tab_container .detailbox{ border: none} 
.tab_container .detailbox .tab_cont{ display: none; min-height:7.692vw } 
.tab_container .detailbox .tab_cont.on{ display: block} 



/**/
#timePopup{ height: 80vw} 
.slot_bx { position: relative;display:block; margin: 0 auto; width: 48.716vw}
.slot_bx .drum-viewport {  margin: 0;  padding: 0;  height:42.306vw;  font-size: 1rem;  position: relative; width: 100%; display: block !important }
.slot_bx .drum-viewport:before{ content: ""; display: block; width: 100%; height: 14.102vw; position: absolute; left: 0; top: 50%; transform: translateY(-50%);  background:var(--primary-light-bg); border-radius:3.333vw; } 
.slot_bx .drum-item {  background: transparent;  color: hsl(42, 100%, 40%);  text-align: center;  font-weight: bold; height: 14.102vw; align-items: center; display: flex; justify-content: center; font-size:var(--size20); font-weight: 300; color: var(--color-secondary) }
.slot_bx .drum-item.drum-item-current{border-radius:3.333vw; color: var(--color) } 
.slot_bx .drum-viewport.disabled:before{ background: var(--gray-light-bg)} 
.slot_bx .drum-item.disabled{ color:var(--gray-dark) } 
.slot_bx .drum-item.disabled.drum-item-current{color:var(--color-secondary)}

/**/
.mine_wrap .calendar_w + .list_bx .comports_list li{border: 1px solid var(--second-line) !important;border-radius: 3.333vw;padding: 3.846vw !important;} 
.mine_wrap .calendar_w + .list_bx .comports_list .result .btnbox{margin-top: 2vw;display: flex;justify-content: flex-end; margin-bottom: -2vw}
.mine_wrap .calendar_w + .list_bx .comports_list .result .btnbox button { padding: 2.564vw 2.5vw;font-weight: 500;font-size: var(--size13);}
.mine_wrap .calendar_w + .list_bx .comports_list .result .btnbox button.colors {color: var(--primary);}
.mine_wrap .calendar_w + .list_bx .comports_list .tit{ font-size: 1.6428rem; font-weight: 700; } 
.mine_wrap .calendar_w + .list_bx .comports_list .badges + .tit{ margin-top: 3vw} 
.mine_wrap .calendar_w + .list_bx .comports_list li:after{ display: none} 
.mine_wrap .calendar_w + .list_bx{ padding-bottom: 10vw} 
.mine_wrap .calendar_w{width: calc(100% + 5.128vw); margin-left: -2.564vw; margin-bottom: 5.128vw } 


/* 입주퇴거 */
.inout_wrap h3{ position: relative;z-index: 2} 
.inout_wrap .orderbox{border: 1px solid var(--second-line) !important;border-radius: 3.333vw;padding: 3.846vw !important;} 
.inout_wrap .orderbox .result .btnbox{margin-top: 2vw;display: flex;justify-content: flex-end; margin-bottom: -2vw}
.inout_wrap .orderbox .result .btnbox button { padding: 2.564vw 2.5vw;font-weight: 500;font-size: var(--size13);}
.inout_wrap .orderbox .result .btnbox button.colors {color: var(--primary);}
.inout_wrap .orderbox .tit{ font-size: 1.6428rem; font-weight: 700; margin-bottom: 3vw } 
.inout_wrap .orderbox .badges + .tit{ margin-top: 3vw} 
.inout_wrap .orderbox .badges{font-size: var(--size12);color: var(--color-secondary);display: flex;align-items: center;gap: 1.2vw;margin-bottom: 1.2vw;}
.inout_wrap .orderbox .badges .badge:not(.new){ height:5.3844vw; border-radius: 3vw; padding: 0 2.3vw; line-height:1; white-space: nowrap; font-size: 0.714rem;  font-weight:200; align-items: center; justify-content: center; display: flex; gap:0 } 
.inout_wrap .comview_bx .detail{font-size: var(--size12);display: flex;flex-direction: column;gap: 1vw; padding: 0; border: none}
.inout_wrap .comview_bx .detail dl, .inout_wrap .comview_bx .detail dt, .inout_wrap .comview_bx .detail dd{font-size: var(--size12);} 
.inout_wrap .comview_bx .detail dl{    gap: 1.5384vw;} 
.inout_wrap .comview_bx .detail dt{ width: 15.75vw; flex: none} 
.inout_wrap .comview_bx .detail dd{ display: flex; } 
.inout_wrap .comview_bx .detail dd:before{ display: block; margin-top: 1vw; margin-right: 1.4vw} 
.toggleinfo.inout{ transform: translateX(0); width: 90vw} 
.toggleinfo.inout:before{ left: 18.7vw} 
.inout_wrap .comview_bx.result p.etc{ justify-content: space-between} 
.inout_wrap .comview_bx.result p.etc .writer + .date:before{ display: none} 
.inout_wrap .comview_bx.result p.etc .writer{ max-width: 50%} 
.inout_wrap .comview_bx.result .board_txt{ margin-top: 0} 
.inout_wrap .comview_bx.result .board_head+.board_txt{ margin-top: 2.564vw} 
.inout_wrap .office_box{ margin-top: 2.564vw;width: calc(100% + 5.128vw);transform: translateX(-2.564vw);}
.inout_wrap .comview_bx.result .box{ border-color: var(--primary)} 
/* 주민투표 */
.poll_wrap{} 
.poll_wrap .page_head h2+p{ color:var(--color-secondary); } 
.poll-item_bx li{ position: relative} 
.poll-item_bx li .tit{ font-weight: 500; color: var(--color); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: normal; word-wrap: break-word; padding-right: 30vw}
.poll-item_bx li .tit strong{font-weight: 500; color: var(--color);}
.poll-item_bx li .date{ font-size: 0.786rem; color:var(--color-secondary) } 
.poll-item_bx li .txt{ margin-top:4.359vw } 
.poll-item_bx li .txt strong{ font-weight: 400} 
.poll-item_bx li:before, .poll-item_bx li:after{ content: ""; width: calc(100% + 5.128vw); height: 1px ; background: #f2f2f2; display: block; margin-bottom:3.077vw; margin-top: 3.077vw; margin-left: -2.564vw} 
.poll_wrap .page_head + .poll-item_bx li:before{ margin-top: -2.564vw; margin-bottom: 7.692vw;} 
.poll_wrap .page_head + .poll-item_bx li:after, .poll_bx .poll-item_bx li:before{ display: none} 
.poll-item_bx .badges{ position: absolute; right: 0; top: 0vw; display: flex; gap:1.795vw} 
.poll-item_bx .badge{ border: 1px solid var(--color-secondary); background: #fff; font-size: 0.714rem; color:var(--color); padding: 0 1.5vw; height: 5.384vw; line-height: 5.384vw; min-width:13vw; text-align: center; border-radius: 3.5vw  } 
.poll_wrap .page_head + .poll-item_bx li .tit{ padding-right:16.5vw} 
.poll_wrap .page_head + .poll-item_bx li .badges{ top:7.692vw } 
.poll-item_bx + .guide_bx{ margin-top:17.692vw } 
.poll_wrap .no_enter{ border: 1px solid var(--gray-dark); border-radius: 3.333vw; padding: 5.897vw; text-align: center;width: calc(100% + 5.128vw);margin-left: -2.564vw } 
.poll_wrap .no_enter p{ font-size:var(--size13) } 
.poll_wrap .no_enter button.colors{ background: var(--primary); color: #fff; display: flex; width: 100%; height: 11.538vw; justify-content: center; align-items: center; margin-top: 5.128vw; border-radius: var(--radius8) } 
.poll_wrap .no_enter button.colors:not(:disabled):hover{ background: var(--primary-hover-bg)}
.poll_wrap .no_enter button.colors:disabled{ background:var(--primary-disable-bg) } 
.poll_wrap .tab_list_w{ margin-bottom: 2.564vw; margin-top: -1.564vw; width: calc(100% + 5.128vw);margin-left: -2.564vw } 
.badge.blue{ border: none !important; color:#045BAB !important; background: #E0F0FF !important; } 
.badge.mint{ border: none !important; color:#338383 !important; background: #DFF5F5 !important; } 
.badge.violet{ border: none !important; color:#4C00AC !important; background: #F1E7FE !important; } 
.badge.yellow{ border: none !important; color:#685525 !important; background: #FEF2D3 !important; } 
.badge.gray{ border: none !important; color:#4E4E4E !important; background: #EBEBEB !important; } 
.badge.red{ border: none !important; color:#DF4A4A !important; background: #FDEDED !important; } 
.poll_wrap .nodata{margin: 20vw 0} 
.poll_wrap#view .page_head{ display: none} 
.poll_wrap .comview_bx h3{ padding-right: 2.564vw; font-size:var(--size18) } 
.poll_wrap .comview_bx h3 strong{ font-weight: 700} 
.poll_wrap .board_head{ padding: 0 2.564vw; gap:2.5vw; margin-bottom:6.410vw } 
.poll_wrap .board_head .etc{flex-wrap: wrap; display: flex; font-size: var(--size13); color: var(--color-secondary);gap:0 1.5vw;}
.poll_wrap .board_head .etc .writer{ max-width: 50vw} 
.poll_wrap .board_head .etc .writer + .writer_group{ position: relative; padding-left: 1.5vw} 
.poll_wrap .board_head .etc .writer + .writer_group:before{ content: ""; display: block; width: 1px; height: 2.5vw; background:var(--color-secondary); line-height: 0; position: absolute; left:0; top: 50%; transform: translateY(-50%)} 
.poll_wrap .board_head .etc .date{ font-size:0.786rem } 
.poll_wrap .board_head .bages{ display: flex; gap:1.795vw} 

.poll_wrap .board_head .bages .badge{ border: 1px solid var(--color-secondary); background: #fff; font-size: 0.714rem; color:var(--color); padding: 0 1.5vw; height: 5.384vw; line-height: 5.384vw; min-width:13vw; text-align: center; border-radius: 3.5vw;  } 
.poll_wrap .editor_box{ display: none;  padding-bottom: 4.102vw} 
.poll_wrap#view h4{ font-weight: 500; font-size: 1rem; padding-bottom:4.102vw } 
.poll_wrap .board_txt, .poll_wrap .poll_box, .poll_wrap .poll_link{ padding: 0 2.564vw; margin-top:4.102vw } 
.poll_wrap .board_txt:after{ content: ""; height: 1px; background: #f2f2f2; display: block; width: calc(100% + 5.128vw); margin-left: -2.564vw} 
.poll_wrap .poll_box{ margin-bottom:7.692vw } 
.poll_wrap .board_txt h4{ position: relative} 
.poll_wrap .board_txt h4:after{width: 5vw; height: 5vw; position: absolute; right: 0; top: 0; display: block;font-family: "remixicon"; font-style: normal; speak: none;  text-decoration: inherit; text-align: center; font-variant: normal;  text-transform: none; -webkit-font-smoothing: antialiased;  -moz-osx-font-smoothing: grayscale;content: "\EA4E";  color: var(--color); line-height:  5vw; font-weight:400; font-size: 1.34rem; transition: .3s} 
.poll_wrap .board_txt.open h4:after{ transform: rotate(180deg)} 


.poll_wrap .editor_box * + img{ margin-top:3.5vw } 
.poll_wrap .editor_box img + *{ margin-top: 3.5vw} 
.poll_box > [class^="poll_"]+ [class^="poll_"]{ margin-top: 4.102vw;} 
.poll_box > [class^="poll_"] .poll{ display: flex; flex-wrap: wrap; gap:2.564vw; justify-content: space-between} 
.poll_box > [class^="poll_"] .poll > *{ width: calc(50% - 1.3vw); min-height: 23.076vw} 
.poll_box > [class^="poll_"] .poll .chkbtn{ display: block; height: 100%} 
.poll_box .poll .chkbtn input + span{ height: 100%; padding:3.333vw; text-align: center; line-height: 1;font-weight: 500 !important; color: var(--color) !important } 

.poll_box .poll .chkbtn input + span:before{ position: relative; left: auto; top:auto; transform: none; content: ""; background: url("../img/front/poll_mark01.svg") no-repeat 50% 50%; background-size: 100%; width:10.256vw; height: 10.256vw; display: block; margin: 0 auto 2.564vw auto; filter: brightness(3) grayscale(1)} 
.poll_box .poll_agree .poll .chkbtn input + span:before{ background-image: url("../img/front/poll_mark02.svg");filter: brightness(1.83) grayscale(1)} 

.poll_box .poll .chkbtn input:checked + span{font-weight: 500} 
.poll_box .poll .chkbtn input:checked + span:before{ filter: none; } 

.poll_box .join{ font-size:var(--size12); display: flex; justify-content: flex-end; margin-top: 2vw;font-weight: 300; gap:2.6vw } 
.poll_box .join strong{ font-weight: 300} 
.poll_box .join > p+p{ position: relative; padding-left: 2.6vw} 
.poll_box .join > p+p:before{ content: ""; display: block; width: 1px; height: 2.5vw; background:var(--color-secondary); line-height: 0; position: absolute; left:0; top: 50%; transform: translateY(-50%) } 
.poll_pic >p{ margin-bottom:5.128vw } 
.poll_pic .poll li{ position: relative; } 
.poll_pic .poll li>strong, .poll_pic .poll li>.bt_more{ position: absolute; z-index: 2; left: 3.333vw; top: 3.333vw} 
.poll_pic .poll li>.bt_more{ left: auto; right: 3.333vw; color:var(--color-secondary); text-decoration: underline  } 
.poll_pic .poll li>.chkbtn{ z-index: 1}
.poll_box .poll_pic .poll .chkbtn figure { margin: 6.410vw auto 2vw auto; overflow: hidden; display: block; width:22.050vw; height:28.204vw; position: relative } 
.poll_box .poll_pic .poll .chkbtn figure img{ min-width: 100%; max-width: none; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); height: 100%} 
.poll_box .poll_pic .poll .chkbtn input + span:before{ position: absolute; right:3.333vw; bottom: 3.333vw; margin: 0; z-index: 3} 

.poll_box .poll_pic .poll .chkbtn input + span strong{ font-weight: 500; color:var(--color) !important; line-height: 1.24; white-space: normal } 
.poll_box .poll_pic .poll .chkbtn span strong em{font-weight: 500; color:var(--color) !important; font-style: normal; word-break: break-all; word-wrap: normal } 

.poll_link ul{ border: 1px solid var(--second-line); border-radius: var(--radius8); padding: 2.564vw;} 
.poll_link ul li .tit{ font-size: var(--size12); font-weight: 500; margin-bottom: 1.5vw} 
.poll_link ul li .tit strong{ font-weight: 500} 

.comview_bx .poll_link .etc .writer + .date:before{ vertical-align: baseline; background: var(--color-secondary)} 
.jconfirm .pollman_bx{ text-align: left; padding: 0 4.102vw} 
.jconfirm .pollman_bx div{ padding-bottom: 3vw} 
.jconfirm .pollman_bx div+div{ margin-top:3.5vw} 
.pollman_bx .basic_box{ position: relative; min-height: 22.563vw; text-align: left; padding-left: 22vw;} 
.pollman_bx .basic_box figure{ position: absolute; left: 0; top: 0; width:17.948vw; height: 22.563vw; overflow: hidden} 
.pollman_bx dl{ display: flex; word-break: break-all; gap:2.564vw} 
.pollman_bx dt, .jconfirm .pollman_bx h4{ font-weight: 500; flex: none; min-width: 6vw} 
.pollman_bx .campaign_box dt{ min-width: 9.5vw} 
.pollman_bx dt, .pollman_bx dd, .pollman_bx li{ word-break: break-all; word-wrap: normal; white-space: normal; text-align: left; line-height: 1.32; position: relative} 
.pollman_bx dd{ padding-left: 2.564vw} 
.pollman_bx dd:before{content: ""; display: block; width: 1px; height: 2.5vw; background:var(--color-secondary); line-height: 0; position: absolute; left:0; top: 0; transform: translateY(1vw)} 

.pollman_bx dl+dl, .pollman_bx li+li{ margin-top: 1.5vw} 
.jconfirm-title h3.runner{ font-size: 0; line-height: 0; visibility: hidden; height: 5vw; } 

.jconfirm .pollman_bx h4{ margin-bottom:2.564vw} 
.toast li.poll{ width: 100vw; padding: 0 5.128vw}  
.toast li.poll span{ width: 100%; display: block; font-size:1rem; color: #8E8E8E; padding:5.128vw 2.564vw  } 

.poll_wrap#view section > .bottom_btn{position:sticky;bottom: 0;} 

.poll_box > .poll_normal .poll{ flex-direction: column} 
.poll_box > .poll_normal .poll .chkbtn{ width: 100%; min-height: auto;}
.poll_box .poll_normal .poll .chkbtn  input + span{ display: flex;white-space: normal; text-align: left; padding-right: 11vw; gap:2vw; padding-left: 5vw} 
.poll_box .poll_normal .poll .chkbtn  input + span:before{ display: none} 
.poll_box .poll_normal .poll .chkbtn  input:checked  + span:after{width:  8.75vw; height:8.755vw;display: block;font-family: "remixicon";font-style: normal;speak: none;text-decoration: inherit;text-align: center;font-variant: normal;text-transform: none;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;content: "\EB7B";    font-size:1.5rem;line-height:8.755vw;font-weight: normal; flex: none; position: absolute; right: 1vw; top: 1.62vw}
.poll_box .poll_normal .poll .chkbtn  input:checked + span, .poll_box .poll_normal .poll .chkbtn  input:checked + span  *{ color: var(--color) !important} 
.poll_box .poll_normal .poll .chkbtn  input + span strong{ font-weight: 400; flex: none; min-width: 5vw} 
.poll_box .poll_normal .poll .chkbtn  input + span strong + em{ padding-left:2vw; position: relative } 
.poll_box .poll_normal .poll .chkbtn  input + span strong + em:before{content: ""; display: block; width: 1px; height: 2.5vw; background:var(--color-secondary); line-height: 0; position: absolute; left:0; top: 1.2vw; } 


/* 결과 */
.poll_box.result{}
.poll_wrap#view .poll_box.result h4{ padding-bottom: 2.5vw} 
.poll_box.result > [class^="poll_"]:not(.poll_pic) .poll{ border: 1px solid var(--second-line); border-radius: 3.333vw; padding:5.128vw; align-items: center; justify-content: center } 
.poll_box.result > [class^="poll_"]:not(.poll_pic) .poll{ flex-direction: column; flex-wrap: nowrap} 
.poll_box.result > [class^="poll_"]:not(.poll_pic) .poll > *{ width: 100%; min-height: auto; display: flex; align-items: center; justify-content: center} 
.poll_box.result .poll > dl{ gap:2vw}
.poll_box.result > [class^="poll_"]:not(.poll_pic) .poll dt{ width: 10vw; flex: none} 
.poll_box.result .poll_normal .poll > dl{ justify-content: flex-start !important; flex-direction: column; align-items: flex-start !important} 
.poll .chart{ width: 100%; display: flex; padding-right: 9.5vw} 
.poll .chart .bar{ height:3.333vw;background: var(--color-secondary); position: relative; border-radius: 0 var(--radius8) var(--radius8) 0 } 
.poll .chart .bar:after{ content: attr(data-poll-count); position: absolute; right: -10vw; top:0; width:9vw; text-align: left; font-size: var(--size12); color:  var(--color-secondary); line-height: 3.333vw; display: block; height: 3.333vw; white-space: nowrap} 
.poll .win .chart .bar{ background: var(--primary)} 
.poll .win .chart .bar:after{ color:var(--primary) } 
/*.poll_box.result > .poll_normal{ border: none !important; padding: 0 !important} 
.poll_box.result > .poll_normal .poll{    padding: 5.128vw;    border: 1px solid var(--second-line);border-radius: 3.333vw; gap:6.410vw} */
.poll_box.result > .poll_normal .poll{ gap:6.410vw} 
.poll_box.result > .poll_normal .poll dt{ width: 100% !important; display: flex;white-space: normal; text-align: left;gap:2vw;;} 
.poll_box.result > .poll_normal .poll dt strong{ font-weight: 400; flex: none; min-width: 5vw} 
.poll_box.result > .poll_normal .poll dt strong + em{ padding-left:2vw; position: relative } 
.poll_box.result > .poll_normal .poll dt strong + em:before{content: ""; display: block; width: 1px; height: 2.5vw; background:var(--color-secondary); line-height: 0; position: absolute; left:0; top: 1.2vw; } 
.poll_box.result .poll_pic .poll .chkbtn input + span .counter{ display: block; font-size: var(--size12);color: var(--color-secondary); font-weight: 400} 
.poll_box.result .poll .chkbtn input:not(:checked) + span:before{ display: none} 
.poll_box.result .poll .chkbtn input:checked + span:before{ content: "당선"; background:var(--yellow); border-radius: 100%; color:var(--color); font-size: 1rem; right: auto; left: 8vw; width: 10.769vw; height: 10.769vw; line-height: 10.769vw; font-weight: 700; bottom: -2vw } 
.poll_box.result .poll .win > strong{ color: var(--primary)} 
.poll_box.result .poll_pic .poll{ flex-direction: column; flex-wrap: nowrap} 
.poll_box.result .poll_pic .poll li{ width: 100%;border: 1.2px solid var(--second-line);border-radius: var(--radius8); min-height: auto; padding: 3.333vw; position: relative }
.poll_box.result .poll_pic .poll li.win{ border-color: var(--primary)} 
[data-theme="homesF"] .poll_box.result .poll_pic .chkbtn input + span{ border: none !important; padding: 0; height: auto; display: flex; align-items: flex-start; text-align: left} 

.poll_box.result .poll_pic .poll .chkbtn figure{ margin: 0; width:11.538vw; height: 14.871vw } 
.poll_box.result .poll_pic .poll .win .chkbtn{ overflow: visible} 
.poll_box.result .poll_pic .poll .win .chkbtn figure{ width:17.692vw; height:22.307vw  } 
.poll_box.result .poll_pic .poll .chkbtn input + span strong{ padding: 2vw 0 0 6.666vw;display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;} 
.poll_box.result .poll_pic .poll .win .chkbtn input + span strong{ padding-top: 5vw} 
.poll_box.result .poll_pic .poll li > strong{ position: absolute; left: 18vw; top:5.333vw; } 
.poll_box.result .poll_pic .poll li.win > strong{ left: 22.5vw; top:8.333vw } 
.poll_box.result .poll_pic .poll .chart{ position: absolute; left: 18vw; top: 50%; transform: translate(0,50%); z-index: 2; width: calc(100% - 25vw); padding-right: 12vw} 
.poll_box.result .poll_pic .poll .win .chart{ left: 22.5vw;width: calc(100% - 25vw);} 
.poll_pic .poll .chart .bar:after{ content: attr(data-poll-count2)" " "("attr(data-poll-count)")";}

.poll_pic .poll .win .chart .bar:after{ content:"("attr(data-poll-count)")"; transform: translateY(50%); margin-top:0.5vw; color: var(--primary)}
.poll_pic .poll .win .chart .bar:before{ content:attr(data-poll-count2);position: absolute;right: -10vw;top: 0;width: 9vw;text-align: left;font-size: var(--size12);line-height: 3.333vw;display: block;height: 3.333vw;white-space: nowrap; transform: translateY(-50%); margin-top: -0.5vw;color: var(--primary)}

.poll_box.result .poll_pic .poll li>.bt_more{ top: 2.6vw} 

/* 크게작게 버튼*/
.plus{ width: 10.256vw;    height: 10.256vw;cursor:pointer; background: var(--primary) ;bottom: 36vw;}
.minus{ width: 10.256vw;    height: 10.256vw;cursor:pointer; background: var(--primary) ;bottom: 36vw;}
.plus:before{ position:absolute; top: 50%; left: 50%; width: 16px; height: 2px; margin: -1px 0 0 -8px; background: #fff; content: ''; }
.plus:after{position: absolute; top: 50%; left: 50%; width: 2px; height: 16px; margin: -8px 0 0 -1px; background: #fff; content: ''; }
.minus:before{ position:absolute; top: 50%; left: 50%; width: 16px; height: 2px; margin: -1px 0 0 -8px; background: #fff; content: ''; }