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-image: url(../../img/main/mainBackground.webp); background-size: 100%;
    background-position: bottom; background-repeat: no-repeat;}

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


/* MAIN CONTENT */
.wrapper { flex: 1; }
.main-content-default { max-width: 1920px; padding: 270px 10% 50px 10%; display: flex; flex-direction: column; justify-content: center;
    align-items: center; height: 100vh; width: 100vw; text-align: center; }
.main-content-title { 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: 100%; height: 100%; display: flex; justify-content: center; align-items: end;}
.main-content-title .main-content-title-search { margin-top: 4vh;}
.main-content-title-search > div { border-bottom: 2px solid #000;
    padding: 1px 10px 1px 10px; background: transparent; width: 600px; height: 50px;
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; }
.main-content-title-search input { width: 95%; height: 100%; color: #000; outline: none; background-color: transparent;
    border: none; font-size: 20px; 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;} { 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("../../img/icon/search_icon_ai.svg"); background-size: cover; background-repeat: no-repeat}
/*.main-search-type-div .main-search-type .search-type-ai-btn:hover::before { background-image: url("../../img/icon/search_icon_ai_active.svg") }*/
.main-search-type-div .main-search-type.active .search-type-ai-btn::before { background-image: url("../../img/icon/search_icon_ai_active.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("../../img/icon/search_icon_keyword.svg"); background-size: cover; background-repeat: no-repeat }
/*.main-search-type-div .main-search-type .search-type-keyword-btn:hover::before { background-image: url("../../img/icon/search_icon_keyword_active.svg") }*/
.main-search-type-div .main-search-type.active .search-type-keyword-btn::before { background-image: url("../../img/icon/search_icon_keyword_active.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: 100%;  font-weight: 500; display: flex; font-size: 18px;
    align-items: flex-start; justify-content: center; flex: 2; flex-wrap: wrap}
.main-content-explain span { font-weight: 500; width: 100%; word-break: keep-all; font-size: 2.5rem; line-height: normal}
.main-content-explain span.main-content-explain-2 {font-size: 1.2rem; margin-top: 0.5rem}
.main-content-explain span.main-content-explain-3 { margin-top: 1rem; 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; }
.main-content-detail .mouse_scroll { cursor: pointer; }
.main-content-detail .mouse { display: block; width: 23px; height: 36px; 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 .dowm_arrow { margin-top: 6px; }
.main-content-detail .dowm_arrow span { display: block; position: relative; left: 50%; width: 8px; height: 8px; margin-bottom: 2px;
    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 .dowm_arrow1:nth-of-type(1) { animation-delay: .2s; animation-direction: alternate; }
.main-content-detail .dowm_arrow2:nth-of-type(2) { animation-delay: .4s; animation-direction: alternate; }
.main-content-detail .dowm_arrow3:nth-of-type(3) { animation-delay: .6s; animation-direction: alternate; }

/* 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(../../img/main/bottom-background.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("../../img/favicon/magnifier-white.png"); }

/* CODEPOST SLIDE */
#codePostSlide { 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 { /*diplay: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("../../img/icon/speech_bubble2.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;}


/* RESPONSIVE */
@media (min-width: 2560px) {
    .main-sub-title-search-2 { width: 150%; margin-top: 6rem}
}
@media (max-width: 1920px) {
    .main-background-image { height: 115vh; }
    .main-content-default { padding: 180px 10% 50px 10%;}
    .main-content-title .main-content-title-search {margin-top: 5vh;}
}

@media (max-width: 1600px) {
    .main-background-image {
        height: 105vh;
    }
    .main-sub-title-search-2 { margin-top: 3rem; }
}

@media (max-width: 1400px) {
    .main-background-image {
        height: 105vh;
    }
    .main-sub-title-search-2 .tag-div .tag { width: 270px; height: 40px; padding-top: 7px }
    #popup-step-search { visibility: hidden }
}

@media (max-width: 1280px) {
    .main-background-image {
        height: 100vh;
    }
}

@media (max-width: 1100px) {
    .main-bottom .inner-content-parent { flex-direction: column; }
}

/* 미디엄 디바이스용 스타일 */
@media (min-width: 768px) and (max-width: 991px) {

    .main-background-image { background-size: 110%; background-position: bottom }

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

/* 스몰 디바이스용 스타일 */
@media (max-width: 767px) {
    .main-background-image { height: calc(100vh - 80px); background-size: 110%; background-position: bottom }
    /* 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-size: 185%; }

    .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}

    }