input { padding: 0; outline: none; }
button { padding: 0; border: none; background: none; }
ul, li { margin: 0; padding: 0; list-style: none; }
body * { font-family: "Freesentation", sans-serif; }

.wrap { display: flex; justify-content: center; width: 100%; overflow: hidden; }
.main_container { padding: 40px 0 0; width: 100%; }
.content_container { display: flex; justify-content: center; width: 100%; padding: 0 20px;}
.content_inner { width: 100%; max-width: 1780px; padding: 50px 0 70px; }
.main_container .bg { position: fixed; top: 0; left: 0; width: 0; height: 0; background: rgba(0, 0, 0, .9); z-index: 0; backdrop-filter: blur(5px); }

.main_banner { height:230px; overflow: hidden; }
.main_banner .content_inner { display: flex; flex-direction: column; padding: 0 0 50px; }
.main_banner .box-txt { line-height: 1.6; text-align: center; }
.main_banner h1 { font-size: 46px; font-weight: 800; color: var(--color-new-orange); transform: translateY(0px); transition: transform .3s ease-in-out; }
.main_banner h2 { font-size: 24px; font-weight: 500; color: #101010; transition: color .3s ease-in-out; }
.main_banner h2 strong { font-size: 25px; font-weight: 800; }

#formMainSearch { display: flex; justify-content: center; align-items: center; padding: 30px 0; width: 100%; transform: translateY(0px); transition: transform .3s ease-in-out; }
#formMainSearch .box { display: flex; justify-content: center; align-items: center; width: 100%; max-width: 760px; height: 50px; border-radius: 8px; border: 4px solid var(--color-new-orange); background-color: #fff; }
#formMainSearch .box-input { width: 100%; }
#formMainSearch .box-input input { padding: 5px 10px; width: 100%; height: 100%; font-size: 21px; font-weight: 600; border: none; background: transparent; }
#formMainSearch .box-input input::placeholder { transition: opacity .5s linear; }
#formMainSearch .box-input input.fade1::placeholder { opacity: 0; }
#formMainSearch .box-button { flex: none; padding: 0 10px; width: 51px; }
#formMainSearch .box-button button { width: 100%; height: 100%; }
#formMainSearch .box-button button img { width: 100%; }
#inputMainSearch { caret-color: #208081; cursor: text; }
#inputMainSearch:focus { caret-color: #208081; outline: none; }
#inputMainSearch::placeholder { color: rgba(0, 0, 0, 0.4); opacity: 1; }


.main_banner .box-searchexample { margin-top: 100px; }
.main_banner .box-searchexample .box-title { text-align: center; }
.main_banner .box-searchexample .box-title h3 { font-size: 28px; color: #fff; font-weight: 900; }
.main_banner .box-searchexample .box-group { display: flex; flex-wrap: wrap; }
.main_banner .box-searchexample .box-group .box-list { position: relative; padding: 40px; width: 25%; }
.main_banner .box-searchexample .box-group .box-list:before { content: ""; position: absolute; top: 50%; left: 0; width: 1px; height: 90px; transform: translateY(-50%); background-color: #747474; }
.main_banner .box-searchexample .box-group .box-list:nth-child(1):before { display: none; }
.main_banner .box-searchexample .box-group .box-list:nth-child(5):before { display: none; }
.main_banner .box-searchexample .box-group .box-list strong { display: inline-flex; justify-content: center; align-items: center; padding: 0 14px; height: 38px; font-size: 23px; color: #fff; font-weight: 700; border-radius: 19px; background: var(--color-new-orange); }
.main_banner .box-searchexample .box-group .box-list ul { margin-top: 20px; }
.main_banner .box-searchexample .box-group .box-list ul li { position: relative; padding-left: 10px; font-size: 20px; font-weight: 400; color: #fff; line-height: 150%; }
.main_banner .box-searchexample .box-group .box-list ul li:before { content: ""; position: absolute; top: 50%; left: 0; width: 2px; height: 2px; background-color: #fff; border-radius: 2px; transform: translateY(-50%); }
.main_banner .box-searchexample .box-group .box-list ul li a { text-decoration: none; color: #fff; font-size: 20px; font-weight: 400; transition: color .2s ease-in-out; }
.main_banner .box-searchexample .box-group .box-list ul li a:hover { color: var(--color-new-orange); }
.main_banner .box-searchexample .swiper-pagination { display: none; position: relative; margin-top: 10px; }
.main_banner .box-searchexample .swiper-pagination .swiper-pagination-bullet-active { background: var(--color-new-orange); }


.main_banner .box-searchguide { margin-top: 20px; text-align: center; }
.main_banner .box-searchguide .box-title h3 { font-size: 32px; color: #FFF; font-weight: 900; }
.main_banner .box-searchguide .explain { margin-top: 15px; font-size: 20px; font-weight: 400; color: #FFF; }
.main_banner .box-searchguide .explain strong { font-weight: 800; }
.main_banner .box-searchguide .box-tags { margin-top: 12px; }
.main_banner .box-searchguide .box-tags ul { display: flex; justify-content: center; }
.main_banner .box-searchguide .box-tags ul li { display: flex; justify-content: center; align-items: center; padding: 0 14px; height: 28px; font-size: 15px; font-weight: 600; color: #FFF; border-radius: 14px; background-color: var(--color-new-orange); }
.main_banner .box-searchguide .box-tags ul li + li { margin-left: 8px; }

.main_banner .searchClose { display: none; position: fixed; top: 20px; right: 20px; opacity: 0; z-index: 999; transition: opacity .3s ease-in-out; }
.main_banner .searchClose button { display: flex; flex-direction: column; justify-content: center; align-items: center; font-size: 19px; color: #fff; }
.main_banner .searchClose button:before { content: ""; width: 42px; height: 40px; background-image: url('/industry/img/main/ico_close_1-3cf03cb43062bad097e20a3b68840741.svg'); background-position: center; background-repeat: no-repeat; }

.main_content_wrap { padding-bottom: 50px; }
.main_content_wrap .content_inner { display: flex; gap: 35px; padding: 0; }
.main_content_wrap:not(.main-home-layout) .content_inner { max-width: 1708px; }
.main_content_wrap .main_content { display: flex; flex-direction: column; gap: 15px; }
.main_content_wrap .main_content .top { flex: none; display: flex; justify-content: space-between; align-items: center; }
.main_content_wrap .main_content .top .box-title { display: flex; }
.main_content_wrap .main_content .top .box-title strong { display: flex; justify-content: center; align-items: center; padding: 0 14px; height: 38px; font-size: 16px; color: #fff; font-weight: 600; border-radius: 19px; background-color: var(--color-new-orange); }
.main_content_wrap .main_content .top .box-more a { display: flex; align-items: center; font-size: 17px; color: #1E2124; font-weight: 700; }
.main_content_wrap .main_content .top .box-more a:after { content: ""; margin-left: 5px; width: 20px; height: 20px; background-image: url('/industry/img/main/ico_more_1-a21b9ccf8c21c5dc8d664a3bc2f02b61.svg'); background-size: 100%; transform: translateX(0px); transition: transform .2s ease-in-out; }
.main_content_wrap .main_content .top .box-more a:hover:after { transform: translateX(3px); }
.main_content_wrap .main_content .middle { height: 100%; }
.box-button { display: flex; align-items: center; gap: 8px; }

.main_content_wrap .main_community { width: 45%; }
.main_content_wrap .main_community .box-list { padding: 7px 18px; height: 100%; background-color: #fff; border-radius: 20px; box-shadow: 0 4px 16.6px 1px rgba(0, 0, 0, 0.09); }
.main_content_wrap .main_community .box-list ul { display: flex; flex-direction: column; height: 100%; justify-content: space-between; }
.main_content_wrap .main_community .box-list ul li { position: relative; display: flex; height: 55px; transform: translateX(0px); transition: transform .2s ease-in-out; overflow: hidden; }
.main_content_wrap .main_community .box-list ul li:hover { transform: translateX(5px); }
.main_content_wrap .main_community .box-list ul li a { display: flex; align-items: center; width: 100%; min-width: 0; text-decoration: none; }
.main_content_wrap .main_community .box-list ul li + li:before { content: ""; position: absolute; top: 0; left: 50%; width: calc(100% - 20px); height: 1px; background: #DCDCDC; transform: translateX(-50%); }
.main_content_wrap .main_community .box-list ul li .col { padding: 5px 10px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.main_content_wrap .main_community .box-list ul li .col.date { flex: none; width: 105px; font-size: 17px; font-weight: 400; color: #9CA3AF; }
.main_content_wrap .main_community .box-list ul li .col.category { flex: none; width: 75px; font-size: 17px; font-weight: 700; color: #FF5D1A; }
.main_content_wrap .main_community .box-list ul li .col.title { min-width: 0; width: 100%; font-size: 19px; font-weight: 400; color: #3D3D3D; display: block; }
.main_community .box-list ul li.is_new .col.title::after { content: 'New'; color: var(--color-new-orange); font-size: 10px; font-weight: 800; transform: translateY(-1px); margin-left: 5px;}

.main_container.close1 .bg { animation-name: showSearchClose1; animation-duration: .3s; animation-timing-function: ease-in-out; animation-fill-mode: both; }
.main_container.close1 .main_banner { animation-name: showSearchClose3; animation-duration: .3s; animation-timing-function: ease-in-out; animation-fill-mode: both; }
.main_container.close1 .box-overflow { animation-name: showSearchClose2; animation-duration: .3s; animation-timing-function: ease-in-out; animation-fill-mode: both; }

.main_faq_wrap { position: relative; background-color: #F0F0F0; overflow: hidden; }
.main_faq_wrap:before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 16px; border-bottom-left-radius: 16px; border-bottom-right-radius: 16px; background-color: #fff; box-shadow: 0px 4px 41px 0px rgba(0, 0, 0, .16); }
.main_faq_wrap .box-title { display: flex; justify-content: space-between; align-items: flex-end; padding-right: 60px; }
.main_faq_wrap .box-title h3 { margin: 0; font-size: 38px; font-weight: 600; color: #FF5D1A; line-height: 1; }
.main_faq_wrap .box-title h3 strong { font-weight: 900; }
.main_faq_wrap .box-title p { margin: 0; font-size: 15px; font-weight: 500; color: #FF5D1A; line-height: 1; }
.main_faq_wrap .box-title .box-more a { display: flex; align-items: center; font-size: 17px; color: #1E2124; font-weight: 700; }
.main_faq_wrap .box-title .box-more a:after { content: ""; margin-left: 5px; width: 20px; height: 20px; background-image: url('/industry/img/main/ico_more_1-a21b9ccf8c21c5dc8d664a3bc2f02b61.svg'); background-size: 100%; transform: translateX(0px); transition: transform .2s ease-in-out; }
.main_faq_wrap .box-title .box-more a:hover:after { transform: translateX(3px); }
.main_faq_wrap .box-content { display: flex; gap: 30px; margin-top: 25px; }
.main_faq_wrap .box-content .box-left { flex: none; width: 300px; }
.main_faq_wrap .box-content .box-left .box-category ul { display: flex; flex-wrap: wrap; gap: 8px; }
.main_faq_wrap .box-content .box-left .box-category ul li { height: 38px; background-color: #fff; border-radius: 19px; }
.main_faq_wrap .box-content .box-left .box-category ul li.all { background-color: var(--color-new-orange); }
.main_faq_wrap .box-content .box-left .box-category ul li a { display: flex; justify-content: center; align-items: center; padding: 0 14px; width: 100%; height: 100%; font-size: 17px; font-weight: 500; color: #1B1B1B; }
.main_faq_wrap .box-content .box-left .box-category ul li.all a { color: #fff; }
.main_faq_wrap .box-content .box-left .box-caption { margin-top: 35px; }
.main_faq_wrap .box-content .box-left .box-caption p { font-size: 16px; font-weight: 500; color: #979797; }
.main_faq_wrap .box-content .box-right { width: 100%; overflow: hidden; }
.main_faq_wrap .box-content .box-right .box-swiper { width: 100%; position: relative; padding: 0 50px; }
.main_faq_wrap .box-content .box-right .box-list { padding: 0 5px 10px; width: 100%;  overflow: hidden; }
.main_faq_wrap .box-content .box-right .box-list ul { display: flex; width: 100%; }
.main_faq_wrap .box-content .box-right .box-list ul li { width: 327px; border-radius: 15px; background-color: #fff; box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, .09); }
.main_faq_wrap .box-content .box-right .box-list ul li a { display: block; padding: 15px 20px 20px; width: 100%; height: 100%; color: inherit; text-decoration: none; }
.main_faq_wrap .box-content .box-right .box-list .box-top { display: flex; justify-content: space-between; align-items: center; gap: 15px; }
.main_faq_wrap .box-content .box-right .box-list .box-top strong { flex: none; font-size: 23px; color: #DADADA; font-weight: 400; line-height: 1; }
.main_faq_wrap .box-content .box-right .box-list .box-top strong span { font-size: 29px; color: #FF5D1A; font-weight: 800; }
.main_faq_wrap .box-content .box-right .box-list .box-top .box-cate { padding: 4px 14px; width: auto; max-width: 180px; height: 28px; border-radius: 14px; font-size: 16px; font-weight: 500; background-color: #EBEBEB; text-align: center; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
.main_faq_wrap .box-content .box-right .box-list .box-middle { margin-top: 18px; }
.main_faq_wrap .box-content .box-right .box-list .box-middle .box-title { padding: 0 8px; height: 75px; overflow: hidden; align-items: flex-start}
.main_faq_wrap .box-content .box-right .box-list .box-middle .box-title strong { font-size: 19px; color: #FF5D1A; font-weight: 600; line-height: 140%; }
.main_faq_wrap .box-content .box-right .box-list .box-middle .box-title strong { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp: 2; overflow:hidden; }
.main_faq_wrap .box-content .box-right .box-list .box-middle .box-cntn  { margin-top: 12px; padding: 12px 8px 0; height: 80px; border-top: 1px solid #DCDCDC; overflow: hidden; }
.main_faq_wrap .box-content .box-right .box-list .box-middle .box-cntn p { font-size: 17px; color: #333333; line-height: 140%; }
.main_faq_wrap .box-content .box-right .box-list .box-middle .box-cntn p { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp: 3; overflow:hidden; }
.main_faq_wrap .box-content .box-right .box-list .box-bottom { margin-top: 20px; padding: 0 8px; }
.main_faq_wrap .box-content .box-right .box-list .box-bottom .box-date span { font-size: 12px; color: #9CA3AF; font-weight: 400; line-height: 1; }
.main_faq_wrap .box-content .box-right .box-list .swiper-button-next, .main_faq_wrap .box-content .box-right .box-list .swiper-button-prev { color: #D1D1D1; transition: color .1s ease-in-out; }
.main_faq_wrap .box-content .box-right .box-list .swiper-button-next:hover, .main_faq_wrap .box-content .box-right .box-list .swiper-button-prev:hover { color: #FFFFFF; }
.main_faq_wrap .box-content .box-right .box-list .swiper-button-next:after, .main_faq_wrap .box-content .box-right .box-list .swiper-button-prev:after { font-size: 30px; }

#helloUser * { font-family: 'Pretendard Variable'; }

/* ===== Maintenance Modal ===== */
.maint-modal { display: none; position: fixed; inset: 0; z-index: 9999; pointer-events: none; }
.maint-modal.is-open { display: block; }
.maint-dialog { pointer-events: auto; position: fixed; top: 5rem; right: 12rem; max-width: 40rem; background-color: #fff; border-radius: 12px; box-shadow: 0 10px 30px rgba(0, 0, 0, .25); overflow: hidden; display: inline-block; }
.maint-img img { display: block; max-width: 30rem; max-height: 55vh; width: 100%; height: auto; margin: 0 auto; }
.maint-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 16px; border-top: 1px solid #eee; font-size: 14px; }
.maint-close { padding: 10px 14px; border-radius: 10px; cursor: pointer; }
.maint-check { display: inline-flex; align-items: center; gap: 6px; line-height: 1; }
.maint-check input[type="checkbox"] { width: 16px; height: 16px; margin: 0; }

/* =====================================================
   메인 홈 레이아웃 (.main-page / .main-home-layout)
   ===================================================== */
.main-page .main_banner .content_inner { max-width: 1780px; }
.main-page .main_banner h1 { margin: 0; font-size: 46px; font-weight: 800; line-height: 42px; color: #FF5D1A; }
.main-page .main_banner h2 { margin: 12px 0 0; font-size: 24px; font-weight: 500; line-height: 42px; color: #101010; }
.main-page #formMainSearch { padding: 28px 0 0; }
.main-page #formMainSearch .box { max-width: 760px; height: 49px; border: 4px solid #FF5D1A; border-radius: 8px; }
.main-page #formMainSearch .box-input input { padding: 0 16px; font-size: 21px; font-weight: 600; color: #3E3A39; }

.main-home-layout { padding-bottom: 20px; }
.main-home-layout .content_inner { display: grid; grid-template-columns: minmax(260px, 315px) minmax(520px, 630px) minmax(520px, 730px); gap: 25px; align-items: stretch; max-width: 1780px; }
.main-home-layout .main_beta { width: 100%; }
.main-home-layout .main_blog_wrap { width: 100%; min-width: 0; overflow: visible; }
.main-home-layout .main_community { width: 100%; height: 100%; }
.main-home-layout .main_content { gap: 15px; }
.main-home-layout .main_content .top .box-title strong { height: 38px; padding: 0 14px; border-radius: 19px; background-color: #FF5D1A; font-size: 16px; font-weight: 600; }
.main-home-layout .main_content .top .box-more a { font-size: 17px; font-weight: 700; }
.main-home-layout .main_blog_wrap .middle,
.main-home-layout .main_beta .middle { display: block; height: auto; }
.main-home-layout .main-blog-list { display: block; min-width: 0; overflow: hidden; margin: -20px; padding: 20px; }
.main-home-layout .main-blog-list .swiper-wrapper { display: flex; gap: 0; }

/* 메인 블로그 카드 아이템 */
.main-home-layout .main-blog-item { height: 312px; border-radius: 20px; box-shadow: 0 4px 16.6px 1px rgba(0, 0, 0, 0.09); transform: translateY(0px); transition: transform .2s ease-in-out; overflow: hidden; flex-shrink: 0; margin-right: 0; min-width: 0; }
.main-home-layout .main-blog-item:hover { transform: translateY(-5px); }
.main-home-layout .main-blog-item a { display: flex; flex-direction: column; height: 100%; text-decoration: none; }
.main-home-layout .main-blog-item .box-image { flex: none; width: 100%; aspect-ratio: auto; height: 134px; overflow: hidden; }
.main-home-layout .main-blog-item .box-image img { width: 100%; height: 100%; object-fit: cover; }
.main-home-layout .main-blog-item .box-content { position: relative; height: 100%; overflow: hidden; padding: 20px 14px 18px; background-color: #fff; }
.main-home-layout .main-blog-item .box-content .category { display: inline-flex; justify-content: center; align-items: center; height: 28px; padding: 0 9px; border-radius: 14px; background-color: #F3F3F3; color: #FF5D1A; font-size: 13px; font-weight: 600; }
.main-home-layout .main-blog-item .box-content strong { display: block; margin-top: 10px; font-size: 21px; color: #333; font-weight: 600; line-height: 28px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }
.main-home-layout .main-blog-item .box-content p { display: block; margin-top: 7px; font-size: 14px; color: #4d4d4d; line-height: 21px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }
.main-home-layout .main-blog-item .box-content .date { position: absolute; left: 14px; bottom: 12px; font-size: 12px; color: #9CA3AF; font-weight: 400; }
.main-home-layout .main-blog-item .box-content:after { content: "+"; position: absolute; right: 14px; bottom: 8px; font-size: 24px; color: var(--color-new-orange); font-weight: 800; }

/* 베타 카드 */
.main-home-layout .beta-card { height: 312px; border-radius: 20px; box-shadow: 0 4px 16.6px 1px rgba(0, 0, 0, 0.09); display: flex; flex-direction: column; overflow: hidden; background-color: #fff; color: inherit; text-decoration: none; cursor: pointer; transition: transform .22s ease, box-shadow .22s ease; }
.main-home-layout .beta-card:hover,
.main-home-layout .beta-card:focus-visible { transform: translateY(-4px); box-shadow: 0 8px 20px 1px rgba(0, 0, 0, 0.13); text-decoration: none; }
.main-home-layout .beta-card-top { flex: 1; position: relative; min-height: 245px; overflow: hidden; padding: 38px 24px 24px; background: linear-gradient(146deg, #FF5D1A 15%, #D93A27, #B02E4F, #7A2160, #641B5A, #FF5D1A); background-size: 200% 200%; animation: betaGradientFlow 5s linear infinite; border-radius: 20px 20px 0 0; display: flex; flex-direction: column; justify-content: flex-start; }
.main-home-layout .beta-card-top h3,
.main-home-layout .beta-card-top p { position: relative; z-index: 1; }
.main-home-layout .beta-card-top h3 { margin: 0; max-width: 268px; font-size: clamp(24px, 1.5vw, 30px); font-weight: 600; color: #fff; line-height: 1.2; }
.main-home-layout .beta-card-top p { margin: clamp(12px, 1vw, 18px) 0 0; color: rgba(255, 255, 255, 0.92); font-size: clamp(17px, 1.3vw, 20px); font-weight: 400; line-height: 1.25; word-break: keep-all; }
.main-home-layout .beta-card-bottom { flex: none; min-height: 67px; padding: 12px 20px 16px; background-color: #fff; display: flex; flex-direction: column; gap: 10px; justify-content: center; }
.main-home-layout .beta-card-bottom > p { display: none; }
.main-home-layout .beta-report-link { display: inline-flex; align-items: center; gap: 6px; width: fit-content; font-size: clamp(16px, 1.2vw, 20px); font-weight: 700; line-height: 1.5; letter-spacing: 0; color: #5D5D5D; text-decoration: none; transition: opacity .2s; }
.main-home-layout .beta-card:hover .beta-report-link,
.main-home-layout .beta-card:focus-visible .beta-report-link { opacity: 1; font-weight: 800; text-decoration: none; }
.main-home-layout .beta-report-arrow { display: inline-flex; align-items: center; transform: translateY(0.02em); line-height: 1; flex-shrink: 0; }
.main-home-layout .beta-card:hover .beta-report-arrow,
.main-home-layout .beta-card:focus-visible .beta-report-arrow { animation: main-report-arrow-slide 0.45s ease-out forwards; }

/* =====================================================
   Beta service popup
   ===================================================== */
.beta-popup { display: none; position: fixed; top: clamp(84px, 15vh, 220px); right: clamp(60px, 2vw, 160px); z-index: 10; }
.beta-popup.is-open { display: block; }
.beta-popup-inner { position: relative; display: flex; flex-direction: column; width: 450px; padding: 12px; border-radius: 0; background: linear-gradient(146deg, #FF5D1A 8.81%, #641B5A 99.45%); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.22); }
.beta-popup-content { display: flex; flex-direction: column; background-color: #F2F4F8; border-radius: 0; overflow: hidden; flex: 1 1 auto; min-height: 0; }
.beta-popup-header { display: flex; justify-content: center; padding: 34px 0 0; }
.beta-popup-badge { display: inline-block; padding: 2px 16px; border: 0; border-radius: 36px; background-color: #fff; box-shadow: 0 4px 11.3px -5px rgba(0, 0, 0, 0.25); color: #FF5D1A; font-family: "Pretendard", "Freesentation", sans-serif; font-size: 17px; font-weight: 400; letter-spacing: 0.6px; white-space: nowrap; }
.beta-popup-badge strong,
.beta-popup-badge b { font-weight: 800; }
.beta-popup-body { padding: 24px 20px 46px; text-align: center; }
.beta-popup-title { margin: 0; color: #3A3A3A; text-align: center; font-family: "Paperlogy", "Pretendard", "Freesentation", sans-serif; font-size: 40px; font-style: normal; font-weight: 900; line-height: normal; letter-spacing: -0.54px; word-break: keep-all; }
.beta-popup-title em { display: inline; color: #E14300; font-style: normal; font-family: "Paperlogy", "Pretendard", "Freesentation", sans-serif; font-size: 40px; font-weight: 800; line-height: normal; letter-spacing: -0.54px; }
.beta-popup-desc { margin: 12px 0 38px; color: #676767; font-size: 22px; font-weight: 500; line-height: 1.45; word-break: keep-all; }
.beta-popup-features { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px 24px; margin-bottom: 38px; padding: 0 30px; }
.beta-popup-feature { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.beta-popup-feature-icon { display: flex; align-items: center; justify-content: center; line-height: 0; }
.beta-popup-feature-icon svg { width: 46px; height: 46px; }
.beta-popup-feature-icon svg > rect:first-child { display: none; }
.beta-popup-feature-label { color: #2C2C2C; font-family: "Pretendard", "Freesentation", sans-serif; font-size: 16px; font-weight: 600; line-height: 1.25; text-align: center; word-break: keep-all; }
.beta-popup-cta { display: block; width: 190px; margin: 0 auto; padding: 14px 0; border-radius: 100px; background-color: #E14200; color: #fff; font-family: "Pretendard", "Freesentation", sans-serif; font-size: 18px; font-weight: 800; line-height: 1; text-align: center; text-decoration: none; letter-spacing: -0.1px; transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease; }
.beta-popup-cta:hover { opacity: 1; color: #fff; text-decoration: none; background-color: #f04d10; box-shadow: 0 8px 20px rgba(225, 66, 0, 0.24); transform: translateY(-2px); }
.beta-popup-footer { display: flex; align-items: center; justify-content: space-between; margin: 0; padding: 5px 10px; border-top: 0; background-color: #fff; }
.beta-popup-check { display: inline-flex; align-items: center; gap: 7px; margin: 0; color: #000; font-size: 14px; font-weight: 500; line-height: 1; cursor: pointer; user-select: none; }
.beta-popup-check input[type="checkbox"] { flex-shrink: 0; width: 18px; height: 18px; margin: 0; accent-color: #FF5D1A; cursor: pointer; }
.beta-popup-close { margin: 0; padding: 4px 6px; border: 0; background: none; color: #000; font-size: 14px; font-weight: 500; cursor: pointer; white-space: nowrap; transition: color .15s; }
.beta-popup-close:hover { color: #111; }

/* ===== Keyframes ===== */
@keyframes showSearchOpen1 {
    0% { width: 0; height: 0; opacity: 0; z-index: 0; }
    1% { width: 100%; height: 100%; opacity: 0; z-index: 999; }
    100% { width: 100%; height: 100%; opacity: 1; z-index: 999; }
}
@keyframes showSearchOpen2 {
    0% { z-index: 0; }
    1% { z-index: 999; opacity: 0; transform: translateY(0px); }
    100% { z-index: 999; opacity: 1; transform: translateY(-140px); }
}
@keyframes showSearchClose1 {
    0% { width: 100%; height: 100%; opacity: 1; z-index: 999; }
    99% { width: 100%; height: 100%; opacity: 0; z-index: 999; }
    100% { width: 0; height: 0; opacity: 0; z-index: 0; }
}
@keyframes showSearchClose2 {
    0% { z-index: 999; opacity: 1; transform: translateY(-140px); }
    99% { z-index: 999; opacity: 0; transform: translateY(0px); }
    100% { z-index: 0; opacity: 0; transform: translateY(0px); }
}
@keyframes showSearchClose3 {
    0% { overflow: visible; }
    99% { overflow: visible; }
    100% { overflow: hidden; }
}
@keyframes betaGradientFlow {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
@keyframes main-report-arrow-slide {
    0%   { transform: translateX(-6px) translateY(0.02em); opacity: 0.4; }
    60%  { transform: translateX(5px) translateY(0.02em); opacity: 1; }
    100% { transform: translateX(3px) translateY(0.02em); opacity: 1; }
}

/* ===== 반응형 ===== */

@media all and (max-width: 1300px) {
    .main_banner h2 { font-size: 22px; }
    .main_banner h2 strong { font-size: 24px; }
    .main_banner .box-searchexample .box-group .box-list strong { font-size: 20px; }
    .main_banner .box-searchexample .box-group .box-list ul li a { font-size: 18px; }

    .main-home-layout .content_inner { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .main-home-layout .main_blog_wrap { grid-column: span 2; }
    .main-home-layout .beta-card,
    .main-home-layout .main-blog-item { height: 312px; min-height: unset; }
    .main-home-layout .beta-card-top { min-height: 245px; }
    .main-home-layout .main_community { grid-column: 1 / -1; }
}

@media all and (max-width: 1280px) {
    .main_content_wrap .content_inner { flex-direction: column; gap: 50px; }
    .main_content_wrap .main_community { width: 100%; }
}

@media all and (max-width: 1100px) {
    .beta-popup { right: 40px; }
}

@media all and (max-width: 1024px) {
    .main_container { padding: 20px 0px 50px; }
    .main_banner { height: auto; overflow: visible; }
    .main_banner h1 { font-size: 36px; }
    .main_banner h2 { font-size: 18px; }
    .main_banner h2 strong { font-size: 20px; }
    .main-page .main_banner h1 { font-size: 36px; line-height: 1.25; }
    .main-page .main_banner h2 { font-size: 18px; line-height: 1.55; }
    .main_banner .box-searchguide { display: none; }
    .main_banner .box-searchexample { margin-top: 80px; padding: 40px; border: 1px solid #f0f0f0; border-radius: 15px; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06); }
    .main_banner .box-searchexample .box-title { margin-bottom: 20px; }
    .main_banner .box-searchexample .box-title h3 { font-size: 20px; color: #101010; font-weight: 500; }
    .main_banner .box-searchexample .box-group { gap: 20px; }
    .main_banner .box-searchexample .box-group .box-list { padding: 12px; width: calc(50% - 10px); border-radius: 10px; background-color: #fafafa; border-left: 3px solid #ff7a3a; }
    .main_banner .box-searchexample .box-group .box-list:before { display: none; }
    .main_banner .box-searchexample .box-group .box-list strong { display: block; padding-bottom: 5px; width: 100%; height: auto; font-size: 16px; color: #ff7a3a; text-align: center; border-bottom: 1px solid #e0e0e0; border-radius: 0; background-color: transparent; }
    .main_banner .box-searchexample .box-group .box-list ul { margin-top: 10px; }
    .main_banner .box-searchexample .box-group .box-list ul li { line-height: 100%; }
    .main_banner .box-searchexample .box-group .box-list ul li + li { margin-top: 5px; }
    .main_banner .box-searchexample .box-group .box-list ul li:before { background-color: #ff7a3a; }
    .main_banner .box-searchexample .box-group .box-list ul li a { font-size: 14px; color: #555; }

    .main_content_wrap .main_content .top .box-more a { font-size: 14px; }

    .main_container.show .bg { animation: none; }
    .main_container.show .box-overflow { opacity: 1; animation: none; }
    .main_container.close1 .bg { animation: none; }
    .main_container.close1 .main_banner { animation: none; }
    .main_container.close1 .box-overflow { animation: none; }
    .main_container.show .main_banner .box-txt h1 { position: relative; z-index: 1; transform: translateY(0px); }
    .main_container.show #formMainSearch { position: relative; z-index: 1; transform: translateY(0px); }
    .main_container.show .searchClose { display: none; }

    .main_faq_wrap .box-title { padding-right: 0; }
    .main_faq_wrap .box-title .box-more a { font-size: 14px; }
    .main_faq_wrap .box-content .box-left { display: none; }
    .main_faq_wrap .box-title h3 { font-size: 26px; }
    .main_faq_wrap .box-title p { margin-top: 4px; font-size: 14px; }
    .content_inner { padding: 40px 0 60px; }
    .main_faq_wrap .content_inner { padding-top: 50px; }

    .main-page .main_banner { height: auto; }
    .main-home-layout .content_inner { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .main-home-layout .main_blog_wrap { grid-column: span 2; }
    .main-home-layout .beta-card,
    .main-home-layout .main-blog-item { height: 312px; min-height: unset; }
    .main-home-layout .beta-card-top { min-height: 245px; padding: 24px 20px 20px; }
    .main-home-layout .beta-card-top h3 { font-size: 22px; }
    .main-home-layout .beta-card-top p { font-size: 15px; line-height: 1.35; }
    .main-home-layout .beta-report-link { font-size: 16px; }
    .main-home-layout .main_community { grid-column: 1 / -1; }

    .beta-popup-inner { width: 480px; }
    .beta-popup-title,
    .beta-popup-title em { font-size: 42px; }
}

@media all and (max-width: 767px) {
    .content_container { padding: 0; }
    .content_inner { padding: 40px 20px 40px; }
    /*.main_banner { padding: 40px 0; }*/
    .main_banner h1 { font-size: 30px; }
    #formMainSearch { margin-top: 0; }
    .main_banner .content_inner { padding: 30px 20px 0; }
    .main_banner .box-searchexample { margin-top: 40px; padding: 30px 20px; }
    .main_banner .box-searchexample .box-group { flex-wrap: nowrap; gap: 0; }
    .main_banner .box-searchexample .box-group .box-list ul li:nth-child(n+3) { display: none; }
    .main_banner .box-searchexample .swiper-pagination { display: block; }

    /*.main_content_wrap { padding-bottom: 40px; }*/
    .main_content_wrap .content_inner { padding: 40px 20px 40px; }
    .main_content_wrap .main_community .box-list ul li,
    .main-home-layout .main_community .box-list ul li { height: auto; }
    .main_content_wrap .main_community .box-list ul li a,
    .main-home-layout .main_community .box-list ul li a { flex-wrap: wrap; padding: 5px; }
    .main_content_wrap .main_community .box-list ul li .col,
    .main-home-layout .main_community .box-list ul li .col { padding: 0; }
    .main_content_wrap .main_community .box-list ul li .col.date,
    .main-home-layout .main_community .box-list ul li .col.date { width: 100%; font-size: 12px; }
    .main_content_wrap .main_community .box-list ul li .col.category,
    .main-home-layout .main_community .box-list ul li .col.category { width: 100%; font-size: 12px; }
    .main_content_wrap .main_community .box-list ul li .col.title,
    .main-home-layout .main_community .box-list ul li .col.title { flex: none; width: 100%; font-size: 14px; }

    .main_faq_wrap .box-content .box-right .box-swiper { padding: 0 30px; }
    .main_faq_wrap .box-content .box-right .box-list ul li { width: 100%; max-width: 327px; }
    .main_faq_wrap .box-content .box-right .box-list .swiper-button-next,
    .main_faq_wrap .box-content .box-right .box-list .swiper-button-prev { width: calc(var(--swiper-navigation-size) / 44); }

    .main-page .main_banner h1 { font-size: 30px; line-height: 1.25; }
    .main-page .main_banner h2 { font-size: 18px; line-height: 1.55; }
    .main-home-layout .content_inner { display: flex; flex-direction: column; gap: 25px; padding: 40px 20px; }
    .main-home-layout .main_beta,
    .main-home-layout .main_blog_wrap,
    .main-home-layout .main_community { width: 100%; grid-column: unset; }
    .main-home-layout .beta-card,
    .main-home-layout .main-blog-item { height: auto; min-height: 0; }
    .main-home-layout .beta-card-top { min-height: 180px; padding: 22px 20px 20px; }
    .main-home-layout .beta-card-top h3 { font-size: 21px; }
    .main-home-layout .beta-card-top p { font-size: 14px; }
    .main-home-layout .main-blog-list { display: block; overflow: hidden; margin: -20px; padding: 20px; }
    .main-home-layout .main-blog-list .swiper-wrapper { display: flex !important; gap: 0; width: 100%; height: 100%; position: relative; transition-property: transform; box-sizing: content-box; }
    .main-home-layout .main-blog-item { width: 85%; flex-shrink: 0; }
    .main-home-layout .main-blog-item .box-content strong { font-size: 17px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; white-space: normal; line-height: 25px; height: 50px; overflow: hidden; }
    .main-home-layout .main-blog-item .box-content p { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; white-space: normal; height: 42px; overflow: hidden; }

    .beta-popup { top: 50%; left: 12px; right: 12px; bottom: auto; transform: translateY(-50%); }
    .beta-popup-inner { width: auto; padding: 8px; display: flex; flex-direction: column; max-height: calc(100dvh - 40px); }
    .beta-popup-content { overflow-y: auto; -webkit-overflow-scrolling: touch; flex: 1 1 auto; min-height: 0; }
    .beta-popup-header { padding-top: 20px; }
    .beta-popup-badge { font-size: 15px; }
    .beta-popup-body { padding: 16px 16px 24px; }
    .beta-popup-title,
    .beta-popup-title em { font-size: 32px; }
    .beta-popup-desc { margin: 8px 0 20px; font-size: 20px; }
    .beta-popup-features { grid-template-columns: repeat(4, 1fr); gap: 10px 8px; margin-bottom: 20px; padding: 0 10px; }
    .beta-popup-feature-icon svg { width: 32px; height: 32px; }
    .beta-popup-feature-label { font-size: 12px; }
    .beta-popup-cta { width: 180px; padding: 12px 0; font-size: 16px; }
}

@media all and (max-width: 479px) {
    .main_banner .box-searchexample { padding: 0; border: 0; box-shadow: none; }
    .main_banner .box-searchexample .box-title h3 { font-size: 18px; text-align: left; }
    .main_banner .box-searchexample .box-group .box-list { box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06); }
}