body { margin: 0; flex-direction: column; min-height: 100vh; display: flex; overflow-x: hidden}

.main-background-image { position: relative; height: 110vh; display: flex; justify-content: center;
    background: transparent; }

/* TOP OVERRIDE */
#searchWrap { opacity: 0; }
#main_top #searchWrap * { display: none; }
#main_top { background: transparent; }


/* MAIN CONTENT */
.wrapper { flex: 1; }
.main-content-default { max-width: 1920px; padding: 120px 8% 20px 8%; display: flex; flex-direction: column; justify-content: center;
    align-items: center; height: calc(100vh - 80px); width: 100vw; text-align: center; }
.main-content-title { width: auto; max-width: 100%; font-size: 2vw; display: flex; flex-direction: column; align-items: center;
    justify-content: center; flex: 1; }
.main-content-title-logo { width: 100%; height: 70px; }
.main-content-title-logo span { font-weight: 500; color: #000; }
.main-content-title-logo b { font-weight: 800; color: var(--font-green); }
.main-content-title-logo > img { height: 60px; width: auto; }
.main-content-title-search { width: auto; max-width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; margin-top: 30px; }
.main-content-title-search > div { border-bottom: 2px solid #000;
    padding: 1px 10px 1px 10px; background: transparent; width: 500px; height: 45px;
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; }
.main-content-title-search input { width: 90%; height: 100%; color: #000; outline: none; background-color: transparent;
    border: none; font-size: 16px; font-weight: 600; }
.main-content-title-search input::placeholder { line-height: 90%; width: 90%; padding-left: 5px; color: #222223; }
.wrapper .main-content-title-search input:focus::-webkit-input-placeholder { color: #727578; font-weight: 500; }
.main-sub-title-search { display: flex; width: 100%; flex-wrap: wrap; max-width: 600px; margin-top: 1rem}
.main-sub-title-search-2 { width: 100%;  margin-top: 4rem}
.main-sub-title-search-2 .tag-div { width: 100%; z-index: 1; overflow: hidden; white-space: nowrap;}
.main-sub-title-search-2 .tag-div .tag {
    display: inline-block;
    width: 300px;
    height: 50px;
    transition: background-color .1s;
    background-color: transparent;
    border-radius: 4px;
    font-size: 17px;
    color: #4A4A4A;
    font-family: Freesentation-4Regular;
    mix-blend-mode: darken;
    box-shadow: 0px 0px 13.5px 0px rgba(0, 0, 0, 0.06);;
    vertical-align: middle;
    animation: marquee 20s linear infinite;
    padding-top: 12px;
    margin : 6px 0 6px 6px;
}
.main-sub-title-search-2 .tag-div:nth-child(1) .tag { animation: marquee1 20s linear infinite; margin-bottom: 0}
.main-sub-title-search-2 .tag-div:nth-child(2) .tag { animation: marquee2 20s linear infinite;}
@keyframes marquee1 {
    from {
        transform: translateX(0%);
    }
    to {
        transform: translateX(-200%);
    }
}
@keyframes marquee2 {
    from {
        transform: translateX(calc(0% - 150px));
    }
    to {
        transform: translateX(calc(-200% - 150px));
    }
}
.main-sub-title-search-2 .tag-div .tag:hover { cursor: pointer; }
.main-search-type-div { display: flex; flex-direction: column; width: 100%; gap: 8px}
.main-search-type-div .main-search-type { width: 100%; display: flex; align-items: center; gap: 8px}
.main-search-type-div .main-search-type p { display: inline-block; margin-bottom: 0; font-size: 12px; font-weight: 700; font-family: "Freesentation-5Medium"}
.main-search-type-div .main-search-type.active p { font-weight: 500}
.main-search-type-div .main-search-type p.search-type-p { font-size: 14px; font-weight: 500; color: #B8B8B8}
.main-search-type-div .main-search-type p.search-type-p b { font-weight: 700}
.main-search-type-div .main-search-type.active p.search-type-p { color: #222 }
.main-search-type-div .main-search-type .main-search-type-btn { display: flex; position: relative; width: 124px; height: 30px; justify-content: space-between; align-items: center; border-radius: 999px; border:1px solid var(--color-new-orange); background-color: white; color: var(--color-new-orange); padding: 0 4px 0 30px; box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.25);}
.main-search-type-div .main-search-type .main-search-type-btn > p { margin-top: 2px}
/*.main-search-type-div .main-search-type .main-search-type-btn:hover > p { font-weight: 500 }*/
.main-search-type-div .main-search-type .main-search-type-btn:hover { cursor: pointer;  } /* border:1px solid var(--color-new-orange); background-color: var(--color-new-orange); color: #fff */
.main-search-type-div .main-search-type.active .main-search-type-btn { border:1px solid var(--color-new-orange); background-color: var(--color-new-orange); color: #fff}
.main-search-type-div .main-search-type .search-type-ai-btn::before { content: ""; position: absolute; top: 1px; left: 8px; width: 24px; height: 24px; background-image: url("/industry/img/icon/search_icon_ai-25bf04f7054f8f3f86c38f76f8161000.svg"); background-size: cover; background-repeat: no-repeat}
/*.main-search-type-div .main-search-type .search-type-ai-btn:hover::before { background-image: url("/industry/img/icon/search_icon_ai_active-dc5fdf17802b6ed8de4882d6c2e27bf1.svg") }*/
.main-search-type-div .main-search-type.active .search-type-ai-btn::before { background-image: url("/industry/img/icon/search_icon_ai_active-dc5fdf17802b6ed8de4882d6c2e27bf1.svg") }
.main-search-type-div .main-search-type .search-type-keyword-btn::before { content: ""; position: absolute; top: 5px; left: 7px; width: 18px; height: 18px; background-image: url("/industry/img/icon/search_icon_keyword-24df2af3b858733f418d985fe771fb2c.svg"); background-size: cover; background-repeat: no-repeat }
/*.main-search-type-div .main-search-type .search-type-keyword-btn:hover::before { background-image: url("/industry/img/icon/search_icon_keyword_active-04a2e626d389da7342333960c6cafbc8.svg") }*/
.main-search-type-div .main-search-type.active .search-type-keyword-btn::before { background-image: url("/industry/img/icon/search_icon_keyword_active-04a2e626d389da7342333960c6cafbc8.svg") }
.main-search-type-div .main-search-type .main-search-type-btn .on-off { display: flex; width: 24px; height: 24px; border-radius: 999px; justify-content: center; align-items: center; background-color: #d9d9d9; color: #8E8D8C}
.main-search-type-div .main-search-type.active .main-search-type-btn .on-off { background-color: #fff; color: var(--color-new-orange)}
/*.main-search-type-div .main-search-type .main-search-type-btn:hover .on-off { background-color: #fff; color: var(--color-new-orange)}*/
.main-search-type-div .main-search-type .main-search-type-btn .on-off p { font-size: 9px }
.main-search-type-div .main-search-type.active .main-search-type-btn .on-off p { font-weight: 600 }
.main-search-type-div .main-search-type .main-search-type-btn .on-off p:nth-child(1) { display: none}
.main-search-type-div .main-search-type .main-search-type-btn .on-off p:nth-child(2) { display: inline-block}
.main-search-type-div .main-search-type.active .main-search-type-btn .on-off p:nth-child(1) { display: inline-block}
.main-search-type-div .main-search-type.active .main-search-type-btn .on-off p:nth-child(2) { display: none}
.main-content-shortcut { height: 35%; width: 100%; flex: 2; }
.main-content-shortcut > .row { height: 220px; width: 100%; justify-content: center; }
.main-content-shortcut .col-12 { border-radius: 12px; background: #FFF; margin: 10px;
    height: auto; width: 212px; max-width: 212px; min-width: 212px;
    box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.08), 0px 1px 4px 0px rgba(0, 0, 0, 0.10);}
.main-content-shortcut .shortcut-div { width: 110px; height: 25px; position: relative; box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.25);
    border-top-left-radius: 12px; border-top-right-radius: 12px; left: -13px; top: -3px; }
.main-content-shortcut .shortcut-div .shortcut-name { width: 94px; height: 28px; left: 6px; top: -2px;
    position: absolute; text-align: center; color: black; font-size: 12px;
    font-weight: 600; text-transform: uppercase; line-height: 30px; word-wrap: break-word }
.main-content-shortcut .shortcut-explain { display: flex; justify-content: center; align-items: center;
     font-weight: 700; height: 100%; font-size: 15px; }
.main-content-shortcut .shortcut-button { display: flex; justify-content: center; align-items: center; }
.main-content-shortcut .shortcut-button > div { color: #3969EF; border-radius: 8px; border: 1px solid #3969EF;
    display: flex; align-items: center; justify-content: center; width: 100%;  font-weight: 700;
    cursor: pointer; height: 35px; }
.main-content-shortcut .shortcut-button > div:hover { color: #FFF; background: #3969EF; }
.main-content-explain { width: auto; max-width: 100%; font-weight: 500; display: flex; font-size: 18px;
    align-items: center; justify-content: center; flex: 2; flex-direction: column; gap: 0.5rem;}
.main-content-explain span { font-weight: 500; width: auto; max-width: 100%; word-break: keep-all; font-size: 1.8rem; line-height: normal; margin: 0;}
.main-content-explain span.main-content-explain-2 {font-size: 1rem; margin: 0;}
.main-content-explain span.main-content-explain-3 { margin: 0; font-size: 13px}
.main-content-explain b { font-weight: 800; }
.main-content-explain .mobile {display: none}
    /* mouse move */
.main-content-detail { width: 100%; height: auto; display: inline-flex; flex-direction: column; justify-content: center;
    align-items: center; align-self: flex-end; padding-top: 1.3rem; }
.main-content-detail .mouse_scroll { cursor: pointer; }
.main-content-detail .mouse { display: block; width: 20px; height: 32px; border: 2px solid #E0E0E0; border-radius: 23px;}
.main-content-detail .mouse::after { content: ''; display: block; position: relative; width: 2px; height: 6px;
    margin: 5px auto; background: #E0E0E0; animation: mouse-pulse 2s ease infinite; }
.main-content-detail .down_arrow { margin-top: 6px; }
.main-content-detail .down_arrow span { display: block; position: relative; left: 50%; width: 7px; height: 7px; margin-bottom: 1px;
    margin-left: -2px; border-right: 2px solid #E0E0E0; border-bottom: 2px solid #E0E0E0; transform: rotate(45deg) translateX(-50%);
    animation: fade-arrow 1s infinite; }
.main-content-detail .down_arrow1:nth-of-type(1) { animation-delay: .2s; animation-direction: alternate; }
.main-content-detail .down_arrow2:nth-of-type(2) { animation-delay: .4s; animation-direction: alternate; }
.main-content-detail .down_arrow3:nth-of-type(3) { animation-delay: .6s; animation-direction: alternate; }

/* SEARCH GUIDE SECTION */
.search-guide-section {
  width: 100%;
  margin: 30px auto 0;
  padding: 0 20px;
}

.search-guide {
  background: linear-gradient(135deg, #ff7a3a 0%, #f14907 100%);
  border-radius: 12px;
  padding: 18px;
  margin-bottom: 25px;
  box-shadow: 0 4px 20px rgba(255, 93, 26, 0.15);
}

.search-guide-header h3 {
  color: white;
  font-size: 1.2rem;
  font-weight: 700;
  margin: 0 0 12px 0;
  text-align: center;
}

.search-guide-content p {
  color: white;
  font-size: 0.9rem;
  line-height: 1.4;
  margin: 0 0 12px 0;
  text-align: center;
}

.search-guide-content strong {
  font-weight: 800;
  background: rgba(255, 255, 255, 0.25);
  padding: 1px 6px;
  border-radius: 4px;
}

.search-guide-examples {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  margin-top: 12px;
}

.example-tag {
  background: rgba(255, 255, 255, 0.95);
  color: #ff5a20;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 0.8rem;
  font-weight: 600;
  white-space: nowrap;
}

.industry-examples {
  background: white;
  border-radius: 12px;
  padding: 18px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
  border: 1px solid #f0f0f0;
}

.industry-examples-header h3 {
  color: #333;
  font-size: 1.15rem;
  font-weight: 700;
  margin: 0 0 12px 0;
  text-align: center;
  position: relative;
}

.industry-examples-content {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 18px;
}

.industry-category {
  background: #fafafa;
  border-radius: 8px;
  padding: 12px;
  border-left: 3px solid #ff7a3a;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.industry-category h4 {
  color: #ff7a3a;
  font-size: 0.95rem;
  font-weight: 700;
  margin: 0 0 8px 0;
  padding-bottom: 5px;
  border-bottom: 1px solid #e0e0e0;
}

.industry-category ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.industry-category li {
  color: #555;
  font-size: 0.85rem;
  line-height: 1.4;
  margin-bottom: 5px;
  position: relative;
  text-align: left;
  cursor: pointer;
  transition: color 0.2s ease, background-color 0.2s ease;
  border-radius: 4px;
  padding: 3px 6px 3px 10px;
  margin-left: -6px;
}

.industry-category li:hover {
  color: #ff7a3a;
  background-color: rgba(255, 122, 58, 0.1);
}

.industry-category li::before {
  content: '•';
  color: #ff5a20;
  font-weight: bold;
  position: absolute;
  left: 0;
  font-size: 0.8rem;
}

.industry-category li:last-child {
  margin-bottom: 0;
}

/* MAIN BOTTOM */
.main-bottom { width: 100%; height: auto; padding: 100px 10% 5% 10%; display: flex; justify-content: center; }
.main-bottom .bold-explain {  font-weight: 700; font-size: 26px; }
.main-bottom .bold-explain-small {  font-weight: 700; font-size: 18px; }
.main-bottom .font-color-blue {  font-weight: 700; color: #1869B9; }
.main-bottom .thin-explain { color: #8A8A8A; }
.main-bottom .inner-content-parent { display: flex; flex-direction: column; justify-content: space-between;  }


/* MAIN BOTTOM NAV */
.main-bottom-nav { height: 35vh; position: relative; background-image: url(/industry/img/main/bottom-background-e377007b333d47547dae36f6aeb0fdae.png);
    background-size: cover; background-position: left; background-repeat: repeat; display: flex; align-items: center; justify-content: center; }
.main-bottom-nav .nav-div > div { font-size: 20px; color: #FFF; text-align: center; }
.main-bottom-nav .main-content-title-search { padding-top: 3vh; }
.main-bottom-nav .main-content-title-search > div { border-bottom : 2px solid #FFF; }
.main-bottom-nav .main-content-title-search input { color: #FFF; font-weight: 400; }
.main-bottom-nav .main-content-title-search input::placeholder { color: #F0F0F0; }
.main-bottom-nav .main-content-title-search .search-img-div { background-image: url("/industry/img/favicon/magnifier-white-39da088463a0187f243fe8a7a31d1bf0.png"); }

/* CODEPOST SLIDE */
#codePostSlide { display: none; width: 150px; height: 275px; position: fixed; right: 20px; bottom: 20px; background-color: rgba(255, 255, 255, 0.8); border-radius: 18px; padding: 53px 116px 15px 15px; box-shadow: 0 0 10px rgba(0, 0, 0, .1); z-index: 2; border: 1px solid rgba(0, 0, 0, 0); transition: width .5s ease-in-out; color: #505050; font-family: Freesentation-4Regular; overflow: hidden}
#codePostSlide .close-btn { position: absolute; top: 15px; width: 18px; height: 23px; transform: rotate(180deg); transition: transform .5s ease-in-out;}
#codePostSlide .close-btn:hover { cursor: pointer }
#codePostSlide > div { display: none; opacity: 0; transition: opacity .2s ease-in-out; }
#codePostSlide > div > div:nth-child(1) h2 { font-family: Freesentation-6SemiBold; color: var(--color-new-orange); font-size: 1.2rem; margin-bottom: 3px}
#codePostSlide > div > div:nth-child(1) h2 a { font-size: 1.6rem; margin-left: 5px; position: relative; top: 0.05rem; color: var(--color-new-orange)}
#codePostSlide > div > div:nth-child(1) h2 a:hover { text-decoration: none}
#codePostSlide > div > div:nth-child(1) p { word-break: keep-all; line-height: normal; margin-bottom: 5px}
#codePostSlide .swiper { height: 130px; margin: 0 2px; padding:12px 10px; border-top: 1px solid var(--color-new-orange); border-bottom: 1px solid var(--color-new-orange); }

#codePostSlide.open { width: 385px; }
#codePostSlide.open .close-btn { transform: rotate(0deg); }
#codePostSlide.open > div { display: block; opacity: 1; }

.code-post-slide { opacity: 0.9; }
.code-post-slide:hover {cursor: pointer; opacity: 1}
.code-post-slide .top { display: flex; justify-content: space-between; }
.code-post-slide .content { display: flex; height: 60px; align-items: center; padding: 10px; text-align: center; color: #4A4A4A }
.code-post-slide .bottom { display: flex; justify-content: end;}

.code-post-slide .top > div { display: flex; gap: 8px; align-items: end}
.code-post-slide .bottom > div { display: flex; gap: 10px}

.code-post-slide .top .profile-image { width: 30px; height: 30px}
.code-post-slide .top .reg-name { color: var(--color-new-orange); font-family: Freesentation-6SemiBold; font-size: 1rem}
.code-post-slide .top .reg-date { color: #838383; margin-bottom: 0; font-weight: 300}
.code-post-slide .content p { width: 100%; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; text-overflow: ellipsis; margin-bottom: 0; font-size: 12px; }
.code-post-slide .bottom .like-div { display: flex; align-items: center; gap: 2px }
.code-post-slide .bottom .reply-div { display: flex; align-items: center; gap: 2px }
.code-post-slide .bottom .like-div img { width: 13px; height: 13px }
.code-post-slide .bottom .reply-div img { width: 13px; height: 13px }
.code-post-slide .bottom .like-div span { color: #838383; font-weight: 300}
.code-post-slide .bottom .reply-div span { color: #838383; font-weight: 300 }

/*#popup-step-search { display:flex; display: none; position: fixed; flex-direction: column; gap: 2rem; width: 385px; height: 523px; bottom: 310px; right: 20px; background-color: rgba(255, 255, 255, 0.8); border-radius: 18px; padding: 90px 80px 70px 80px; box-shadow: 0 0 10px rgba(0, 0, 0, .1); z-index: 1; border: 1px solid rgba(0, 0, 0, 0); color: #101010; font-family: Freesentation-7Bold;}*/
/*#popup-step-search .btn-close { position: absolute; width: 20px; height: 20px; right: 15px; top: 15px; padding:0; background-color: unset; border:none; font-size: 20px; transform: rotate(45deg); color: var(--color-new-orange)}*/
/*#popup-step-search .btn-close:focus, #popup-step-search .btn-close:active { outline: none }*/

/*#popup-step-search .top { display: flex; flex-direction: column; justify-content: start; padding:20px 0; height: 200px; width: 100%; background-image: url("/industry/img/icon/speech_bubble2-ed9b28468f9aaed0cb3de726f34f7ce0.svg"); background-size: cover;}*/
/*#popup-step-search .top h2 { color: var(--color-new-orange); text-align: center; font-family: Freesentation-8ExtraBold; font-size: 25px; margin-bottom: 0;}*/

/*#popup-step-search .middle { width: 100%; }*/
/*#popup-step-search .middle p:nth-child(1) { text-align: center; font-size: 23px; word-break: keep-all; font-family: Freesentation-7Bold; line-height: 26px; margin-bottom: 1.5rem}*/
/*#popup-step-search .middle p:nth-child(2) { text-align: center; font-size: 16px; word-break: keep-all; font-family: Freesentation-4Regular; line-height: 22px; margin-bottom: .5rem}*/

/*#popup-step-search .bottom { width: 100%; }*/
/*#popup-step-search .bottom a:hover { text-decoration: none }*/
/*#popup-step-search .bottom button { width: 85%; height: 32px; margin: 0 auto; font-size: 14px; border-radius: 12px; box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.25), 0px 0px 0px 0px rgba(0, 0, 0, 0.25) inset;}*/

#mainBlog { display: none; }

/* RESPONSIVE */
/* 4K 해상도 (3840x2160) */
@media (min-width: 3840px) {
    .main-content-default { 
        max-width: 3840px; 
        padding: 250px 15% 80px 15%; 
    }
    .main-content-explain span { font-size: 3rem; }
    .main-content-explain span.main-content-explain-2 { font-size: 1.8rem; }
    .main-content-title-search > div { width: 800px; height: 60px; }
    .main-content-title-search input { font-size: 24px; }
    .search-guide { padding: 40px; }
    .search-guide-header h3 { font-size: 1.8rem; }
    .search-guide-content p { font-size: 1.3rem; }
    .example-tag { padding: 8px 16px; font-size: 1rem; }
    .industry-examples { padding: 40px; }
    .industry-examples-header h3 { font-size: 1.8rem; }
    .industry-examples-content { gap: 25px; }
    .industry-category h4 { font-size: 1.3rem; }
    .industry-category li { font-size: 1.1rem; }
}

/* 2K 해상도 (2560x1440) */
@media (min-width: 2560px) and (max-width: 3839px) {
    .main-content-default { 
        max-width: 2560px; 
        padding: 200px 12% 60px 12%; 
    }
    .main-content-explain span { font-size: 2.5rem; }
    .main-content-explain span.main-content-explain-2 { font-size: 1.5rem; }
    .main-content-title-search > div { width: 700px; height: 55px; }
    .main-content-title-search input { font-size: 22px; }
    .search-guide { padding: 30px; }
    .search-guide-header h3 { font-size: 1.5rem; }
    .search-guide-content p { font-size: 1.1rem; }
    .example-tag { padding: 6px 14px; font-size: 0.9rem; }
    .industry-examples { padding: 30px; }
    .industry-examples-header h3 { font-size: 1.5rem; }
    .industry-examples-content { gap: 22px; }
    .industry-category h4 { font-size: 1.1rem; }
    .industry-category li { font-size: 0.95rem; }
}

/* FHD 해상도 (1920x1080) */
@media (min-width: 1920px) and (max-width: 2559px) {
    .main-content-default { 
        max-width: 1920px; 
        padding: 160px 10% 50px 10%; 
    }
    .main-content-explain span { font-size: 2rem; }
    .main-content-explain span.main-content-explain-2 { font-size: 1.2rem; }
    .main-content-title-search > div { width: 600px; height: 50px; }
    .main-content-title-search input { font-size: 20px; }
    .search-guide { padding: 15px; }
    .search-guide-header h3 { font-size: 1.1rem; }
    .search-guide-content p { font-size: 1rem; }
    .example-tag { padding: 3px 10px; font-size: 0.8rem; }
    .industry-examples { padding: 25px; }
    .industry-examples-header h3 { font-size: 1.3rem; }
    .industry-examples-content { gap: 20px; }
    .industry-category h4 { font-size: 1.05rem; }
    .industry-category li { font-size: 0.92rem; }
}

/* HD+ 해상도 (1600x900) */
@media (min-width: 1600px) and (max-width: 1919px) {
    .main-content-default { 
        max-width: 1600px; 
        padding: 120px 6% 35px 6%;
    }
    .main-content-explain span { font-size: 1.6rem; }
    .main-content-explain span.main-content-explain-2 { font-size: 1rem; }
    .main-content-title-search > div { width: 500px; height: 45px; }
    .main-content-title-search input { font-size: 16px; }
    .search-guide-section { margin: 35px auto 0; }
    .search-guide { padding: 14px; }
    .search-guide-header h3 { font-size: 1.1rem; }
    .search-guide-content p { font-size: 0.9rem; }
    .example-tag { padding: 3px 8px; font-size: 0.75rem; }
    .industry-examples { padding: 18px; }
    .industry-examples-header h3 { font-size: 1.1rem; }
    .industry-examples-content { gap: 15px; }
    .industry-category h4 { font-size: 0.95rem; }
    .industry-category li { font-size: 0.85rem; }
}

/* HD 해상도 (1366x768) */
@media (min-width: 1366px) and (max-width: 1599px) {
    .main-content-default {
        max-width: 1366px;
        padding: 100px 5% 30px 5%;
    }
    .main-content-explain span { font-size: 1.4rem; }
    .main-content-explain span.main-content-explain-2 { font-size: 0.95rem; }
    .main-content-title-search > div { width: 450px; height: 42px; }
    .main-content-title-search input { font-size: 15px; }
    .search-guide-section { margin: 30px auto 0; }
    .search-guide { padding: 12px; }
    .search-guide-header h3 { font-size: 1rem; }
    .search-guide-content p { font-size: 0.85rem; }
    .example-tag { padding: 3px 7px; font-size: 0.7rem; }
    .industry-examples { padding: 15px; }
    .industry-examples-header h3 { font-size: 1rem; }
    .industry-examples-content { gap: 12px; }
    .industry-category h4 { font-size: 0.9rem; }
    .industry-category li { font-size: 0.8rem; }
}


/* 작은 해상도 (1280x720) */
@media (min-width: 1280px) and (max-width: 1365px) {
    .main-content-default {
        max-width: 1280px;
        padding: 100px 5% 30px 5%;
    }
    .main-content-explain span { font-size: 1.2rem; }
    .main-content-explain span.main-content-explain-2 { font-size: 0.8rem; }
    .main-content-title-search > div { width: 400px; height: 35px; }
    .main-content-title-search input { font-size: 14px; }
    .search-guide-section { margin: 25px auto 0; }
    .search-guide { padding: 10px; }
    .search-guide-header h3 { font-size: 1rem; }
    .search-guide-content p { font-size: 0.85rem; }
    .example-tag { padding: 3px 6px; font-size: 0.65rem; }
    .industry-examples { padding: 15px; }
    .industry-examples-header h3 { font-size: 0.9rem; }
    .industry-examples-content { gap: 12px; }
    .industry-category h4 { font-size: 0.85rem; }
    .industry-category li { font-size: 0.75rem; }
}

/* 노트북 해상도 (1200~1279px) */
@media (min-width: 1100px) and (max-width: 1279px) {
    .main-content-default {
        max-width: 1200px;
        padding: 90px 5% 25px 5%;
    }
    .main-content-explain span { font-size: 0.9rem; }
    .main-content-explain span.main-content-explain-2 { font-size: 0.65rem; }
    .main-content-title-search > div { width: 320px; height: 35px; }
    .main-content-title-search input { font-size: 11px; }
    .search-guide-section { margin: 20px auto 0; }
    .search-guide { padding: 8px; }
    .search-guide-header h3 { font-size: 0.8rem; }
    .search-guide-content p { font-size: 0.7rem; }
    .example-tag { padding: 2px 5px; font-size: 0.65rem; }
    .industry-examples { padding: 12px; }
    .industry-examples-header h3 { font-size: 0.8rem; }
    .industry-examples-content { gap: 6px; }
    .industry-category h4 { font-size: 0.7rem; }
    .industry-category li { font-size: 0.6rem; }
}

@media (max-width: 1200px) {
    .main-background-image { height: auto; }
    .main-content-default { height: auto; }
}

@media (max-width: 1024px) {
    .main-content-default { padding: 120px 30px 60px 30px; }
    .main-content-detail { display: none; }
    .main-bottom { display: none; }
    .main-bottom-nav { display: none; }

    .main-content-explain span { font-size: 1.2rem; }
    .main-content-explain span.main-content-explain-2 { line-height: 200%; font-size: 0.8rem; }
    .main-content-explain b.label_point { font-size: 1.1rem; }
    .search-guide-header h3 { font-size: 1rem; }
    .search-guide-content p { font-size: 0.85rem; }
    .example-tag { padding: 3px 6px; font-size: 0.65rem; }
    .industry-examples-header h3 { font-size: 0.9rem; }
    .industry-category h4 { font-size: 0.85rem; }
    .industry-category li { font-size: 0.75rem; }

    .industry-examples-content { grid-template-columns: repeat(2, 1fr); }
}

/* 스몰 디바이스용 스타일 */
@media (max-width: 767px) {
    .main-background-image { height: calc(100vh - 80px); background: transparent; }
    /* main-center */
    .main-content-default { padding: 180px 5% 50px 5%; }
    .main-content-title .h-10 { height: 10px !important; }
    .main-content-title-search > div { margin-left: 0; width: 100%; padding-top: 10px}
    .main-content-explain { font-size: 16px; }
    .main-content-explain span { font-size: 2rem}
    .main-content-explain span.main-content-explain-2 {font-size: 0.9rem}
    .main-content-shortcut { flex: 4; }
    .main-content-shortcut > .row { height: auto; padding-top: 50px; }
    .main-content-shortcut .col-12 { padding-bottom: 10px; }
    .main-content-shortcut .col-12 > .h-50 { display: none; }
    .main-content-shortcut .col-12 > .h-30 { height: auto !important; }
    .main-content-detail { position: absolute; bottom: 120px; left: 50%; transform: translateX(-50%); display: none; }
    .main-content-title-search input { font-size: 18px; width: 90%}

    /* main-bottom */
    .main-bottom { padding: 70px 0; background: #FFF; display: none; }
    .main-bottom .scroll-1 { width: 100%; }
    .main-bottom .bold-explain { font-size: 23px; }
    .main-bottom .inner-content-1 > div:nth-child(1) { width: 100%; height: 310px; background-size: 100% 175px; }
    .main-bottom .inner-content-1 > div:nth-child(2) { width: 100%; height: 350px; margin-bottom: 2rem; }
    .main-bottom .inner-content-2 { width: 100%; height: auto; }
    .main-bottom .inner-content-2 > div:nth-child(2) { width: 100%; }
    .main-bottom-nav { margin-bottom: 80px; display: none; }
    .main-bottom-nav .nav-img { height: 80%; }
    .main-bottom-nav .nav-div > div { font-size: 18px; }
    .main-bottom-nav .main-content-title-search { padding-top: 2vh; }
    .main-sub-title-search-2 {margin-top: 2rem}

    /* CODEPOST SLIDE */
    #codePostSlide {display: none}
}

@media (max-width: 575px) {
    .main-content-default { padding: 160px 5% 50px 5%; }

    .main-content-explain .pc {display: none}
    .main-content-explain .mobile {display: inline-block}
    .main-content-explain span { font-size: 1.5rem}
    .main-content-explain span.main-content-explain-2 {font-size: 0.9rem; margin-top: 0.7rem}

    /* MAIN SEARCH SHORTCUT */
    .main-search-shortcut .main-search-shortcut-inner-1 {width: 150px}
    .main-search-shortcut .main-search-shortcut-inner-2 {display: none}

    .main-background-image { background: transparent; }

    .main-search-type-div { width: unset}

    .main-sub-title-search-2 {margin-top: 5rem}
    .main-sub-title-search-2 .tag-div .tag {font-size: 15px; padding-top: 9px}

    /* SEARCH GUIDE RESPONSIVE */
    .search-guide-section {
      margin: 30px auto 0;
      padding: 0 15px;
    }

    .search-guide {
      padding: 15px;
      margin-bottom: 20px;
    }

    .search-guide-header h3 {
      font-size: 1rem;
    }

    .search-guide-content p {
      font-size: 0.85rem;
    }

    .search-guide-examples {
      gap: 6px;
    }

    .example-tag {
      padding: 4px 10px;
      font-size: 0.6rem;
    }

    .industry-examples {
      display: none;
    }
}

@media (max-width: 767px) {
    .main-background-image { height: 100%; overflow: hidden; }
    .main-content-title { justify-content: flex-start; }
    .main-content-default { padding: 40px 25px; overflow: hidden; }

    .search-guide { display: none; }

    .indestryExamplesWrap {  }
    .industry-examples { display: block; padding: 0; border: 0; border-radius: 0; box-shadow: none; background: transparent; }
    .industry-examples-content { gap: 0; }
    .industry-category { box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06); }

    .industry-examples-header h3 { text-align: left; }
    .main-content-explain { flex: none; gap: 2rem; }
    .main-content-title-search { height: auto; margin-top: 60px; }
    .indestryExamplesWrap .swiper-pagination { position: static; margin-top: 10px; }
    .indestryExamplesWrap .swiper-pagination .swiper-pagination-bullet-active { background-color: var(--color-new-orange); }

    /*.main-content-title-search input { color: #a8a8a8; }*/
    /*.main-content-title-search input:focus { color: #000000; }*/

    /*.search-guide-section { position: absolute; bottom: 0; left: 0; transform: translateY(101%); transition: transform .3s ease-in-out; }*/
    .search-guide-section.open { transform: translateY(0%); }
    .search-guide-section .search-guide-btn { display: block; position: absolute; top: -60px; right: 20px; width: 40px; height: 40px; border-radius: 50%; box-shadow: 0px 0px 5px rgba(0, 0, 0, .3); overflow: hidden; animation: search-guide-btn-motion 0.5s ease-in-out infinite alternate; }
    .search-guide-section .search-guide-btn button { position: relative; align-items: center; width: 100%; height: 100%; border: none;  background: linear-gradient(135deg, #ff7a3a 0%, #f14907 100%); }
    .search-guide-section .search-guide-btn button:after { position: absolute; top: 50%; left: 50%; content: "Guide"; font-size: 0.6rem; color: #fff; transform: translate(-50%, -50%); opacity: 1; }
    .search-guide-section .search-guide-btn button:before { position: absolute; top: 50%; left: 50%; content: ""; width: 7px; height: 7px; margin-bottom: 1px; margin-left: -2px; border-right: 2px solid #FFFFFF; border-bottom: 2px solid #FFFFFF; transform: rotate(45deg) translate(-70%, -30%); opacity: 0; }
    .search-guide-section.open .search-guide-btn button:after { opacity: 0; transition: opacity .3s ease-in-out; }
    .search-guide-section.open .search-guide-btn button:before { opacity: 1; transition: opacity .3s ease-in-out; }

    .search-guide-section { padding: 0; }
    .search-guide { padding: 12px; }

    .industry-examples-content { grid-template-columns: repeat(2, 1fr); }
    .industry-category li:nth-child(n+3) { display: none; }

    @keyframes search-guide-btn-motion {
        0% {
            transform: translateY(0%);
        }
        100% {
            transform: translateY(10%);
        }
    }


    #mainBlog { display: block; margin-top: 40px; width: 100%; }
    #mainBlog .title { display: flex; justify-content: space-between; align-items: center; }
    #mainBlog .title h3 { font-size: 0.9rem; color: #333; font-weight: 700; }
    #mainBlog .title .more { font-size: 0.8rem; }
    #mainBlog ul { margin: 0; padding: 0; }
    #mainBlog ul li.item { width: 95%; overflow: hidden; border-radius: 10px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); }
    #mainBlog ul li.item .image { aspect-ratio: 1.8 / 1; overflow: hidden; }
    #mainBlog ul li.item .image img { width: 100%; height: 100%; object-fit: cover; }
    #mainBlog ul li.item .contant { padding: 10px; color: #333; text-align: left; }
    #mainBlog ul li.item .contant strong { display: block; font-size: 0.85rem; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
    #mainBlog ul li.item .contant p { display: block; font-size: 0.75rem; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
    #mainBlog ul li.item .contant .bottom { display: flex; justify-content: space-between; }
    #mainBlog ul li.item .contant .category { width: auto; padding: 1px 10px; font-size: 0.7rem; color: #fff; background-color: #ff5d1a; border-radius: 10px; }
    #mainBlog ul li.item .contant .date { color: #666666; font-size: 0.7rem; }
}