/* 전체 */
body {background-color:var(--main-back-color);}
#wrapper {width:1200px; margin:0 auto; display: flex; justify-content: space-between; align-items: flex-start; overflow:hidden; position:relative;}

/* 검색, 추천키워드(pc) */
#pc-contents {width: 500px; position:fixed; overflow:hidden;}
#pc-contents .site-logo {display: block; width: 11.5rem; height: auto; margin-top:4%;}
#pc-contents .site-logo img {width:100%;}
#pc-contents #search-area {margin:40% 0 55%; padding:0;}
#pc-contents #search-area h3 {font-size: 4.8rem; color: #b3acac; font-weight: 600; margin:0;}
#pc-contents #search-area h3 span {color: var(--main-font-color); font-weight: bold;}
#pc-contents #search-area h3 span b {color: var(--default-red);}
#pc-contents #search-area #search-box {width: 37.5rem; height: 7rem; margin:6% 0; background-image: linear-gradient(90deg, var(--default-blue) 0%, #875ec5 50%, var(--default-red) 100%); border-radius: 3.5rem; position: relative;}
#pc-contents #search-area #search-box input[name=searchText] {width: 36.9rem; height: 6.35rem; border: none; border-radius: 3.5rem; position: absolute; top: 0.3rem; left: 0.3rem; padding:0 6.5rem 0 3.3rem; font-size:2.3rem;}
#pc-contents #search-area #search-box input[name=searchText]::placeholder {color:#bebebe; font-size:2.3rem; font-weight:400;}
#pc-contents #search-area #search-box input[name=searchText]:focus {outline:none;}
#pc-contents #search-area #search-box button {width:3.5rem; height:5.0rem; position:absolute; top:0.9rem; right:2.3rem;}
#pc-contents #search-area #search-box button img {width:100%;}
#pc-contents #search-area .recommend-keywords {width:75%;}
#pc-contents #search-area .recommend-keywords a {font-size:1.6rem; background-color: #e6eefd; padding: 2.5% 4%; margin: 0 1% 3% 0; font-weight: 400;}
#pc-contents #search-area .recommend-keywords .sub-title {display:none;}

/* 모바일 화면 */
#mobile-contents {width:600px; margin-left:480px; border:0.1rem solid var(--default-gray); overflow:hidden; background-color:#fff; min-height:100vh; position:relative; padding-top:15rem;}
#mobile-contents.popup-open::before { content: ''; display: block; width: 59.8rem; height: 100%; background-color: rgba(0, 0, 0, 0.5); position: fixed; top: 0; z-index: 25; }

/* 앱 다운로드 */
#app-download-area {display:flex; align-items:center; gap:1%; position: fixed; bottom: 4.5%; left: calc((100% - 1200px) / 2);}
#app-download-area a {display:inline-block; width:13%;}
#app-download-area a img {width:100%;}
#app-download-area span {margin-left:3%; font-size:1.2rem; line-height:1.5;}

/* 문의하기 */
#inquiry-area { position: fixed; right: 145px; bottom: 4%; border: 0.1rem solid var(--default-blue); border-radius: 6rem; width: 20.8rem; height: 5rem; display:flex; align-items: center; justify-content: center; gap:5%;}
#inquiry-area::before {content: ''; background: url('https://swimg.wowtv.co.kr/stockwinN/static/images/icons/customer_service.png') no-repeat center; display: inline-block; width: 2rem; height: 2rem; background-size: contain;}
#inquiry-area a {font-size:1.6rem; color: var(--default-blue);}

/* 검색, 카테고리 헤더 영역(따로 영역 사용) */
/*.no-header {display:flex;}*/
#search-result-area {margin-top:-15rem;}
#search-result-area .page-title {background-color:#fff; width:100%; padding:4%;}

/* 모바일 버전 검색창 숨김처리 */
#mobile-contents :is(#search-area, #search-result-area) #search {display:none;}

