@charset "utf-8"; /********** 숨김 **********/
.hide { overflow: hidden; position: absolute; width: 1px; height: 1px; margin: -1px; clip: rect(0 0 0 0); } 

/* 커스텀 스크롤바 */
div { scrollbar-width: thin; scrollbar-color: #D9D9D9 transparent; } 
div::-webkit-scrollbar { width: 8px; } 
div::-webkit-scrollbar-track { background: transparent; } 
div::-webkit-scrollbar-track { background: transparent; } 
::-webkit-scrollbar-thumb { background-color: #D9D9D9; border-radius: 50px; } 
div::-webkit-scrollbar-track { background: transparent; } 
::-webkit-scrollbar-button { display: none; width: 0; height: 0; } 

:root { /********** color **********/
 --main:#0072CA; --main-light: #1E9DEF; --sub-color:#0E2B5E; --main-dark:#004CAF; --sub-light:#bbe3e9; --bg-light: #EFF7FF; --point-light:#F7F7F4; --cate1: #E23F63; --cate2: #FF6200; --cate3: #FAC928; --cate4: #17BE65; --cate5: #1E9DEF; --cate6: #9900FF; --cate1-light: #fffae2; --cate2-light: #fef0ff; --cate3-light: #e9f4ff; --cate4-light: #e9f8ea; --cate5-light: #f5ebf9; --naver: #03c75a; --kakao: #fae300; --black90: rgba(0,0,0,.9); --black80: rgba(0,0,0,.8); --black70: rgba(0,0,0,.7); --black60: rgba(0,0,0,.6); --black50: rgba(0,0,0,.5); --black40: rgba(0,0,0,.4); --black30: rgba(0,0,0,.3); --black20: rgba(0,0,0,.2); --black10: rgba(0,0,0,.1); --gray-1d: #1d1d1d; --gray-22: #222; --gray-33: #333333; --gray-44: #444444; --gray-55: #555555; --gray-66: #666666; --gray-77: #777777; --gray-75: #757575; --gray-99: #999999; --gray-aa: #aaaaaa; --gray-cc: #cccccc; --gray-dd: #dddddd; --gray-e5: #e5e5e5; --gray-f4: #f4f4f4; --gray-f5: #f5f5f5; --gray-f6: #f6f6f6; --gray-f7: #f7f7f7; --gray-f9: #f9f9f9; --gray-fa: #fafafa; --gray-fc: #fcfcfc; --white90: rgba(255,255,255,.9); --white80: rgba(255,255,255,.8); --white70: rgba(255,255,255,.7); --white60: rgba(255,255,255,.6); --white50: rgba(255,255,255,.5); --white40: rgba(255,255,255,.4); --white30: rgba(255,255,255,.3); --white20: rgba(255,255,255,.2); --white15: rgba(255,255,255,.15); --white10: rgba(255,255,255,.1); --red:#E23F63; --bd-color:#E0E3E8; --bd-dark:#BDC2C9; --txt-gray:#56595E; --light-gray : #f6f6f7; } 

/* background color */
.bg-000 { background-color: #000; color: #fff; } 
.bg-gray-33 { background-color: var(--gray-33); color: #fff; } 
.bg-gray-44 { background-color: var(--gray-44); color: #fff; } 
.bg-gray-55 { background-color: var(--gray-55); color: #fff; } 
.bg-gray-66 { background-color: var(--gray-66); color: #fff; } 
.bg-gray-99 { background-color: var(--gray-99); color: #fff; } 
.bg-gray-dd { background-color: var(--gray-dd); color: #fff; } 
.bg-gray-e5 { background-color: var(--gray-e5); } 
.bg-gray-f4 { background-color: var(--gray-f4); } 
.bg-gray-f5 { background-color: var(--gray-f5); } 
.bg-gray-f7 { background-color: var(--gray-f7); } 
.bg-gray-f9 { background-color: var(--gray-f9); } 
.bg-gray-fa { background-color: var(--gray-fa); } 
.bg-fff { background-color: #ffffff; } 
.bg-fff50 { background-color: var(--white50); } 
.bg-fff60 { background-color: var(--white60); } 
.bg-naver { background-color: var(--naver); } 
.bg-kakao { background-color: var(--kakao); } 
.bg-main { background-color: var(--main); } 
.bg-primary400 { background-color: var(--primary400); } 
.bg-primary100 { background-color: var(--primary100); } 
.bg-point { background: var(--point-color); } 
.bg-main { background: var(--main); color: #fff; } 
.bg-sub { background: var(--sub-color); color: #fff; } 
.bg-sub-light { background: var(--sub-light); } 
.bg-point-light { background: var(--point-light); } 
.bg-light-gray { background: var(--light-gray); } 
.bg-gray-light { background: #f6f6f7; word-break: keep-all; } 



/* font color */
.fc-000 { color: #000; } 
.fc-main { color: var(--main); } 
.fc-main-light { color: var(--main-light); } 
.fc-gray-1d { color: var(--gray-1d); } 
.fc-gray-22 { color: var(--gray-22); } 
.fc-gray-33 { color: var(--gray-33); } 
.fc-gray-44 { color: var(--gray-44); } 
.fc-gray-55 { color: var(--gray-55); } 
.fc-gray-66 { color: var(--gray-66); } 
.fc-gray-77 { color: var(--gray-77); } 
.fc-gray-75 { color: var(--gray-75); } 
.fc-gray-99 { color: var(--gray-99); } 
.fc-gray-aa { color: var(--gray-aa); } 
.fc-gray-cc { color: var(--gray-cc); } 
.fc-gray-dd { color: var(--gray-dd); } 
.fc-gray-e5 { color: var(--gray-e5); } 
.fc-gray-f5 { color: var(--gray-f5); } 
.fc-gray-f9 { color: var(--gray-f9); } 
.fc-fff { color: #fff !important; } 
.fc-fff90 { color: var(--white90); } 
.fc-fff80 { color: var(--white80); } 
.fc-fff70 { color: var(--white70); } 
.fc-fff60 { color: var(--white60); } 
.fc-fff50 { color: var(--white50); } 
.fc-fff40 { color: var(--white40); } 
.fc-fff30 { color: var(--white30); } 
.fc-fff20 { color: var(--white20); } 
.fc-fff10 { color: var(--white10); } 
.fc-primary400 { color: var(--primary400); } 
.fc-sub { color: var(--sub-color); } 
.fc-cate1 { color: var(--cate1); } 
.fc-cate2 { color: var(--cate2); } 
.fc-cate3 { color: var(--cate3); } 
.fc-cate4 { color: var(--cate4); } 
.fc-cate5 { color: var(--cate5); } 
.fc-red { color: var(--red); } 
.fc-txt { color: var(--txt-gray); } 


/* border color */
.bd-000 { border: 1px solid #000; } 
.bd-gray-33 { border: 1px solid var(--gray-33); } 
.bd-gray-44 { border: 1px solid var(--gray-44); } 
.bd-gray-55 { border: 1px solid var(--gray-55); } 
.bd-gray-66 { border: 1px solid var(--gray-66); } 
.bd-gray-99 { border: 1px solid var(--gray-99); } 
.bd-gray-dd { border: 1px solid var(--gray-dd); } 
.bd-gray-cc { border: 1px solid var(--gray-cc); } 
.bd-gray-e5 { border: 1px solid var(--gray-e5); } 
.bd-gray-e9 { border: 1px solid var(--gray-e9); } 
.bd-gray-f5 { border: 1px solid var(--gray-f5); } 
.bd-gray-f9 { border: 1px solid var(--gray-f9); } 
.bd-fff { border: 1px solid #fff; } 
.bd-main { border: 1px solid var(--main); } 
.bd-main { border: 1px solid var(--main); } 
.bd-main-dashed { border: 1px dashed var(--main); } 
.bd-primary400 { border: 1px solid var(--primary400); } 
.bd-top-txt { border-top: 1px solid var(--txt-gray); } 
.bd-t-dash-99 { border-top: 1px dashed var(--gray-99); } 
.bd-sub { border: 1px solid var(--sub-color); } 
.bd-gray { border: 1px solid var(--bd-dark); } 
.bd-gray-light { border: 1px solid var(--bd-color); } 

.transparents-layer { display: none; } 

/* Display */
.inline { display: inline; } 
.block { display: block; } 
.inline-block { display: inline-block; } 
.flex { display: flex; } 
.inline-flex { display: inline-flex; } 

.flex-col { display: flex; flex-direction: column; } 
/* Flex wrap */
.flex-wrap { flex-wrap: wrap; } 

/* Flex alignment */
.items-baseline { align-items: baseline; } 
.items-center { align-items: center; } 
.items-end { align-items: flex-end; } 
.justify-start { justify-content: flex-start !important; } 
.justify-center { justify-content: center; } 
.justify-end { justify-content: flex-end; } 
.justify-between { justify-content: space-between; } 

.flex-1 { flex: 1; } 

/* Flex shrink */
.shrink-0 { flex-shrink: 0; } 
.align-top { vertical-align: top; } 
.align-middle { vertical-align: middle; } 
.align-bottom { vertical-align: bottom; } 

/* gap */
.gap5 { gap: 5px; } 
.gap10 { gap: 10px; } 
.gap15 { gap: 15px; } 
.gap20 { gap: 20px; } 
.gap25 { gap: 25px; } 
.gap30 { gap: 30px; } 
.gap40 { gap: 40px; } 
/* border-radius */
.bdrd0 { border-radius: 0 !important; } 
.bdrd5 { border-radius: 5px !important; } 
.bdrd6 { border-radius: 6px !important; } 
.bdrd10 { border-radius: 10px !important; } 
.bdrd15 { border-radius: 15px !important; } 
.bdrd20 { border-radius: 20px !important; } 
.bdrd50 { border-radius: 50px !important; } 
.bdrd100 { border-radius: 100px !important; } 
@media only screen and (max-width: 767px){
 .bdrd20 { border-radius: 10px !important; } 
 }

/********** 팝업 **********/
.popup-st1 { display: none; position: fixed; top: 0; left: 0; z-index: 101; width: 100%; height: 100%; background: rgba(0,0,0,0.5) } 
.popup-st1.active { display: block; } 
.popup-st1 .popup-inner { position: absolute; top: 50%; left: 50%; width: 100%; max-width: 700px; padding: 0 20px; transform: translate(-50%, -50%); } 
.popup-st1 .popup-box1 { position: relative; background: #fff; border-radius: 20px; } 
.popup-st1 .popup-box1 .popup-top { padding: 20px 20px 0 20px; } 
.popup-st1 .popup-box1 .popup-top strong { border-bottom: 1px solid var(--bd-color); padding-bottom: 2.5rem; padding-right: 30px; } 
.popup-st1 .popup-box1 .popup-cont { max-height: calc(100vh - 140px); padding: 30px; overflow-y: auto; } 
.popup-st1 .popup-box1 .popup-close-btn { position: absolute; top: 30px; right: 20px; z-index: 1; display: flex; align-items: center; justify-content: center; padding: 0; } 
.popup-st1 .popup-box1 .popup-close-btn i { position: relative; display: block; width: 24px; height: 24px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='none' viewBox='0 0 32 32'%3E%3Cpath stroke='%23757575' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M24 8 8 24M8 8l16 16'/%3E%3C/svg%3E")no-repeat center center / contain; } 

.popup-st2 { display: none; position: fixed; top: 0; left: 0; z-index: 50; align-items: center; justify-content: center; width: 100%; height: 100%; max-height: 100vh; background: rgba(0, 0, 0, 0.5); } 
.popup-st2.active { display: flex; } 
.popup-st2 .popup-inner { position: relative; max-width: 100%; max-height: 100%; padding: 20px; display: flex; align-items: center; justify-content: center; } 
.popup-st2 .popup-inner .popup-close-btn { position: absolute; top: 20px; right: 20px; z-index: 1; display: flex; align-items: center; justify-content: center; width: 60px; height: 60px; font-size: 24px; color: #fff; background: #000; } 
.popup-st2 .popup-inner .img-wrap { position: relative; display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; max-width: 100%; max-height: 100%; overflow: hidden; } 
.popup-st2 .popup-inner .img-wrap img { display: block; max-width: 100%; max-height: calc(100vh - 40px); width: auto; height: auto; object-fit: contain; } 
.popup-st2 .popup-inner .copy { position: absolute; bottom: 0; right: 0; padding: 10px; color: #fff; background: #000; } 

/* 팝업 열림 시 body 스크롤 잠금 */
.overflow-hidden { overflow: hidden; } 

@media only screen and (max-width: 767px){
 .popup-scroll { height: 300px; overflow-y: auto; } 
 .popup-st1 .popup-inner-st1 { padding: 0; } 
.popup-st1 .popup-box1 .popup-top { padding: 15px 15px 11px 15px; } 
.popup-st1 .popup-box1 .popup-close-btn { top: 17px; right: 12px; } 
.popup-st1 .popup-box1 .popup-close-btn i { font-size: 20px; } 
.popup-st1 .popup-box1 .popup-cont { padding: 20px; } 

.popup-cont .popup-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; } 
.popup-cont .popup-scroll > table { min-width: 520px; } 
 }
@media only screen and (max-width: 560px) { } 

/********** 이미지 **********/
.img-wrap { display: block; overflow: hidden; } 
.img-wrap img { max-width: 100% !important; width: 100%; height: 100%; object-fit: cover; } 
.vod-wrap { display: block; overflow: hidden; } 
.vod-wrap video { max-width: 100% !important; } 

.no-img { position: relative; background: var(--gray-e5); } 
.no-img::before { content:""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100px; height: 40px; background: url(../img/layout/symbol.svg) no-repeat center center / contain; } 


.img-st45 { position: relative; width: 100%; height: 0; padding-bottom: 45%; overflow: hidden; } 
.img-st45 img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; } 
.img-st56 { position: relative; width: 100%; height: 0; padding-bottom: 56%; overflow: hidden; } 
.img-st56 img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; } 
.img-st65 { position: relative; width: 100%; height: 0; padding-bottom: 65%; overflow: hidden; } 
.img-st65 img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; } 
.img-st100 { position: relative; width: 100%; height: 0; padding-bottom: 100%; overflow: hidden; } 
.img-st100 img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; } 
.img-st115 { position: relative; width: 100%; height: 0; padding-bottom: 115%; overflow: hidden; } 
.img-st115 img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; } 
.img-st140 { position: relative; width: 100%; height: 0; padding-bottom: 140%; overflow: hidden; } 
.img-st140 img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; } 


.vod-st56 { position: relative; width: 100%; height: 0; padding-bottom: 56%; overflow: hidden; } 
.vod-st56 iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; } 


.vod-thumb { position: relative; cursor: pointer; } 
.vod-thumb::before { content:""; position: absolute; top: 0; left: 0; z-index: 1; width: 100%; height: 100%; background: var(--black20) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' fill='%23fff' class='bi bi-play-fill' viewBox='0 0 16 16'%3E%3Cpath d='m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393'/%3E%3C/svg%3E") no-repeat center center / auto; } 

/********** 텍스트 ...처리 **********/
.txt-over1 { display: -webkit-box; display: -ms-flexbox; height: fit-content; overflow: hidden; text-overflow: ellipsis; word-break: break-all; -webkit-box-orient: vertical; -webkit-line-clamp: 1; } /* 1줄 */
.txt-over2 { display: -webkit-box; display: -ms-flexbox; height: fit-content; overflow: hidden; text-overflow: ellipsis; word-break: break-all; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } /* 2줄 */
.txt-over3 { display: -webkit-box; display: -ms-flexbox; height: fit-content; overflow: hidden; text-overflow: ellipsis; word-break: break-all; -webkit-box-orient: vertical; -webkit-line-clamp: 3; } /* 3줄 */


button { transition: all 0.3s; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -o-transition: all 0.3s; } 
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible { outline:3px dotted rgb(255, 0, 0); transition: none; outline-offset: -3px; } 
.blind { display: block; overflow: hidden; font-size: 1px; line-height: 0; color: transparent; } 
/* 네모난 기본 버튼 */
.btn { height: 58px; line-height: 58px; padding: 0 30px; border-radius: 12px; font-size: clamp(17px, 2vw, 1.9rem); font-weight: 500; } 
/* 검색창 검색하기 버튼 */
.btn2 { padding: 0 30px; min-width: 107px; height: 65px; line-height: 65px; text-align: center; border-radius: 4px; border-radius: 14px; } 
.btn3 { display: inline-flex; gap: 7px; align-items: center; padding: 0 20px; min-width: 60px; height: 60px; line-height: 60px; text-align: center; border-radius: 100px; } 
.btn4 { position: relative; width: 32px; height: 32px; line-height: 32px; } 
.btn4::after,
.btn4::before { content: ""; position: absolute; left: calc(50% - 6px); top: calc(50% - 1px); width: 12px; height: 2px; background-color: #fff; } 
.btn4.plus::after { transform: rotate(90deg); } 
.btn5 { padding: 0 5px; min-width: 58px; height: 41px; line-height: 41px; text-align: center; border-radius: 6px; font-weight: 500; font-size: 16px; } 
.btn6 { padding: 0 5px; min-width: 50px; height: 35px; line-height: 33px; font-size: 14px; text-align: center; border-radius: 8px; } 
.btn7 { padding: 0 5px; min-width: 80px; height: 35px; line-height: 33px; font-size: 14px; text-align: center; border-radius: 8px; } 
.btn8 { padding: 0 28px; min-width: 80px; height: 54px; line-height: 54px; font-size: 17px; text-align: center; border-radius: 8px; transition: all .3s; } 
.btn9 { padding: 0 28px; min-width: 80px; height: 50px; line-height: 48px; font-size: 16px; text-align: center; border-radius: 4px; } 

.btn.bg-main:hover , .btn8.bg-main:hover { background: var(--main-dark); color: #fff; } 
.btn.bd-gray:hover , .btn3.bd-gray:hover { border: 1px solid var(--main); } 
.btn_regist02:hover { border: 1px solid var(--main); color: #1d1d1d; } 


@media only screen and (max-width: 1023px){
 .btn { height: 50px; line-height: 50px; border-radius: 12px; } 
 .btn2 { height: 50px; line-height: 50px; } 
 }
 @media only screen and (max-width: 767px){
 .btn2 { height: 40px; line-height: 40px; min-width: 60px; font-size: 17px; border-radius: 8px; padding: unset; } 
 }
.btn_search .icon { width: 16px; height: 16px; background: url(../img/btn_search_b.png) no-repeat center / 100%; } 
.btn_close .icon { position: relative; display: block; width: 32px; height: 32px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='none' viewBox='0 0 32 32'%3E%3Cpath stroke='%231e1e1e' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M24 8 8 24M8 8l16 16'/%3E%3C/svg%3E")no-repeat center center / contain; } 

.btn_close2 { width: 21px; height: 21px; } 

@media only screen and (max-width: 1200px){
 .btn_close .icon { width: 27px; height: 27px; } 
 }

/********** btn **********/
/* 버튼 정렬 */
.btn-lf { display: flex; justify-content: flex-start; gap: 5px; } 
.btn-ce { display: flex; justify-content: center; gap: 5px; } 
.btn-rg { display: flex; justify-content: flex-end; gap: 5px; } 
.btn-spb { display: flex; justify-content: space-between; gap: 5px; } 
.btn-col { display: flex; flex-direction: column; gap: 8px; } 

@media only screen and (max-width: 700px){
 .btn-spb { flex-wrap: wrap; } 
.btn-spb > .btn-ce { order: 1; width: 100%; } 
 } 
@media only screen and (max-width: 560px){
 .btn-ce { flex-wrap: wrap; } 
.btn-lf { flex-wrap: wrap; } 
 } 

/* 100% 늘어나는 기본버튼 */
.btn-bace1 { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-width: 160px; height: 52px; line-height: 52px; padding: 0 20px; font-family: 'Noto Sans KR', 'Noto Sans SC', sans-serif; font-weight: 500; font-size: clamp(17px,2vw, 1.9rem); border-radius: 10px; text-align: center; transition: all .3s; } 
.btn-bace1.bg-main:hover { background: var(--main-dark); color: #fff; } 
.btn-bace1.bd-000:hover { color: #fff; background: #000; } 
.btn-bace1.bg-000:hover { background-color: var(--primary400); } 
.btn-bace1.bd-fff:hover { color: #000; background: #fff; } 
.btn-bace1.bd-gray:hover { border: 1px solid var(--main); } 
/* btn-bace1.sm - ※ 문구 옆 인라인 바로가기 버튼 */
.btn-bace1.sm { min-width: auto; height: auto; line-height: 1.5; gap: 6px; padding: 10px 16px; font-size: 14px; } 
.btn-bace1.sm .icon-link, .btn-bace1.sm .icon-link-wh { width: 18px; height: 18px; } 

.btn_list { min-width: 200px; height: 54px; border-radius: 12px; padding: 0 20px; display: flex; align-items: center; justify-content: center; gap: 6px; font-weight: 600; } 
.btn_regist { min-width: 112px; height: 54px; border-radius: 12px; padding: 0 20px; display: flex; align-items: center; justify-content: center; gap: 6px; font-weight: 600; } 
.btn_regist02 { color: var(--txt-gray); background: #fff; border: 1px solid var(--bd-dark); } 
.btn_regist .icon { width: 16px; height: 15px; background: url(../img/icon_pencil.png) no-repeat center / contain; } 
.btn_list .icon { width: 16px; height: 15px; background: url(../img/icon_menu.png) no-repeat center / contain; } 
.btn_reply { width: 140px; height: 52px; line-height: 52px; background: #4897d3; color: #fff; font-size: 17px; display: flex; align-items: center; justify-content: center; gap: 19px; border-radius: 8px; } 
.btn_reply::before { content: ""; display: block; width: 16px; height: 15px; background: url(../img/icon_pencil.png) no-repeat center / contain; } 
.bg_rereply { background: var(--main); border: 1px solid var(--main); color: #fff; display: flex; align-items: center; justify-content: center; gap: 6px; } 
.btn_download { background: #1276c2; color: #fff; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 0 10px; } 
.btn_download::before { content: ""; display: block; width: 15px; height: 14px; background: url(../img/icon_download.png) no-repeat center / contain; } 

@media only screen and (max-width:1023px){
 .btn_list,.btn_regist { height: 50px; } 
 }

.bg_gray { color: #fff; background-color: #666; } 
.bg_gray2 { color: #fff; background-color: #7c8ea5; border-color: #7c8ea5; } 
.bg_green { color: #fff; background-color: #2656f6; } 
.bg_green2 { color: #fff; background-color: #707300; } 
.bg_brown { color: #fff; background-color: #a54601; } 
.bg_blue { color: #fff; background-color: var(--main); } 
.bg_blue.icon_link { display: flex; align-items: center; justify-content: center; gap: 10px; } 
.bg_blue.icon_link::after { content: ""; display: block; width: 16px; height: 16px; background: url(../img/icon__blink__wh.png) no-repeat center / contain; } 
.bg_black { color: #fff; background-color: #393e46; } 
.bg_red { color: #fff; background-color: #ee0000; } 
.bg_primary { background-color: var(--txt-gray); border: 1px solid var(--txt-gray); color: #fff; } 
.bg_gray3 { background-color: #ebebeb; color: #1e4e9a; } 

.bg_white { color: #666; border: 1px solid #666; background-color: #fff; } 
.bg_white2 { color: #2656f6; border: 1px solid #2656f6; background-color: #fff; } 
.bg_white3 { color: #707300; border: 1px solid #707300; background-color: #fff; } 
.bg_white4 { color: var(--txt-gray); border: 1px solid var(--txt-gray); background-color: #fff; } 
.bg_white5 { color: #1b52c3; border: 1px solid #1b52c3; background-color: #fff; } 
.bg_white6 { color: #69717f; border: 1px solid #69717f; background-color: #fff; } 
.bg_white7 { color: #6e7882; border: 1px solid #6e7882; background-color: #fff; } 
.bg_white8 { color: #ee0000; border: 1px solid #ee0000; background-color: #fff; } 

.color_gray { color: #666 !important; } 
.color_gray2 { color: #69717f !important; } 
.color_green { color: #2656f6 !important; } 
.color_green2 { color: #707300 !important; } 
.color_brown { color: #a54601 !important; } 
.color_blue { color: #1b52c3 !important; } 
.color_black { color: #393e46 !important; } 
.color_red { color: #ee0000 !important; } 

.fw-700 { font-weight: 700 !important; } 
.fw-600 { font-weight: 600 !important; } 
.fw-500 { font-weight: 500 !important; } 
.fw-400 { font-weight: 400 !important; } 
.p_r { position: relative !important; } 

.w_flex_only { display: flex !important; display: -webkit-flex; } 
.m_flex_only { display: none !important; display: -webkit-none; } 
.w_hidden { display: none !important; } 
.m_hidden { display: block !important; } 

u { text-underline-position: under; } 
.underline { text-decoration: underline; } 

.padding0 { padding: 0 !important; } 
.margin0 { margin: 0 !important; } 

.mt5 { margin-top: 5px; } 
.mt10 { margin-top: 10px; } 
.mt15 { margin-top: 15px; } 
.mt20 { margin-top: 20px; } 
.mt25 { margin-top: 2.5rem; } 
.mt30 { margin-top: 30px; } 
.mt40 { margin-top: 40px; } 
.mt50 { margin-top: 50px; } 
.mt60 { margin-top: 60px; } 

.mb2 { margin-bottom: 2px; } 
.mb5 { margin-bottom: 5px; } 
.mb10 { margin-bottom: 10px; } 
.mb15 { margin-bottom: 15px; } 
.mb20 { margin-bottom: 20px; } 
.mb25 { margin-bottom: 25px; } 
.mb30 { margin-bottom: 30px; } 
.mb35 { margin-bottom: 3.5rem; } 
.mb40 { margin-bottom: 4rem; } 
.mb50 { margin-bottom: 50px; } 
.mb55 { margin-bottom: 55px; } 
.mb60 { margin-bottom: 60px; } 
.mb65 { margin-bottom: 65px; } 
.mb80 { margin-bottom: 80px; } 
.mb100 { margin-bottom: 100px; } 

.mr5 { margin-right: 5px; } 
.mr10 { margin-right: 10px; } 
.mr15 { margin-right: 15px; } 
.mr20 { margin-right: 20px; } 
.mr25 { margin-right: 25px; } 
.mr30 { margin-right: 30px; } 
.mr35 { margin-right: 35px; } 
.mr60 { margin-right: 60px; } 

.ml5 { margin-left: 5px; } 
.ml10 { margin-left: 10px; } 
.ml20 { margin-left: 20px; } 
.ml30 { margin-left: 30px; } 

.pd25 { padding: 2.5rem; } 
.pd30 { padding: 3rem; } 

.pl10 { padding-left: 10px; } 
.pl15 { padding-left: 15px; } 
.pl20 { padding-left: 20px; } 
.pl30 { padding-left: 30px; } 
.pl40 { padding-left: 40px; } 
.pl60 { padding-left: 60px; } 

.pt10 { padding-top: 10px; } 
.pt15 { padding-top: 15px; } 
.pt20 { padding-top: 20px; } 
.pt30 { padding-top: 30px; } 
.pt33 { padding-top: 33px; } 
.pt40 { padding-top: 40px; } 
.pt50 { padding-top: 50px; } 

.pb10 { padding-bottom: 10px; } 
.pb15 { padding-bottom: 15px; } 
.pb40 { padding-bottom: 40px; } 

.pr10 { padding-right: 10px; } 

.w-fit { width: fit-content; } 
.w50 { width: 50px; } 
.w60 { width: 60px; } 
.w100 { width: 100px; } 
.w120 { width: 120px; } 
.w200 { width: 200px; } 
.w230 { width: 230px; } 
.w300 { width: 300px; } 
.w400 { width: 400px; } 
.w500 { width: 500px; } 

.w_25 { width: 25%; } 
.w_30 { width: 30%; } 
.w_35 { width: 35%; } 
.w_40 { width: 40%; } 
.w_45 { width: 45%; } 
.w_50 { width: 50%; } 
.w_60 { width: 60%; } 
.w_80 { width: 80%; } 
.w_100 { width: 100%; } 

@media only screen and (max-width:767px){
 .mt20 { margin-top: 1rem; } 
 .mt25 { margin-top: 1.5rem; } 
 .mt30 { margin-top: 2rem; } 
 .mt40 { margin-top: 2.5rem; } 
 .mt60 { margin-top: 3rem; } 
 .mb35 { margin-bottom: 2rem; } 
 .mb20 { margin-bottom: 1rem; } 
 .pd30 { padding: 17px; } 
 .pt30 { padding-top: 2.5rem; } 
 }

.f_12 { font-size: 12px; } 
.f_13 { font-size: 13px; } 
.f_14 { font-size: 14px; } 
.f_18 { font-size: 18px; } 
.f_19 { font-size: clamp(17px, 2vw, 1.9rem); } 

.al { text-align: left; } 
.ac { text-align: center; } 
.ar { text-align: right; } 
.vt { vertical-align: top; } 
.vm { vertical-align: middle; } 
.vb { vertical-align: bottom; } 

/********** text-style **********/
.txt-65 { display: block; line-height: 1.4; font-size: 6.5rem; word-break: keep-all; } 
.txt-60 { display: block; line-height: 1.4; font-size: 6rem; word-break: keep-all; } 
.txt-55 { display: block; line-height: 1.4; font-size: 5.5rem; word-break: keep-all; } 
.txt-50 { display: block; line-height: 1.4; font-size: 5rem; word-break: keep-all; } 
.txt-48 { display: block; line-height: 1.4; font-size: 4.8rem; word-break: keep-all; } 
.txt-45 { display: block; line-height: 1.4; font-size: 4.5rem; word-break: keep-all; } 
.txt-40 { display: block; line-height: 1.4; font-size: 4rem; word-break: keep-all; } 
.txt-36 { display: block; line-height: 1.4; font-size: 3.6rem; word-break: keep-all; } 
.txt-32 { display: block; line-height: 1.4; font-size: clamp(2rem, 2vw, 3.2rem); word-break: keep-all; } 
.txt-30 { display: block; line-height: 1.4; font-size: 3rem; word-break: keep-all; } 
.txt-26 { display: block; line-height: 1.4; font-size: clamp(2rem, 2vw, 2.6rem); word-break: keep-all; } 
.txt-24 { display: block; line-height: 1.4; font-size: 2.4rem; word-break: keep-all; } 
.txt-22 { display: block; line-height: 1.4; font-size: 2.2rem; word-break: keep-all; } 
.txt-20 { display: block; line-height: 1.4; font-size: 2rem; word-break: keep-all; } 
.txt-19 { display: block; line-height: 1.4; font-size: clamp(1.7rem, 2vw, 1.9rem); } 
.txt-18 { display: block; line-height: 1.4; font-size: 18px; word-break: keep-all; } 
.txt-17 { display: block; line-height: 1.4; font-size: 17px; word-break: keep-all; } 
.txt-16 { display: block; line-height: 1.4; word-break: keep-all; } 
.txt-15 { display: block; line-height: 1.4; font-size: 15px; word-break: keep-all; } 
.txt-14 { display: block; line-height: 1.4; font-size: 14px; word-break: keep-all; } 
.txt-13 { display: block; line-height: 1.4; font-size: 13px; word-break: keep-all; } 
@media only screen and (max-width: 1023px){
 .txt-36 { font-size: 3rem; } 
 .txt-30 { font-size: 2.5rem; } 
 }
@media only screen and (max-width: 767px){
 .txt-36 { font-size: 2.3rem; } 
 .txt-30 { font-size: 2.2rem; } 
 .txt-22 { font-size: 2rem; } 
 .txt-20 { font-size: 16px } 
 }

.txt-underline { text-decoration: underline; } 

.cl_bo { clear: both !important; } 
.f_left { float: left !important; } 
.f_right { float: right !important; } 
.over_h { overflow: hidden !important; } 
.wb_keep { word-break: keep-all !important; } 
.wb_break { word-break: break-all !important; } 

.skip_nav { position: relative; z-index: 1000; display: block; overflow: hidden; height: 0; background:#000; text-align: center; } 
.skip_nav:focus { overflow: auto; height: auto; padding: 5px 0; color:#fff; } 
.skip_nav:focus-visible { outline: 3px dotted #ff0000; outline-offset: -3px; } 

/* 팝업 열림 시 body 스크롤 잠금 */
.overflow-hidden { overflow: hidden; } 

/*서브공통*/
.board_title { margin-bottom: 15px; display: flex; display: -webkit-flex; justify-content: space-between; } 
.board_title h3 { display: flex; display: -webkit-flex; align-items: center; font-size: 20px; font-weight: 500; color: #000; } 
.boardview + .board_title { margin-top: 30px; } 
.list_type > li { position: relative; padding-left: 10px; line-height: 1.6; } 
.list_type > li::after { content: ""; position: absolute; left: 0; top: 12px; width: 3px; height: 3px; border-radius: 10px; background-color: #555; } 
.num_list { counter-reset: num; } 
.num_list > li { position: relative; padding-left: 22px; } 
.num_list > li::before { content: counter(num); counter-increment: num 1; position: absolute; left: 0; top: 5px; width: 15px; height: 15px; font-size: 9px; line-height: 14px; text-align: center; border: 1px solid rgba(0, 0, 0, 0.5); border-radius: 100%; } 
.num_list2 { padding-left: 17px; } 
.num_list2 > li { list-style: decimal; } 
@media only screen and (max-width: 1023px) { } 
 @media only screen and (max-width: 767px) { } 

.midarea .subtoparea { height: 280px; background: url(../img/sub_header_img.jpg) no-repeat center; background-size: cover; position: relative; margin-top: 88px; width: 100%; padding-top: clamp(6rem, 4vw, 8rem); } 
.midarea .subtoparea.subtoparea00 { background: url(../img/layout/sub-vi00.png) no-repeat center; background-size: cover; }
.midarea .subtoparea.subtoparea01 { background: url(../img/layout/sub-vi01.png) no-repeat center; background-size: cover; }
.midarea .subtoparea.subtoparea02 { background: url(../img/layout/sub-vi02.png) no-repeat center; background-size: cover; }
.midarea .subtoparea.subtoparea03 { background: url(../img/layout/sub-vi03.png) no-repeat center; background-size: cover; }
.midarea .subtoparea.subtoparea04 { background: url(../img/layout/sub-vi04.png) no-repeat center; background-size: cover; } 
.midarea .subtoparea.subtoparea05 { background: url(../img/layout/sub-vi05.png) no-repeat center; background-size: cover; } 
.midarea .subtoparea.subtoparea06 { background: url(../img/layout/sub-vi06.png) no-repeat center; background-size: cover; } 
.midarea .subtoparea.subtoparea07 { background: url(../img/layout/sub-vi07.png) no-repeat center; background-size: cover; } 

.midarea .subtoparea h2 p { color: #fff; } 
.midarea .subtoparea h2 p.tit1, .midarea .subtoparea h2 .tit1 { position: relative; font-size: clamp(3.2rem, 4vw, 5.5rem); font-weight: 700; color: #fff; padding-left: 2rem; } 
.midarea .subtoparea h2 .tit1::before { content: ""; position: absolute; top: 5px; left: 0; width: 13.221px; height: 13.221px; border-radius: 30px; background: #E23F63; } 
.midarea .subtoparea h2 p.tit2 { margin-top: 15px; line-height: 44px; font-size: 44px; font-weight: 600; } 

@media only screen and (max-width: 1200px){
 .midarea .subtoparea { margin-top: 68px; } 
 }
@media only screen and (max-width: 1023px){
 .midarea .subtoparea { height: 180px; margin-top: 65px; } 
 }
@media only screen and (max-width: 767px){
 .midarea .subtoparea { height: 180px; margin-top: 70px; } 
 .midarea .subtoparea h2 p.tit1, .midarea .subtoparea h2 .tit1 { padding-left: 1.3rem; } 
 .midarea .subtoparea h2 .tit1::before { width: 7px; height: 7px; } 
 }

.lnb { position: relative; height: 100%; margin-top: -70px; background: rgba(14, 43, 94, 0.01); backdrop-filter: blur(20px); z-index: 1; } 
.lnb a:focus-visible,.lnb button:focus-visible { outline: 3px dotted #ff0000; outline-offset: -3px; } 
.lnb .inner-padding { position: relative; display: flex; justify-content: space-between; align-items: center; } 
.lnb_area { display: flex; width: 100%; } 
.lnb_area > li { position: relative; font-size: 1.9rem; font-weight: 400; } 
.lnb_area > li span { display: block; font-size: clamp(16px, 4vw, 1.9rem); font-weight: 400; } 
.lnb_area > li.home a { display: flex; width: 70px; height: 70px; justify-content: center; align-items: center; aspect-ratio: 1/1; background: var(--sub-color); border-radius: 0 0 24px 0; } 
.lnb_area > li.home a > i { display: block; width: 20px; height: 20px; background: url(../img/layout/icn-home.svg) no-repeat center center / contain; } 

.lnb_area li.dropdown { display: flex; display: -webkit-flex; align-items: center; height: 70px; line-height: 70px; } 
.lnb_area li.dropdown button { display: flex; gap: 20px; justify-content: space-between; align-items: center; min-width: 300px; width: 100%; height: 100%; padding: 0 30px; text-align: left; color: #fff; line-height: 18px; transition: all .3s; }
.lnb_area li.dropdown.open > button { } 
.lnb_area > li.open span { font-weight: 700; } 
.lnb_area li.dropdown:last-child button span { font-weight: 800; } 
.lnb_area li.dropdown > button .arrow { width: 13px; height: 7px; background: url(../img/layout/icn-arr-wh.svg) no-repeat center / 100%; flex-shrink: 0; } 
.lnb_area li.dropdown.open > button .arrow { background: url(../img/layout/icn-arr-wh.svg) no-repeat center / 100%; transform: rotate(-180deg); } 

.lnb_area li.dropdown .dropdown-menu-wrap { position: absolute; left: 0; top: 70px; display: none; width: 100%; padding: 10px; background-color: #fff; box-shadow: 2.993px 0.209px 15px rgba(0, 0, 0, 0.1); border-radius: 20px; border: 1px solid var(--bd-color); z-index: 20; } 
.lnb_area li.dropdown.open .dropdown-menu-wrap { top: 100%; display: block; min-width: 190px; } 
.lnb_area li.dropdown .dropdown-menu { } 
.lnb_area li.dropdown.open .dropdown-menu { display: block; } 
.lnb_area li.dropdown.open .dropdown-menu li { display: flex; display: -webkit-flex; align-items: center; } 
.lnb_area li.dropdown.open .dropdown-menu li:first-child { margin-top: 0; } 
.lnb_area li.dropdown.open .dropdown-menu li button { min-width: unset; line-height: 40px; font-weight: 600; color: #1d1d1d; padding: 0 12px; transition: all 0.3s; border-radius: 5px; margin-top: 5px; font-size: 17px; } 
.lnb_area li.dropdown.open .dropdown-menu li:hover button,.lnb_area li.dropdown.open .dropdown-menu li.active button { color: var(--main); } 

/* dropdown-menu 최대 높이 + 커스텀 스크롤바 */
.dropdown-menu { scrollbar-width: thin; scrollbar-color: #D9D9D9 transparent; } 
.dropdown-menu::-webkit-scrollbar { width: 8px; } 
.dropdown-menu::-webkit-scrollbar-track { background: transparent; } 
.dropdown-menu::-webkit-scrollbar-thumb { background-color: #D9D9D9; border-radius: 50px; } 
.dropdown-menu::-webkit-scrollbar-button { display: none; width: 0; height: 0; } 
@media only screen and (max-width: 1023px){
 .lnb_area li.dropdown.open .dropdown-menu li button { margin-top: 0; } 
 }
.share_btn_wr { display: flex; align-items: center; gap: .8rem; } 
.share_btn_wr .share { position: relative; } 
.share_btn_wr .btn_share, .share_btn_wr .btn_link { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 50%; } 
.btn_share { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' fill='none' viewBox='0 0 40 40'%3E%3Cpath fill='%23fff' d='M25.496 9.84c.477-.06.962-.028 1.427.093.466.12.904.329 1.289.615.385.285.709.643.953 1.054.489.824.62 1.806.358 2.727a3.6 3.6 0 0 1-1.726 2.156c-.84.464-1.833.59-2.764.354a3.7 3.7 0 0 1-1.679-.933L17.58 19.1l.005.02q.015.056.027.113l.013.05a3 3 0 0 1 .035.19q.006.034.01.068l.005.036.017.163a3.5 3.5 0 0 1 .005.465l-.004.06-.01.113-.008.073a3 3 0 0 1-.026.168l-.018.091-.014.067-.02.083-.018.068 5.768 3.19q.185-.182.393-.337a3.7 3.7 0 0 1 1.288-.616 3.8 3.8 0 0 1 2.787.348c.42.232.79.544 1.088.918.299.373.519.802.646 1.262a3.47 3.47 0 0 1-.39 2.745 3.68 3.68 0 0 1-2.24 1.634 3.8 3.8 0 0 1-2.764-.354 3.6 3.6 0 0 1-1.727-2.157 3.47 3.47 0 0 1-.013-1.842l-5.777-3.194a3.66 3.66 0 0 1-1.678.943 3.8 3.8 0 0 1-2.775-.35 3.7 3.7 0 0 1-1.085-.913 3.5 3.5 0 0 1-.503-.85l-.014-.033-.057-.148-.005-.015a3 3 0 0 1-.052-.157l-.005-.019q-.006-.016-.01-.034-.014-.048-.025-.096l-.007-.033a3 3 0 0 1-.057-.293l-.012-.078-.01-.096-.006-.064q-.005-.05-.006-.1-.004-.047-.004-.095v-.157a3 3 0 0 1 .01-.197v-.02l.013-.117.003-.024.004-.036.01-.066a3 3 0 0 1 .053-.266l.014-.055q.01-.039.02-.078.004-.018.01-.034l.024-.075a3 3 0 0 1 .069-.199l.02-.055.038-.087a3.6 3.6 0 0 1 1.57-1.718 3.8 3.8 0 0 1 2.775-.351 3.7 3.7 0 0 1 1.678.944l5.768-3.19a3.47 3.47 0 0 1 .643-3.115 3.7 3.7 0 0 1 1.088-.918c.42-.232.882-.381 1.36-.44m.73 15.071a2 2 0 0 0-.732.047 1.9 1.9 0 0 0-.65.31c-.19.142-.347.317-.463.512-.232.391-.291.85-.17 1.277.121.429.418.806.841 1.04.424.235.933.3 1.412.18a1.83 1.83 0 0 0 1.115-.806 1.616 1.616 0 0 0 .184-1.285 1.7 1.7 0 0 0-.307-.6 1.8 1.8 0 0 0-.538-.452 1.9 1.9 0 0 0-.691-.223M14.63 18.394a1.95 1.95 0 0 0-.915-.077l-.01.002a1.9 1.9 0 0 0-.817.338 1.8 1.8 0 0 0-.37.36l-.02.03a1.7 1.7 0 0 0-.154.255l-.02.043a1.7 1.7 0 0 0-.109.336 1.6 1.6 0 0 0-.034.261l-.001.071a2 2 0 0 0 .011.19l.005.045a1.7 1.7 0 0 0 .129.435l.017.036a1.7 1.7 0 0 0 .388.52l.024.023q.054.048.114.092l.02.016a2 2 0 0 0 .311.183q.07.032.14.058l.021.008a1.9 1.9 0 0 0 .717.112 2 2 0 0 0 .346-.042 2 2 0 0 0 .358-.114q.004-.001.007-.004.082-.035.16-.077a1.8 1.8 0 0 0 .621-.569 1.7 1.7 0 0 0 .155-.287l.019-.047a1.6 1.6 0 0 0 .088-.331q.007-.043.01-.087l.007-.073v-.173a1.6 1.6 0 0 0-.172-.644 2 2 0 0 0-.119-.2l-.061-.085-.045-.054a1.76 1.76 0 0 0-.659-.488l-.027-.01a2 2 0 0 0-.135-.052m11.096-6.716a1.9 1.9 0 0 0-.691.223 1.8 1.8 0 0 0-.538.453c-.144.18-.248.384-.307.599a1.62 1.62 0 0 0 .185 1.284c.238.39.636.685 1.114.806.479.122.987.056 1.411-.178.423-.234.721-.613.842-1.042a1.62 1.62 0 0 0-.17-1.275 1.8 1.8 0 0 0-.464-.513 1.9 1.9 0 0 0-.65-.31 2 2 0 0 0-.732-.047'/%3E%3C/svg%3E")no-repeat center center / contain; } 
.btn_link { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' fill='none' viewBox='0 0 40 40'%3E%3Cpath fill='%23fff' d='M18.24 16.734a5.16 5.16 0 0 1 3.519 1.509.89.89 0 0 1 0 1.254.887.887 0 0 1-1.254 0l-.247-.223a3.385 3.385 0 0 0-4.54.224l-3.022 3.023-.145.153-.003.004a3.385 3.385 0 0 0 .223 4.708 3.385 3.385 0 0 0 4.713-.084l2.257-2.257.091-.081.142-.09a.887.887 0 0 1 1.03 1.418l-2.262 2.261-.193.184a5.156 5.156 0 0 1-7.19-.275 5.16 5.16 0 0 1 .086-7.2l3.02-3.02.186-.177.188-.162a5.16 5.16 0 0 1 3.402-1.17m6.795-6.795a5.16 5.16 0 0 1 3.519 1.509 5.16 5.16 0 0 1 0 7.293l-3.02 3.021-.191.18a5.157 5.157 0 0 1-7.105-.18.89.89 0 0 1 .001-1.255.89.89 0 0 1 .967-.192q.163.068.288.193a3.384 3.384 0 0 0 4.784 0l3.025-3.025.144-.153.005-.006a3.384 3.384 0 0 0-4.696-4.84l-.242.22-2.266 2.264-.087.077a.887.887 0 0 1-1.167-1.33l2.261-2.264.19-.18.188-.162a5.16 5.16 0 0 1 3.402-1.17'/%3E%3C/svg%3E")no-repeat center center / contain; } 
.share_btn_wr .share_bx { display: none; position: absolute; top: 48px; z-index: 30; } 
.share_btn_wr .share_bx button { width: 40px; height: 40px; margin-top: 8px; display: block; background: var(--sub-color); border-radius: 100px; } 
.share_btn_wr .share_bx .icn-facebook { background: var(--sub-color) url(../img/layout/icn-facebook.svg) no-repeat center center / 20px; } 
.share_btn_wr .share_bx .icn-x { background: var(--sub-color) url(../img/layout/icn-x.svg) no-repeat center center / 20px; } 
.share_btn_wr .share_bx .icn-kakao { background: var(--sub-color) url(../img/layout/icn-kakao.svg) no-repeat center center / 20px; } 
.share_btn_wr .share_bx .btn-close { background: #1d1d1d url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='none' viewBox='0 0 32 32'%3E%3Cpath stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M24 8 8 24M8 8l16 16'/%3E%3C/svg%3E")no-repeat center center / 20px; } 

.share_link { display: block; } 
.share_link_wr ul { display: flex; align-items: center; gap: 11px; } 
.btn_share_open,
.share_link_wr a { border: 1px solid #d8d8d8; border-radius: 50%; height: 42px; width: 42px; display: flex; align-items: center; justify-content: center; background-color: #fff; } 
.btn_share_open { display: none; } 
.btn_share_open img,
.share_link_wr a img { width: 17px; height: 17px; } 
.contentsarea { margin: 0 auto; } 
/* overflow-x 만 clip - 위로 펼친 드롭다운이 세로로 잘리지 않게 */
.contentsarea.d_area { padding-bottom: 6rem; overflow-x: hidden; overflow-x: clip; overflow-y: visible; }
.status_table_area { width: 100%; max-width: 1400px; margin: 0 auto; padding: 0 20px 90px; } 
.contentsarea .subtit { display: flex; justify-content: center; margin-bottom: 4rem; margin-top: 6rem; } 
.contentsarea .subtit h3 { font-size: clamp(2.2rem, 4vw, 3.8rem); font-weight: 700; line-height: 1; color: #1d1d1d; } 

@media only screen and (max-width: 1160px){
 .lnb { background: unset; backdrop-filter: unset; margin-top: -50px; } 
 .lnb .inner-padding { padding: unset; } 
 .lnb_area { flex-wrap: wrap; border-bottom: 1px solid var(--bd-color); } 
 .lnb_area > li.home { width: 100%; } 
 .share_btn_wr { position: absolute; top: 0; right: 20px; } 
 .lnb_area > li.home a { width: 50px; height: 50px; border-radius: 0 16px 0 0; } 
 .lnb_area > li.home a > i { width: 17px; height: 17px; } 
 .lnb_area li.dropdown { height: 50px; line-height: 50px; flex: 1 1 50%; } 
 .lnb_area li.dropdown > button { background: var(--sub-color); color: #fff; } 
 .lnb_area li.dropdown:last-child button { background: #fff; color: var(--sub-color); } 
 .lnb_area li.dropdown:last-child > button .arrow { background: url(../img/layout/icn-arr.svg)no-repeat center center / contain; } 
 .share_btn_wr { top: 5px; right: 5px; } 
 .share_btn_wr .btn_share, .share_btn_wr .btn_link { width: 30px; height: 30px; } 
 }
 @media only screen and (max-width: 767px){
 .contentsarea .subtit { margin-bottom: 3rem; margin-top: 4rem; } 
 .lnb { margin-top: -40px; } 
 .lnb_area > li.home a { width: 40px; height: 40px; } 
 .lnb_area > li.home a > i { width: 15px; height: 15px; } 
 .lnb_area li.dropdown { height: 40px; line-height: 40px; } 
 }
 @media only screen and (max-width: 479px){
 .lnb_area li.dropdown:not(:last-child) { display: none; } 
 }
/*탭*/
.tabmenu { z-index: 10; position: relative; margin-bottom: 32px; } 
.tabmenu > button { display: none; } 
.tabmenu .dropdown-menu { display: flex; display: -webkit-flex; gap: 6px; position: relative; } 
.tabmenu .dropdown-menu::after { content: ""; width: 100%; height: 1px; background: #05141f; position: absolute; bottom: 0; left: 0; } 
.tabmenu .dropdown-menu li { width: 100%; background-color: #fff; border-radius: 16px 16px 0 0; border: 1px solid #ebebeb; } 

.tabmenu .dropdown-menu li button { padding: 0 10px; width: 100%; height: 46px; font-size: 17px; font-weight: 400; border-radius: 46px; word-break: keep-all; color: #05141f; border-radius: 16px 16px 0 0; } 
.tabmenu .dropdown-menu li button span { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; max-height: 60px; -webkit-line-clamp: 3; line-height: 20px; } 
.tabmenu .dropdown-menu li button[data-selected="selected"] { font-weight: bold; color: #fff; background-color: #1276c2; border-radius: 16px 16px 0 0; border-color: #1276c2; } 

/* 슬라이드 탭메뉴 */
.slide_tab_menu .menu { width: auto; flex: 1; padding-left: 6px; min-width: 130px; } 
.slide_tab_menu .menu:first-child { padding-left: 0; } 
.slide_tab_menu button { padding: 0 10px; width: 100%; height: 65px; font-size: clamp(1.6rem, 2vw, 1.9rem); font-weight: 700; word-break: keep-all; color: var(--main); background-color: #fff; border-radius: 100px; border: 1px solid var(--main); } 
.slide_tab_menu button.on { color: #fff; background-color: #1276c2; border-color: #1276c2; } 
@media only screen and (max-width: 767px){
 .slide_tab_menu .menu { min-width: unset; width: 100%; } 
 .slide_tab_menu button { height: 41px; padding: 0 20px; white-space: nowrap; } 
 }

/********** tab **********/
.tab-btn.tab-st1 { display: flex; border-radius: 12px; background: var(--light-gray); } 
.tab-btn.tab-st1 > li { flex: 1; } 
.tab-btn.tab-st1 > li > a { display: block; width: 100%; height: 100%; min-height: 75px; align-content: center; padding: 8px 20px; font-weight: 500; font-size: clamp(17px, 2vw, 22px); text-align: center; color: var(--txt-gray); } 
.tab-btn.tab-st1 > li.on > a { font-weight: 600; color: var(--main); border: 2px solid var(--main); border-radius: 12px; background: #fff; box-shadow: 0 4px 10px 0 rgba(13, 149, 226, 0.20); } 

@media only screen and (max-width: 1023px){
 .tab-btn.tab-st1 > li > a { min-height: 58px; } 
 .tab-btn.tab-st1 { flex-wrap: wrap; } 
 .tab-btn.tab-st1 > li { flex: 1 1 25%; } 
 .tab-btn.tab-st1 > li:first-child:nth-last-child(6),.tab-btn.tab-st1 > li:first-child:nth-last-child(6) ~ li { flex: 1 1 33%; } 
 }
 @media only screen and (max-width: 767px){
 .tab-btn.tab-st1 > li { flex: 1 1 50%; } 
 .tab-btn.tab-st1 > li > a { min-height: 50px; font-size: 16px; } 
 } 
.tab-btn.tab-st2 > li > a { position: relative; display: block; padding: 2rem 0; font-weight: 600; font-size: clamp(18px,1.4vw,2rem); color: #aaa; border-bottom: 1px solid var(--gray-e5); } 
.tab-btn.tab-st2 > li.on > a { font-weight: 700; color: #000; border-bottom: 1px solid #000; } 
.tab-btn.tab-st2 > li.on > a::after { content:""; position: absolute; top: 50%; right: 0; transform: translateY(-50%); display: inline-flex; width: 30px; height: 30px; background: #000 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23fff' class='bi bi-arrow-right' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8'/%3E%3C/svg%3E") no-repeat center center / auto; border-radius: 2px; } 

/* 드롭다운형태 */
.tab-btn.tab-st3 { position: relative; } 
.tab-btn.tab-st3 .btn { display: block; padding: 15px 10px; font-weight: 500; font-size: 17px; border-top: 1px solid #000; border-bottom: 1px solid var(--gray-e5); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-chevron-down' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708'/%3E%3C/svg%3E") no-repeat right 10px center / auto 12px; } 
.tab-btn.tab-st3 .list { display: none; position: absolute; top: 47px; left: 0; z-index: 1; width: 100%; background-color: #fff; border: 1px solid #000; } 
.tab-btn.tab-st3.open .list { display: block; } 
.tab-btn.tab-st3 .list li a { display: block; padding: 12px; } 
.tab-btn.tab-st3 .list li a:hover { background-color: var(--gray-f6); } 
.tab-btn.tab-st3 .list li.on a { background-color: var(--gray-f6); } 

/* 동그란 버튼같이 생긴 탭 */
.tab-btn.tab-st4 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } 
.tab-btn.tab-st4 > li > a { display: block; padding: 1rem 2rem; font-weight: 500; font-size: 1.8rem; background-color: #fff; border: 1px dashed #999; border-radius: 100px; } 
.tab-btn.tab-st4 > li.on > a { color: #fff; background-color: var(--main); border: 1px solid var(--main); } 

.tab-btn.tab-st5 { position: relative; display: flex; flex-wrap: wrap; background: #fff; } 
.tab-btn.tab-st5::after { content: ""; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 100vw; height: 1px; background: var(--bd-color); z-index: -1; } 
.tab-btn.tab-st5 > li { flex: 1; } 
.tab-btn.tab-st5 > li > a { display: block; width: 100%; min-height: 78px; line-height: 110%; align-content: center; padding: 0 20px; font-weight: 500; font-size: clamp(1.8rem, 3vw, 20px); text-align: center; border-bottom: 1px solid var(--bd-color); } 
.tab-btn.tab-st5 > li.on > a { font-weight: 600; color: var(--main); border-bottom: 2px solid var(--main); } 

.tab-conts .tab-cont { display: none; } 
.tab-conts .tab-cont.on { display: block; } 

@media only screen and (max-width: 1200px){
 .tab-btn.tab-st5 > li > a { padding: 0 12px; font-size: 1.7rem; white-space: nowrap; } 
 }
@media only screen and (max-width: 1023px){
 .tab-btn.tab-st5 { margin: 0 -20px; } 
 }
@media only screen and (max-width: 767px){
 .tab-btn.tab-st4 > li > a { padding: 0.8rem 1.2rem; font-size: 16px; } 

.tab-btn.tab-st5 { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -ms-overflow-style: none; } 
.tab-btn.tab-st5::-webkit-scrollbar { display: none; } 
.tab-btn.tab-st5 > li > a { width: auto; height: 56px; line-height: 56px; padding: 0 24px; white-space: nowrap; } 
 }

 .esn { font-size: 14px; color: #e01d1d; } 
 .form-wrap-st1 { } 
 .form-wrap-st1 .form-group { display: flex; flex-direction: column; gap: 10px; } 
 .form-wrap-st1 .form-group:first-child { padding-top: 0; } 
 .form-wrap-st1 .form-group .label { flex-shrink: 0; width: 15rem; line-height: 1.2; padding-right: 1rem; font-weight: 600; word-break: keep-all; } 
 .form-wrap-st1 .form-group .inp-box { flex-grow: 1; } 
 .form-wrap-st1 .form-group .inp-box input { width: 100%; border-radius: 5px; } 
 .form-wrap-st1 .form-group .inp-flex { flex-grow: 1; display: flex; align-items: center; gap: 5px; } 
 .form-wrap-st1 .form-group .inp-flex .timeout { position: absolute; top: 50%; right: 10px; transform: translateY(-50%); color: var(--primary900); } 
 .form-group + .form-group { margin-top: 20px; } 
.form-wrap .form-group .label { display: block; margin-bottom: 10px; font-weight: 500; } 
 
 
 @media only screen and (max-width: 767px){
 .form-wrap-st1 .form-group { flex-direction: column; align-items: flex-start; } 
 .form-wrap-st1 .form-group .label { width: 100%; padding-bottom: 1.2rem; } 
 .form-wrap-st1 .form-group .inp-box { width: 100%; } 
 .form-wrap-st1 .form-group .inp-flex { flex-direction: column; align-items: baseline; width: 100%; } 
 .form-wrap-st1 .form-group .inp-flex.inp-flex-nwrap { flex-direction: row; } 
 .form-wrap-st1 .form-group .inp-st1 { width: 100%; max-width: 100%; } 
 .form-wrap-st1 .form-group .btn-bace3 { width: 100%; max-width: 100%; } 
 }

/*멤버쉽*/
/*로그인*/
.membership_area .logidpw { margin: 0 auto; width: 500px; } 
.membership_area .logidpw .logo { margin-bottom: 30px; text-align: center; } 
.membership_area .logidpw .box { padding: 205px 65px 60px; box-shadow: 0 12px 12px -12px #ccc; border-radius: 15px; border: 1px solid #ddd; background: url("../img/icon_login.png") no-repeat center 50px; } 
.membership_area .logidpw .box h3 { margin-bottom: 20px; font-size: 26px; text-align: center; } 
.membership_area .logidpw .write_box { padding: 0 25px; } 
.membership_area .logidpw .write_box .inp_area li { margin-bottom: 15px; } 
.membership_area .logidpw .write_box .inp_area li .inpbox { width: 100%; height: 45px; } 
.membership_area .logidpw .write_box .inp_area li .inpbox input.txt { padding: 0 15px; } 
.membership_area .logidpw .write_box .inp_area li .inpbox input.txt:focus { outline: 1px solid #ff0000; } 
.membership_area .logidpw .write_box .button_box { margin-top: 25px; } 
.membership_area .logidpw .write_box .button_box button { width: 100%; height: 50px; font-size: 17px; border-radius: 8px; background-color: #2656f6; color: #fff; } 
.membership_area .logidpw .write_box .find_area { margin-top: 25px; display: flex; display: -webkit-flex; justify-content: center; align-items: center; } 
.membership_area .logidpw .write_box .find_area li { position: relative; padding-right: 15px; margin-right: 15px; } 
.membership_area .logidpw .write_box .find_area li::after { content: ""; position: absolute; right: 0; top: calc(50% - 6px); width: 1px; height: 12px; background-color: #ccc; } 
.membership_area .logidpw .write_box .find_area li:last-child { padding-right: 0; margin-right: 0; } 
.membership_area .logidpw .write_box .find_area li:last-child::after { display: none; } 
.membership_area .logidpw .write_box .find_area li a { color: #666; } 
/*아이디찾기 비밀번호찾기*/
.membership_area .logidpw .box.box_phone { background: url("../img/icon_find_phone.png") no-repeat center 53px; } 
.membership_area .logidpw .box.box_email { display: none; background: url("../img/icon_find_email.png") no-repeat center 63px; } 
.membership_area .logidpw .box.box_newpw { background: url("../img/icon_find_newpw.png") no-repeat center 53px; } 
.membership_area .logidpw .box.box_idcomplete { padding: 205px 45px 60px; background: url("../img/icon_find_idcomplete.png") no-repeat center 67px; } 
.membership_area .logidpw .box.box_idcomplete .write_box { padding: 0; } 
.membership_area .logidpw .box .text { margin-bottom: 25px; text-align: center; color: #666; } 
.membership_area .logidpw .box .id { margin-bottom: 35px; text-align: center; color: #666; } 
.membership_area .logidpw .box .tab_area { margin: 0 25px 25px; display: flex; display: -webkit-flex; } 
.membership_area .logidpw .box .tab_area li { width: 50%; text-align: center; border-bottom: 1px solid #eee; } 
.membership_area .logidpw .box .tab_area li.active { border-bottom: 3px solid #2656f6; } 
.membership_area .logidpw .box .tab_area li a { display: block; width: 100%; font-size: 15px; padding-bottom: 5px; } 
.membership_area .logidpw .box .tab_area li.active a { font-weight: 500; } 
/*회원가입*/
.membership_area .step_box { margin: 0 auto 80px; width: 650px; position: relative; display: flex; display: -webkit-flex; justify-content: space-between; } 
.membership_area .step_box::before { z-index: -1; content: ""; position: absolute; left: calc(50% - 290px); top: 15px; width: 580px; height: 1px; background-color: #ddd !important; } 
.membership_area .step_box li { padding: 50px 0 0; background: url("../img/icon_join_step.png") no-repeat center 0; } 
.membership_area .step_box li.active { background: url("../img/icon_join_step_active.png") no-repeat center 0; } 
.membership_area .step_box li p { font-weight: 500; color: #ddd; } 
.membership_area .step_box li.active p { color: #2656f6; } 
/*회원가입 회원유형선택*/
.membership_area .join_type { display: flex; display: -webkit-flex; justify-content: center; } 
.membership_area .join_type li { position: relative; margin-right: 40px; width: 300px; text-align: center; border-radius: 10px; box-shadow: 0 12px 12px -12px #ccc; } 
.membership_area .join_type li:last-child { margin-right: 0; } 
.membership_area .join_type li.type1 { border: 3px solid #18a561; background: url("../img/img_join_type1.png") no-repeat center 38px; } 
.membership_area .join_type li.type2 { border: 3px solid #2656f6; background: url("../img/img_join_type2.png") no-repeat center 37px; } 
.membership_area .join_type li.type3 { border: 3px solid #00bdbb; background: url("../img/img_join_type3.png") no-repeat center 38px; } 
.membership_area .join_type li a { display: block; padding: 183px 0 35px; } 
.membership_area .join_type li .tit { font-size: 20px; font-weight: 500; } 
.membership_area .join_type li.type1 .tit { color: #18a561; } 
.membership_area .join_type li.type2 .tit { color: #2656f6; } 
.membership_area .join_type li.type3 .tit { color: #00bdbb; } 
.membership_area .join_type li .hover { position: absolute; top: 0; left: 0; width: 100%; height: 100%; color: #fff; opacity: 0; transition: all 0.3s; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -o-transition: all 0.3s; } 
.membership_area .join_type li.type1 .hover { background: rgba(24, 165, 97, 0.9); } 
.membership_area .join_type li.type2 .hover { background: rgba(0, 124, 197, 0.9); } 
.membership_area .join_type li.type3 .hover { background: rgba(0, 189, 187, 0.9); } 
.membership_area .join_type li .hover span { font-size: 28px; font-weight: 500; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } 
.membership_area .join_type li:hover .hover { opacity: 1; } 
/*회원가입 이용약관*/
.agree_area .agree_box { overflow-y: auto; margin-bottom: 15px; padding: 30px; max-height: 250px; border-radius: 10px; border: 1px solid #ddd; } 
.agree_area .agree_box h4 { font-size: 18px; } 
.agree_area h4 { margin-bottom: 20px; color: #222; font-size: 20px; } 
.agree_area h5 { margin-bottom: 10px; font-size: 16px; } 
.membership_area .agree_area { margin-bottom: 50px; } 
.agree_area .agree_box::-webkit-scrollbar { width: 10px; } 
.agree_area .agree_box::-webkit-scrollbar-thumb { width: 6px; height: 160px; background-color: #818185; border-radius: 10px; background-clip: padding-box; border: 2px solid transparent; } 
.agree_area .agree_box::-webkit-scrollbar-track { background-color: transparent; border-radius: 10px; } 
.membership_area .check_box { justify-content: right; } 
.membership_area .check_box input[type="checkbox"] + label { color: #666; font-size: 16px; } 
.membership_area .check_box.all { margin: -10px 0 35px; padding-top: 0; justify-content: center; border-top: 0; } 
/*회원가입 본인인증*/
.membership_area .certification_box { margin: 0 auto; padding: 205px 65px 60px; width: 500px; box-shadow: 0 12px 12px -12px #ccc; border-radius: 15px; border: 1px solid #ddd; background: url("../img/icon_join_certification.png") no-repeat center 54px; } 
.membership_area .certification_box .text { text-align: center; color: #666; } 
.membership_area .certification_box .button_box { margin: 35px 15px 0; } 
.membership_area .certification_box .button_box button { width: 100%; height: 55px; font-size: 17px; border-radius: 8px; background-color: #2656f6; color: #fff; } 
/*회원가입 가입완료*/
.membership_area .finish_box { margin: 0 auto; padding: 205px 45px 60px; width: 500px; box-shadow: 0 12px 12px -12px #ccc; border-radius: 15px; border: 1px solid #ddd; background: url("../img/icon_join_finish.png") no-repeat center 56px; } 
.membership_area .finish_box .text { text-align: center; color: #666; } 
.membership_area .finish_box .button_box { margin: 35px 15px 0; } 
.membership_area .finish_box .button_box button { width: 100%; height: 55px; font-size: 17px; border-radius: 8px; background-color: #2656f6; color: #fff; } 

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; } 

/*이용약관*/
.rule-index { border-top: 2px solid #222; border-bottom: 1px solid #e5e5e5; } 
.rule-index:after { content: ""; display: block; clear: both; } 
.rule-index ul { float: left; width: 50%; padding: 25px 20px; } 
.rule-index ul + ul { border-left: 1px solid #e5e5e5; padding-left: 30px; } 
.rule-index ul li { font-weight: 400; margin-top: 10px; } 
.rule-index ul li:first-child { margin-top: 0; } 
.rule-index ul li a { color: #666; font-size: 16px; } 
.rule-index ul li a:focus,
.rule-index ul li a:hover,
.rule-index ul li a:focus span,
.rule-index ul li a:hover span { color: #0387dc; } 
article.rule h4 { font-size: 26px; margin-top: 50px; } 
article.rule h5 { font-size: 20px; margin: 40px 0 10px; } 
article.rule p { font-size: 16px; color: #666; line-height: 32px; } 
article.rule li { line-height: 32px; color: #666; word-break: keep-all; } 
article.rule ol > li { padding-left: 20px; text-indent: -20px; } 
article.rule ol > li > ol > li { padding-left: 0px; text-indent: 0; } 

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

 .btn3 { min-width: 64px; height: 46px; line-height: 46px; } 

 .btn4 { border-radius: 5px; } 
 .btn6 { min-width: 50px; height: 30px; line-height: 28px; font-size: 12px; border-radius: 5px; } 
 .btn7 { font-size: 13px; border-radius: 5px; } 

 .w_flex_only { display: none !important; display: -webkit-none; } 
 .m_flex_only { display: flex !important; display: -webkit-flex; } 
 .w_hidden { display: block !important; } 
 .m_hidden { display: none !important; } 

 .board_title { margin-bottom: 10px; } 
 .board_title h3 { font-size: 15px; } 
 .board_title p.right { width: calc(100% - 90px); font-size: 12px; line-height: 18px; } 
 .board_title.line { padding-bottom: 10px; } 
 .board_title .btn_more { margin-bottom: -5px; height: 30px; font-size: 12px; } 
 .board_title .btn_more .icon { width: 9px; height: 9px; } 
 .board_title2 { margin-bottom: 10px; } 
 .board_title2 h4 { font-size: 15px; } 
 .board_title2 p { font-size: 12px; line-height: 18px; margin-top: 7px; } 
 .boardview + .board_title2 { margin-top: 30px; } 

 .num_list > li { padding-left: 17px; } 
 .num_list > li::before { top: 3px; width: 12px; height: 12px; font-size: 7px; line-height: 10px; } 
 .num_list2 { padding-left: 15px; } 
 .num_list3 { counter-reset: num; } 
 .num_list3 > li { padding-left: 17px; } 
 .num_list3 > li::before { width: 14px; font-size: 12px; } 
 p.dot { padding-left: 8px; line-height: 22px; } 
 p.dot::after { top: 8px; width: 2px; height: 2px; } 

 /*탭*/
 .tabmenu { margin-bottom: 20px; } 
 .tabmenu button { text-align: left; font-size: 14px; } 
 .tabmenu > button { position: relative; padding: 0 20px 0 10px; display: block; width: 100%; height: 40px; color: #fff; font-size: 14px; background-color: #393e46; } 
 .tabmenu > button::after { content: ""; position: absolute; right: 10px; top: calc(50% - 2px); width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid #fff; } 
 .tabmenu > button .dropdown-label { overflow: hidden; display: block; text-overflow: ellipsis; white-space: nowrap; } 
 .tabmenu.open > button::after { transform: rotate(180deg); } 
 .tabmenu .dropdown-menu { position: absolute; left: 0; top: 39px; display: none; display: -webkit-none; width: 100%; border-radius: 8px; border: 1px solid #ccc; background-color: #fff; } 
 .tabmenu.open .dropdown-menu { display: block; display: -webkit-block; } 
 .tabmenu .dropdown-menu li { margin-right: 0; border-bottom: 1px solid #ccc; } 
 .tabmenu .dropdown-menu li:first-child { border-radius: 5px 5px 0 0; } 
 .tabmenu .dropdown-menu li:last-child { border-radius: 0 0 5px 5px; border-bottom: 0; } 
 .tabmenu .dropdown-menu li:first-child button { border-radius: 5px 5px 0 0; } 
 .tabmenu .dropdown-menu li:last-child button { border-radius: 0 0 5px 5px; } 
 .tabmenu .dropdown-menu li button { padding: 10px; font-size: 14px; height: auto !important; border-radius: 0; } 
 .tabmenu .dropdown-menu li button span { display: block; max-height: initial; -webkit-line-clamp: initial; line-height: 18px; } 
 .tabmenu .dropdown-menu li button[data-selected="selected"] { background-color: #2656f6; } 

 /*멤버쉽*/
 /*로그인*/
 .membership_area .logidpw { margin: 0 auto; } 
 .membership_area .logidpw .logo { margin-bottom: 20px; } 
 .membership_area .logidpw .logo img { width: 83px; height: auto; } 
 .membership_area .logidpw .box { padding: 145px 30px 35px; box-shadow: 0 8px 8px -8px #ccc; border-radius: 10px; background: url("../img/icon_login.png") no-repeat center 40px / 93px auto; } 
 .membership_area .logidpw .box h3 { font-size: 20px; } 
 .membership_area .logidpw .write_box { padding: 0; } 
 .membership_area .logidpw .write_box .inp_area li { margin-bottom: 10px; } 
 .membership_area .logidpw .write_box .inp_area li .inpbox { height: 35px; } 
 .membership_area .logidpw .write_box .inp_area li .inpbox input.txt { padding: 0 10px; } 
 .membership_area .logidpw .write_box .button_box { margin-top: 20px; } 
 .membership_area .logidpw .write_box .button_box button { height: 45px; font-size: 15px; border-radius: 5px; } 
 .membership_area .logidpw .write_box .find_area { margin-top: 20px; } 
 .membership_area .logidpw .write_box .find_area li { padding-right: 12px; margin-right: 12px; } 
 .membership_area .logidpw .write_box .find_area li a { font-size: 13px; } 
 /*아이디찾기 비밀번호찾기*/
 .membership_area .logidpw .box.box_phone { padding-top: 152px; background: url("../img/icon_find_phone.png") no-repeat center 40px / 69px auto; } 
 .membership_area .logidpw .box.box_email { padding-top: 152px; background: url("../img/icon_find_email.png") no-repeat center 48px / 93px auto; } 
 .membership_area .logidpw .box.box_newpw { padding-top: 152px; background: url("../img/icon_find_newpw.png") no-repeat center 43px / 103px auto; } 
 .membership_area .logidpw .box.box_idcomplete { padding: 152px 30px 35px; background: url("../img/icon_find_idcomplete.png") no-repeat center 45px / 70px auto; } 
 .membership_area .logidpw .box .text { margin-bottom: 20px; } 
 .membership_area .logidpw .box .id { margin-bottom: 30px; } 
 .membership_area .logidpw .box .tab_area { margin: 0 0 20px; } 
 .membership_area .logidpw .box .tab_area li a { font-size: 12px; } 
 /*회원가입*/
 .membership_area .step_box { margin: 0 auto 30px; } 
 .membership_area .step_box::before { left: 30px; top: 8px; width: calc(100% - 60px); } 
 .membership_area .step_box li { padding: 23px 0 0; background-size: 16px auto; } 
 .membership_area .step_box li.active { background-size: 16px auto; } 
 /*회원가입 회원유형선택*/
 .membership_area .join_type li { margin-right: 20px; width: calc(33.33333333% - 13.33333333333333px); box-shadow: 0 8px 8px -8px #ccc; } 
 .membership_area .join_type li.type1 { border: 2px solid #18a561; background: url("../img/img_join_type1.png") no-repeat center 28px / 84px auto; } 
 .membership_area .join_type li.type2 { border: 2px solid #2656f6; background: url("../img/img_join_type2.png") no-repeat center 28px / 84px auto; } 
 .membership_area .join_type li.type3 { border: 2px solid #00bdbb; background: url("../img/img_join_type3.png") no-repeat center 33px / 81px auto; } 
 .membership_area .join_type li a { padding: 120px 0 25px; } 
 .membership_area .join_type li .tit { font-size: 18px; } 
 .membership_area .join_type li .hover { display: none; } 
 /*회원가입 이용약관*/
 .agree_area .agree_box { margin-bottom: 10px; padding: 15px; max-height: 250px; } 
 .agree_area .agree_box h4 { font-size: 14px; } 
 .agree_area h4 { margin-bottom: 10px; font-size: 15px; } 
 .agree_area h5 { margin-bottom: 5px; font-size: 13px; } 
 .membership_area .agree_area { margin-bottom: 25px; } 
 .membership_area .agree_area > p { font-size: 10px; line-height: 15px; } 
 .membership_area .check_box.all { margin: -10px 0 25px; padding-top: 10px; } 
 .membership_area .check_box input[type="checkbox"] + label { font-size: 13px; } 
 /*회원가입 본인인증*/
 .membership_area .certification_box { padding: 152px 30px 35px; box-shadow: 0 8px 8px -8px #ccc; border-radius: 10px; background: url("../img/icon_join_certification.png") no-repeat center 40px / 90px auto; } 
 .membership_area .certification_box .button_box { margin: 25px 0 0; } 
 .membership_area .certification_box .button_box button { height: 45px; font-size: 15px; border-radius: 5px; } 
 /*회원가입 가입완료*/
 .membership_area .finish_box { padding: 152px 30px 35px; box-shadow: 0 8px 8px -8px #ccc; border-radius: 10px; background: url("../img/icon_join_finish.png") no-repeat center 45px / 60px auto; } 
 .membership_area .finish_box .button_box { margin: 25px 0 0; } 
 .membership_area .finish_box .button_box button { height: 45px; font-size: 15px; border-radius: 5px; } 


 /*이용약관*/
 .rule-index { padding: 20px; border-top: 2px solid #222; border-bottom: 1px solid #e5e5e5; height: 180px; overflow-y: scroll; } 
 .rule-index ul { float: none; width: 100%; padding: 0; } 
 .rule-index ul + ul { border-left: 0; padding-left: 0; margin-top: 8px; } 
 .rule-index ul li { font-weight: 400; margin-top: 8px; } 
 .rule-index ul li a { font-size: 13px; } 
 article.rule h4 { font-size: 20px; margin-top: 40px; } 
 article.rule h5 { font-size: 14px; margin: 30px 0 10px; } 
 article.rule p { font-size: 12px; line-height: 22px; } 
 article.rule li { line-height: 22px; } 
 article.rule ol > li { padding-left: 15px; text-indent: -15px; } 
 }

@media screen and (max-width: 767px){
 .bg_blue.icon_link { gap: 1.5625vw; } 
 .bg_blue.icon_link::after { width: 3.125vw; height: 3.125vw; } 

 .contentsarea.d_area { padding-bottom: 4rem; } 

 .contentsarea .subtit .share_btn_wr .share_bx button,
 .contentsarea .subtit .share_btn_wr .btn_share { width: 10.4167vw; height: 10.4167vw; } 
 .contentsarea .subtit .share_btn_wr .btn_share img { width: 4.1667vw; height: 4.1667vw; } 
 .contentsarea .subtit .share_btn_wr .share_bx { top: 13vw; } 
 .btn_reply { height: 20.8333vw; border-radius: 1.3889vw; font-size: 4.4444vw; gap: 3.4722vw; } 
 .btn_reply::before { width: 4.1667vw; height: 3.8889vw; } 
 }
@media screen and (max-width: 640px) { /*멤버쉽*/
 /*로그인*/
 .membership_area .logidpw { width: 100%; } 
 /*회원가입*/
 /*회원가입 회원유형선택*/
 .membership_area .join_type { display: block; } 
 .membership_area .join_type li { margin-right: 0; margin-bottom: 15px; width: 100%; } 
 .membership_area .join_type li:last-child { margin-bottom: 0; } 
 /*회원가입 본인인증*/
 .membership_area .certification_box { width: 100%; } 
 /*회원가입 가입완료*/
 .membership_area .finish_box { width: 100%; } 
 }

 /********* no-content *********/
.no-cont { width: fit-content; margin: 0 auto; margin-top: 5rem; } 
.no-cont img { max-width: 600px; width: 100%; } 
.no-cont p { text-align: center; font-size: clamp(2rem, 3vw, 2.5rem); font-weight: 600; } 
.no-cont p em { font-weight: 400; } 

/* 카테고리 */
/* 동그란 테두리 안에 카테고리 */
.cate-st1 { flex-shrink: 0; display: inline-block; padding: .5rem 1.2rem; font-weight: 500; font-size: 15px; text-align: center; border-radius: 8px; } 
.cate-st1.cate1 { color: var(--main); background: var(--bg-light); } 
.cate-st1.cate2 { color: var(--main-dark); background-color:var(--bg-light); } 
.cate-st1.cate3 { color: #fff; background-color: var(--gray-66); font-family: 'Noto Sans KR', 'Noto Sans SC', sans-serif; } 

/* 캘린더 안에 들어가는 마커 */
.cate-st2 { font-size: 15px; color: var(--txt-gray); } 
.cate-st2::before { content:""; display: inline-block; width: 10px; height: 10px; border-radius: 10px; margin-right: 8px; } 
.cate-st2.cate1::before { background: var(--cate1); } 
.cate-st2.cate2::before { background: var(--cate2); } 
.cate-st2.cate3::before { background: var(--cate3); } 
.cate-st2.cate4::before { background: var(--cate4); } 
.cate-st2.cate5::before { background: var(--cate5); } 
.cate-st2.cate6::before { background: var(--cate6); } 

/* 옆에 마커가 있는 카테고리 */
.cate-st3 { display: inline-block; width: fit-content; height: 30px; line-height: 30px; padding: 0 14px; font-weight: 500; font-size: 15px; color: #fff; border-radius: 50px; margin-left: 10px; } 
.cate-st3.cate1 { background-color: #008638; } 
.cate-st3.cate2 { background-color: var(--main); } 
.cate-st3.cate3 { background-color: #757575; } 

/* 알약형태 카테고리 */
.cate-st4 { flex-shrink: 0; display: inline-block; padding: .8rem 1.6rem; text-align: center; border-radius: 100px; color: #fff; } 
.cate-st4.cate1 { background: #008638; } 
.cate-st4.cate2 { background-color:var(--main); } 
.cate-st4.cate3 { background-color:var(--gray-75); } 
@media only screen and (max-width: 767px){
 .cate-st4 { font-size: 15px; padding: 5px 10px; } 
 }

/* FAQ 게시판 */
.bbs-faq .faq-item { border: 1.5px solid var(--bd-color); border-radius: 20px; overflow: hidden; transition: background .3s; } 
.bbs-faq .faq-item.on { border: 1.5px solid var(--main); } 
.bbs-faq .faq-item .tit { position: relative; display: flex; align-items: center; gap: 1.5rem; line-height: 1.4; padding: 30px 65px 30px 75px; font-weight: 600; font-size: clamp(1.8rem, 2vw, 2.2rem); } 
.bbs-faq .faq-item .tit::before { content: "Q"; position: absolute; top: 50%; left: 25px; display: flex; justify-content: center; align-items: center; font-weight: 700; transform: translateY(-50%); width: 30px; height: 30px; color: var(--main); } 
.bbs-faq .faq-item .tit::after { content:""; position: absolute; top: 50%; right: 35px; transform: translateY(-50%); display: block; width: 12px; height: 12px; background: url("data:image/svg+xml,%3Csvg width='17' height='10' viewBox='0 0 17 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.10048 1.09972L8.17969 8.17893L15.2589 1.09972' stroke='%231D1D1D' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A") no-repeat center center / contain; } 
.bbs-faq .faq-item.on .tit::after { background-image: url("data:image/svg+xml,%3Csvg width='17' height='10' viewBox='0 0 17 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.10048 8.17958L8.17969 1.10037L15.2589 8.17958' stroke='%23818892' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A"); } 
.bbs-faq .faq-item .cont { display: none; } 
.bbs-faq .faq-item .cont .editor-text { position: relative; padding: 0 20px 20px 70px; } 
.bbs-faq .faq-item .cont .editor-text::before { content: "A"; position: absolute; top: 0; left: 30px; width: 30px; height: 30px; font-weight: 600; font-size: clamp(1.8rem, 2vw, 2.2rem); color: var(--txt-gray); } 
.bbs-faq .faq-item + .faq-item { margin-top: 10px; } 
.bbs-faq .faq-item.nodata { border-radius: 0; border: 1px solid var(--bd-color); border-left: none; border-right: none; } 

@media only screen and (max-width: 1023px){
 .bbs-faq .faq-item .tit { gap: 2rem; padding: 20px 55px 20px 50px; } 
.bbs-faq .faq-item .tit::before { left: 15px; } 
 .bbs-faq .faq-item .tit strong { font-size: 16px; } 
.bbs-faq .faq-item .cont { margin: 10px; } 
.bbs-faq .faq-item .cont .editor-text { padding: 0 20px 20px 40px; font-size: 16px; } 
.bbs-faq .faq-item .cont .editor-text::before { top: 22px; left: 15px; font-size: 14px; } 
 }
@media only screen and (max-width: 767px){
 .bbs-faq .faq-item .tit::after { right: 20px; } 
 }



/********** list **********/
/* 검정마커 */
.list-st1 > li { position: relative; line-height: 1.5; padding-left: 15px; } 
.list-st1 > li::before { content:""; position: absolute; top: 10px; left: 3px; width: 4px; height: 4px; background: var(--gray-33); border-radius: 100%; } 
/* 대쉬 */
.list-st2 > li { position: relative; line-height: 1.3; padding-left: 12px; color: var(--txt-gray); } 
.list-st2 > li::before { content:""; position: absolute; top: 8px; left: 0; width: 5px; height: 2px; background: var(--txt-gray); } 
.list-st2 > li + li { margin-top: 5px; } 
@media only screen and (max-width: 767px){
 .list-st2 > li::before { height: 1px; } 
 }
/* 메인 네모 마커 */
.list-st3 > li { position: relative; line-height: 1.4; padding-left: 14px; word-break: keep-all; } 
.list-st3 > li::before { content:""; position: absolute; top: 9px; left: 0; width: 6px; height: 6px; background: var(--main-light); } 
.list-st3 > li + li { margin-top: 10px; } 


/* 메인 동그란 마커 */
.list-st4 > li { position: relative; line-height: 1.4; padding-left: 14px; word-break: keep-all; } 
.list-st4 > li::before { content:""; position: absolute; top: 50%; left: 0; width: 6px; height: 6px; background: var(--main-light); border-radius: 10px; transform: translateY(-50%); }
.list-st4 > li.multi::before { top: 12px; transform: none; }
.list-st4 > li + li { margin-top: 20px; }
.list-st4 > li > em { font-weight: 500; color: var(--txt-gray); }
@media only screen and (max-width: 767px){
 .list-st4 > li { padding-left: 12px; }
 .list-st4 > li::before { width: 4px; height: 4px; }
 .list-st4 > li.multi::before { top: 9px; }
 }

.list-st5 > li { position: relative; line-height: 1.4; padding-left: 18px; color: #555; word-break: keep-all; word-wrap: break-word; } 
.list-st5 > li + li { margin-top: 6px; } 
.list-st5 > li em { position: absolute; top: 0; left: 0; } 


.list-st6 > li em { position: relative; } 
.list-st6 > li em::after { content: ""; position: absolute; top: 50%; transform: translateY(-50%); right: 0; width: 1px; height: 10px; background: #d9d9d9; } 
@media only screen and (max-width: 767px){
 .list-st3 > li::before { content:""; position: absolute; top: 9px; left: 0; width: 4px; height: 4px; background: #818892; border-radius: 10px; } 
 }


/* 페이지네이션 공통 컴포넌트 */
.paging-st1 { position: static !important; } 
.paging-st1 .swiper-pagination-bullet { width: 12px; height: 12px; border: 1px solid var(--txt-gray); opacity: unset; background: #fff; } 
.paging-st1 .swiper-pagination-bullet-active { background: var(--main); border: 1px solid var(--main); }