.smooth-wrapper,
.smooth-content {
    position: relative;
    z-index: 0;
}
/*********************************/
/* 버튼 공통*/
/*********************************/
.sub_content .view_btns {display: flex; justify-content: center; gap: 8px; margin-top: 40px;}
.sub_content .view_btns > div button {display: block; width: 100px; padding: 16px; border-radius: 40px; font-size: clamp(14px, calc( 14 / var(--inner2) * 100vw ), 14px); text-align: center; display:inline-flex; align-items:center; justify-content:center; font-weight: 700;}
.sub_content .view_btns > div > a {    display: flex; align-items: center; justify-content: center;  width: 100px; height: 100%; padding: 16px; border-radius: 40px; font-size: clamp(14px, calc( 14 / var(--inner2) * 100vw ), 14px); text-align: center; font-weight: 700;}
.sub_content .view_btns .btn01 a {background-color: #333; color: #fff; height: 50px;}
.sub_content .view_btns .btn01 button {background-color: #333; color: #fff; height: 50px;}
.sub_content .view_btns .btn02 a {background-color: #fff; border: 1px solid #000; color: #000;}


/*********************************/
/* 서브 비주얼 */
/*********************************/
#sub {padding-top: 160px;}

@media screen and (max-width:1200px) {
    #sub {padding-top: 210px;}

}
#sub .inner {width: var(--inner); margin: 0 auto;}


#sub .titlebox .sub_title {margin-bottom: 10px; font-size: clamp(14px, calc( 14 / var(--inner2) * 100vw ), 14px);}
#sub .titlebox .main_title {font-size: clamp(30px, calc( 48 / var(--inner2) * 100vw ), 48px); font-weight: 700;}

article#sub + .sub_content .searchbox01 { margin-top: 60px; }

#sub .lnb {margin: 40px 0 80px;}
#sub .lnb ul {display: flex; gap: 8px; flex-wrap: wrap;}
#sub .lnb ul li a {display: block; padding: 16px; border: 1px solid #ccc; border-radius: 40px; font-size: clamp(14px, calc( 14 / var(--inner2) * 100vw ), 14px); text-align: center; line-height: 1.2; transition: backgroundColor 0.3s;}
#sub .lnb ul li a.active {background-color: var(--point2); border: 1px solid var(--point2); color: #fff;}

#sub #visual {margin: 80px 0;}
#sub #visual .textbox {padding: 165px 0; background: url(../img/bg_sub.png) no-repeat center/cover;}
#sub #visual .textbox h2 {font-size: clamp(25px, calc( 38 / var(--inner2) * 100vw ), 38px); color: #fff;}
#sub #visual .textbox p {margin-top: 20px; max-width: 60%; font-size: clamp(14px, calc( 16 / var(--inner2) * 100vw ), 16px); color: #fff; line-height: 1.4;}
#sub #visual .textbox .btn {display: inline-flex; align-items: center; gap: 10px; margin-top: 40px; padding: 16px; background-color: #fff; border-radius: 40px; font-size: clamp(14px, calc( 14 / var(--inner2) * 100vw ), 14px);}

.mobile_lnb_wrap {display: none; color: #000;}
.mobile_lnb_wrap .mobile_lnb {background-color: transparent; color: inherit !important; font-size: clamp(20px, calc( 30 / var(--inner2) * 100vw ), 30px); text-align: left;}
.mobile_lnb_wrap .icon {display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background-color: #333;}
.mobile_lnb_wrap .icon svg {transition: transform 0.4s;}

@media screen and (max-width:768px) {
    #sub  {position: relative; z-index: 8888;}
    #sub .inner {position: relative;}
    #sub #visual .textbox p {max-width: 100%;}

    .mobile_lnb_wrap {display: flex; width: 100%; background-color: transparent;}
    .mobile_lnb_wrap.active svg {transform: rotate(180deg);}

    #sub .lnb {margin: 40px 0 50px;}
    #sub .lnb ul {position:absolute; left: 0; display: block; width: 100%; max-height: 0;overflow: hidden;opacity: 0;transition: all 0.3s ease; background-color: #fff; box-shadow: rgba(17, 17, 26, 0.05) 0px 1px 0px, rgba(17, 17, 26, 0.1) 0px 0px 8px;}
    #sub .lnb ul.active {z-index: 9999; max-height: 1000px; opacity: 1; margin-top: 10px;}
    article#sub + .sub_content .searchbox01 {margin-top: 0;}
    #sub .lnb ul li:last-of-type a {border-bottom: none;}
    /* #sub .lnb ul li a {border-radius: 0; border: none; border-bottom: 1px solid #ccc; text-align: left; color: #afafaf; background: url(../img/ico_arrow_right_small_ccc.png) no-repeat right 15px center/cover; background-size: 8px;}
    #sub .lnb ul li a.active {background-color: #fff; color: #000; font-weight: 700; background: url(../img/ico_arrow_right_small.png) no-repeat right 15px center/cover; background-size: 8px; border-bottom: 1px solid #ccc; } */

    #sub .lnb ul li a {border-radius: 0; border: none; border-bottom: 1px solid #eee; text-align: left; color: #666; }
    #sub .lnb ul li a.active {background-color: #fff; color: var(--point2); font-weight: 700; border-bottom: 1px solid var(--point2) !important;}

}


.sub_content .inner {width: var(--inner); margin: 0 auto;}

.sub_content .searchbox01 {display: flex; justify-content: center; gap: 15px;}

.sub_content .searchbox01 select {height: 50px; padding: 0 20px; border: none; font-size: clamp(14px, calc( 14 / var(--inner2) * 100vw ), 14px); color: #666; -o-appearance: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; background: #f5f5f5 url(../img/ico_select.png) calc(100% - 20px) center no-repeat; background-size: 8px; outline: none; width: calc((100% - 520px)/3);}
.sub_content .searchbox01 select::-ms-expand {display: none;}

/* .sub_content select {line-height: 50px;}
.sub_content select option {padding: 5px 20px; border: none; outline: none; background: #f5f5f5;} */

.sub_content .inputbox01 {position:relative;}
.sub_content .inputbox01 input.w520 {width: 520px; height: 50px; padding: 0 20px; border: 2px solid #000;}
.sub_content .inputbox01 input::placeholder {color: #666; font-size: clamp(14px, calc( 14 / var(--inner2) * 100vw ), 14px);}
.sub_content .inputbox01 .search {position:absolute; right: 20px; top: 50%; transform: translateY(-50%); background-color: transparent; border: none; cursor: pointer;}

.sub_content .sort_wrap {flex-wrap: wrap; gap: 10px; margin-top: 45px;}
.sub_content .sort_wrap .sort select {margin-top: 0 !important;}
.sub_content .sort {display: flex; justify-content: end; margin-left: auto;}
.sub_content .sort select {width: 50px; margin-top: 45px; border: none; -o-appearance: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; background: url(../img/ico_select.png) calc(100% - 0px) center no-repeat; background-size: 8px; outline: none; color: #000;}

.sub_content .sort_wrap .search_result_desc {flex-shrink: 0;}

@media screen and (max-width:1284px) {
    .sub_content .inputbox01 input.w520 {width: 400px;}
    .sub_content .searchbox01 select {width: calc((100% - 400px) / 3);}
}

@media screen and (max-width:1200px) {
    .sub_content .searchbox01 {flex-direction: column;}
    .sub_content .searchbox01 select {width: 100%;}
    .sub_content .inputbox01 input.w520 {width: 100%;}
}

/*********************************/
/* 서브페이지 진입 효과 */
/*********************************/
.sub_content {animation: entryeff 1s forwards;}
#sub {opacity: 0; animation: entryeff 1s forwards;}

@keyframes entryeff {
    0% {opacity: 0;}
    100% {opacity: 1;}
}

/*********************************/
/* 리스트 헤더 */
/*********************************/
.list_wrap .common_table {width: 100%;}
.list_wrap .common_table thead tr {border-bottom: 2px solid #000;}
.list_wrap .common_table thead th {padding: 20px 0; color: #000 !important; font-weight: 700 !important; font-size: clamp(14px, calc( 16 / var(--inner2) * 100vw ), 16px) !important;}
.list_wrap .common_table tbody tr {border-bottom: 1px solid #ccc;}
.list_wrap .common_table tbody td {padding: 20px 0;}

.list_wrap .common_table tbody td.num {text-align: center; font-weight: 700;}
.list_wrap .common_table tbody td .date {margin-top: 10px; color: #999; font-size: clamp(14px, calc( 14 / var(--inner2) * 100vw ), 14px);}
.list_wrap .common_table tbody td.state {text-align: center;}
.list_wrap .common_table tbody td.state span {margin:0;}

.sub_content .list_header {padding:20px 0; border-bottom: 2px solid #000; color: #000; font-size: 16px; font-weight: 700;}
.sub_content .list_header .num {color: #000 !important; font-size: 16px !important; font-weight: 700;}
.sub_content .list_header .type {width: 200px; color: #000 !important; font-size: 16px !important; font-weight: 700;}
.sub_content .list_header .titbox {color: #000 !important; font-size: clamp(14px, calc( 16 / var(--inner2) * 100vw ), 16px) !important; font-weight: 700; text-align: center !important;}
.sub_content .list_header .date {color: #000 !important; font-size: 16px !important; font-weight: 700; }

@media screen and (max-width:768px) {
    .list_wrap .common_table thead,
    .sub_content .list_header {display: none;}

    .list_wrap .common_table tbody td {display: block; width: 100%; text-align: left !important;}
}

/*********************************/
/* 기술교육 */
/*********************************/
.cal_header {display: grid; grid-template-columns: 1fr 1fr 1fr; margin:90px 0 45px;}

.cal_kind { display: flex; width: fit-content; border-radius: 50px; border: 1px solid #ccc; height: 40px;}
.cal_kind li a {display: inline-flex; justify-content: center; align-items: center; width: 135px; height: 40px; gap: 10px; border-radius: 50px; }
.cal_kind li a.on { background: #000; color: #fff; }
.cal_kind li a path, .cal_kind li a rect { fill: #000000; }
.cal_kind li a.on path, .cal_kind li a.on rect { fill: #fff; }

.cal_toolbar {display: flex; justify-content: center; align-items: center; gap: 20px;}
.cal_toolbar button {width: 40px; height: 40px; background-color: transparent; border-radius: 50%; cursor: pointer;}
.cal_toolbar button.cal_previous {border: 1px solid #000;}
.cal_toolbar button.cal_next {border: 1px solid var(--point2);}
.cal_toolbar .cal_title {font-size: clamp(30px, calc( 46 / var(--inner2) * 100vw ), 46px); font-weight: 900;}

.cal_cate {display: flex; justify-content: end; align-items: center; gap: 12px; flex-wrap: wrap;}
.cal_cate li {color: rgba(51,51,51,0.8); font-size: clamp(14px, calc( 16 / var(--inner2) * 100vw ), 16px);}
.cal_cate li::before {display: inline-block; content: ''; width: 8px; height: 8px; margin-right: 5px; border-radius: 50%; }
.cal_cate li.bullet_01::before { background: #CF202F; }
.cal_cate li.bullet_02::before { background: #0477BF; }
.cal_cate li.bullet_03::before { background:#EA7620; }
.cal_cate li.bullet_04::before { background: #666; }

/*********************************/
/* 기술교육 - 달력형 */
/*********************************/
.cal_date {display: grid; grid-template-columns: repeat(7, 7fr);}
.cal_date .day {padding: 20px 0; border-top: 2px solid #000; border-bottom: 2px solid #000; font-size: clamp(18px, calc( 22 / var(--inner2) * 100vw ), 22px); font-weight: 700; text-align: center;}
.cal_date .day.sun {color: #850008;}
.cal_date .day.sat {color: #0066B3;}
.cal_date .cell {height: 240px; padding: 20px; border-left: 1px solid #000; border-bottom: 1px solid #000; transition: background-color 0.4s;}
.cal_date .cell:hover {background-color: #F5F5F5;}
.cal_date .cell:nth-child(7n) {border-right: 1px solid #000; }

.cal_date .cell span {display: block; margin-bottom: 15px; font-size: clamp(14px, calc( 16 / var(--inner2) * 100vw ), 16px); font-weight: 700;}

.cal_date .cell-sun {color: #850008;}
.cal_date .cell-sat {color: #0066B3;}

.cal_date .cell ul li.event {position: relative; padding-left: 15px; font-size: clamp(14px, calc( 14 / var(--inner2) * 100vw ), 14px); color: #333; font-weight: 400; line-height: 1.4;}
.cal_date .cell ul li.event::before {position: absolute; left: 0; top: 6px; display: inline-block; content: ''; width: 8px; height: 8px; margin-right: 5px; border-radius: 50%;}

.cal_date .cell ul li.event.bullet_01::before { background: #CF202F; }
.cal_date .cell ul li.event.bullet_02::before { background: #0477BF; }
.cal_date .cell ul li.event.bullet_03::before { background:#EA7620; }
.cal_date .cell ul li.event.bullet_04::before { background: #666; }

.cal_date .cell-other span,
.cal_date .cell-other ul {opacity: 0.3;}

@media screen and (max-width:1500px) {
    .cal_header {grid-template-columns: 1fr;}
}

@media screen and (max-width:1300px) {
    .cal_date .cell {padding: 10px;}
}

@media screen and (max-width:1284px) {
    .cal_header {row-gap: 30px;}
    .cal_cate {width: 100%;}
}

@media screen and (max-width:1024px) {

    .cal_date {grid-template-columns: repeat(1,1fr); border-top: 1px solid #000;}
    .cal_date .day {display: none;}
    .cal_date .cell {height: 160px; border-right: 1px solid #000;}
}


/*********************************/
/* 기술교육 - 리스트형*/
/*********************************/
.cal_view {display: none;}
.cal_view.show {display: grid;}

.cal_list {border-top: 2px solid #000;}
.cal_list .cell {border-bottom: 1px solid #ccc; transition: background-color 0.4s;}
.cal_list .cell:hover {background-color: #f5f5f5;}
.cal_list .cell a {display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 40px 0;}
.cal_list .cell a .cal_day {width: 100px;}
/* .cal_list .cell a .cal_state {width: 100px;} */

.cal_list .cell a .cal_day {font-weight: 700; font-size: clamp(14px, calc( 16 / var(--inner2) * 100vw ), 16px); text-align: center;}

.cal_list .cell a .cal_content {width: calc(100% - 200px);}
.cal_list .cell a .cal_content .cal_cate {margin-bottom: 15px;}
.cal_list .cell a .cal_content .cal_cate li {font-size: clamp(13px, calc( 14 / var(--inner2) * 100vw ), 14px);}
.cal_list .cell a .cal_content .cal_title {margin-bottom: 10px; font-size: clamp(16px, calc( 16 / var(--inner2) * 100vw ), 16px); font-weight: 700; line-height: 1.5;}
.cal_list .cell a .cal_content .desc {color: #999; font-size: clamp(13px, calc( 14 / var(--inner2) * 100vw ), 14px); line-height: 1.4;}

.cal_state {display: inline-block; padding: 4px 16px; background-color: #999; border-radius: 40px; color: #fff; font-size: clamp(13px, calc( 12 / var(--inner2) * 100vw ), 12px); text-align: center; margin-right: 20px;}
.cal_state_ing {background-color: var(--point);}
.cal_state_end {background-color: #999;}

.cal_list .cal_cate {justify-content: unset;}

#learning .btnSet {display: flex; justify-content: center; gap: 8px; margin-top: 40px;}
#learning .btnSet > div > a {display: block; padding: 16px; border-radius: 40px; font-size: clamp(14px, calc( 14 / var(--inner2) * 100vw ), 14px);}
#learning .btnSet .btn01 a {background-color: #333; color: #fff;}
#learning .btnSet .btn02 a {background-color: #fff; border: 1px solid #000; color: #000;}

#learning .btnSet svg {margin-left: 8px;}


@media screen and (max-width:768px) {

    .cal_list .cell a .cal_day {width: 60px;}
    .cal_list .cell a .cal_content {width: calc(100% - 130px);}
}

@media screen and (max-width:375px) {
    .cal_list .cell a {flex-direction: column; align-items: baseline;}
    .cal_list .cell a .cal_day {text-align: left;}
    .cal_cate {margin-top: 20px;}
    .cal_list .cell a .cal_content {width: 100%;}
    .cal_list .cell a .cal_state {margin-top: 20px;}
    .cal_list .cell a .cal_state {margin-right: 0;}
}

/*********************************/
/* 기술교육 - 뷰페이지*/
/*********************************/
.sub_content .golist {display: flex; justify-content: end; align-items: center; margin-top: 90px;}
.sub_content .golist a { display: flex; align-items: center; gap: 8px; color: #666; font-size: clamp(14px, calc( 14 / var(--inner2) * 100vw ), 14px);}
.sub_content .view_content {margin-top: 25px;}
.sub_content .view_content img {max-width: 100%;}

.view_layout01 .edu_detail {border-top: 2px solid #000;}
.view_layout01 .edu_detail .titbox {flex-wrap: wrap; padding: 20px; border-bottom: 1px solid #ccc;}
.view_layout01 .edu_detail .title {font-size: clamp(14px, calc( 16 / var(--inner2) * 100vw ), 16px); font-weight: 700;}

.sub_content .hit-date {gap: 48px;}
.sub_content .hit-date {flex-shrink: 0; color: #999; font-size: clamp(14px, calc( 14 / var(--inner2) * 100vw ), 14px);}

.view_layout01 .table_info {width: 100%; border-bottom: 2px solid #000;}
.view_layout01 .table_info tr {padding: 20px 0; border-bottom: 1px solid #ccc;}
.view_layout01 .table_info tr:last-child {border-bottom: none;}
.view_layout01 .table_info tr th {width: 160px; padding: 0 20px; font-size: clamp(14px, calc( 14 / var(--inner2) * 100vw ), 14px); text-align: left;}
.view_layout01 .table_info tr td {padding: 20px; color: #666; font-size: clamp(14px, calc( 14 / var(--inner2) * 100vw ), 14px); line-height: 1.4;}
.view_layout01 .table_info tr td a.file {color: #666;}

.view_layout01 .table_content tbody td {padding: 40px 20px; border-bottom: 2px solid #000; line-height: 1.5;}
.view_layout01 .table_content {width: 100%; border-collapse: collapse;}

@media screen and (max-width:768px) {
    .sub_content .golist {margin-top: 0;}

    .view_layout01 .edu_detail .titbox {flex-direction: column; align-items: baseline; row-gap: 15px;}
    .view_layout01 .table_info tr th {width: 100px;}
}



/*********************************/
/* 기술교육 - 신청페이지*/
/*********************************/
#learning_write .detail_form01 {margin-top: 90px;}
#learning_write .detail_form h3 {margin-bottom: 20px; font-size: clamp(24px, calc( 38 / var(--inner2) * 100vw ), 38px);}
#learning_write .detail_form table {width: 100%; border-top: 2px solid #000; border-bottom: 2px solid #000;}
#learning_write .detail_form table tr {border-bottom: 1px solid #ccc;}
#learning_write .detail_form table tr:last-of-type {border-bottom: none;}
#learning_write .detail_form table th {width: 140px; padding: 20px; padding-right: 0; font-size: clamp(14px, calc( 14 / var(--inner2) * 100vw ), 14px); text-align: left;}
#learning_write .detail_form table td {padding-right: 20px; color: #666; font-size: clamp(14px, calc( 14 / var(--inner2) * 100vw ), 14px); line-height: 1.4; word-break: keep-all;}
#learning_write .detail_form02 {margin-top: 100px;}
#learning_write .detail_form02 p.required {justify-content: end; margin-bottom: 20px; font-size: clamp(14px, calc( 14 / var(--inner2) * 100vw ), 14px);}
#learning_write .detail_form input.bg {height: 40px; padding: 0 20px; background-color: #F5F5F5; border: none; color: #666; font-size: clamp(14px, calc( 14 / var(--inner2) * 100vw ), 14px);}

#learning_write .desc {margin-top: 23px; color: #666; font-size: clamp(14px, calc( 14 / var(--inner2) * 100vw ), 14px);}
#learning_write .desc .icon {display: inline-flex; justify-content: center; align-items: center; flex-shrink: 0; width: 18px; height: 18px; margin-right: 9px; border-radius: 50%; background-color: #333; color: #fff;}
#learning_write .detail_form02 span.required {color: var(--point);}

@media screen and (max-width:768px) {
    #learning_write .detail_form01 {margin-top: 0;}
}

@media screen and (max-width:425px) {
    #learning_write .detail_form table th {width: 120px;}
    #learning_write .detail_form input.bg {width: 100%;}
}

/*********************************/
/* 기타 행사 안내 */
/*********************************/
#event_list .cal_list {margin-top: 25px;}
#event_list .cal_list .cell a {padding: 20px 0;}

#event_list .list_header .num {width: 135px; font-size: clamp(14px, calc( 14 / var(--inner2) * 100vw ), 14px); font-weight: 700; text-align: center;}
#event_list .list_header .titbox {width: calc(100% - 275px);}
#event_list .list_header .date {width: 140px; color: #999; font-size: clamp(14px, calc( 14 / var(--inner2) * 100vw ), 14px);text-align: center; }

#event_list .cal_list .date {width: 140px; display: flex; align-items: center; justify-content: center; margin:0;}
#event_list .cal_list .date span.cal_state {margin: 0 auto;}

@media screen and (max-width: 375px) {
    #event_list .cal_list .date {display: block; margin-top: 10px;}
    #event_list .cal_list .cell a .cal_content {margin-top: 10px;}
}

/*********************************/
/* 기타 행사 안내 - 뷰페이지 */
/*********************************/
#event_view .cal_state {display: inline-block; width: auto; padding: 4px 16px; background-color: #999; border-radius: 40px; color: #fff; font-size: clamp(13px, calc( 12 / var(--inner2) * 100vw ), 12px); text-align: center; margin-right: 20px;}
#event_view .cal_state_ing {background-color: var(--point);}
#event_view .cal_state_end {background-color: #999;}


/*********************************/
/* 기타 행사 안내 - 검색결과 */
/*********************************/
#searchResult .list_header .num {width: 135px; font-size: clamp(14px, calc( 14 / var(--inner2) * 100vw ), 14px); font-weight: 700; text-align: center;}
#searchResult .list_header .titbox {width: calc(100% - 275px);}
#searchResult .list_header .date {width: 140px; color: #999; font-size: clamp(14px, calc( 14 / var(--inner2) * 100vw ), 14px);text-align: center; }


.sub_content .search_result_desc {color: #666; font-size: clamp(14px, calc( 14 / var(--inner2) * 100vw ), 14px);}
.sub_content .search_result_desc .num {color: #000;}

.sub_content .desc_search {font-weight: 700; color: var(--point); text-align: center; line-height: 1.4;}
#searchResult .desc_search {margin: 40px 0 70px;}
#searchResult .cal_list {margin-top: 25px;}
#searchResult .no-content {padding: 155px 0; color: #999; font-size: clamp(14px, calc( 14 / var(--inner2) * 100vw ), 14px); text-align: center;}

@media screen and (max-width: 375px) {
    #searchResult .cal_list .date {display: block; margin-top: 10px;}
}

/*********************************/
/* 영상 자료실 */
/*********************************/
#gall_list01 .sort select,
#gall_list02 .sort select {margin-top: 0;}

#gall_list01 .sort,
#gall_list02 .sort {width: auto;}

#gall_list01 .gall_title,
#gall_list02 .gall_title {margin-top: 45px;}

#gall_list01 .gall_title .tit,
#gall_list02 .gall_title .tit {font-size: clamp(16px, calc( 16 / var(--inner2) * 100vw ), 16px); font-weight: 700;}

@media screen and (max-width:425px) {
    #gall_list01 .gall_title  {flex-wrap: wrap;}
}

/*********************************/
/* 영상게시판 - 갤러리 리스트 type 01*/
/*********************************/
#gall_list01 .list_wrap {margin-top: 25px; padding-top: 20px; display: grid; grid-template-columns: repeat(4, 4fr); gap: 20px; row-gap: 40px; border-top: 2px solid #000;}

#gall_list01 .list_wrap .item .thumb {aspect-ratio: 16 / 9;}
#gall_list01 .list_wrap .item .thumb img {width: 100%; height: 100%; object-fit: cover;}
#gall_list01 .list_wrap .item .textbox {padding: 20px 20px 0 0;}
#gall_list01 .list_wrap .item .textbox .tag {margin-bottom: 8px;}
#gall_list01 .list_wrap .item .textbox .title {margin-bottom: 20px; font-size: clamp(14px, calc( 16 / var(--inner2) * 100vw ), 16px); line-height: 1.5;}
#gall_list01 .list_wrap .item .textbox .date {color: #999; font-size: clamp(14px, calc( 14 / var(--inner2) * 100vw ), 14px);}

@media screen and (max-width:1200px) {
    #gall_list01 .list_wrap {grid-template-columns: repeat(3, 3fr);}
}

@media screen and (max-width:768px) {
    #gall_list01 .list_wrap {grid-template-columns: repeat(2, 2fr);}
}

@media screen and (max-width:425px) {
    #gall_list01 .list_wrap {grid-template-columns: repeat(1, 1fr);}
}

/*********************************/
/* 영상게시판 - 갤러리 리스트 type 02*/
/*********************************/
#gall_list02 .list_wrap {margin-top: 25px; padding-top: 20px; display: grid; grid-template-columns: repeat(2, 2fr); gap: 20px; row-gap: 40px; border-top: 2px solid #000;}
#gall_list02 .list_wrap .item a {display: flex; align-items: center;}
#gall_list02 .list_wrap .item .thumb {width: 50%; aspect-ratio: 16 / 9; flex-shrink: 0;}
#gall_list02 .list_wrap .item .thumb img {width: 100%; height: 100%; object-fit: cover;}
#gall_list02 .list_wrap .item .textbox {padding: 0 20px 0 40px;}
#gall_list02 .list_wrap .item .textbox .tag {margin-bottom: 8px;}
#gall_list02 .list_wrap .item .textbox .title {margin-bottom: 20px; font-size: clamp(14px, calc( 16 / var(--inner2) * 100vw ), 16px); line-height: 1.5;}
#gall_list02 .list_wrap .item .textbox .date {color: #999; font-size: clamp(14px, calc( 14 / var(--inner2) * 100vw ), 14px);}

@media screen and (max-width:1200px) {
    #gall_list02 .list_wrap {grid-template-columns: repeat(1, 1fr); row-gap: 20px;}
    #gall_list02 .list_wrap .item .textbox {padding: 20px;}
}

@media screen and (max-width:768px) {
    #gall_list02 .list_wrap {grid-template-columns: repeat(2, 2fr); row-gap: 20px;}
    #gall_list02 .list_wrap .item a {flex-direction: column; align-items: baseline;}
    #gall_list02 .list_wrap .item .thumb {width: 100%;}
    #gall_list02 .list_wrap .item .textbox {padding: 20px 20px 0 0;}
}

@media screen and (max-width:425px) {
    #gall_list02 .list_wrap {grid-template-columns: repeat(1, 1fr); row-gap: 40px;}
}

/*********************************/
/* 영상 자료실 - 뷰페이지 */
/*********************************/
#gall_view01 .titbox {padding: 20px; border-top: 2px solid #000; border-bottom: 2px solid #000;}
#gall_view01 .tag_tit {gap: 8px; }
#gall_view01 .tag_tit .tag {padding: 4px 8px; border: 1px solid var(--point); border-radius: 40px; color: var(--point); font-size: clamp(14px, calc( 12 / var(--inner2) * 100vw ), 14px); flex-shrink: 0;}

#gall_view01 .tag_tit .title {font-size: clamp(16px, calc( 16 / var(--inner2) * 100vw ), 16px); font-weight: 700; line-height: 1.5;}

.sub_content .view_body {padding: 40px 20px; border-bottom: 2px solid #000;}
.sub_content .view_body iframe {max-width: 100% !important;}


@media screen and (max-width:1200px) {
    #gall_view01 .titbox {flex-direction: column; align-items: baseline; gap: 10px;}
    .sub_content .hit-date {width: 100%; justify-content: end;}
}

@media screen and (max-width:768px) {
    #gall_view01 .tag_tit {flex-direction: column; align-items: baseline; gap: 8px;}
}


/*********************************/
/* 공통 폼 - 리스트 */
/*********************************/

.sub_content .tag {width: fit-content; padding: 4px 8px; border: 1px solid var(--point); border-radius: 40px; color: var(--point); font-size: clamp(14px, calc( 12 / var(--inner2) * 100vw ), 14px); flex-shrink: 0;}

#common_list_form .list_wrap {margin-top: 20px; border-top: 2px solid #000;}
#common_list_form .list_wrap .item {padding: 20px 0; border-bottom: 1px solid #ccc;}
#common_list_form .list_wrap .num {width: 135px; font-size: clamp(14px, calc( 16 / var(--inner2) * 100vw ), 16px); font-weight: 700; text-align: center;}

#common_list_form .list_wrap .titbox {width: calc(100% - 275px);}
#common_list_form .list_wrap .titbox .title {margin-top: 8px;}
#common_list_form .list_wrap .titbox .title a {line-height: 1.5; font-size: clamp(14px, calc( 16 / var(--inner2) * 100vw ), 16px);}
.sub_content .new_list {margin-left: 8px;}
#common_list_form .list_wrap .titbox .file_download li:nth-child(1) {margin-top: 18px;}
#common_list_form .list_wrap .titbox .file_download li {margin-bottom: 8px;}
#common_list_form .list_wrap .titbox .file_download li:last-of-type {margin-bottom: 0;}
#common_list_form .list_wrap .titbox .file_download a {color: #666; font-size: clamp(14px, calc( 14 / var(--inner2) * 100vw ), 14px); word-break: break-all;}
.sub_content a .ico_file {margin-right: 8px;}
#common_list_form .list_wrap .date {width: 140px; color: #999; font-size: clamp(14px, calc( 14 / var(--inner2) * 100vw ), 14px);text-align: center; }

.sub_content .paging {gap: 10px; margin-top: 65px;}
.sub_content .paging li a {display: block; min-width: 20px; padding-bottom: 8px; color: #999; font-size: clamp(14px, calc( 12 / var(--inner2) * 100vw ), 12px); font-weight: 700; text-align: center;}
.sub_content .paging li.active a {position:relative; color: #000; }
.sub_content .paging li.active a::after {position: absolute; bottom: 0; display: block; width: 100%; height: 2px; background-color: var(--point); content: "";}

@media screen and (max-width:768px) {
    #common_list_form .list_wrap .item {flex-direction: column; align-items: baseline; gap: 10px;}
    #common_list_form .list_wrap .num {display: block; width: 100%; text-align: left;}
    #common_list_form .list_wrap .titbox {display: block; width: 100%;}
    #common_list_form .list_wrap .date {display: block; width: 100%; text-align: left;}
}

@media screen and (max-width:425px) {
    .sub_content .paging {gap: 7px;}
    .sub_content .paging li a {min-width: 10px;}
}

/*********************************/
/* 공통 폼 - 뷰페이지 */
/*********************************/
#common_view_form .titbox {padding: 20px; border-top: 2px solid #000; border-bottom: 1px solid #ccc;}
#common_view_form .titbox_bottom {margin-top: 8px;}
#common_view_form .titbox_bottom .title {font-size: clamp(16px, calc( 16 / var(--inner2) * 100vw ), 16px); line-height: 1.5;}
#common_view_form .file_download {margin: 20px 0 40px; padding: 20px; background-color: #eee; }
#common_view_form .file_download li {margin-bottom: 8px;}
#common_view_form .file_download li:last-of-type {margin-bottom: 0;}
#common_view_form .file_download a {color: #666; font-size: clamp(14px, calc( 14 / var(--inner2) * 100vw ), 14px); word-break: break-all;}

@media screen and (max-width:1200px) {
    #common_view_form .titbox_bottom {flex-direction: column; align-items: baseline; gap: 10px;}
}

/*********************************/
/* 라이브러리 - 검색결과 */
/*********************************/
.sub_content .inputbox02 {position:relative;}
.sub_content .inputbox02.w1060 {width: 1060px; margin: 90px auto 40px;}
.sub_content .inputbox02 input {width: 100%; height: 50px; padding: 0 20px; border: 2px solid #000;}
.sub_content .inputbox02 input::placeholder {color: #666; font-size: clamp(14px, calc( 14 / var(--inner2) * 100vw ), 14px);}
.sub_content .inputbox02 .search {position:absolute; right: 20px; top: 50%; transform: translateY(-50%); background-color: transparent; border: none; cursor: pointer;}

#search_library .desc_search {font-weight: 700; color: var(--point); text-align: center; line-height: 1.4;}
#search_library .s-tab {display: flex; flex-wrap: wrap; gap: 8px; margin-top: 85px;}
#search_library .s-tab li a.active {background-color: var(--point); border: 1px solid var(--point2); color: #fff;}
#search_library .s-tab li a {display: block; padding: 16px; border: 1px solid #ccc;  font-size: clamp(14px, calc( 14 / var(--inner2) * 100vw ), 14px); text-align: center;}

#search_library  .search_result .titlebox {margin-top:55px; padding-bottom: 25px; border-bottom: 2px solid #000;}
#search_library  .search_result .titlebox .title {font-size: clamp(24px, calc( 38 / var(--inner2) * 100vw ), 38px);}
#search_library  .search_result .titlebox .more {display: flex; justify-content: center; align-items: center; width: 32px; height: 32px; background-color: #333; border-radius: 50%;}


#search_library  .search_result .detail {border-bottom: 1px solid #ccc;}
#search_library  .search_result .detail a {padding: 30px 20px;}
#search_library  .search_result .detail .title { font-size: clamp(14px, calc( 16 / var(--inner2) * 100vw ), 16px); line-height: 1.5;}
#search_library .search_result .detail .tag_tit {gap: 8px;}
#search_library  .search_result .detail .desc {margin-top: 20px;}
#search_library  .search_result .detail .desc li {color: #999; font-size: clamp(14px, calc( 14 / var(--inner2) * 100vw ), 14px);}
#search_library  .search_result .detail .desc li:nth-child(1)::after {display: inline-block; width: 0; margin: 0 20px; background-color: #707070; content: "|";}

/* 검색결과 없을 때 */
.sub_content .no-content {display: flex; justify-content: center; align-items: center; height: 330px; border-bottom: 1px solid #ccc; color:#999; font-size: clamp(14px, calc( 14 / var(--inner2) * 100vw ), 14px); text-align: center;}
#search_library  .search_result .no-content {height: auto; padding: 50px 0; border-bottom: 1px solid #ccc; color:#999; font-size: clamp(14px, calc( 14 / var(--inner2) * 100vw ), 14px); text-align: center;}
#gall_list01 .list_wrap .no-content {grid-column: 1 / -1;}
#agency .list_wrap .no-content {grid-column: 1 / -1;}
.sub_content .common_table .no-content {border-bottom: none;}


@media screen and (max-width:1284px) {
    .sub_content .inputbox02.w1060 {width: 100%;}
}


/*********************************/
/* 방송편성표 */
/*********************************/
#programtable .cal_view {display: block;}
#programtable .cal_header {display: block;}
#programtable .cal_header .gobtn {display: flex; justify-content: end; align-items: center; margin-top: 90px;}

#programtable .cal_header .gobtn a {display: block; padding: 10px 20px; background-color: #000; border-radius: 40px;color: #fff; font-size: clamp(14px, calc( 14 / var(--inner2) * 100vw ), 14px); text-align: center;}

#programtable .day.pointcolor {color: #850008;}

#programtable .cal_date {grid-template-columns: repeat(6, 6fr);}
#programtable .cal_date .cell {height: 300px; overflow-y: auto;}
#programtable .cal_date .cell {height: 300px; overflow-y: auto;}

#programtable .cal_date .cell::-webkit-scrollbar {width: 3px; }
#programtable .cal_date .cell::-webkit-scrollbar-track { background-color: #d8d8d8; border-radius: 4px;}
#programtable .cal_date .cell::-webkit-scrollbar-thumb { background-color: #000; border-radius: 4px;}
#programtable .cal_date .cell::-webkit-scrollbar-thumb:hover {background-color: #999;}


#programtable .cal_date .cell:nth-child(7n) {border-right: none}
#programtable .cal_date .cell:nth-child(6n) {border-right: 1px solid #000}

#programtable .cal_date .cell ul li.event::before { background: #0477BF; }
#programtable .cal_date .cell .no-program {color: #333; font-size: clamp(14px, calc( 14 / var(--inner2) * 100vw ), 14px); text-align: center;}

#programtable .cal_date .cell .time {display: flex; justify-content: center; align-items: center; height: 100%; margin-bottom: 0; font-weight: 500;}

@media screen and (max-width: 1024px) {
    #programtable .cal_date .day {display: block;}

    #programtable .cal_date .cell {border-right: none;}
    #programtable .cal_date .cell .no-program {display: flex; justify-content: center; align-items: center; height: 100%;}

    #programtable .overflow_wrap {overflow: auto;}
    #programtable .cal_view {width: 1600px;}
}

/*********************************/
/* 기술문의/답변 */
/*********************************/

#inquiry_list .list_wrap {margin-top: 25px; border-top:2px solid #000;}
#inquiry_list .list_wrap .item {border-bottom: 1px solid #ccc;  transition: background-color 0.4s;}
#inquiry_list .list_wrap .item:hover {background-color: #f5f5f5;}
#inquiry_list .list_wrap .item a {padding: 20px 0;}

#inquiry_list .list_wrap .item p.num {width: 120px; font-size: clamp(14px, calc( 14 / var(--inner2) * 100vw ), 14px); text-align: center; font-weight: 700; }

#inquiry_list .list_wrap .item .titbox {width: -webkit-fill-available; font-size: clamp(14px, calc( 16 / var(--inner2) * 100vw ), 16px);}
#inquiry_list .list_wrap .item .titbox .sub_field {color: #333; font-size: clamp(14px, calc( 14 / var(--inner2) * 100vw ), 14px); margin-bottom: 8px;}
#inquiry_list .list_wrap .item .titbox .title {font-size: clamp(14px, calc( 16 / var(--inner2) * 100vw ), 16px); font-weight: 700; line-height: 1.5;}
#inquiry_list .list_wrap .item .titbox .title .pointcolor {margin-left: 5px;}
.sub_content .re-examined {color: var(--point);}
.sub_content .icon_rock {position: relative; top: -1px; margin-left: 7px;}



.sub_content .state {padding: 4px 16px; border-radius: 40px; color: #fff; font-size: clamp(14px, calc( 14 / var(--inner2) * 100vw ), 14px);}
.sub_content .state_end {background-color: #999 !important;}
.sub_content .state_register {background-color: var(--point2) !important; }
.sub_content .state_stay {background-color: #666 !important;}
.sub_content .state_cancel {background-color: #000 !important;}
.sub_content .state_before {background-color: #bbb !important;}


#inquiry_list .list_wrap .item .date {width: 180px; margin-left: 40px; color:#999; font-size: clamp(14px, calc( 14 / var(--inner2) * 100vw ), 14px);}

#inquiry_list .view_btns {justify-content: end;}
/* #inquiry_list .paging {margin-top: 0;} */

@media screen and (max-width: 1024px) {
    .list_wrap .common_table thead {display: none;}
    .list_wrap .common_table tbody td {display: block; padding: 7px 0; text-align: left !important;}
    .list_wrap .common_table tbody td .flex-center {align-items: baseline; justify-content: flex-start;}

    .list_wrap .common_table tbody td:nth-child(1) {margin-top: 10px;}
    .list_wrap .common_table tbody td:last-of-type {margin-bottom: 10px;}
}

/* @media screen and (max-width: 768px) {
  #inquiry_list .list_wrap .item {padding: 0 20px;}
  #inquiry_list .list_wrap .item a {flex-direction: column; align-items: baseline;}
  #inquiry_list .list_wrap .item p.num {width: auto;}

  #inquiry_list .list_wrap .tag {margin-top: 16px;}
  #inquiry_list .list_wrap .item .titbox {margin-left: 0; margin-top: 8px;;}

  #inquiry_list .list_wrap .item .state {margin-top: 10px;}
  #inquiry_list .list_wrap .item .date {margin-left: 0; margin-top: 20px;}
} */



/*********************************/
/* 기술문의/답변 - 글쓰기  */
/*********************************/

#inquiry_write select {width: 345px; height: 40px; padding: 0 20px; border: none; font-size: clamp(14px, calc( 14 / var(--inner2) * 100vw ), 14px); color: #666; -o-appearance: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; background: #f5f5f5 url(../img/ico_select.png) calc(100% - 20px) center no-repeat; background-size: 8px; outline: none;}
#inquiry_write select::-ms-expand {display: none;}

#inquiry_write .detail_form01 {margin-top: 90px;}
#inquiry_write .detail_form h3 {margin-bottom: 20px; font-size: clamp(24px, calc( 38 / var(--inner2) * 100vw ), 38px);}
#inquiry_write .detail_form table {width: 100%; table-layout: fixed; border-top: 2px solid #000; border-bottom: 2px solid #000;}
#inquiry_write .detail_form table tr {border-bottom: 1px solid #ccc;}
#inquiry_write .detail_form table tr:last-of-type {border-bottom: none;}
#inquiry_write .detail_form table th {width: 160px; padding: 20px; padding-right: 0; font-size: clamp(14px, calc( 14 / var(--inner2) * 100vw ), 14px); text-align: left;}
#inquiry_write .detail_form table td {padding: 10px 20px; padding-left: 0; color: #666; font-size: clamp(14px, calc( 14 / var(--inner2) * 100vw ), 14px); line-height: 1.4; word-break: keep-all;}

#inquiry_write .detail_form input[type="text"] {width: 345px; height: 40px; padding: 0 20px; background-color: #fff; border: 1px solid #ccc; outline: none; color: #666; font-size: clamp(14px, calc( 14 / var(--inner2) * 100vw ), 14px);}
#inquiry_write .detail_form textarea {width: 100%; height: 150px; padding:20px; border: 1px solid #ccc; font-size: clamp(14px, calc( 14 / var(--inner2) * 100vw ), 14px); resize: none;}
#inquiry_write .detail_form span.required {color: var(--point);}
#inquiry_write .detail_form02 {margin-top: 100px;}
#inquiry_write .detail_form02 .delivery_wrap {gap: 10px;}
#inquiry_write .detail_form02 .delivery_wrap label {color: #666; font-size: clamp(14px, calc(14 / var(--inner2) * 100vw), 14px);}
#inquiry_write .detail_form02 .delivery_wrap li {gap: 4px;}
#inquiry_write input.long_input {width: 100% !important;}

#inquiry_write.inquiry_write_type02 .detail_form table th {padding-right: 10px; word-break: keep-all; line-height: 1.2;}

#inquiry_write .desc {margin-top: 23px; color: #666; font-size: clamp(14px, calc( 14 / var(--inner2) * 100vw ), 14px);}
#inquiry_write .desc:not(:first-child) {margin-top: 10px;}
#inquiry_write .desc .icon {display: inline-flex; justify-content: center; align-items: center; flex-shrink: 0; width: 18px; height: 18px; margin-right: 9px; border-radius: 50%; background-color: #333; color: #fff;}


@media screen and (max-width:768px) {
    #inquiry_write select,
    #inquiry_write .detail_form input[type="text"],
    #inquiry_write .file-name {width: 100%;}

    #inquiry_write.inquiry_write_type02 th,
    #inquiry_write.inquiry_write_type02 td,
    #inquiry_write.inquiry_write_type02 tr {display: block; width: 100% !important;}
    #inquiry_write.inquiry_write_type02 th {padding: 20px !important;}
    #inquiry_write.inquiry_write_type02 td {padding: 20px !important; padding-top: 0 !important;}
}


@media screen and (max-width:425px) {


    #inquiry_write .detail_form table th {width: 100px;}
}

/*********************************/
/* 개발툴 문의 리스트 페이지 */
/*********************************/
/* 제목 말줄임표 */
#inquiry_list .list_wrap .common_table.type02 {table-layout: fixed;}
#inquiry_list .list_wrap .common_table.type02 .item .titbox {display: flex; align-items: center; padding: 10px 20px;}
#inquiry_list .list_wrap .common_table.type02 .item .titbox .title {display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}

#inquiry_list .list_wrap .common_table.type02 span.mobile {display: none;}

.col_no { width: 80px; }
.col_tag { width: 180px; }
.col_date { width: 100px; }
.col_part { width: 120px; }
.col_serial { width: 120px; }
.col_title { width: auto; }
.col_delivery { width: 100px; }
.col_state { width: 200px; }

@media screen and (max-width:1200px) {
    #inquiry_list .list_wrap .common_table.type02 {table-layout: auto;}
    #inquiry_list .list_wrap .common_table.type02 thead {display: none;}
    #inquiry_list .list_wrap .common_table.type02 tr {display: block;}
    #inquiry_list .list_wrap .common_table.type02 td {display: block; text-align: left; padding: 7px 0;}
    #inquiry_list .list_wrap .common_table.type02 .item a {padding: 0;}
    #inquiry_list .list_wrap .common_table.type02 tbody td:nth-child(1) {margin-top: 10px;}
    #inquiry_list .list_wrap .common_table.type02 colgroup {display: none;}
    #inquiry_list .list_wrap .common_table.type02 .item .titbox {display: block; padding: 5px 0;}
    #inquiry_list .list_wrap .common_table.type02 .item .titbox .title {text-overflow: unset; white-space: unset; overflow: inherit; display: inline;}
    #inquiry_list .list_wrap .common_table.type02 tbody td:last-of-type {margin-bottom: 10px;}

    #inquiry_list .list_wrap .common_table.type02 span.mobile {display: inline-block;}
}

/*********************************/
/* 개발툴 문의 뷰페이지 */
/*********************************/
#board_view.type02 select {width: 345px; height: 40px; padding: 0 20px; border: none; font-size: clamp(14px, calc( 14 / var(--inner2) * 100vw ), 14px); color: #666; -o-appearance: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; background: #f5f5f5 url(../img/ico_select.png) calc(100% - 20px) center no-repeat; background-size: 8px; outline: none; color: #666; font-size: clamp(14px, calc(14 / var(--inner2) * 100vw), 14px);}
#board_view.type02 select::-ms-expand {display: none;}
#board_view.type02 select option {color: #666; font-size: clamp(14px, calc(14 / var(--inner2) * 100vw), 14px);}
#board_view.type02 .detail_form h3 {margin-bottom: 20px; font-size: clamp(24px, calc(38 / var(--inner2) * 100vw), 38px);}
#board_view.type02 .detail_form table {width: 100%; table-layout: fixed; border-top: 2px solid #000; border-bottom: 2px solid #000;}
#board_view.type02 .detail_form table tr {border-bottom: 1px solid #ccc;}
#board_view.type02 .detail_form table tr:last-of-type {border-bottom: none;}
#board_view.type02 .detail_form table th {width: 160px; padding: 20px; padding-right: 0; font-size: clamp(14px, calc( 14 / var(--inner2) * 100vw ), 14px); text-align: left;}
#board_view.type02 .detail_form table td {padding: 10px 20px; padding-left: 0; color: #666; font-size: clamp(14px, calc( 14 / var(--inner2) * 100vw ), 14px); line-height: 1.4; word-break: keep-all;}

#board_view.type02 .detail_form input[type="text"] {width: 345px; height: 40px; padding: 0 20px; background-color: #fff; border: 1px solid #ccc; outline: none; color: #666; font-size: clamp(14px, calc( 14 / var(--inner2) * 100vw ), 14px);}
#board_view.type02 .detail_form textarea {width: 100%; height: 150px; padding:20px; border: 1px solid #ccc; font-size: clamp(14px, calc( 14 / var(--inner2) * 100vw ), 14px); resize: none;}
#board_view.type02 .detail_form span.required {color: var(--point);}
#board_view.type02 .detail_form02 {margin-top: 100px;}
#board_view.type02 .detail_form02 .delivery_wrap {gap: 10px;}
#board_view.type02 .detail_form02 .delivery_wrap label {color: #666; font-size: clamp(14px, calc(14 / var(--inner2) * 100vw), 14px);}
#board_view.type02 .detail_form02 .delivery_wrap li {gap: 4px;}
#board_view.type02 input.long_input {width: 100% !important;}
#board_view.type02 .detail_form03 {margin-top: 100px;}

/* 답변 영역 추가 */
#board_view.type02 .reply_content { margin-top: 90px; border-bottom: 2px solid #000;}
#board_view.type02 .titbox {padding: 20px; border-top: 2px solid #000; border-bottom: 1px solid #ccc;}
#board_view.type02 .tag_tit {gap: 8px;}
#board_view.type02 .tag_tit .title {font-size: clamp(14px, calc( 14 / var(--inner2) * 100vw ), 14px); font-weight: 700; line-height: 1.5;}

#board_view.type02  .reply_content .section_tit { margin-bottom: 20px; font-size: clamp(16px, calc(18 / var(--inner2) * 100vw), 18px); font-weight: 700;}
#board_view.type02 .reply_content .titbox .writer {padding-left: 20px; flex-shrink: 0; margin-right: 70px; font-weight: 700;}

#board_view.type02 .reply_detail {background-color: #f8f8f8;}
#board_view.type02 .reply_detail .titbox {padding: 35px 20px 35px;}

@media screen and (max-width: 1200px) {
    #board_view.type02 .titbox {flex-direction: column; align-items: baseline; gap: 10px;}
}

@media screen and (max-width:768px) {
    #board_view.type02 select,
    #board_view.type02 .detail_form input[type="text"],
    #board_view.type02 .file-name {width: 100%;}
    #board_view.type02 th,
    #board_view.type02 td,
    #board_view.type02 tr {display: block; width: 100% !important;}
    #board_view.type02 th {padding: 20px !important;}
    #board_view.type02 td {padding: 20px !important; padding-top: 0 !important;}

    #board_view.type02 .tag_tit {flex-direction: column; align-items: baseline;}
    #board_view.type02 .reply_content .titbox .writer {margin-bottom: 15px; padding-left: 0;}
}


/*********************************/
/* 기술문의/답변 - 답변  */
/*********************************/
#inquiry_answer .titbox {gap: 8px; padding: 20px; border-top: 2px solid #000; border-bottom: 1px solid #ccc;}
#inquiry_answer .tag_tit {gap: 8px;}
#inquiry_answer .tag_tit .title {font-size: clamp(14px, calc( 14 / var(--inner2) * 100vw ), 14px); font-weight: 700; line-height: 1.5;}

#inquiry_answer .view_content .file_download {padding: 20px; border-bottom: 2px solid #000;}
#inquiry_answer .view_content .file_download .tit {display: block; width: 160px; font-size: clamp(16px, calc( 16 / var(--inner2) * 100vw ), 16px); font-weight: 700;}
#inquiry_answer .view_content .file_download .file_list li:last-of-type {margin-bottom: 0;}
#inquiry_answer .view_content .file_download .file_list li {margin-bottom: 8px;}
#inquiry_answer .view_content .file_download .file_list li a {color: #666; line-height: 1.4; word-break: break-all; font-size: clamp(14px, calc( 14 / var(--inner2) * 100vw ), 14px);}

#inquiry_answer  .prev_content .hit-date,
#inquiry_answer  .reply_content .hit-date {color: #666;}

#inquiry_answer .prev_content {margin-top: 90px;}
#inquiry_answer .prev_content .section_tit {margin-bottom: 20px; font-size: clamp(16px, calc( 18 / var(--inner2) * 100vw ), 18px); font-weight: 700;}
#inquiry_answer .prev_content .titbox {padding: 20px; border-top: 2px solid #000;}
#inquiry_answer .prev_content .titbox .num {margin-right: 70px;}
#inquiry_answer .prev_content .titbox .title {font-weight: 400;}

#inquiry_answer .reply_content {margin-top: 90px; border-bottom: 2px solid #000;}
#inquiry_answer .reply_content .section_tit {margin-bottom: 20px; font-size: clamp(16px, calc( 18 / var(--inner2) * 100vw ), 18px); font-weight: 700;}
#inquiry_answer .reply_content .titbox .writer {padding-left: 20px; flex-shrink: 0; margin-right: 70px; font-weight: 700;}


#inquiry_answer .reply_detail {background-color: #f8f8f8;}
#inquiry_answer .reply_detail .titbox {padding: 35px 20px 35px;}

#inquiry_answer .view_btns {position: relative;}
#inquiry_answer .view_btns .btn01 {position: absolute; right: 0;}
#inquiry_answer .view_btns .btn02 a {background-color: var(--point2); border: none; color: #fff;}



@media screen and (max-width: 1200px) {
    #inquiry_answer .titbox {flex-direction: column; align-items: baseline; gap: 10px;}
}

@media screen and (max-width: 768px) {
    #inquiry_answer .titbox {gap: 20px;}
    #inquiry_answer .view_content .file_download {flex-direction: column; gap: 15px;}
    #inquiry_answer .tag_tit {flex-direction: column; align-items: baseline;}
    #inquiry_answer .prev_content .titbox .num,
    #inquiry_answer .reply_content .titbox .writer {margin-bottom: 15px;}
    #inquiry_answer .reply_content .titbox .writer {padding-left: 0;}
}

@media screen and (max-width: 425px) {
    #inquiry_answer .view_btns .btn01 {position: unset;}
    #inquiry_answer .hit-date {justify-content: left; gap: 20px;}
}


/*********************************/
/* 제품문의 - 리스트 */
/*********************************/

#inquiry_list .lockimg {margin-left: 8px;}

/*********************************/
/* faq */
/*********************************/
#faq .list_wrap {margin-top: 25px; border-top: 2px solid #000;}
#faq .list_wrap .item > a {display: grid; align-items: center; grid-template-columns: 100px 180px 1fr; padding: 35px 50px; border-bottom: 1px solid #ccc;}
#faq .list_wrap .item .mark {flex-shrink: 0; font-weight: 700; font-size: 16px;}
#faq .list_wrap .item .tag {margin-right: 45px; text-align: center;}
#faq .list_wrap .item .titbox .title {font-size: clamp(14px, calc( 16 / var(--inner2) * 100vw ), 16px); line-height: 1.5;}

#faq .list_wrap .answer {display: grid; grid-template-columns: 280px 1fr; align-items: center; background-color: #F8F8F8;}

#faq .a_box {max-height: 0; overflow: hidden; padding: 0 50px; box-sizing: border-box; transition: max-height 0.3s ease, padding 0.3s ease;}
#faq .a_box.open {max-height: 1000px; padding: 35px 50px;}

#faq .list_wrap .answer .txtbox {position:relative; padding-left: 26px;}
#faq .list_wrap .answer .txtbox::before {display:inline-block; position: absolute; top: 0; left: 0; width: 15px; height: 17px; background: url(../img/ico_reply.png) no-repeat; content: "";}

#faq .list_wrap .answer .txtbox * {color: #666; font-size: clamp(14px, calc( 14 / var(--inner2) * 100vw ), 14px); line-height: 1.4;}

.file::before {content: ""; display: inline-block; background: url(../img/ico_download.png) no-repeat; width: 10px; height: 11px; margin-right: 8px;}

@media screen and (max-width: 1024px) {
    #faq .list_wrap .item > a {grid-template-columns: 40px 180px 1fr;}
    #faq .list_wrap .answer {grid-template-columns: 220px 1fr;}
}


@media screen and (max-width: 768px) {
    #faq .list_wrap .item > a {padding: 35px 20px;}
    #faq .list_wrap .answer {grid-template-columns: 40px 1fr;}
    #faq .a_box {padding: 0 20px;}
    #faq .a_box.open {padding: 25px 20px;}
}

@media screen and (max-width: 600px) {
    #faq .list_wrap .item > a {grid-template-columns: 40px 1fr; row-gap: 10px;}
    #faq .list_wrap .item > a .titbox {grid-area: 2/-2;}
}


/*********************************/
/* 회사개요 */
/*********************************/

#company .company-intro .textbox {margin-bottom: 40px;}
#company .company-intro .textbox h3 {margin-bottom: 40px; font-size: clamp(30px, calc( 48 / var(--inner2) * 100vw ), 48px); font-weight: 700; line-height: 1.3;}
#company .company-intro .textbox p {color: #666; font-size: clamp(16px, calc( 18 / var(--inner2) * 100vw ), 18px); line-height: 1.4;}

#company .company-intro-banner {background: url(../img/company_bg.jpg) no-repeat center/cover;}
#company .company-intro-banner .textbox {padding: 235px 0 170px;}
#company .company-intro-banner .textbox p {margin-bottom: 40px; color: #fff; font-size: clamp(14px, calc( 16 / var(--inner2) * 100vw ), 16px); line-height: 1.5;}
#company .company-intro-banner .textbox .btn {width: fit-content; gap: 8px; padding: 16px; background-color: #fff; border-radius: 40px; color: #333; font-size: clamp(14px, calc( 16 / var(--inner2) * 100vw ), 16px);}

#company .company-ceo {padding: 100px 0 200px;}
#company .company-ceo .textbox h3 {margin-bottom: 20px; font-size: clamp(24px, calc( 38 / var(--inner2) * 100vw ), 38px); line-height: 1.5;}
#company .company-ceo .textbox p {color: #666; font-size: clamp(14px, calc( 16 / var(--inner2) * 100vw ), 16px); line-height: 1.4;}

#company .company-build .imgbox_mobile_only {width: 100%; height: 400px; margin-bottom: 60px; background: url(../img/building.jpg) no-repeat center/cover; display: none;}
#company .company-build .inner {gap: 160px;}
#company .company-build .imgbox {position: sticky; width: 100% !important; max-width: 100% !important; }
#company .company-build .imgbox img {width: 100%;}
#company .company-build .item_wrap .item {display: flex; gap: 180px; margin-bottom: 60px;}
#company .company-build .item_wrap .item .year {font-size: clamp(22px, calc( 33 / var(--inner2) * 100vw ), 33px); font-weight: 900;}
#company .company-build .inner .pin-spacer {width: 520px !important; flex-shrink: 0 !important;}

#company .company-build .item_wrap .item ul li:last-of-type {margin-bottom: 0;}
#company .company-build .item_wrap .item ul li {margin-bottom: 20px; color: #666; line-height: 1.5; font-size: clamp(14px, calc( 16 / var(--inner2) * 100vw ), 16px);}

#company .company-vision {position: relative;}
#company .company-vision .bg {z-index: -1; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}


#company .company-vision .vision_wrap { display: flex; justify-content: space-between; flex-wrap: wrap; row-gap: 210px;}
#company .company-vision .vision_wrap > li {display: flex; justify-content: center; align-items: center;width:650px; height: 380px; padding: 40px 0; border-radius: 190px; background-color: rgba(255,255,255,0.6); box-shadow: 0 0 16px rgba(0, 0, 0, 0.16);}

#company .company-vision .vision_wrap > li .con  {width: 100%; padding: 0 90px;}
#company .company-vision .vision_wrap > li .con strong {display: block; margin-bottom: 20px; font-size: clamp(18px, calc( 28 / var(--inner2) * 100vw ), 28px); font-weight: 900; font-weight: 700; text-align: center;}
#company .company-vision .vision_wrap > li .con span {display: block; margin-bottom: 40px; color: #333; font-size: clamp(16px, calc( 22 / var(--inner2) * 100vw ), 22px); text-align: center;}
#company .company-vision .vision_wrap > li .con p {margin-bottom: 25px; color: #333; font-size: clamp(14px, calc( 16 / var(--inner2) * 100vw ), 16px); font-weight: 700;}
#company .company-vision .vision_wrap > li .item_wrap {color: #666;}
#company .company-vision .vision_wrap > li .item_wrap li {position:relative; padding-left: 10px; font-size: clamp(14px, calc( 16 / var(--inner2) * 100vw ), 16px); line-height: 1.5;}
#company .company-vision .vision_wrap > li .item_wrap li::before {position:absolute; left: 0; display: inline-block; content: "-";}


@media screen and (max-width: 1540px) {
    #company .company-vision .vision_wrap > li {width: calc(50% - 100px);}
}

@media screen and (max-width: 1500px) {
    #company .company-build .inner {gap: 80px;}
    #company .company-build .item_wrap .item {gap: 100px;}
}

@media screen and (max-width: 1300px) {
    #company .company-vision .vision_wrap > li {width: calc(50% - 50px);}
}

@media screen and (max-width: 1200px) {
    #company .company-ceo .inner {gap: 60px;}
    #company .company-build .imgbox_mobile_only {display: block;}
    #company .company-build .inner .imgbox {display: none;}
    #company .company-build .inner {flex-direction: column;}

    #company .company-vision .bg {position: relative; top: 0; left: 0; transform: translate(0); text-align: center;}
    #company .company-vision .vision_wrap {position:relative; top: -200px; flex-direction: column; gap: 40px;}
    #company .company-vision .vision_wrap > li {width: 100%; padding: 0;}

}

@media screen and (max-width: 768px) {
    #company .company-intro {margin-top: 100px;}
    #company .company-ceo .inner {flex-direction: column;}
    #company .company-build .item_wrap .item {gap: 30px;}
    #company .company-vision .bg,
    #company .company-vision .bg > div,
    #company .company-vision .bg > div img {width: 100%;}
}

@media screen and (max-width: 600px) {
    #company .company-vision .vision_wrap > li {border-radius: 140px;}
}


@media screen and (max-width: 425px) {
    #company .company-vision .vision_wrap {top: -100px;}
    #company .company-vision .vision_wrap > li {height: 400px; padding: 40px 0px;}
    #company .company-vision .vision_wrap > li .con {padding: 0 40px;}
}


/*********************************/
/* 연혁 */
/*********************************/
#history .history-intro-banner img {width: 100%; height: 100%; object-fit: cover;}
#history .hitroy-detail {margin-top: 80px;}
#history .hitroy-detail .inner > div {display: flex; margin-bottom: 100px;}
#history .hitroy-detail .inner > div .year_big {position:relative; top:-10px; width: 400px; font-size: clamp(30px, calc( 78 / var(--inner2) * 100vw ), 78px); transition: color 0.4s;}
#history .hitroy-detail .inner > div .year_line {display: flex; margin-bottom: 100px;}
#history .hitroy-detail .inner > div .year_line:last-child {margin-bottom: 0;}
#history .hitroy-detail .inner > div .year_line .yy {width: 270px; color: #ccc; font-size: clamp(24px, calc( 33 / var(--inner2) * 100vw ), 33px); font-weight: 900; transition: color 0.4s;}
#history .hitroy-detail .inner > div .year_line ul li {margin-bottom: 10px; color: #ccc; line-height: 1.5; transition: color 0.4s;}
#history .hitroy-detail .inner > div .year_big.history_active {color: #AE2C14;}
#history .hitroy-detail .inner > div .year_line.history_active .yy {color: #000;}
#history .hitroy-detail .inner > div .year_line.history_active ul li {color: #666;}

@media screen and (max-width:1024px) {
    #history .hitroy-detail .inner > div .year_big {width: 300px;}
    #history .hitroy-detail .inner > div .year_line .yy {width: 150px;}
}

@media screen and (max-width:768px) {
    #history .history-intro-banner {margin-top: 100px;}
    #history .hitroy-detail .inner > div {flex-direction: column; gap: 30px;}
    #history .hitroy-detail .inner > div .year_big {margin-bottom: 30px;}
    #history .hitroy-detail .inner > div .year_line {margin-bottom: 50px;}
    #history .hitroy-detail .inner > div .year_line .yy {width: 120px; flex-shrink: 0;}
}

@media screen and (max-width:425px) {
    #history .hitroy-detail .inner > div .year_line {flex-direction: column; gap: 15px;}
}


/*********************************/
/* 대리점 */
/*********************************/

#agency .searchbox01 {justify-content: space-between !important;}
#agency .agency-header .tab {gap: 20px; width: calc(100% - 520px - 290px);}
#agency .agency-header .tab a {display: flex; width: 31.333%; padding-bottom: 15px; border-bottom: 2px solid #999; color: #999; font-size: clamp(14px, calc( 16 / var(--inner2) * 100vw ), 16px);}

#agency .agency-header .tab span {position: relative; left: -20px; display: block; width: 18px; height: 18px; border-radius: 50%; background-color: #333; text-align: center; transition: left 0.4s; opacity: 0;}
#agency .agency-header .tab a.on {color: #333;}
#agency .agency-header .tab a:hover span {left: 0; opacity: 1;}
#agency .agency-header .tab a.on span {left: 0; opacity: 1;}

#agency .list_wrap.show {display: grid;}
#agency .list_wrap {display: none; grid-template-columns: repeat(4, 4fr); gap: 20px; margin-top: 50px;}
#agency .list_wrap .item {border: 1px solid #000;}
#agency .list_wrap .thumb {padding: 40px 0; background-color: #f6f6f6; text-align: center;}
#agency .list_wrap .thumb img {max-height: 50px; max-width: 100%;}

#agency .list_wrap .item .agency_title {margin-bottom: 20px; color: #333; font-weight: 700;}
#agency .list_wrap .item .textbox {padding: 30px 20px;}
#agency .list_wrap .item .textbox ul {margin-bottom: 20px;}
#agency .list_wrap .item .textbox ul:last-of-type {margin-bottom: 0;}
#agency .list_wrap .item .textbox ul li {color: #666; font-size: clamp(14px, calc( 14 / var(--inner2) * 100vw ), 14px); line-height: 1.5; }
#agency .list_wrap .item .textbox ul li.icon {width: 40px; flex-shrink: 0;}

@media screen and (max-width:1500px) {
    #agency .agency-header .tab {width: calc(100% - 520px - 100px);}
}

@media screen and (max-width:1400px) {
    #agency .list_wrap {grid-template-columns: repeat(3, 3fr);}
}

@media screen and (max-width:1200px) {
    #agency .searchbox01 > div {width: 100%; margin-bottom: 30px;}
    #agency .agency-header .tab {width: 100%;}
}

@media screen and (max-width:768px) {
    #agency .list_wrap {grid-template-columns: repeat(2, 2fr);}
}

@media screen and (max-width:600px) {
    #agency .list_wrap {grid-template-columns: repeat(1, 1fr);}
}

@media screen and (max-width:425px) {
    #agency .agency-header .tab {gap: 10px;}
}

/* 대리점 팝업 */
.agency_popup {position: fixed; top: 0; left: 0; z-index: 1000; width: 100%; height: 100dvh; background-color: rgba(0, 0, 0, 0.28); opacity: 0; visibility: hidden; display: none;}
.agency_popup.show {opacity: 1; visibility: visible; display: block;}
.agency_popup .popup_inner {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);  width:725px; padding: 40px 40px 45px; background-color: #fff; border: 2px solid #000; box-shadow: 10px 0px 20px 0 rgba(0, 0, 0, 0.16);}

.agency_popup .popup_inner button.btn_close {background-color: transparent; border: none; cursor: pointer;}
.agency_popup  .popup_title {margin-bottom: 35px;}
.agency_popup  .popup_title p {color: var(--point2); font-size: clamp(16px, calc( 18 / var(--inner2) * 100vw ), 18px); font-weight: 700;}

.agency_popup .textbox .agency_title {margin-bottom: 20px; color: #333; font-size: clamp(16px, calc( 16 / var(--inner2) * 100vw ), 16px); font-weight: 700;}
.agency_popup .textbox ul {margin-bottom: 20px;}
.agency_popup .textbox ul:last-of-type {margin-bottom: 0;}
.agency_popup .textbox ul li {color: #666; font-size: clamp(14px, calc( 14 / var(--inner2) * 100vw ), 14px); line-height: 1.5;}
.agency_popup .textbox ul li a {color: #666;}
.agency_popup .textbox ul li.icon {width: 30px; flex-shrink: 0; text-align: center; margin-right: 15px;}

.agency_popup .textbox02 {margin-top: 40px;}

.agency_popup .textbox02 .agency_title {margin-bottom: 20px; color: #333; font-size: clamp(16px, calc( 18 / var(--inner2) * 100vw ), 18px); font-weight: 700;}
.agency_popup .textbox02 .desc {color: #666; font-size: clamp(14px, calc( 14 / var(--inner2) * 100vw ), 14px); line-height: 1.5;}

@media screen and (max-width:768px) {
    .agency_popup .popup_inner {width: 90%;}
}
@media screen and (max-width:425px) {
    .agency_popup .popup_inner {padding: 20px 20px 25px;}
}

/*********************************/
/* 오시는 길 */
/*********************************/
#map .pin-spacer {z-index: 999 !important; }
#map .map-header  {background-color: #fff !important; padding-bottom: 25px;}
#map .map-header .tab {gap: 20px;}
#map .map-header .tab a {display: flex; width: 16.666%; padding-bottom: 15px; border-bottom: 2px solid #999; color: #999; font-size: clamp(14px, calc( 16 / var(--inner2) * 100vw ), 16px);}

#map .map-header .tab span {position: relative; left: -20px; display: block; width: 18px; height: 18px; border-radius: 50%; background-color: #333; text-align: center; transition: left 0.4s; opacity: 0;}
#map .map-header .tab a.on {color: #333;}
#map .map-header .tab a:hover span {left: 0; opacity: 1;}
#map .map-header .tab a.on span {left: 0; opacity: 1;}

#map  .map_wrap {margin-top: 25px;}
.map-wrapper {position: relative; width: 100%; height: 460px;}
.map-cover { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 10;}

#map .root_daum_roughmap_landing {width: 100% !important;}

#map .root_daum_roughmap .cont,
#map .root_daum_roughmap .wrap_controllers {display: none;}

#map .textbox .inner {gap: 220px;}
#map .textbox {margin-top: 80px;}
#map .textbox h3 {font-size: clamp(30px, calc( 38 / var(--inner2) * 100vw ), 38px);}
#map .call_wrap {gap: 250px; margin-top: 30px;}
#map .textbox .info-row .label {width: 170px; display: flex; align-items: center;}
#map .textbox .info-row .label-fax {width: 100px;}
#map .textbox .info-row .label span {color: #333; font-size: clamp(16px, calc( 18 / var(--inner2) * 100vw ), 18px); font-weight: 700;}
#map .textbox .info-row .label i {width: 30px;}
#map .textbox .copy-btn {background-color: transparent; border: none; cursor: pointer;}
#map .textbox .content {color: #666; font-size: clamp(16px, calc( 18 / var(--inner2) * 100vw ), 18px); font-weight: 300; line-height: 1.5;}
#map .map-con:not(:first-child) {padding-top: 100px;}
#map .textbox .content br.mo {display: none;}

@media screen and (max-width:1620px) {
    #map .textbox .inner {gap: 100px;}
}

@media screen and (max-width:1430px) {
    #map .call_wrap {gap: 100px;}
}

@media screen and (max-width:1284px) {
    #map .call_wrap {flex-direction: column; gap: 30px;}
    #map .textbox .info-row .label-fax {width: 170px;}
}

@media screen and (max-width:1200px) {
    #map .textbox .inner {flex-direction: column; gap: 40px;}
}

@media screen and (max-width:768px) {
    #map .map-header .tab {overflow-x: auto; scroll-snap-type: x mandatory;}
    #map .map-header .tab a {width: 100px; flex-shrink: 0; scroll-snap-align: center;}
    #map .textbox .info-row .label {flex-shrink: 0;}
}

@media screen and (max-width:425px) {
    #map .info-row {flex-direction: column; align-items: baseline; gap: 10px;}
    #map .textbox .content br.mo {display: block;}
}

/*********************************/
/* 회원가입 */
/*********************************/

.sub_content .page_title {font-size: clamp(30px, calc( 48 / var(--inner2) * 100vw ), 48px); font-weight: 700; text-align: center;}

#join01 .page_title {margin-top: 60px;}

#join01 .box_wrap {display: grid; grid-template-columns: repeat(2, 2fr); max-width: 720px; margin: 40px auto 0;border: 3px solid #ccc;}
#join01 .box_wrap > div {position: relative; padding:60px 0 128px; }
#join01 .box_wrap > div:nth-child(1) {position: relative;}
#join01 .box_wrap > div:nth-child(1)::after {position: absolute; right: 0; top:50%; transform: translateY(-50%); display: inline-block; width: 1px; height: 420px; background-color: #ccc; content: "";}
#join01 .box_wrap .sub_title {font-size: clamp(18px, calc( 22 / var(--inner2) * 100vw ), 22px); text-align: center;}
#join01 .box_wrap .icon {display: flex; align-items: center; justify-content: center; width: 140px; height: 140px; margin:20px auto 40px; border-radius: 50%; background-color: #f6f6f6; }
#join01 .box_wrap > div:nth-child(2) .icon img {position: relative; left: 10px;}
#join01 .box_wrap .desc {color: #333; font-size: clamp(14px, calc( 14 / var(--inner2) * 100vw ), 14px); text-align: center; line-height: 1.5;}

#join01 .next_step {position: absolute; left: 50%; bottom: 65px; transform: translateX(-50%); display: block; width: 130px; padding: 15px 0; text-align: center; font-size: clamp(14px, calc( 14 / var(--inner2) * 100vw ), 14px); font-weight: 700;}

#join01 .next_step.btn_black {background-color: #333; color: #fff;}
#join01 .next_step.btn_red {background-color: var(--point2); color: #fff;}

#join01 .btn_cancel {display: block; margin: 40px auto 0; padding: 15px 50px; width: fit-content; border: 1px solid #ccc;}

@media screen and (max-width:768px) {
    #join01 .box_wrap {grid-template-columns: repeat(1, 1fr);}
    #join01 .box_wrap > div {padding: 60px;}
    #join01 .box_wrap > div:nth-child(1)::after {width: 80%; height: 1px; top:unset; bottom:0; left: 50%; transform:translate(-50%,0);}
    #join01 .next_step {position: unset; left: 0; bottom: 0; transform: unset; margin: 18px auto 0;}
}

@media screen and (max-width:425px) {
    #join01 .box_wrap > div {padding: 60px 20px;}
}


/*********************************/
/* 회원가입 - 2단계 */
/*********************************/
.sub_content .w720 {max-width: 720px; margin: 0 auto;}

#join02 .section_title {margin-bottom: 25px; font-size: clamp(25px, calc( 38 / var(--inner2) * 100vw ), 38px); }
#join02 .sub_txt {margin: 40px 0 20px; color: var(--point2); font-size: clamp(14px, calc( 14 / var(--inner2) * 100vw ), 14px); font-weight: 700; text-align: right;}

#join02 .register_agree {display: flex; align-items: center; gap: 10px; margin-bottom: 20px; padding: 20px; border: 1px solid #ccc;}
#join02 .register_agree label {font-size: clamp(14px, calc( 14 / var(--inner2) * 100vw ), 14px); font-weight: 700; cursor: pointer;}
#join02 .area_header {padding: 20px; border: 1px solid #ccc;}
#join02 .area_header label {font-size: clamp(14px, calc( 14 / var(--inner2) * 100vw ), 14px); font-weight: 700; cursor: pointer;}
#join02 .area_header > div {gap: 10px;}
#join02 .area_header .view_all {gap: 8px; font-size: clamp(14px, calc( 14 / var(--inner2) * 100vw ), 14px); font-weight: 700;}

#join02 .term_content {border: 1px solid #ccc; border-top: none;}
#join02 .term_content > div {width: 100%; height: 150px; overflow-y: scroll; padding: 20px; font-size: clamp(14px, calc( 14 / var(--inner2) * 100vw ), 14px); word-break: keep-all; color: #666; line-height: 1.5;}
#join02 .term_content > div strong {display: block; font-weight: 400;}
#join02 .term_content > div p {line-height: 1.5;}
#join02 .term_content > div a {color: #666;}

#join02 .area_header:not(:first-child) {margin-top: 20px;}

#join02 .email_title {margin-top: 40px;}

#join02 .sub_desc {margin-bottom: 20px; color: #666; font-size: clamp(14px, calc( 14 / var(--inner2) * 100vw ), 14px); line-height: 1.5;}
#join02 .email table {width: 100%; border-top: 2px solid #000; border-bottom: 2px solid #000;}
#join02 .email table span.required {color: var(--point2);}
#join02 .email table th {padding-left: 20px; padding-right: 120px; text-align: left;}
#join02 .email table td .input_wrap {gap: 10px;}
#join02 .email table td input[type=text] {width: 330px; height: 40px; padding: 0 10px; border: 1px solid #ccc;}
#join02 .email table td input[type=text]::placeholder {color: #999; font-size: clamp(14px, calc( 14 / var(--inner2) * 100vw ), 14px);}
#join02 .email .btn_black {width: 100px; padding: 10px 0; background-color: #333; color: #fff; border: none; font-size: clamp(14px, calc( 14 / var(--inner2) * 100vw ), 14px); cursor: pointer;}
#join02 .num_wrap {position: relative;}
#join02 .num_wrap .time {position: absolute; top: 50%; right: 10px; transform: translateY(-50%); color: var(--point2);}


#join02 .email table td.pt20 {padding-top: 20px;}
#join02 .email table td.pb10 {padding-bottom: 10px;}
#join02 .email table td.pb20 {padding-bottom: 20px;}


.join_content .view_btns > div button {width: 130px; border-radius: 0; font-weight: 700;}


.join_content .view_btns > div > a {width: 130px; border-radius: 0; font-weight: 700;}
.join_content .view_btns > div.btn01 button {height: 100%; background-color: var(--point2); border: none; color: #fff; cursor: pointer;}
.join_content .view_btns > div.btn02 a {border: 1px solid #ccc; color: #666;}


/* input 체크박스 커스텀 */
.selec_chk{position:absolute; width:1px; height:1px; margin:-1px; padding:0; border:0; clip:rect(0 0 0 0); overflow:hidden;}

label{display:flex; align-items:center; gap:10px; padding:0; color:#111; font-size:14px; line-height:1.4; cursor:pointer; user-select:none;}
label span{display:inline-flex; align-items:center; justify-content:center; width:15px; height:15px; border:1px solid #bbb; border-radius:2px; background:#fff; transition:.2s;}

.selec_chk:checked + label span{border-color:var(--point2); background:var(--point2); background-image:url("../img/ico_check.png"); background-repeat:no-repeat; background-position:center; background-size:9px;}
.selec_chk:focus-visible + label span{outline:2px solid #3b82f6; outline-offset:2px;}
.selec_chk:disabled + label{cursor:not-allowed; opacity:.5;}


@media screen and (max-width:768px) {
    #join02 .email table th {padding: 0 20px;}
    #join02 .email table td input[type=text] {width: auto;}
}

@media screen and (max-width:425px) {
    #join02 .email table th {display: block; width: 100%; padding: 20px 0; padding-bottom: 0;}
    #join02 .email table td {display: block; width:100%;}
}

/* 약관 전체보기 팝업 */
.term_popup {position: fixed; top: 0; left: 0; z-index: 1000; width: 100%; height: 100dvh; background-color: rgba(0, 0, 0, 0.28); opacity: 0; visibility: visible; display: none;}
.term_popup.show {opacity: 1; visibility: visible; display: block}
.term_popup .popup_inner {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);  width:725px; height: 430px; overflow-y: auto; padding: 20px 20px 45px; background-color: #fff; border: 2px solid #000; box-shadow: 10px 0px 20px 0 rgba(0, 0, 0, 0.16);}

.term_popup .popup_inner .popup_title button.btn_close {background-color: transparent; border: none; cursor: pointer;}
.term_popup  .popup_title {margin-bottom: 35px;}
.term_popup .popup_title p {color: var(--point2); font-size: clamp(16px, calc( 18 / var(--inner2) * 100vw ), 18px); font-weight: 700;}

.term_popup .textbox .title {margin-bottom: 75px; color: #333; font-size: clamp(16px, calc( 18 / var(--inner2) * 100vw ), 18px); font-weight: 700; text-align: center;}
.term_popup .btn_black {display: block; max-width: 130px; width: 100%; margin: 30px auto 0; padding: 10px 0; background-color: #333; color: #fff; font-size: clamp(14px, calc( 14 / var(--inner2) * 100vw ), 14px); font-weight: 900; text-align: center;}

.term_popup .term_content strong {display: block;}
.term_popup .term_content strong.tit {color: #000; font-size: clamp(16px, calc( 18 / var(--inner2) * 100vw ), 18px); font-weight: 700;}
.term_popup .term_content strong {color: #333; font-size: clamp(14px, calc( 16 / var(--inner2) * 100vw ), 16px); font-weight: 700; line-height: 1.5;}
.term_popup .term_content p {color: #666; font-size: clamp(14px, calc( 14 / var(--inner2) * 100vw ), 14px); font-weight: 300; line-height: 1.5;}
.term_popup .term_content a {color: #666;}


/*********************************/
/* 회원가입 3단계 */
/*********************************/


#join03 .section_title {margin-bottom: 25px; font-size: clamp(25px, calc( 38 / var(--inner2) * 100vw ), 38px); }
#join03 .sub_txt {margin: 40px 0 20px; color: var(--point2); font-size: clamp(14px, calc( 14 / var(--inner2) * 100vw ), 14px); font-weight: 700; text-align: right;}

#join03 .table {border-top: 2px solid #000;}
#join03 .table span.required {color: var(--point2); margin-left: 5px;}

#join03 .table .line {display: flex; align-items: center; padding: 20px; border-bottom: 1px solid #ccc;}
#join03 .table .line:last-child {border-bottom: 2px solid #000;}
#join03 .table .line .tit {width: 160px; font-weight: 700; font-size: clamp(14px, calc( 14 / var(--inner2) * 100vw ), 14px);}

#join03 .table .line .desc {color: #666; font-size: clamp(14px, calc( 14 / var(--inner2) * 100vw ), 14px);}

#join03 .table .line input.w440 {width: 440px; height: 40px; padding: 0 10px; border: 1px solid #ccc; font-size: clamp(14px, calc( 14 / var(--inner2) * 100vw ), 14px);}
#join03 .table .line .desc.flex-align {gap: 10px;}
#join03 .table .line ul {padding-left: 5px;}
#join03 .table .line ul.flex-align {gap: 10px;}

#join03 .table .line ul .solar label,
#join03 .table .line ul .lunar label {padding-left: 5px; color: #666;}

#join03 .table .line ul .subscribe label {padding-left: 5px; color: #666;}

#join03 .table .line .birth {gap: 5px !important;}
#join03 .table .line .birth select {width: 80px; height: 40px; padding: 0 10px; border: 1px solid #ccc; color: #999;}

#join03 .section02 {margin-top: 80px;}
#join03 #postcode {width: 80px;height:40px; padding: 0 10px; border:1px solid #ccc;}
#join03 #cp_address {margin: 8px 0;}
#join03 .find_postcode {height: 40px; padding: 10px; background-color: #333; border: none; color: #fff; font-size: clamp(14px, calc( 14 / var(--inner2) * 100vw ), 14px); cursor: pointer;}

@media screen and (max-width:768px) {
    #join03 .table .line {flex-direction: column; align-items: baseline; gap: 20px;}
    #join03 .table .line .desc {width: 100%;}
    #join03 .table .line input.w440 {width: 100%;}
    #join03 .table .line .birth {flex-wrap: wrap;}
}



/*********************************/
/* 기존 회원 인증 */
/*********************************/

/* 아이디 비밀번호 찾기 공통 */
.search_list {font-size: clamp(14px, calc( 14 / var(--inner2) * 100vw ), 14px);}
.search_list li:nth-child(1)::after {content: "|"; display: inline-block; width: 1px; height: 10px; color: #bdbdbd; margin: 0 10px;}

#exist_user .page_title {margin-top: 60px;}
#exist_user .box_wrap {max-width: 520px; margin: 40px auto 0; border: 1px solid #ccc;}
#exist_user .box_wrap > div {padding: 80px 65px 85px;}
#exist_user .box_wrap > div .big_logo {margin-bottom: 40px; text-align: center;}

#exist_user .box_wrap > div .input_wrap {margin-bottom: 20px;}
#exist_user .box_wrap > div .input_wrap input {display: block; width: 100%; height: 40px; padding: 0 10px; border: 1px solid #ccc;}

#exist_user .box_wrap > div .input_wrap input.input01 {margin-bottom: 10px;}
#exist_user .box_wrap > div .input_wrap input::placeholder {color: #999; font-size: clamp(14px, calc( 16 / var(--inner2) * 100vw ), 16px);}
#exist_user .box_wrap > div .input_wrap input.required {background: url(../img/required.png) no-repeat right 10px top 6px;}

#exist_user .box_wrap > div .search_url {display: block; font-size: clamp(14px, calc( 14 / var(--inner2) * 100vw ), 14px); text-align: right;}
#exist_user .next_step {display: block; width: 100%; margin-top: 40px; padding: 15px 0; text-align: center; font-size: clamp(14px, calc( 14 / var(--inner2) * 100vw ), 14px); font-weight: 700;}

#exist_user .next_step.btn_black {background-color: #333; color: #fff; font-weight: 900;}


@media screen and (max-width:425px) {
    #exist_user .box_wrap > div .big_logo img {max-width: 200px;}
    #exist_user .box_wrap > div {padding: 60px 20px;}
}


/*********************************/
/* 로그인 */
/*********************************/
/* #login {display: flex; align-items: center; height: 100vh;} */
#login .page_title {margin-top: 60px;}
#login .box_wrap {max-width: 520px; margin: 40px auto 0; border: 1px solid #ccc;}
#login .box_wrap > div {padding: 80px 65px 85px;}
#login .box_wrap > div .big_logo {margin-bottom: 20px; text-align: center;}
#login .box_wrap .sub_desc {margin-bottom: 40px; color: #333; font-size: clamp(14px, calc( 14 / var(--inner2) * 100vw ), 14px); text-align: center; line-height: 1.5;}

#login .box_wrap > div .input_wrap {margin-bottom: 20px;}
#login .box_wrap > div .input_wrap input {display: block; width: 100%; height: 40px; padding: 0 10px; border: 1px solid #ccc;}

#login .box_wrap > div .input_wrap input.input01 {margin-bottom: 10px;}
#login .box_wrap > div .input_wrap input::placeholder {color: #999; font-size: clamp(14px, calc( 16 / var(--inner2) * 100vw ), 16px);}
#login .box_wrap > div .input_wrap input.required {background: url(../img/required.png) no-repeat right 10px top 6px;}

#login .next_step {display: block; width: 100%; margin-top: 40px; padding: 15px 0; text-align: center; font-size: clamp(14px, calc( 14 / var(--inner2) * 100vw ), 14px); font-weight: 700;}

#login .next_step.btn_black {background-color: #333; color: #fff; font-weight: 900;}
#login .next_step.btn_white {margin-top: 10px; border:1px solid var(--point2); color: var(--point2); font-weight: 900;}


@media screen and (max-width:425px) {
    #login .box_wrap > div .big_logo img {max-width: 200px;}
    #login .box_wrap > div {padding: 60px 20px;}
}

/*********************************/
/* 아이디 찾기 */
/*********************************/
/* #find_id {display: flex; align-items: center; height: 100vh;} */
#find_id .page_title {margin-top: 60px;}
#find_id .box_wrap {max-width: 520px; margin: 40px auto 0; border: 1px solid #ccc;}
#find_id .box_wrap > div {padding: 40px 70px;}
#find_id .box_wrap > div .big_logo {margin-bottom: 30px; font-size: clamp(24px, calc( 38 / var(--inner2) * 100vw ), 38px); text-align: center;}
#find_id .box_wrap .sub_desc {color: #333; font-size: clamp(14px, calc( 14 / var(--inner2) * 100vw ), 14px); text-align: center; line-height: 1.5;}

#find_id .box_wrap > div .input_wrap {margin-top: 40px;}
#find_id .box_wrap > div .input_wrap input {display: block; width: 100%; height: 40px; padding: 0 10px; border: 1px solid #ccc;}

#find_id .box_wrap > div .input_wrap input.input01 {margin-bottom: 10px;}
#find_id .box_wrap > div .input_wrap input::placeholder {color: #999; font-size: clamp(14px, calc( 16 / var(--inner2) * 100vw ), 16px);}
#find_id .box_wrap > div .input_wrap input.required {background: url(../img/required.png) no-repeat right 10px top 6px;}
#find_id .box_wrap > div .input_wrap input.w255 {width: 255px;}

#find_id .next_step {display: block; width: 100%; margin-top: 10px; padding: 15px 0; text-align: center; font-size: clamp(14px, calc( 14 / var(--inner2) * 100vw ), 14px); font-weight: 700;}
#find_id .next_step.btn_black {background-color: #333; color: #fff; font-weight: 900;}

#find_id .show_email {margin-top: 20px; padding: 30px 0; background-color: #eee; text-align: center; color: #333;}
#find_id .find_url {display: block; margin: 20px 0 40px; color: #333; font-size: 14px; text-align: right;}

@media screen and (max-width:425px) {
    #find_id .box_wrap > div {padding: 60px 20px;}
}


/*********************************/
/* 비밀번호 찾기 */
/*********************************/
/* #find_password {display: flex; align-items: center; height: 100vh;} */
#find_password .page_title {margin-top: 60px;}
#find_password .box_wrap {max-width: 520px; margin: 40px auto 0; border: 1px solid #ccc;}
#find_password .box_wrap > div {padding: 40px 70px;}
#find_password .box_wrap > div .big_logo {margin-bottom: 30px; font-size: clamp(24px, calc( 38 / var(--inner2) * 100vw ), 38px); text-align: center;}
#find_password .box_wrap .sub_desc {margin-bottom: 20px; color: #333; font-size: clamp(14px, calc( 14 / var(--inner2) * 100vw ), 14px); text-align: center; line-height: 1.5;}

#find_password .box_wrap > div .input_wrap {margin-bottom: 20px;}
#find_password .box_wrap > div .input_wrap input {display: block; width: 100%; height: 40px; padding: 0 10px; border: 1px solid #ccc;}

#find_password .box_wrap > div .input_wrap input.input01 {margin-bottom: 10px;}
#find_password .box_wrap > div .input_wrap input::placeholder {color: #999; font-size: clamp(14px, calc( 16 / var(--inner2) * 100vw ), 16px);}
#find_password .box_wrap > div .input_wrap input.required {background: url(../img/required.png) no-repeat right 10px top 6px;}
#find_password .box_wrap > div .input_wrap input.w255 {width: 255px;}

#find_password .box_wrap > div .input_wrap .input_set {gap: 10px;}
#find_password .box_wrap > div .input_wrap .input_set:first-of-type {margin-bottom: 10px;}
#find_password .confirm_number,
#find_password .sen_number {display: block; width: 120px; height: 40px; border: none; outline: none; text-align: center; font-size: clamp(14px, calc( 14 / var(--inner2) * 100vw ), 14px); font-weight: 700; cursor: pointer;}

#find_password .sen_number.btn_red {background-color: var(--point2); color: #fff; font-weight: 900;}
#find_password .confirm_number.btn_red {background-color: var(--point2); color: #fff; font-weight: 900;}

#find_password .next_step {display: block; width: 100%; margin-top: 40px; padding: 15px 0; text-align: center; font-size: clamp(14px, calc( 14 / var(--inner2) * 100vw ), 14px); font-weight: 700;}
#find_password .next_step.btn_black {background-color: #333; color: #fff; font-weight: 900;}

@media screen and (max-width:768px) {
    #find_password .box_wrap > div .input_wrap .input_set {flex-direction: column;}
    #find_password .box_wrap > div .input_wrap input.w255 {width: 100%;}
    #find_password .confirm_number, #find_password .sen_number {width: 100%;}
}

@media screen and (max-width:425px) {
    #find_password .box_wrap > div .big_logo img {max-width: 200px;}
    #find_password .box_wrap > div {padding: 60px 20px;}
}


/*********************************/
/* 비밀번호 재설정 */
/*********************************/
/* #password_reset {display: flex; align-items: center; height: 100vh;} */
#password_reset .page_title {margin-top: 60px;}
#password_reset .box_wrap {max-width: 520px; margin: 40px auto 0; border: 1px solid #ccc;}
#password_reset .box_wrap > div {padding: 40px 70px;}
#password_reset .box_wrap > div .big_logo {margin-bottom: 30px; font-size: clamp(24px, calc( 38 / var(--inner2) * 100vw ), 38px); text-align: center;}
#password_reset .box_wrap .sub_desc {margin-bottom: 20px; color: #333; font-size: clamp(14px, calc( 14 / var(--inner2) * 100vw ), 14px); text-align: center; line-height: 1.5;}

#password_reset .box_wrap > div .input_wrap {margin-bottom: 20px;}
#password_reset .box_wrap > div .input_wrap input {display: block; width: 100%; height: 40px; padding: 0 10px; border: 1px solid #ccc;}

#password_reset .box_wrap > div .input_wrap input.input01.required {background: #f5f5f5 url(../img/required.png) no-repeat right 10px top 6px;}
#password_reset .box_wrap > div .input_wrap input.input01,
#password_reset .box_wrap > div .input_wrap input.input02 {margin-bottom: 10px;}
#password_reset .box_wrap > div .input_wrap input::placeholder {color: #999; font-size: clamp(14px, calc( 16 / var(--inner2) * 100vw ), 16px);}
#password_reset .box_wrap > div .input_wrap input.required {background: url(../img/required.png) no-repeat right 10px top 6px;}
#password_reset .box_wrap > div .input_wrap input.w255 {width: 255px;}

#password_reset .box_wrap > div .input_wrap .input_set {gap: 10px;}
#password_reset .box_wrap > div .input_wrap .input_set:first-of-type {margin-bottom: 10px;}


#password_reset .next_step {display: block; width: 100%; margin-top: 40px; padding: 15px 0; text-align: center; font-size: clamp(14px, calc( 14 / var(--inner2) * 100vw ), 14px); font-weight: 700;}
#password_reset .next_step.btn_black {background-color: #333; color: #fff; font-weight: 900;}

@media screen and (max-width:768px) {
    #password_reset .box_wrap > div .input_wrap .input_set {flex-direction: column;}
    #password_reset .box_wrap > div .input_wrap input.w255 {width: 100%;}
}

@media screen and (max-width:425px) {
    #password_reset .box_wrap > div .big_logo img {max-width: 200px;}
    #password_reset .box_wrap > div {padding: 60px 20px;}
}


/*********************************/
/* 프리미엄 서비스 */
/*********************************/

.premium-banner {margin-top: 90px; padding: 80px 0; background: url(../img/premium_banner.png) no-repeat center/cover;}
.premium-banner .textbox {color: #fff;}

.premium-banner .textbox h2 {font-size: clamp(25px, calc( 38 / var(--inner2) * 100vw ), 38px); color: #fff;}
.premium-banner .textbox p {margin-top: 20px; max-width: 60%; font-size: clamp(14px, calc( 16 / var(--inner2) * 100vw ), 16px); color: #fff; line-height: 1.4;}
.premium-banner .textbox .btn {display: inline-flex; align-items: center; gap: 10px; margin-top: 40px; padding: 16px; background-color: #fff; border-radius: 40px; font-size: clamp(14px, calc( 14 / var(--inner2) * 100vw ), 14px);}

#premium .detail_form01 {margin-top: 90px;}
#premium .detail_form h3 {margin-bottom: 20px; font-size: clamp(24px, calc( 38 / var(--inner2) * 100vw ), 38px);}
#premium .detail_form table {width: 100%; border-top: 2px solid #000; border-bottom: 2px solid #000;}
#premium .detail_form table tr {border-bottom: 1px solid #ccc;}
#premium .detail_form table tr:last-of-type {border-bottom: none;}
#premium .detail_form table th {width: 350px; padding: 20px; padding-right: 0; background-color:rgba(238,238,238,0.4); font-size: clamp(14px, calc( 14 / var(--inner2) * 100vw ), 14px); text-align: left; line-height: 1.5;}
#premium .detail_form table td {padding: 0 20px; color: #666; font-size: clamp(14px, calc( 14 / var(--inner2) * 100vw ), 14px); line-height: 1.4; word-break: keep-all;}
#premium .detail_form table td input {width: 100%; height: 40px; padding: 0 20px; border: 1px solid #ccc;}
#premium .detail_form table td input.w345 {width: 345px;}
#premium .detail_form table td input::placeholder {color: #999; font-size: clamp(14px, calc( 14 / var(--inner2) * 100vw ), 14px);}
#premium .detail_form02 {margin-top: 100px;}
#premium .detail_form02 p.required {justify-content: end; margin-bottom: 20px; font-size: clamp(14px, calc( 14 / var(--inner2) * 100vw ), 14px);}
#premium .detail_form input.bg {height: 40px; padding: 0 20px; background-color: #F5F5F5; border: none; color: #666; font-size: clamp(14px, calc( 14 / var(--inner2) * 100vw ), 14px);}

@media screen and (max-width:768px) {
    #premium .detail_form table td,
    #premium .detail_form table th {display: block !important; width: 100% !important;}

    #premium .detail_form table td,
    #premium .detail_form table th {padding: 20px;}

    #premium .detail_form table td input.w345 {width: 100%;}
}

@media screen and (max-width:425px) {
    #premium .detail_form table th {width: 120px;}
    #premium .detail_form input.bg {width: 100%;}
}


/* 프리미엄 팝업 */
.premium_popup {position: fixed; top: 0; left: 0; z-index: 1000; width: 100%; height: 100dvh; background-color: rgba(0, 0, 0, 0.28); opacity: 0; visibility: visible; display: none}
.premium_popup.show {opacity: 1; visibility: visible; display: block}
.premium_popup .popup_inner {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);  width:520px; padding: 20px 20px 45px; background-color: #fff; border: 2px solid #000; box-shadow: 10px 0px 20px 0 rgba(0, 0, 0, 0.16);}

.premium_popup .popup_inner button.btn_close {background-color: transparent; border: none; cursor: pointer;}
.premium_popup  .popup_title {justify-content: end; margin-bottom: 35px;}

.premium_popup .textbox .title {margin-bottom: 75px; color: #333; font-size: clamp(16px, calc( 18 / var(--inner2) * 100vw ), 18px); font-weight: 700; text-align: center;}
.premium_popup .btn_black {display: block; max-width: 385px; width: 100%; margin:0 auto; padding: 10px 0; background-color: #333; color: #fff; font-size: clamp(14px, calc( 14 / var(--inner2) * 100vw ), 14px); font-weight: 900; text-align: center;}


@media screen and (max-width:768px) {
    .premium_popup .popup_inner {width: 90%;}
}
@media screen and (max-width:425px) {
    .premium_popup .popup_inner {padding: 20px 20px 25px;}
}

.cancel_popup { opacity: 0; visibility: visible; display: none}
.cancel_popup.show {opacity: 1; visibility: visible; display: block}

.cancel_popup .textbox .title {margin-bottom: 25px;}
.cancel_popup .textbox .title02 {margin-bottom: 32px; color: #666; font-size: clamp(14px, calc( 14 / var(--inner2) * 100vw ), 14px); text-align: center;}



/*********************************/
/* 마이페이지 */
/*********************************/
.mypage {margin-top: 90px;}
.mypage .inner {gap: 85px;}



/* 왼쪽 사이드 공통구역 */
article.profile_wrap {flex-shrink: 0; width: 320px; height: fit-content; padding: 20px; background-color: #f6f6f6;}

article.profile_wrap .profile_top {margin-bottom: 20px; padding: 20px; background-color: #fff;}
article.profile_wrap .profile_top .my_profile {gap: 10px; margin-bottom: 15px;}
article.profile_wrap .profile_top .my_profile p {font-size: clamp(14px, calc( 14 / var(--inner2) * 100vw ), 14px); font-weight: 700;}

article.profile_wrap .profile_top .my_profile .link_wrap li {font-size: clamp(14px, calc( 14 / var(--inner2) * 100vw ), 14px); font-weight: 700;}

article.profile_wrap .profile_top .link_wrap li:nth-child(1)::after,
article.profile_wrap .profile_top .link_wrap li:nth-child(2)::after {content: "|"; display: inline-block; margin:0 15px; color: #ccc;}
article.profile_wrap .profile_top .link_wrap li a {color: #999; font-size: clamp(14px, calc( 14 / var(--inner2) * 100vw ), 14px); font-weight: 700;}

article.profile_wrap .profile_bottom h2 {margin-bottom: 10px; font-size: clamp(14px, calc( 16 / var(--inner2) * 100vw ), 16px);}
article.profile_wrap .profile_bottom .link_wrap li a {width: 100%; padding: 10px 20px; background-color: #fff; color: #333; font-size: clamp(14px, calc( 16 / var(--inner2) * 100vw ), 16px); font-weight: 700;}
article.profile_wrap .profile_bottom .link_wrap li a.on {background-color: var(--point2); color: #fff;}
article.profile_wrap .profile_bottom .link_wrap li a.on svg path {fill:#fff}

article.profile_wrap .profile_bottom .link_wrap li:not(:last-child) {margin-bottom: 10px;}



/* 리스트 게시판 */
.mypage .board_list,
#mypage-event .board_list,
.mypage .view_wrap {width: calc(100% - 320px);}
#mypage-event .board_list .search_box {padding:30px 20px; border-top: 2px solid #000; border-bottom: 2px solid #000; background-color: #f6f6f6;}
#mypage-event .board_list .search_box .item {gap: 20px; margin-bottom: 10px;}
#mypage-event .board_list .search_box .item > div {gap: 20px; width: calc(100% - 120px);}
#mypage-event .board_list .search_box .item:last-child {margin-bottom: 0;}
#mypage-event .board_list .search_box .item .tit {flex-shrink: 0; width: 100px; font-size: clamp(14px, calc( 16 / var(--inner2) * 100vw ), 16px); font-weight: 700;}

article#sub + .sub_content.mypage .searchbox01 {margin-top: 0;}
#mypage-event .board_list .search_box .item input,
#mypage-event .board_list .search_box .item select {width: 300px; height: 40px; padding: 0 20px; background-color: #fff; border: none; outline: none; color: #666;}

#mypage-event .board_list .search_box .item select {background:#fff url(../img/ico_select.png) calc(100% - 20px) center no-repeat;}

#mypage-event .board_list .search_box .item .inputbox01 {width: calc(100% - 320px);}
#mypage-event .board_list .search_box .item .inputbox01 input.w675 {width: 100%; border: 2px solid #000;}

#mypage-event .list_wrap {border-top: 2px solid #000; margin-top: 25px;}


.mypage .common_table tbody td.num {font-size: clamp(14px, calc(16 / var(--inner2) * 100vw), 16px);}
.mypage .common_table tbody td.num2 {font-size: clamp(14px, calc(14 / var(--inner2) * 100vw), 14px); font-weight: 400;}
.mypage .common_table tbody td.btn span {display: inline-block; width: fit-content; padding: 4px 16px; border-radius: 40px; color: #fff; font-weight: 400;}
.mypage .common_table tbody td.type_ing span {background-color: var(--point2);}
.mypage .common_table tbody td.type_end span {background-color: #0F33FF;}
.mypage .common_table tbody td.type_stay span {background-color: #666;}

#mypage-dev_list .col_state {width: 100px;}
/* 제목 말줄임표 */
#mypage-dev_list .list_wrap .common_table.type02 {table-layout: fixed;}
#mypage-dev_list .list_wrap .common_table.type02 .item .titbox {display: flex; align-items: center; padding: 20px;}
#mypage-dev_list .list_wrap .common_table.type02 .item .titbox .title {display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}

#mypage-dev_list .list_wrap .common_table.type02 span.mobile {display: none;}

@media screen and (max-width:1500px) {
    #mypage-dev_list .list_wrap .common_table.type02 {table-layout: auto;}
    #mypage-dev_list .list_wrap .common_table.type02 thead {display: none;}
    #mypage-dev_list .list_wrap .common_table.type02 tr {display: block;}
    #mypage-dev_list .list_wrap .common_table.type02 td {display: block; text-align: left; padding: 7px 0;}
    #mypage-dev_list .list_wrap .common_table.type02 .item a {padding: 0;}
    #mypage-dev_list .list_wrap .common_table.type02 tbody td:nth-child(1) {margin-top: 10px;}
    #mypage-dev_list .list_wrap .common_table.type02 colgroup {display: none;}
    #mypage-dev_list .list_wrap .common_table.type02 .item .titbox {display: block; padding: 5px 0;}
    #mypage-dev_list .list_wrap .common_table.type02 .item .titbox .title {text-overflow: unset; white-space: unset; overflow: inherit; display: inline;}
    #mypage-dev_list .list_wrap .common_table.type02 tbody td:last-of-type {margin-bottom: 10px;}

    #mypage-dev_list .list_wrap .common_table.type02 span.mobile {display: inline-block;}
}


.common_table {text-align: center;}

.common_table tbody td {color: #666; font-size: clamp(14px, calc( 14 / var(--inner2) * 100vw ), 14px);}
.common_table tbody td.num {color: #000; font-size: clamp(14px, calc( 16 / var(--inner2) * 100vw ), 16px);}
.common_table tbody .tit {text-align: left;}
.common_table tbody .tit a {line-height: 1.5;}
.common_table tbody .titbox {text-align: left;}
.common_table tbody td.type p.tag {margin: 0 auto;}
.common_table tbody td.t_type {color: #000; font-weight: 700;}

.common_table tbody td.btn a {display: inline-block; width: fit-content; padding: 5px 16px; border-radius: 40px; text-align: center; }
.common_table tbody td.btn.cancel a {background-color: #666; color: #fff;}
.common_table tbody td.btn.cert a {background-color: var(--point2); color: #fff;}

@media screen and (max-width:1600px) {
    .mypage.inner {gap: 30px;}
}

@media screen and (max-width:1400px) {
    #mypage-event .board_list .search_box .item input, #mypage-event .board_list .search_box .item select {width: 50%;}
    #mypage-event .board_list .search_box .item select {width: 50%;}
    #mypage-event .board_list .search_box .item .inputbox01 {width: 50%;}
}

@media screen and (max-width:1200px) {
    .mypage .inner {flex-direction: column;}
    .mypage .board_list,
    article.profile_wrap,
    .mypage .view_wrap  {width: 100%;}
    article.profile_wrap .profile_top .link_wrap {justify-content: center;}
    .mypage .board_list {width: 100% !important;}

}


@media screen and (max-width:1024px) {
    .mypage .common_table tbody td.num {text-align: left;}
    .common_table tbody td.type p.tag {margin:0;}
    #mypage-event .board_list .search_box .item > div {flex-direction: column; width: 100%; gap: 10px; margin-bottom: 15px;}
    #mypage-event .board_list .search_box .item input, #mypage-event .board_list .search_box .item select {width: 100%;}
    #mypage-event .board_list .search_box .item .inputbox01 {width: 100%;}
    #mypage-event .board_list .search_box .item .inputbox01 input.w675 {width: 100%;}
}

@media screen and (max-width:768px) {
    .common_table tbody td.type p.tag {margin: 0;}
    .list_wrap .common_table tbody td {padding: 7px 0;}
    .list_wrap .common_table tbody td:nth-child(1) {margin-top: 10px;}
    .list_wrap .common_table tbody td:last-of-type {margin-bottom: 10px;}
}

@media screen and (max-width:425px) {
    #mypage-event .board_list .search_box .item {flex-direction: column;}
    #mypage-event .board_list .search_box .item input[type="date"]{-webkit-appearance: none; }
    #mypage-event .board_list .search_box .item .tit { width: 100% !important; text-align: left;}
}

@media screen and (max-width:330px) {
    article.profile_wrap .profile_top .link_wrap li:nth-child(1)::after, article.profile_wrap .profile_top .link_wrap li:nth-child(2)::after {margin: 0 10px;}
}

/* 개발문의내역 + 문의내역 */

#mypage-dev_list .board_list {width: calc(100% - 320px);}
#mypage-dev_list .board_list .search_box {padding:30px 20px; border-top: 2px solid #000; border-bottom: 2px solid #000; background-color: #f6f6f6;}
#mypage-dev_list .board_list .search_box .item {gap: 20px; margin-bottom: 10px;}
#mypage-dev_list .board_list .search_box .item > div {width: calc(100% - 120px); gap: 20px;}
#mypage-dev_list .board_list .search_box .item:last-child {margin-bottom: 0;}
#mypage-dev_list .board_list .search_box .item .tit {flex-shrink: 0; width: 100px; font-size: clamp(14px, calc( 16 / var(--inner2) * 100vw ), 16px); font-weight: 700;}

#mypage-dev_list .board_list .search_box .item input,
#mypage-dev_list .board_list .search_box .item select {width: 300px; height: 40px; padding: 0 20px; background-color: #fff; border: none; outline: none; color: #666;}

#mypage-dev_list .board_list .search_box .item select {background:#fff url(../img/ico_select.png) calc(100% - 20px) center no-repeat;}

#mypage-dev_list .board_list .search_box .item .inputbox01 {width: calc(100% - 320px);}
#mypage-dev_list .board_list .search_box .item .inputbox01 input.w675 {width: 100%; border: 2px solid #000;}

#mypage-dev_list .list_wrap {border-top: 2px solid #000; margin-top: 25px;}
#mypage-dev_list .common_table tbody .tit a {display: flex; align-items: center; gap: 10px;}

@media screen and (max-width:1400px) {
    #mypage-dev_list .board_list .search_box .item select {width: 50%;}
    #mypage-dev_list .board_list .search_box .item .inputbox01 {width: 50%;}
}

@media screen and (max-width:1024px) {
    #mypage-dev_list .board_list .search_box .item > div {flex-direction: column; width: 100%; gap: 10px; margin-bottom: 15px;}
    #mypage-dev_list .board_list .search_box .item input, #mypage-dev_list .board_list .search_box .item select {width: 100%;}
    #mypage-dev_list .board_list .search_box .item .inputbox01 {width: 100%;}
    #mypage-dev_list .board_list .search_box .item .inputbox01 input.w675 {width: 100%;}
    #mypage-dev_list .common_table tbody .tit a {flex-direction: column; align-items: baseline;}
}

/* @media screen and (max-width:768px) {
    #mypage-dev_list .tag {display: block; margin-bottom: 10px;}
} */

@media screen and (max-width:425px) {
    #mypage-dev_list .board_list .search_box .item {flex-direction: column;}
    #mypage-dev_list .board_list .search_box .item .tit {text-align: center;}
}


/*********************************/
/* 마이페이지 - 정보수정 */
/*********************************/

#mypage-edit .section_title {margin-bottom: 25px; font-size: clamp(25px, calc( 38 / var(--inner2) * 100vw ), 38px); }
#mypage-edit .sub_txt {margin: 0 0 20px; color: var(--point2); font-size: clamp(14px, calc( 14 / var(--inner2) * 100vw ), 14px); font-weight: 700; text-align: right;}

#mypage-edit .board_list {width: calc(100% - 320px);}
#mypage-edit .table {border-top: 2px solid #000;}
#mypage-edit .table span.required {color: var(--point2); margin-left: 5px;}

#mypage-edit .table .line {display: flex; align-items: center; padding: 20px; border-bottom: 1px solid #ccc;}
#mypage-edit .table .line:last-child {border-bottom: 2px solid #000;}
#mypage-edit .table .line .tit {width: 160px; font-weight: 700; font-size: clamp(14px, calc( 14 / var(--inner2) * 100vw ), 14px);}

#mypage-edit .table .line .desc {color: #666; font-size: clamp(14px, calc( 14 / var(--inner2) * 100vw ), 14px);}

#mypage-edit .table .line input.w440 {width: 440px; height: 40px; padding: 0 10px; border: 1px solid #ccc; font-size: clamp(14px, calc( 14 / var(--inner2) * 100vw ), 14px);}
#mypage-edit .table .line .desc.flex-align {gap: 10px;}
#mypage-edit .table .line ul {padding-left: 5px;}
#mypage-edit .table .line ul.flex-align {gap: 10px;}

#mypage-edit .table .line ul .solar label,
#mypage-edit .table .line ul .lunar label {padding-left: 5px; color: #666;}

#mypage-edit .table .line ul .subscribe label {padding-left: 5px; color: #666;}

#mypage-edit .table .line .birth {gap: 5px !important; flex-wrap: wrap;}
#mypage-edit .table .line .birth select {width: 80px; height: 40px; padding: 0 10px; border: 1px solid #ccc;  font-family: 'Pretendard';}

#mypage-edit .section02 {margin-top: 80px;}
#mypage-edit #postcode {width: 80px;height:40px; padding: 0 10px; border:1px solid #ccc;}
#mypage-edit #cp_address {margin: 8px 0;}
#mypage-edit .find_postcode {height: 40px; padding: 10px; background-color: #333; border: none; color: #fff; font-size: clamp(14px, calc( 14 / var(--inner2) * 100vw ), 14px); cursor: pointer;}

#mypage-edit .view_btns > div button {width: 130px; border-radius: 0; background-color: var(--point2);}
#mypage-edit .view_btns > div > a {width: 130px; height: 50px; border-radius: 0; border: 1px solid #ccc; color: #666;}
.view_btns {position: relative;}
.view_btns .btn_left {position: absolute; top: 0; left: 0; height: 100%;}
.view_btns .btn_left {position: absolute; top: 0; left: 0; height: 100%;}
.view_btns .red_btn a {color: var(--point2) !important; border: 1px solid var(--point2) !important;}
.paging_btn_wrap {position: relative;}
.paging_btn_wrap .btn_right {position: absolute; top: 50%; right: 0; transform: translateY(-50%);}
.paging_btn_wrap .btn_right > a {display: flex; align-items: center; justify-content: center; width: 130px; height: 50px; border-radius: 0; background-color: var(--point2); color: #fff;}

@media screen and (max-width:1400px) {
    .paging_btn_wrap .btn_right {position: unset; transform: translateY(0);}
    .paging_btn_wrap .btn_right a {margin: 40px auto 0;}
}

@media screen and (max-width:768px) {
    .view_btns .btn_left {position: unset;}
}

@media screen and (max-width:768px) {
    #mypage-edit .table .line {flex-direction: column; align-items: baseline; gap: 20px;}
    #mypage-edit .table .line .desc {width: 100%;}
    #mypage-edit .table .line input.w440 {width: 100%;}
}

@media screen and (max-width:425px) {
    #mypage-edit .view_btns > div button,
    #mypage-edit .view_btns > div > a {width: 90px;}
}


/*********************************/
/* 마이페이지 - 회원탈퇴 */
/*********************************/

#mypage-edit .table .line select {width: 440px; height: 40px; padding: 0 10px; border: 1px solid #ccc; font-size: clamp(14px, calc( 14 / var(--inner2) * 100vw ), 14px); color: #666;}
#mypage-edit .table .line .desc {width: 100%;}
#mypage-edit .table .line textarea {width: 100%; height: 200px; padding: 10px; border: 1px solid #ccc; font-size: clamp(14px, calc( 14 / var(--inner2) * 100vw ), 14px); resize: none;}

#mypage-edit .desc02 {margin-top: 23px; color: #666; font-size: clamp(14px, calc( 14 / var(--inner2) * 100vw ), 14px);}
#mypage-edit .desc02 .icon {display: inline-flex; justify-content: center; align-items: center; flex-shrink: 0; width: 18px; height: 18px; margin-right: 9px; border-radius: 50%; background-color: #333; color: #fff;}

@media screen and (max-width:768px) {
    #mypage-edit .table .line select,
    #mypage-edit .table .line textarea {width: 100%;}
}


/* 회원가입 완료 */
/* #complete {display: flex; align-items: center; height: 100vh;} */
#complete .box_wrap {width: 600px; margin: 0 auto; padding: 30px 30px 60px; border: 1px solid #ccc; border-top: 3px solid var(--point2);}
#complete .box_wrap .titlebox {padding-bottom: 15px; border-bottom: 2px solid #000; font-size: clamp(18px, calc( 22 / var(--inner2) * 100vw ), 22px);}

#complete .box_wrap .content {padding: 110px 70px 100px; text-align: center;}
#complete .box_wrap .content p {margin-bottom: 40px; color: #333; font-size: clamp(14px, calc( 14 / var(--inner2) * 100vw ), 14px); line-height: 1.5;}
#complete .box_wrap .content a {display: block; padding:10px 0; background-color: #333; color: #fff; font-size: clamp(14px, calc( 14 / var(--inner2) * 100vw ), 14px); font-weight: 900;}

#complete .box_wrap .form_logo {text-align: center;}
#complete .box_wrap .form_logo img {width: 110px;}

@media screen and (max-width:768px) {
    #complete .box_wrap {width: 100%;}
}

@media screen and (max-width:425px) {
    #complete .box_wrap .content {padding: 50px 0 50px;}
}



/*********************************/
/* 마이페이지 - 문의폼 */
/*********************************/
#mypage-inquiry .section_title {margin-bottom: 25px; font-size: clamp(25px, calc( 38 / var(--inner2) * 100vw ), 38px); }
#mypage-inquiry .sub_txt {margin: 0 0 20px; color: var(--point2); font-size: clamp(14px, calc( 14 / var(--inner2) * 100vw ), 14px); font-weight: 700; text-align: right;}

#mypage-inquiry .board_list {width: calc(100% - 320px);}
#mypage-inquiry .table {border-top: 2px solid #000;}
#mypage-inquiry .table span.required {color: var(--point2); margin-left: 5px;}

#mypage-inquiry .table .line {display: flex; align-items: center; padding: 20px; border-bottom: 1px solid #ccc;}
#mypage-inquiry .table .line:last-child {border-bottom: 2px solid #000;}
#mypage-inquiry .table .line .tit {width: 160px; font-weight: 700; font-size: clamp(14px, calc( 14 / var(--inner2) * 100vw ), 14px);}

#mypage-inquiry .table .line .desc {color: #666; font-size: clamp(14px, calc( 14 / var(--inner2) * 100vw ), 14px);}

#mypage-inquiry .table .line input.w440 {width: 440px; height: 40px; padding: 0 10px; border: 1px solid #ccc; font-size: clamp(14px, calc( 14 / var(--inner2) * 100vw ), 14px);}
#mypage-inquiry .table .line .desc.flex-align {gap: 10px;}
#mypage-inquiry .table .line ul {padding-left: 5px;}
#mypage-inquiry .table .line ul.flex-align {gap: 10px;}

#mypage-inquiry .table .line ul .solar label,
#mypage-inquiry .table .line ul .lunar label {padding-left: 5px; color: #666;}

#mypage-inquiry .table .line ul .subscribe label {padding-left: 5px; color: #666;}

#mypage-inquiry .table .line .birth {gap: 5px !important; flex-wrap: wrap;}
#mypage-inquiry .table .line .birth select {width: 80px; height: 40px; padding: 0 10px; border: 1px solid #ccc;  font-family: 'Pretendard';}

#mypage-inquiry #postcode {width: 80px;height:40px; padding: 0 10px; border:1px solid #ccc;}
#mypage-inquiry #cp_address {margin: 8px 0;}
#mypage-inquiry .find_postcode {height: 40px; padding: 10px; background-color: #333; border: none; color: #fff; font-size: clamp(14px, calc( 14 / var(--inner2) * 100vw ), 14px); cursor: pointer;}


#mypage-inquiry .desc02 {margin-top: 23px; color: #666; font-size: clamp(14px, calc( 14 / var(--inner2) * 100vw ), 14px);}
#mypage-inquiry .desc02 .icon {display: inline-flex; justify-content: center; align-items: center; flex-shrink: 0; width: 18px; height: 18px; margin-right: 9px; border-radius: 50%; background-color: #333; color: #fff;}

#mypage-inquiry .desc02 + .desc02 {margin: 10px 0;}

#mypage-inquiry .view_btns button {width: 130px; border-radius: 0; background-color: var(--point2);}

@media screen and (max-width:768px) {
    #mypage-inquiry .table .line {flex-direction: column; align-items: baseline; gap: 20px;}
    #mypage-inquiry .table .line .desc {width: 100%;}
    #mypage-inquiry .table .line input.w440 {width: 100%;}
}

@media screen and (max-width:425px) {
    #mypage-inquiry .view_btns > div button,
    #mypage-inquiry .view_btns > div > a {width: 90px;}
}


/* 문의폼 수정 */
#inquiry_write.mypage .detail_form01 {margin-top: 0;}