/* 헤더 */
header {width:59.8rem; height:10rem; display:flex; align-items:center; justify-content:space-between; padding: 0 2%; position:fixed; top:0; z-index:20; background-color:#fff;}
header a img {width:100%;}
header .site-logo {display: none; background: url('https://swimg.wowtv.co.kr/stockwinN/static/images/icons/logo.png') no-repeat; width: 28%; aspect-ratio: 141 / 64; background-size: contain; background-position: top; margin-top: -3%; }
header ul {width:100%; display: flex; align-items: center; justify-content: flex-end; gap: 1.2%;}
header ul li {width:10%;}
header ul li button {width:100%; padding:0;}
header ul #go-mypage {width:14%;}
header #go-search {display:none;}
header ul #go-category {width:5%; margin-left:4%;}
header #go-login {width:14%;}
header #go-logout {width: 16%;}

/*nav {width:100%; border-bottom: 0.1rem solid var(--default-gray); overflow:hidden;}*/
nav {width:59.8rem; height:5rem; border-bottom: 0.1rem solid var(--default-gray); overflow:hidden; position:fixed; top:9.9rem; z-index:20; background-color:#fff;}
nav ul {display: flex ; align-items: center; justify-content: flex-start;}
nav ul li { text-align: center; }
nav ul li.swiper-slide {width:fit-content; padding: 0% 3.8% 3%; text-align:center; position:relative;}
nav ul li a { font-size: 2.7rem; font-weight: 600; color: var(--default-semi-gray); }
nav ul li a span {font-weight: 600;}
nav ul li.on::after {content: ''; display: inline-block; width: 60%; position: absolute; bottom: 0; left: 20%; height: 0.3rem; background-color: var(--default-blue); }
nav ul li.on a {color: var(--main-font-color);}

/* PC 플로팅 배너 */
#floating-banner-area {display:none; position: absolute; right: 0; top: 2.8%; z-index: 25; }
#floating-banner-area #btn-close-banner { position: absolute; right: -3%; top: 0; width: 35px; height: 35px; }

@media (max-width:1700px){
    #inquiry-area {display:none;}
}

@media (max-width:1200px){
    #wrapper {width:100%;}
    #pc-contents {display:none;}
    #mobile-contents {margin:0 auto;}

    #app-download-area {display:none;}

    /* 검색, 카테고리 헤더 영역(따로 영역 사용) */
    body > #search-area .no-header {display:none;}
    
/*    #search-result-area {margin-top: -20vw;}*/

    /* 모바일 버전 검색창 숨김처리 해제 */
    #mobile-contents #search-result-area .page-title {display:none;}
    #mobile-contents :is(#search-area, #search-result-area) #search {display:flex;}

    /* 검색, 카테고리 레이어 위치 조정 */
    body > :is(#category-area, #search-area, #full-popup-area) {left:calc((100% - 600px) / 2); isolation:isolate;}

    /* 헤더 */
    header ul {width:45%; gap:7%;}
    header .site-logo {display: inline-block;}
    header ul li {width:12%;}
    header ul #go-mypage {width:37%;}
/*    header ul.home #go-mypage {width:40%;}*/
    header #go-search {display:block;}
    header ul #go-category {width:12%; padding-top:0; margin-left:2%;}
    header ul.home #go-category {width:12%;}
    header #go-login {width:37%;}

    header #go-logout {display:none;}

    /* PC 플로팅 배너 */
    #floating-banner-area { right: 0; top: 3.3%;}
}

@media (max-width:600px){
    body {background-color:#fff;}
    #mobile-contents {width:100%; border:none;}

    #mobile-contents.popup-open::before {width:100%;}

    /* 검색, 카테고리 레이어 위치 조정 */
    body > :is(#category-area, #search-area, #full-popup-area) {width:100%; left:0;}

    /* 헤더 */
    header {width:100%; padding:var(--main-padding-val);}
/*    header #go-mypage {width:40%;}*/
    header #go-search {display:block; width:14%;}

    nav {width:100%;}
    nav ul li.swiper-slide {padding: 0 4% 4%;}

    /* PC 플로팅 배너 */
    #floating-banner-area { display:none;}
}