.body-bg{background: #f9f9f9}

.tit-page{font-size: 42px; font-weight: 700; color: var(--black2); line-height: 1.3; text-align: center; margin-bottom: 60px; font-family: var(--gmarket);}
.tit-st1{font-size: 24px; font-weight: 700; padding-left: 30px; position: relative; color: var(--black2); line-height: 1.15; margin-bottom: 20px; position: relative;}
.tit-st1:before,.tit-st1:after{position: absolute; left: 0; top:5px; line-height: 1.15; content: ''}
.tit-st1:before{background: linear-gradient(45deg, #0056b7 0%,#80bbfd 100%); width: 18px; height: 18px}
.tit-st1:after{width: 10px; height: 10px; background: #fff; left: 4px; margin-top: 4px;}
.tit-st2{font-weight: 700; font-size: 1.5rem; color: var(--black1); margin-bottom: 20px; line-height: 1.15;}
.tit-member{font-family: var(--gmarket); color: var(--black3); font-weight: 700; font-size: 2rem; line-height: 1.15; margin-bottom: 20px;}
.tit-st1 .add-txt{font-size: 1rem; display: block; margin-top: 10px; color: #666; font-weight: 400;}
.tit-st3{background: url('../img/common/tit-st3.png') left .23em no-repeat; padding-left: 27px; line-height: 1.15; font-weight: 500; font-size: 1.25rem; color: var(--black3); margin-bottom: 20px; display: block; font-weight: 500;}
.tit-st1 .unit{font-size: 1rem; font-weight: 400; color: #666; position: absolute; right: 0; bottom: 0}
.tit-st1 .ab{position: absolute; right: 0; bottom: 0}

.group_com_w .group:not(:first-child){margin-top: 80px;}

.box-st1{background: #f7f7f7; padding: 30px 40px; border-radius:4px; color: var(--black3); line-height: 1.63;}
.cont-ml{margin-left: 30px;}
.box-st3{background: #f9f9f9; padding: 40px; border-radius:4px; color: var(--black3); border-radius:8px; border:1px solid #ccc}


.btn_w-st1{margin-top: 80px; display: flex; justify-content:center; gap:10px}
.btn_w-st2{margin-top: 40px; display: flex; justify-content:end; gap:10px}
.btn_w-flex{margin: 80px auto 0; display: flex; justify-content:center; gap:10px; max-width:500px;}

.btn-st1{width: 160px; height: 50px; border-radius:5px;font-weight: 500; display: flex; align-items:center; justify-content:center;;}
.btn-st2{width: 240px; height: 50px; border-radius:5px;font-weight: 500; display: flex; align-items:center; justify-content:center;;}
.btn-list{width: 240px; height: 50px; border-radius:4px; display: flex; align-items:center; justify-content:center; line-height: 1}
.btn-flex{height: 50px; border-radius:5px;font-weight: 500; display: flex; align-items:center; justify-content:center; width: calc(50% - calc(10px / 2))}
.btn_w-flex.col1 .btn-flex{width: 100%}
.btn_w-flex.col3 .btn-flex{width: calc(33.333% - calc(20px / 3))}
.btn-member{width: 100%; height: 55px; border-radius:8px; font-size: 1rem; font-weight: 700; display: flex; align-items:center; justify-content:center; text-align: center;}
.btn-small{font-size: 14px; font-weight: 500; padding: 10px 20px; border-radius:5px}

.box-st2{border:1px solid #ddd; border-radius:8px; overflow: hidden; word-break:keep-all}
.box-st2 .t{background: #e6f2ff; border-radius:8px 8px 0 0; border-bottom: 1px solid #ddd; text-align: center; font-size: 1.25rem; color: var(--black3); padding: 20px 10px; font-weight: 700; line-height: 1.15;}
.box-st2 .t.pink{background: #ffeef8}
.box-st2 .cont{padding: 60px 0; text-align: center;}
.box-st2 .dev{display: flex; justify-content:center; line-height: 1.15; flex-wrap:wrap}
.box-st2 .dev > li{width: 33.333%; padding: 0 15px; display: flex; align-items:center;     flex-flow: column;}
.box-st2 .dev > li:not(:first-child){border-left: 1px solid #ddd;}
.box-st2 .dev.col4 > li{width: 25%}
.box-st2 .tt{font-size: 1.125rem; font-weight: 500;}
.box-st2 .cc{font-size: 1.5rem; font-weight: 700; color: var(--black3); margin-top: 20px;}
.box-st2 .small{font-size: 1rem; color: #999; display: block;margin-top: 8px; font-weight: 400;}
#subVisual{background: url('') center center no-repeat; background-size:cover; text-align: center; color: #fff;    display: flex; align-items: center; justify-content: center; height: 440px; padding-top: 100px;}
#sub-t{font-size: 50px; font-weight: 700; color: #fff; text-shadow:3px 4px 10px rgba(0,0,0,.35); line-height: 1.15; font-family: var(--gmarket);}
#location{background: var(--blue);text-align: center; font-size: 1.25rem; word-break:keep-all}
#location ul{display: flex; color: rgba(255,255,255,.5)}
#location .active{background: #fff; color: var(--black2); font-weight: 500;}
#location a{display: flex; width: 100%; height: 70px; align-items:center; justify-content:center; padding: 10px 5px; line-height: 1.18;}
#location.col1 li{width: 10%}
#location.col2 li{width: 50%}
#location.col3 li{width: 33.333%}
#location.col4 li{width: 25%}
#location.col5 li{width: 20%}
#location.col6 li{width: 16.666%}
#location span{position: relative}
#location span:not(:first-child){margin-left: 47px;}

#subTop{padding-top: 125px; border-bottom: 1px solid #ccc; padding-bottom: 20px; margin-bottom: 40px; line-height: 1.15; display: flex;  justify-content: space-between; align-items:center}
.sub-t{color: #000; font-weight: 700; font-family: var(--gmarket); font-size: 34px;}
.sub-etc{display: flex;  justify-content: space-between; gap:35px; align-items:center}
.sub-share{display: flex; align-items:center}
.sub-share button{width: 40px; height: 40px; display: block; white-space: nowrap; overflow: hidden; text-indent: -999px; background: url('') center center no-repeat; border:1px solid #ccc; border-radius:4px}
.sub-share button:not(:first-child){margin-left: 5px;}
.sub-share .btn-share{background-image: url('../img/common/btn-sahre.png')}
.sub-share .btn-copy{background-image: url('../img/common/btn-copy.png')}
.sub-share .btn-print{background-image: url('../img/common/btn-print.png')}
.sub-loc{display: flex; align-items:center}
.sub-loc .home{background: url('../img/common/ico-home3X.png') center center no-repeat; width: 16px; height: 16px; background-size:100%; display: block; white-space: nowrap; overflow: hidden; text-indent: -999px}
.sub-loc span:not(:first-child){}
.sub-loc span{position: relative; display: flex;align-items:center}
.sub-loc .current{color: var(--black3); font-weight: 500;}
.sub-loc span:not(:first-child):before{    width: 8px;
    height: 8px;
    border-top: 1px solid #777;
    border-left: 1px solid #777;
    vertical-align: middle; transform: rotate(135deg); content: ''; display: block;     margin: 0 20px 0 18px;}

.sub-page{padding-bottom: 140px; word-break:keep-all}
.sub-member{padding-top:120px; padding-bottom: 140px; word-break:keep-all}

input[type=radio] + label,
input[type=checkbox] + label {display:inline-flex; position: relative; align-items:center}
input[type=radio],
input[type=checkbox] {border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:0}

input[type=radio] + label:before,
input[type=checkbox] + label:before{left: 0; top:0; width: 24px; height: 24px; border-radius:4px; background: #fff url('') center center no-repeat; background-size:14px; border:1px solid #ccc; content: ''; display: block; margin-right: 10px; position: relative;}

input[type=radio].radio-st1 + label:before{left: 0; top:1px; width: 20px; height: 20px; border-radius:50%; background: #fff url('') center center no-repeat;  border:1px solid #ccc; content: ''; display: block; margin-right: 10px;}
input[type=radio].radio-st1:checked + label:before{background: url('../img/bbs/radio-small.png') center center no-repeat; background-size:12px; border:1px solid #ccc}

input[type=radio]:checked + label:before,
input[type=checkbox]:checked + label:before{background-color: var(--blue); background-image: url('../img/common/ck-on.png'); border-color: transparent}
input[type=radio] + label:before{border-radius:50%}

input[type=radio] + label span,
input[type=checkbox] + label span{flex:1}
.ck_w{display: flex; gap:10px; flex-wrap:wrap}

input[type="radio"]  + label:not(:last-child),
input[type="checkbox"] + label:not(:last-child){margin-right: 20px;}

.bbs-sch{background: #f7f7f7;border-radius:4px;padding: 40px;display: flex;flex-wrap: wrap;gap: 20px; font-size: 1.125rem; margin-bottom: 45px;}
.bbs-sch .c{display: flex; gap:10px; flex-wrap:wrap}
.bbs-keyword .btns{width: 205px; display: flex; gap:5px}
.bbs-keyword .btns button{width: calc(50% - 2.5px); border-radius:4px; height: 45px}
.bbs-keyword input[type="text"]{flex:1}
.bbs-sch .item{display: flex; align-items:center; width: 100%}
.bbs-sch .item .t{width: 125px; font-weight: 500; color: var(--black3)}
.bbs-sch .item .c{flex:1; width: calc(100% - 125px); min-height: 45px; align-items:center}
.bbs-sch .item.half{width: calc(50% - 10px)}
.bbs-sch select{max-width:100%} /* 160px */
.bbs-sch select.max-2{ max-width:calc(50% - calc(10px/2)); width: auto}
.bbs-sch select.max-3{ max-width:calc(50% - calc(10px/3)); width: auto}

.bbs-result{display: flex; justify-content:space-between; align-items:center; margin-bottom: 20px; align-items:center}
.bbs-result select{color: #444; font-size: 1rem; padding-left: 13px;}
.bbs-total{font-size: 1.125rem; color: #333; font-weight: 500; }

/* .ov-x{overflow-x: auto;} */
.ov-x.bbs-list th{white-space: nowrap;}
.bbs-list{border:1px solid #ddd; border-radius:5px; border-left: 0;}
.bbs-list table{width: 100%; color: var(--black3)}
.bbs-list thead{}
.bbs-list th{background: var(--black2); color: #fff; font-weight: 500; padding: 20px 10px; text-align: center; font-size: 1.125rem; letter-spacing: -0.04em; height: 65px; white-space: nowrap;}
.bbs-list th:first-child{border-radius:5px 0 0 0;border-left: 0;}
.bbs-list th:last-child{border-radius:0 5px 0 0}
.bbs-list td{padding: 15px 20px; text-align: center; border-left: 1px solid #ddd; border-bottom: 1px solid #ddd; font-size: 1rem; height: 61px}
.bbs-list tbody tr:last-child td{border-bottom:0}
.bbs-list a:hover{text-decoration: underline;}

.paging_w,.paginationSet{margin-top: 40px; color: #999;}
.paging_w ul,.paginationSet ul{text-align: center; display: flex; align-items:center; justify-content:center}
.paging_w li,.paginationSet li{font-size: 1.25rem;display: inline-block;margin: 0 8px;vertical-align: middle; position: relative;}
.paging_w .active,.paginationSet .active{color: #333; font-weight: 500;}
.paging_w .active:after,.paginationSet .active:after{position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; background: #333; content: ''}
.paging_w .arrow,.paginationSet .i{white-space: nowrap;overflow: hidden;text-indent: -999px;background: url('') center center no-repeat;width: 15px;height: 15px}
.paging_w .first,.paginationSet .first{background-image: url('../img/bbs/first.png'); margin: 0;}
.paging_w .prev,.paginationSet .prev{background-image: url('../img/bbs/prev.png');margin: 0 20px 0 10px;}
.paging_w .next,.paginationSet .next{background-image: url('../img/bbs/next.png');margin: 0 10px 0 20px}
.paging_w .last,.paginationSet .end{background-image: url('../img/bbs/last.png'); margin: 0;}
.paging_w a,.paginationSet a{display: block;}
.paginationSet em{font-style:normal}

.label-st1_w{display: inline-flex; flex-wrap:wrap; gap:5px}
.label-st1{font-size: 14px; display: inline-block; padding: 5px 6px; border-radius:3px; line-height: 1; white-space: nowrap;}
.label-st1.blue{color: var(--blue); background: #d7eaff}
.label-st1.orange{color: #ce5700; background: #ffeada}
.label-st1.purple{color: #6e10c3; background: #f5eaff}

.state-st1{font-size: 14px;display: inline-flex; line-height: 1; white-space: nowrap; width: 100.5px; height: 24px; align-items:center;justify-content:center}

.bbs-find table{}
.nowrap{white-space: nowrap;}

.ov-x::-webkit-scrollbar {
    width: 4px;
    height: 4px;
}
.ov-x::-webkit-scrollbar-track {
	display: none;
}
.ov-x::-webkit-scrollbar-thumb {
    background-color: #ccc;
    border-radius: 5px;
}

.page-intro{word-break:keep-all}

.dev-intro{display: flex; flex-wrap:wrap; margin: 0 0 -40px -40px; font-size: 1.125rem; color:var(--black3);}
.dev-intro > li{border:1px solid #d1d1d1; border-radius:4px; padding: 50px 40px 150px; width: calc(33.333% - 40px); margin: 0 0 40px 40px; background: url('') calc(100% - 30px) bottom no-repeat; background-size:245px}
.dev-intro .t{background: linear-gradient(to top, rgba(236,63,168,.2) 8px, transparent 8px); font-size: 1.375rem;}
.dev-intro .c{margin-top: 15px; line-height: 1.6;}
.dev-intro .i1{background-image: url('../img/sub/i1@3X.png')}
.dev-intro .i2{background-image: url('../img/sub/i2@3X.png')}
.dev-intro .i3{background-image: url('../img/sub/i3@3X.png')}
.dev-intro .i4{background-image: url('../img/sub/i4@3X.png')}
.dev-intro .i5{background-image: url('../img/sub/i5@3X.png')}

.bbs-info_top{margin-bottom: 30px;}
.bbs-info_top .t{font-weight: 500; color: #666; font-size: 1.125rem; display: flex; flex-wrap:wrap; line-height: 1.15;     align-items: baseline; margin-top: 1.25rem;}
.bbs-info_top .big{font-size: 40px; margin-right: 20px; font-weight: 700; color: var(--black1); letter-spacing: -0.04em;}

.bbs-info{border-radius:5px; display: flex; flex-wrap:wrap; color: var(--black3); position: relative; overflow: hidden; border:1px solid #ddd;border-left: 0; border-bottom: 0;}
.bbs-info .item,.bbs-info .item2{position: relative; z-index: 1}
.bbs-info .item{display: flex; width: 100%; border-bottom: 1px solid #ddd; border-left: 1px solid #ddd;}
.bbs-info .item .t{width: 170px; font-weight: 500; color: var(--black3); border-right: 1px solid #ddd; background: #efefef; font-size: 1.125rem; padding: 10px 20px;     display: flex; align-items: center;}
.bbs-info .item .c,.bbs-info .item2 .c2{min-height: 58px; align-items:center; padding: 10px 30px}
.bbs-info .item2 .c2{padding: 10px}
.bbs-info .item.half{width: 50%}
.bbs-info .item.w33{width: 33.333%}
.bbs-info .tbl{display: flex; flex-wrap:wrap}
/* .bbs-info .item .c{gap:10px;} */
.bbs-info .item .c{padding-top: 10px !important; padding-bottom: 10px !important; flex-wrap:wrap}

.bbs-info .item2{display: flex; width: 100%; border-bottom: 1px solid #ddd;}
.bbs-info .item2 .t2{ font-weight: 500; color: var(--black6); border-right: 1px solid #ddd; background: #f9f9f9; font-size: 1.125rem; padding: 20px 25px;     display: flex; align-items: center;}
.bbs-info .item2:last-child{border-bottom: 0;}
.bbs-info .item .c,
.bbs-info .item .tbl,
.bbs-info .item2 .c2{flex:1; width: calc(100% - 175px); align-items:center; display: flex}
.bbs-info .item .t,.bbs-info .item2 .t2{width: 170px; word-break:keep-all}
.bbs-info input[type="text"],.bbs-info input[type="password"],.bbs-info select,
.bbs-info_tbl input[type="text"],.bbs-info_tbl input[type="password"],.bbs-info_tbl select{width: 100%}

.bbs-info textarea,.bbs-info_tbl textarea{width:100%; height: 81px; display: block; padding: 15px}
.bbs-info .item .t.column{flex-flow:column}

.bbs-info_tbl{border-radius:8px; overflow: hidden; border:1px solid #ddd; overflow-x: auto;}
.bbs-info_tbl table{width: 100%}
.bbs-info_tbl th,.bbs-info_tbl td{ border-left: 1px solid #ddd; border-bottom: 1px solid #ddd;}
.bbs-info_tbl .bl0{border-left: 0;}
.bbs-info_tbl .bb0{border-bottom: 0;}
.bbs-info_tbl .th{background: #fbfbfb}

.bbs-info_tbl th{height: 58px; background: #f4f4f4}
.bbs-info_tbl td{height: 55px; padding: 10px; text-align: center;}
.bbs-info_tbl th,.bbs-info_tbl .th{padding: 10px 20px; font-size: 1.125rem; font-weight: 500; color: var(--black3);}
.bbs-info_tbl tbody tr:last-child th,.bbs-info_tbl tbody tr:last-child td{border-bottom: 0;}

.max-small{max-width:280px}
.max-500{max-width:500px}
.max-130{max-width:130px}

.form-btn_w{display: flex; gap:10px; width: 100%}
.form-btn_w button{width: 100px;border-radius:4px;}

.tabs-st1{display: flex; color: #999; font-weight: 500; width: 100%; font-size: 1.25rem; margin-bottom: 40px; text-align: center; word-break:keep-all; background: #fff}
.tabs-st1 li{border:1px solid #ddd; margin-right: -1px;}
.tabs-st1 li:first-child{border-radius:8px 0 0 8px}
.tabs-st1 li:last-child{border-radius:0 8px 8px 0}
.tabs-st1 a{height: 60px; display: flex; align-items:center;justify-content:center}
.tabs-st1 .active{background: var(--blue); color: #fff}
.tabs-st1 > li{width: 33.333%}
.tabs-st1.col1 li{width: 10%}
.tabs-st1.col2 li{width: 50%}
.tabs-st1.col3 li{width: 33.333%}
.tabs-st1.col4 li{width: 25%}
.tabs-st1.col5 li{width: 20%}
.tabs-st1.col6 li{width: 16.666%}

.tabs-st1.col1{width: calc(100% + 1px)}
.tabs-st1.col2{width: calc(100% + 2px)}
.tabs-st1.col3{width: calc(100% + 3px)}
.tabs-st1.col4{width: calc(100% + 4px)}
.tabs-st1.col5{width: calc(100% + 5px)}
.tabs-st1.col6{width: calc(100% + 6px)}

.tab-cont_w .tab-cont:not(:first-child){display: none;}

.vil-state_w{display: flex; flex-wrap:wrap; margin: 0 0 -40px -40px; word-break:keep-all}
.vil-state_w > li{width: calc(25% - 40px); margin: 0 0 40px 40px; border:1px solid #ddd; border-radius:8px; padding: 30px;     display: flex;  flex-flow: column;  justify-content: space-between; position: relative;}
.vil-state_w .t{font-size: 1.25rem; color: var(--black3);font-weight: 500;}
.vil-state_w .t .small{display: block; font-weight: 400; color: #999;  font-size: 1rem;}
.vil-state_w .no{font-size: 1.25rem; font-weight: 500; margin-top: 85px;}
.vil-state_w .no .big{font-size: 42px; font-weight: 700;}
.vil-state_w .t2{font-size: 1.125rem; font-weight: 500; color: #666; display: block}
.vil-state_w .dev{display: flex; justify-content:space-between}
/* .vil-state_w .dev > li{margin-left: 20px;} */
.vil-state_w .dev > li:not(:first-child){border-left: 1px solid #ddd; padding-left: 20px;}

.vil-state_w > li:before{background: #f9f9f9 url('') center center no-repeat; width: 80px; height: 80px; border-radius:8px; position: absolute; right: 30px; top:30px; background-size:60px; content: ''}
.vil-state_w .v1:before{background-image: url('../img/sub/i1_1.png')}
.vil-state_w .v2:before{background-image: url('../img/sub/i1_2.png')}
.vil-state_w .v3:before{background-image: url('../img/sub/i1_3.png')}
.vil-state_w .v4:before{background-image: url('../img/sub/i1_4.png')}

.bbs-top{display: flex; justify-content: space-between;  margin-bottom: 20px; align-items:center}
.bbs-sch2{display: flex; gap:10px; width: 619px}
.bbs-sch2 .btn-sch{background: var(--blue); border-radius:5px; width: 100px; color: #fff}
.bbs-sch2 select{width: 160px}
.bbs-sch2 input[type="text"]{flex:1}

.bbs-view{word-break:keep-all}
.bbs-view_top{border-bottom:1px solid #d1d1d1; padding: 0 30px 40px} /* 공통 타이틀에 border-bottom 있어서 반응형에서  패딩 잘 맞춰주세요 */
.bbs-view_top .t{display: flex; font-size: 1.625rem; font-weight: 500; color: var(--black2); align-items:center; flex-wrap:wrap; line-height: 1.15; margin-bottom: 20px; gap:5px}
.bbs-view_top .t .label-st1{margin-right: 10px;}
.bbs-view_top .etc{gap:10px;display: flex; flex-wrap:wrap; margin-left: -30px; color: #666; font-size: 1rem;}
.bbs-view_top .etc > *{margin-left: 30px;; display: flex}
.bbs-view_top .etc strong{font-weight: 500; color: var(--black3); margin-right: 1.25rem; padding-right: 1.25rem; position: relative;}
.bbs-view_top .etc strong:after{position: absolute; right: 0; top:50%; width: 1px; height: 1rem; margin-top: -.5rem; background: #d3d3d3; content: ''}

.bbs-file{background: #f7f7f7; border-bottom: 1px solid #d1d1d1; padding: 20px 30px; display: flex; align-items: flex-start;}
.bbs-file .ttt{margin-right: 30px; padding-right:50px; position: relative; margin-top: .5rem;}
.bbs-file .ttt:after{width: 1px; height: 1.25rem; background: #d1d1d1; margin-top: -.625rem; content: ''; position: absolute; right: 0 ; top:50%}
.bbs-file .items{flex:1; display: flex; gap:10px; flex-wrap:wrap}
.bbs-file .items a{display: block; width: calc(50% - calc(10px/2)); background: #fff url('../img/bbs/bbs-file.png') 20px center no-repeat;background-size:16px; padding: 10px 50px 10px 45px; position: relative; border-radius:5px}
.bbs-file .items a:after{width: 40px; height: 100%; content: ''; background: #999 url('../img/bbs/ico-down_w.png') center center no-repeat; background-size:16px; position: absolute; right: 0; top:0; border-radius:0 5px 5px 0}
.bbs-view_c{border-bottom: 1px solid #ccc; padding: 30px}
.prev_next > *{border-bottom: 1px solid #d1d1d1; display: flex; align-items:center}
.prev_next .t{position: relative; width: 135px; margin-right: 40px; display: flex; padding-left: 20px; align-items: center;}
.prev_next a{flex:1; color: var(--black3); white-space: nowrap; overflow: hidden;  text-overflow: ellipsis; display: block; padding: 20px 0}
.prev_next a:hover{text-decoration: underline}
.prev_next .t:before{position: absolute; right: 0; width: 1px; height: 1.25rem; content: ''; background: #d1d1d1; content: ''; top:50%; margin-top: -.625rem;}
.prev_next .t:after{width: 8px; height: 8px; border-top: 1px solid #999; border-left: 1px solid #999;
    vertical-align: middle; display: block; content: ''; margin-left: 18px;}
.prev_next .prev .t:after{transform:rotate(45deg); margin-top: 1px;}
.prev_next .next .t:after{transform: rotate(-135deg); margin-top: -3px;}

.bbs-gallery{display: flex;flex-wrap:wrap; margin: 0 0 -60px -40px;}
.bbs-gallery > li{width: calc(25% - 40px); margin: 0 0 60px 40px; border:1px solid #d1d1d1; border-radius:8px; overflow: hidden;}
.bbs-gallery .img{position: relative; padding-bottom: 75%; overflow: hidden; background: #ccc}
.bbs-gallery .img img{position: absolute; right:0; top:0; bottom:0; left: 0; margin: auto; width: 100%; transition:all ease .3s}
.bbs-gallery a:hover img:not(.no-img),.bbs-gallery a:focus img:not(.no-img){transform:scale(1.015,1.015)}
.bbs-gallery .cont{padding: 30px 20px}
.bbs-gallery .t{font-size: 1.375rem; color: var(--black2); font-weight: 700; white-space: nowrap; overflow: hidden;     text-overflow: ellipsis;; display: block; line-height: 1.15; margin-bottom: 15px;}
.bbs-gallery .c{height: 2.8em; overflow: hidden;}
.bbs-gallery .date{border-top: 1px solid #ddd;; padding-top: 1.25rem; margin-top: 1.25rem; color: #999; line-height: 1;}
.bbs-gallery .no-img{max-width:80%; width: auto !important}

.bbs-view_gallery{display: flex; justify-content:space-between}
.bbs-view_gallery .s_w{width: 47.5%}
.bbs-view_gallery .cont-right{width:50%}
.bbs-view_gallery .big .item{width: 100%}
/* .bbs-view_gallery .in{position: relative; padding-bottom: 75%; overflow: hidden; background: #000}
.bbs-view_gallery .in img{position: absolute; right:0; top:0; bottom:0; left: 0; margin: auto; width: 100%} */

.bbs-view_gallery .in{position: relative; overflow: hidden; background: #000}
.bbs-view_gallery .in img{width: 100%; display: block;}

.bbs-view_gallery .thumb_w{margin: 10px -5px 0;}
.bbs-view_gallery .thumb .in{margin: 0 5px;}
.bbs-view_gallery .big .slick-arrow{position: absolute; top:50%; display: block; content: ''; z-index: 1; width: 32px; height: 60px; background: url('') center center no-repeat; background-size:100%; transform:translateY(-50%)}
.bbs-view_gallery .big .slick-prev{left: 30px; background-image: url('../img/bbs/gallery-prev.png')}
.bbs-view_gallery .big .slick-next{right: 30px; background-image: url('../img/bbs/gallery-next.png')}

.steps-member{display: flex; justify-content: center; gap:40px; font-size: 1.125rem; text-align: center; line-height: 1.15; margin-bottom: 60px; font-weight: 700; color: #999}
.steps-member > li{position: relative;}
.steps-member > li:not(:first-child):before{left: -40px; width: 40px; height: 2px; top:39px; content: ''; background: #f0f0f0; position: absolute;}
.steps-member .no{width: 80px; height: 80px; display: flex; align-items:center;justify-content: center; margin: 0 auto 20px; background: #f0f0f0; border-radius:50%}
.steps-member .active{color: var(--blue)}
.steps-member .active .no{background-color: var(--blue); color: #fff}
.steps-member .c{font-weight: 500;}

.agree-ck{border:1px solid #ddd; padding: 15px 20px; border-radius:5px; font-size: 1.125rem; font-weight: 500; color:var(--black3)}
.agree-box{border:1px solid #ddd; padding: 40px; border-radius:5px; height: 220px; overflow-y: auto; margin-bottom: 10px;}

.write-st1{padding-bottom: 40px; border-bottom: 1px solid #ddd;}
.write-st1 .group{display: flex}
.write-st1 .group:not(:first-child){margin-top: 20px;}
.write-st1 .t{width: 165px;font-weight: 500; font-size: 1.25rem; color: var(--black3); padding: 20px 0;     display: flex;  align-items: center;}
.write-st1 .c{flex:1;     display: flex; align-items: center; padding: 0 0; width: calc(100% - 165px); flex-wrap:wrap}
.write-st1 input[type="text"]{width: 100%; height: 54px; border-radius:8px}
.write-st1 .max-500{max-width: 500px}

.form-txt{font-size: 1rem; color: #999}

.box-ck{border:1px solid #ccc; border-radius:8px; background: #f9f9f9;padding: 30px 60px; margin-bottom: 40px; font-size: 1.25rem; color: var(--black3); align-items:center; display: flex}
.box-ck:before{width: 58px;height: 58px; background: url('../img/bbs/ck.png') center center no-repeat; background-size:100%; content: ''; margin-right: 30px;}
/* .write-st1 .t,.write-st1 .c{display: flex; align-items:center} */
.box-ck.type2{border:0; background: #f7f7f7}
.box-ck.type2:before{width:40px; height: 40px; margin-right: 25px;}

.tel-st1{display: flex; justify-content:space-between; align-items:center; width: 100%}
.tel-st1 > li{width: 31.3%}

.mail-st1{display: flex; justify-content:space-between; align-items:center; width: 100%}
.mail-st1 .dash{width: 4%; text-align: center;}
.mail-st1 > li{width: 31.5%}
.mail-st1 > li:last-child{width: 32%; margin-left: 1%;}

.add-st1{width: 100%}
.add-st1 > li:not(:first-child){margin-top: 10px;}

.join-ok .top{line-height: 1.15; text-align: center;}
.join-ok .top:before{display: block; width: 160px; height: 160px; background: #f7f7f7 url('../img/bbs/join-ok.png') center center no-repeat; border-radius:50%; background-size:99px; display: block; margin:  0 auto 40px; content: ''}
.join-ok .top strong{display: block; font-size: 2rem; color: var(--black3);}
.join-ok .top span{display: block; font-size: 1.125rem; font-weight: 500; margin-top: 20px;}
.join-ok .tbl-st1{max-width:800px; margin: 40px auto;}

.tbl-st1{border:1px solid #ddd; border-radius:10px; overflow: hidden; overflow-x: auto;}
.tbl-st1 table{width: 100%}
.tbl-st1 th{background: #efefef; text-align: center; color: var(--black3); padding: 5px; height:60px; font-size: 1.125rem; font-weight: 500; border-left:1px solid #ddd;} /* padding: 20px 5px */
.tbl-st1 td{padding: 5px; height:60px; text-align: center; border-top: 1px solid #ddd; border-left: 1px solid #ccc;}
.tbl-st1 .bl0{border-left: 0;}
.tbl-st1 .grey{background: #efefef; color: var(--black3)}
.tbl-st1 .pl{padding-left: 1em;}
.tbl-st1 .th{background: #f9f9f9f9; color: var(--black3); font-weight: 500;}
.tbl-st1 tr th:first-child,
.tbl-st1 tr td:first-child{border-left: 0;}
/* .tbl-small td{height: 60px; padding: 5px} */

.box-member{border:1px solid #ccc; border-radius:10px; padding: 70px 40px; background: #fff; max-width:620px; margin: 0 auto;}
.box-member input[type="text"],.box-member input[type="password"]{width: 100%; height: 54px; border-radius:8px}
.login-form > li:not(:first-child){margin-top: 10px;}
.login-etc{margin: 20px 0 40px; display: flex; justify-content:space-between; font-size: 1rem; align-items:center}
.login-etc input[type=checkbox] + label:before{width: 1rem; height: 1rem}
.login-etc input[type=checkbox]:checked + label:before{background-size:55%}
.login-etc .remeber{color: var(--black3)}
.login-etc .link{display: flex; align-items:center}
.login-etc .link span{position: relative;}
.login-etc .link span:not(:first-child){margin-left: 10px; padding-left: 10px;}
.login-etc .link span:not(:first-child):before{position: absolute; width: 1px ; height: 12px; background: #ccc; content: ''; margin-top: -6px;; left: 0; top:50%}

.login-bot{margin-top: 35px; padding-top: 35px; border-top: 1px solid #ccc;}
.login-bot .t{display: block; text-align: center;}
.login-bot .btn-member{margin: 20px 0;}

.bul-mark > li{margin-top: 0.4em;}
.bul-mark > li:first-child{margin-top: 0;}
.bul-mark > li,.bul-mark.b{padding-left: 1.33em;position: relative;display: block;}
.bul-mark > li:before, .bul-mark.b:before{position: absolute;left: 0;top:0;content: '※'}

.bul-mark2 > li{margin-top: 0.4em;}
.bul-mark2 > li:first-child{margin-top: 0;}
.bul-mark2 > li,.bul-mark2.b{padding-left: .85em;position: relative;display: block;}
.bul-mark2 > li:before, .bul-mark2.b:before{position: absolute;left: 0;top:0;content: '*'}

.bul-dash{text-align: left;}
.bul-dash > li{margin-top: 0.4em; position: relative; padding-left: .75em;}
.bul-dash > li:first-child{margin-top: 0;}
.bul-dash > li:before{position: absolute;left: 0;top:0;content: '-'}

.box-member img{display: block;margin: 0 auto;}
.find-pw_img{margin-bottom: 40px;}
.find-form .t{display: block; font-weight: 500; color: var(--black3); margin-bottom: 5px;}
.find-form > li:not(:first-child){margin-top: 20px;}

.btn_w-cer{display: flex; gap:5px}
.btn_w-cer button{width: 120px;border-radius:8px; font-weight: 700; border-radius:10px}
.btn_w-cer input{flex:1}

.box-check{background: #f7f7f7; border-radius:5px; padding: 65px;border-radius:8px}
.box-check .t{font-size: 40px; font-weight: 700; color: var(--black2); margin-bottom: 30px; display: block; display: flex; line-height: 1.18; letter-spacing: -0.04em;}
.box-check .t:before{background: url(../img/bbs/ico-ck.png) left top no-repeat; width: 49px; height: 48px; display: block; content: ''; margin-right: 13px;}

.box-check .t.doc:before{background-image: url(../img/bbs/ico-ck2.png); width: 49px; height: 48px; margin-right: 10px;}

.bul-dot > li{position: relative; padding-left: .8em;}
.bul-dot > li:before{position: absolute; width: 6px; height: 6px; background: var(--blue); content: ''; left: 0; top:.54em}
.bul-dot > li:not(:first-child){margin-top: 1.25rem;}
/* .bul-dot.mt > li:not(:first-child){margin-top: 1.25rem;} */

.steps-st1{display: flex; justify-content: center; line-height: 1.15; margin-bottom: 40px; color: #666; font-weight: 400; margin-left: -50px; text-align: center; font-size: 1.125rem; flex-wrap:wrap}
.steps-st1 > li{position: relative; width: calc(20% - 50px); border:1px solid #ddd; border-radius:5px; margin-left: 50px; height: 60px; display: flex; align-items:center; justify-content:center}
.steps-st1 > li:not(:first-child):before{left: -50px; width: 50px; height: 100%; top:0; content: ''; background: url('../img/bbs/steps-st1.png') center center no-repeat; position: absolute; background-size:12px}
.steps-st1 .active{color: #fff;  background: url('../img/bbs/steps-bg.gif') center center no-repeat; background-size:cover; border:0}
.steps-st1 .no{font-weight: 400; margin-right: 3px;}

.form-dev3{display: flex; flex-wrap:wrap; gap:15px; margin-left: -75px;}
.form-dev3 label{white-space: nowrap;}
.form-dev3 > *{margin-left: 70px;}
.form-dev3 .d-flex{width: auto}

.btn-add{font-size: 14px; color: #666; font-weight: 400; display: flex; align-items:center}
.btn-add .circle{width: 40px; height: 40px; border-radius:50%; border:1px solid #ccc; margin-left: 10px; position: relative;}
.btn-add .circle:before,.btn-add .circle:after{position: absolute; left: 50%; top:50%; transform:translate(-50%, -50%); background: #aaa; content:''}
.btn-add .circle:before{width: 1rem; height: 2px}
.btn-add .circle:after{height: 1rem; width: 2px}
.file-st1{display: flex; max-width:530px}
.file-st1 label {
    position:relative;
    overflow:hidden;
    width:100px;
    height:45px;
    background:var(--black6);
    color:#fff;
    text-align:center; display: flex; align-items:center; justify-content:center; border-radius:5px
}
.file-st1 label input {
    position:absolute;
    width:0;
    height:0;
    overflow:hidden;
}
.file-st1 input[type=text] {
	flex:1; margin-right: 10px;
}


.d-datetime{display: flex; justify-content:center}
.d-datetime > *{width: 50%; position: relative; display: flex; align-items:center; justify-content: center;}
.d-datetime > *:before{ background: url('') left center no-repeat; background-size:1rem; width: 17px; height: 17px; display: block; margin-right: 7px; content: ''}
.d-datetime > *:last-child:after{width: 1px; height: 20px; content: ''; position: absolute; left: 0 ;top:50%; margin-top: -10px; background: #ddd;}
.d-datetime .date:before{background-image: url('../img/bbs/ico-date.png')}
.d-datetime .time:before{background-image: url('../img/bbs/ico-time.png')}

.bbs-faq{border:1px solid #ddd; width: 100%; color: var(--black3); border-bottom: 0;}
.bbs-faq td{border-bottom: 1px solid #ddd; padding: 20px; text-align: center;}
.bbs-faq a{font-weight: 500; text-align: left; display: block; position: relative; padding-right: 25px;}
.bbs-faq .a{text-align: left; background: #f7f7f7; color: #666; display: none;}
.bbs-faq .a td{text-align: left;}
.bbs-faq .reply{background: url('../img/bbs/reply.png') left top no-repeat; padding-left: 25px;}
.bbs-faq a:after{width: 10px; height: 10px; border-top: 2px solid #666; border-left: 2px solid #666; vertical-align: middle; display: block; content: ''; margin-left: 10px; transform: rotate(-135deg);  margin-top: -8px;     position: absolute;
    right: 0;
    top: 50%;}
.bbs-faq .opend a:after{transform: rotate(45deg); margin-top: -3px;}

.box-req{background: #f7fbff; padding: 63px 530px 63px 55px; font-weight: 500; color: var(--black3); font-size: 1.25rem; position: relative; line-height: 1.4; margin-bottom: 60px;    min-height: 180px;
    display: flex;
    align-items: center;}
.box-req .img{position: absolute; right: 159px; bottom: 0;}
.box-req .img img{display: block;}

.bbs-faq2{width: 100%; color: var(--black3); border-bottom: 0; border-radius:8px; border:1px solid #ddd; overflow: hidden;}
.bbs-faq2 .item{border-bottom: 1px solid #ddd;}
.bbs-faq2 .item:first-child{border-radius:8px 8px 0 0}
.bbs-faq2 .item:last-child{border-radius:0 0 8px 8px; border-bottom: 0;}
.bbs-faq2 a{font-weight: 500; text-align: left; display: flex; position: relative; padding: 20px 30px; position: relative;  color: var(--black3); font-weight: 500; align-items:center}
.bbs-faq2 a:before{content: 'Q'; font-family: var(--gmarket); color: var(--blue); font-size: 1.5rem; font-weight: 700; display: block;}
.bbs-faq2 .a{text-align: left; background: #f7f7f7; color: #666; padding: 20px 15px 20px 83px; border-top: 1px solid #ddd; display: none;}
.bbs-faq2 .reply{background: url('../img/bbs/reply.png') left top no-repeat; padding-left: 25px}
.bbs-faq2 a:after{width: 13px; height: 13px; border-top: 1px solid #666; border-left: 1px solid #666; vertical-align: middle; display: block; content: ''; ; margin-left: 10px; transform: rotate(-135deg); margin-top: -3px;}
.bbs-faq2 .q div{flex:1; margin: 0 30px;}
.bbs-faq2 .opend a:after{transform: rotate(45deg); margin-top: 3px;}

.bbs-faq a:after,.bbs-faq2 a:after{transition:all ease .3s}

.box-req{background: #f7fbff; padding: 63px 530px 63px 55px; font-weight: 500; color: var(--black3); font-size: 1.25rem; position: relative; line-height: 1.4; margin-bottom: 60px;    min-height: 180px;
    display: flex;
    align-items: center;}
.box-req .img{position: absolute; right: 159px; bottom: 0;}
.box-req .img img{display: block;}

.steps-type,.steps-app{display: flex; flex-wrap:wrap}
.tbl-blue{width: 100%; border-top: 2px solid var(--blue); border-left: 0; background: #fff; border-right: 1px solid #ccc; font-size: 1.125rem; color: var(--black3)}
.tbl-blue th{background: #f1f9ff; font-size: 1.25rem; font-weight: 700;  padding: 20px 10px; text-align: center; border-bottom: 1px solid #ccc; border-left: 1px solid #ccc;}
.tbl-blue td{border-left: 1px solid #ccc;; border-bottom: 1px solid #ccc; text-align: center; padding: 20px 10px}
.tbl-blue .bg{background: #efefef; color: #333; font-weight: 700;}
.tbl-blue .ta-l{padding-left: 1.25rem;}
.steps-type > li{flex-basis: 150px; display: flex; align-items:center}
.steps-type > li:first-child{flex:1}
.steps-type > li:nth-child(2){flex:3}
.steps-type > li:nth-child(3){flex:2}
.steps-type > li:not(:first-child):before{width: 20px; height: 17px; background: url('../img/vil/arrow.png') center center no-repeat; content: ''; display: block; margin: 0 20px; background-size:100%}
.steps-type .tbl-blue{min-height: 100%}

.steps-app{margin-left: -60px;}
.steps-app > li{display: flex; align-items:center; width: calc(25% - 60px); margin-left: 60px; position: relative;}
.steps-app > li:not(:first-child):before,
.steps-app2 > li:not(:first-child):before{width: 60px; height: 100%; background: url('../img/vil/arrow.png') center center no-repeat; content: ''; display: block; background-size:20px; position: absolute; left: -60px; top:0}
.steps-app2,.steps-app2_bot{display: flex; justify-content:center; margin-left: -60px; min-width:400px}

.steps-app2 > li,.steps-app2_bot:before{margin-left: 60px;}
.steps-app2 > li{position: relative; width: calc(25% - 60px)}
.steps-app2 > li:nth-child(2){width: calc(50% - 60px)}
.steps-app2_bot > li{width: calc(50% - 60px); margin-left: 60px;}
.steps-app2_bot{flex-flow:column; align-items:center}
.steps-app2_bot:before{width: 100%; height: 28px; background: url('../img/vil/arrow2.png') center center no-repeat; content: ''; margin-top: 20px; margin-bottom: 20px;;   display: block;; background-size:17px}

.steps-app2 .dotted{border:1px dashed #ccc; background: #fff; height: 100%; display: flex; align-items:center; justify-content:center;text-align: center;}
.stats-graph canvas{width:100%}

.stats-graph{display: flex; justify-content:space-between}
.stats-graph > li{border:1px solid #ccc; border-radius:5px; width:calc(50% - 20px); padding: 40px; display:flex;    align-items: center;}

.stats-graph .box1{display: flex;    align-items:center; width: 100%}
.stats-graph .canvas{    position: relative;
    width: 80%;
    margin: 0 -10% 0 -18%;}
.stats-graph .ab{position: absolute; left: 0; top:0;width: 100%; height: 100%;    display: flex; align-items: center; justify-content: center;    flex-flow: column; color: var(--black3); font-size: 1.125rem; line-height: 1.35;}
.stats-graph .label_w{display: flex;flex-flow: column; flex:1; font-size: 1.125rem;}
.stats-graph .label_w > span{display: flex; justify-content:space-between;align-items:center}
.stats-graph .label_w .circle{width: 15px; height: 15px; border-radius:50%; margin-right: 8px;;}
.stats-graph .label_w .area{flex:1}
.stats-graph .label_w > span:not(:first-child){margin-top: 10px;}
.stats-graph .label_w strong{color: var(--black1); font-weight: 500;}
.stats-graph .ab strong{font-size: 2em; font-weight: 00;}
.stats-graph .ab span{}
.stats-graph #graph2{margin-bottom: -10px;}

.sch-stats{border:1px solid #ccc; background: #f9f9f9; border-radius:8px; display: flex; align-items:center; margin-bottom: 67px; justify-content:center; padding: 13px; font-size: 1.125rem; font-weight: 500;}
.sch-stats button{background: #333; border-radius:4px; color: #fff; font-size: 1rem; font-weight: 400; width: 60px; height: 30px; line-height: 1; margin-left: 30px;}
.sch-stats input[type="radio"] + label:not(:last-child){margin-right: 30px;}
.sch-stats input[type=radio] + label:before{top:2px}
.sch-stats input[type=radio] + label{top: -2px;}

.ov-x{overflow-x:auto;}

.graph-invil .top{text-align: center; background: url('../img/sub/arrow.gif') center bottom no-repeat; padding-bottom: 200px; margin-bottom: -30px;}
.graph-invil .top strong{font-size: 140px; line-height: 1; font-weight: 700; position: relative; padding: 0 115px 25px}
.graph-invil .top strong:before{content: '“'; left: 0; top:0;}
.graph-invil .top strong:before,.graph-invil .top strong:after{font-size: 120px; font-weight: 700; color: #ddd; position: absolute;}
.graph-invil .top strong:after{content: '”'; right: 0; bottom: -15px}
.graph-invil .mid{color: #ccc; font-size: 40px; font-weight: 700; position: relative; margin-bottom: 100px;}
.graph-invil .mid:before{position: absolute; left: 0; width: 100%; top:50%; height: 1px; background: #abd8fc; content: ''}
.graph-invil .mid ul{display: flex; justify-content:center; position: relative; z-index: 1}
.graph-invil .mid li{width: 320px; height: 320px; border-radius:50%; border:1px solid #abd8fc; display: flex; align-items:center; justify-content:center; margin: 0 -10px; position: relative;}
.graph-invil .mid li:before{position: absolute; left: 0; width: 100%; top:50%; height: 1px; background: #fff; content: ''}
.graph-invil .mid li > strong{position: relative; z-index: 1}

.graph-invil .mid:after{position: absolute; left: 50%; width: 1px; height: 100px; background: #ccc; content: ''; bottom: -100px}
.graph-invil .dev{display: flex; color: var(--black3);    justify-content: space-between; padding-top: 70px; position: relative;}
.graph-invil .dev .t{display: block; width:100%; max-width:400px; height: 60px; display: flex; align-items:center; justify-content:center; border-radius:100px; position: relative; margin: -30px auto 35px; font-size: 1.125rem; font-weight: 500; text-align: center;}
.graph-invil .dev > li{border:1px solid #ccc;border-radius:10px; padding: 0 40px 40px; position: relative; width: 48%}
.graph-invil .dev > li:before{width: 1px; height: 70px; left: 50%; content: ''; background: #ccc; position: absolute; top:-70px}
.graph-invil .dev:before{position: absolute; left: 24%; top:0; content: ''; height: 1px; background: #ccc; width: 52%}

.bul-no > li{position: relative; padding-left: 2em;}
.bul-no > li strong{background: var(--blue); color: #fff; width: 1.5rem; border-radius:50%; position: absolute; left: 0; top:0; text-align: center; font-weight: 400;}
.bul-no.blue2 > li strong{background: var(--blue2); display: block;}
.bul-no > li:not(:first-child){margin-top: 1.25rem;}

.api_w{display: flex; justify-content:space-between}
.api_w > *{width: 48.5%}
.api_w .graph{border:1px solid #ddd; padding: 20px; border-radius:8px}

.btn-link{font-size: 1rem; font-weight: 500; display: inline-block; padding: 8px 15px; border-radius:4px; line-height: 1.15;}

.page-contact .box{Border:1px solid #ccc; border-radius:8px; padding: 40px 50px; display: flex; align-items:center; gap:45px}
.page-contact .ico{width: 120px; height: 120px; border-radius:50%; background: #f9f9f9 url('') center center no-repeat; background-size:53px}
.page-contact .ico.c1{background-image: url('../img/sub/c1.png')}
.page-contact .ico.c2{background-image: url('../img/sub/c2.png')}
.page-contact .ico.c3{background-image: url('../img/sub/c3.png')}
.page-contact .ico.c4{background-image: url('../img/sub/c4.png')}
.page-contact .bul-dot{flex:1; font-size: 1.125rem; color: var(--black3)}

/* 날짜 입력 필드 스타일 통일 */
input[type="date"]{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:white;border:1px solid #ddd;border-radius:4px;padding:8px 12px;font-size:14px;line-height:1.42857143;color:#555;background-image:none;box-shadow:inset 0 1px 1px rgba(0,0,0,.075);transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s}
input[type="date"]:focus{border-color:#66afe9;outline:0;box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6)}
input[type="date"]::-webkit-calendar-picker-indicator{opacity:1;cursor:pointer}
input[type="date"]::-moz-calendar-picker-indicator{opacity:1;cursor:pointer}

/* readonly 속성 회색 처리 */
input[type="text"][readonly],
input[type="password"][readonly],
input[type="email"][readonly],
input[type="number"][readonly],
textarea[readonly] {background-color: #F0F0F0 !important;color: #999 !important;border-color: #ddd !important;cursor: not-allowed;}

#surveyApproveCd{width: 50%;}

.bg_reg{    width: 300px !important;}
.btns-center {width: 100% !important;;text-align: center; display: flex; justify-content: center; align-items: center;margin-top: 15px;}