* {
    --common-width : 800px; /* 최대넓이 */
    --header-height: 6rem; /* 상단바 높이 */
    --footer-height: 6.5rem; /* 하단바 높이 */
}
main {
    width: 100%;
    margin: 0 auto;
    min-height: 100vh;
    max-width: var(--common-width);
    padding-top: var(--header-height);
    padding-bottom: var(--footer-height);
}
header {width: 100%;z-index: 100;height: var(--header-height);max-width: var(--common-width);display: flex;justify-content: space-between;align-items: center;position: fixed;left: 50%;top: 0;transform: translateX(-50%);transition: .3s cubic-bezier(0.075, 0.82, 0.165, 1);background-color: #fff;}
header.home {
    background-color: #d2d1d1;
}
header.color {
    transform: translate(-50%, -100%);
}
header h1 {color: #383838;line-height: 1.4;font-size: 1.8rem;font-weight: bold;}
header h1 img {height: calc(var(--header-height) / 2);width: fit-content;object-fit: contain;margin: 0 1.5rem;}
header.home h1 img {
    filter: brightness(.8);
}
header .plus {
    height: var(--header-height);
    width: calc(var(--header-height) / 1.3);
    display: flex;align-items: center;justify-content: center;flex-direction: column;gap: .5rem;
    margin-right: 1rem;
    font-size: 1.2rem;
    font-weight: 800;
    color: #383838;
}
header .plus img {width: 2rem;height: 2rem;object-fit: contain;}
header .prev {
    cursor: pointer;
    height: var(--header-height);
    width: calc(var(--header-height) / 1.1);
    background: url(../img/back-arrow.png) no-repeat center / 1.8rem;
}
header .dummy {
    height: var(--header-height);
    width: calc(var(--header-height) / 1.3);
}
header .home img {
    height: calc(var(--header-height) / 2);
    width: fit-content;
    object-fit: contain;
    margin: 0 1.5rem;
}
header span {
    display: flex;align-items: center;
}



footer {
    width: 100%;
    z-index: 100;
    position: fixed;
    left: 50%;bottom: 0;
    background-color: #fff;
    height:var(--footer-height);
    transform: translateX(-50%);
    max-width: var(--common-width);
}
footer ul {
    display: flex;justify-content: space-between;align-items: center;
    height: 100%;width: 100%;
}
footer li {height: 100%;width: 100%;}
footer a {
    color: #cdcdcd;
    font-size: 1.2rem;
    padding-top: 3.5rem;
    position: relative;
    height: 100%;width: 100%;
    transition: .3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    display: flex;justify-content: center;align-items: center;
}
footer a.on {color: #e94057;}
footer a::before {
    content: "";
    position: absolute;
    left: 50%;top:1rem;
    transform: translateX(-50%);
    width: 3.5rem;height: 2.8rem;
}
footer li:nth-of-type(1) a::before {background: url(../img/icon-off-1.png) no-repeat center / contain;}
footer li:nth-of-type(2) a::before {background: url(../img/icon-off-2.png) no-repeat center / contain;}
footer li:nth-of-type(3) a::before {background: url(../img/icon-off-3.png) no-repeat center / contain;}
footer li:nth-of-type(4) a::before {background: url(../img/icon-off-4.png) no-repeat center / contain;}
footer li:nth-of-type(1) a.on::before {background: url(../img/icon-fill-1.png) no-repeat center / contain;}
footer li:nth-of-type(2) a.on::before {background: url(../img/icon-fill-2.png) no-repeat center / contain;}
footer li:nth-of-type(3) a.on::before {background: url(../img/icon-fill-3.png) no-repeat center / contain;}
footer li:nth-of-type(4) a.on::before {background: url(../img/icon-fill-4.png) no-repeat center / contain;}


/* ================================= */
.title {margin: 1.5rem;display: flex;justify-content: space-between;align-items: end;}
.title h2 {font-size: 1.8rem;font-weight: 800;color: #e83850;line-height: 1.4;}
.title h2 b {line-height: inherit;font-weight: 800;font-size: 2.2rem;color: #E8364F;display: block;}
.title a {font-size: 1.4rem;color: #ccc;margin-bottom: .8rem;}


/* ================================= */
#home {padding-top: 0;}
#home .graySearch {
    position: relative;
    padding: 6rem 0 4rem;
    background-color: #d2d1d1;
}
#home .graySearch::after {
    content: "";
    position: absolute;
    border-radius: 3rem 3rem 0 0;
    left: 0;bottom: -1rem;
    height: 4rem;width: 100%;
    background-color: #fff;
}
#home .soon {
    border-bottom: .5rem solid #ccc;
}
#home .soon .title h2 {color: #666;width: calc(100% - 5rem);}
#home .soon .title h2 b {margin-top: .5rem;}
/* .chengs {margin-bottom: 4rem;} */
.chengs .cheng {
    cursor: pointer;
    padding: 1rem;
    margin: 1.5rem;
    position: relative;
    border-radius: 1.5rem;
    border: 1px solid #e8e8e8;
    box-shadow: .1rem .1rem .3rem rgba(0, 0, 0, 0.1);
}
.chengs .cheng h3 {
    font-size: 1.8rem;
    font-weight: 800;
    line-height: 1.4;
    color: #383838;
    padding: .5rem 0;
    margin-bottom: 1rem;
    word-break: break-all;
    display: flex;justify-content: space-between;
    border-bottom: 1px solid #e8e8e8;
}
.chengs .cheng h3 b {
    font-size: 1.4rem;
    font-weight: 800;
    color: #e93e55;
    border-radius: 10rem;
    height: auto;
    height: fit-content;
    display: flex;align-items: center;
    padding: .5rem 1rem;
    margin-bottom: .5rem;
    background-color: #ffefef;
}
.chengs .cheng h3 b.ending {
    border: 1px solid #e93e55;
}
.chengs .cheng p {
    font-size: 1.6rem;
    color: #737373;
    line-height: 1.4;
    margin-top: .5rem;
}
.chengs .cheng p b {
    line-height: inherit;
    font-weight: inherit;
    font-size: inherit;
    color: inherit;
}
.chengs .cheng p .blue {color: #1a1aff;}
.chengs .cheng p .red {color: #ff0000;}
.chengs .cheng p .none {color: #ddd;}
.chengs .cheng .flex {display: flex;}
.chengs .cheng div {display: flex;gap: 1.5rem;}
.chengs .cheng div > span {width: 100%;}
.chengs .cheng div > span p {
    display: flex;justify-content: space-between;
    word-break: break-all;
}
.chengs .cheng .favorite {
    z-index: 90;
    position: absolute;
    right: 0;bottom: 0;
}


/* IPO 위클리 스케줄 */
#home .plan {
    border-bottom: .5rem solid #ccc;
    padding: 1.5rem 0 2rem;
}
.homeCal {
    padding: 0 1.5rem;
}
.homeCal .days {
    margin-bottom:4rem;
    display: flex;justify-content: space-between;align-items: center;
}
.homeCal .days .day {
    font-size: 1.6rem;text-align: center;
    border-radius: 10rem;
    padding: 1.3rem 0;
    width: 4.5rem;
    position: relative;
    font-weight: bold;
    display: flex;flex-direction: column;align-items: center;
}
.homeCal .days .day.on {
    background-color: #e94057;
    color: #fff;
}
.homeCal .gogos {}
.homeCal .gogos .gogo, .homeCal .gogos .gogoNo {
    font-size: 1.6rem;
    color: #777;
    display: flex;
    gap: 1rem;
    margin: 1rem 0;
    padding: 2rem 1.5rem;
    border-radius: 1.5rem;
    border: 1px solid #e8e8e8;
    box-shadow: .1rem .1rem .3rem rgba(0, 0, 0, 0.1);
}
.homeCal .gogos .gogoNo {
    justify-content: center;
}
.homeCal b {
    line-height: inherit;
    font-weight: inherit;
    font-size: inherit;
    color: inherit;
    text-align: center;
    margin-bottom: .5rem;
}
.homeCal em {
    display: block;
    position: absolute;
    border-radius: 10rem;
    height: .6rem;width: .6rem;
    background-color: #e94057;
    left: 50%;bottom: .3rem;transform: translateX(-50%);
}
.homeCal .day.on em {
    background-color: #fff;
}


/* 신규 상장 */
#home .new {padding: 2rem 0;}



.cheng_swiper {}
.cheng_swiper .swiper-wrapper {
    height: fit-content;
    padding: 0 1.5rem 4rem;
}
.cheng_swiper .swiper-slide {
    padding: 2rem 1rem;
    border-radius: 1.5rem;
    border: 1px solid #e8e8e8;
    box-shadow: .1rem .1rem .3rem rgba(0, 0, 0, 0.1);
}
.cheng_swiper .swiper-slide h3 {
    color: #111;
    font-size: 1.6rem;
    font-weight: bold;
    margin-bottom: 1rem;
    word-break: break-all;
    display: flex;justify-content: space-between;align-items: center;
}
.cheng_swiper .swiper-slide h3 b {
    color: #fff;
    font-weight: bold;
    font-size: 1.8rem;
    padding: .5rem 1rem;
    border-radius: 10rem;
    background-color: #f16e24;
    min-width: fit-content;
}
.cheng_swiper .swiper-slide p {
    font-size: 1.6rem;
    color: #111;
    line-height: 1.4;
}


.swiper-horizontal>.swiper-scrollbar, .swiper-scrollbar.swiper-scrollbar-horizontal {
    width: calc(100% - 3rem);
    left: 50%;
    height: .5rem;
    transform: translateX(-50%);
}
.swiper-scrollbar-drag {
    border-radius: 0;
    background: linear-gradient(30deg, #871a81 0%, #f16a20 100%);
}

/* ================================= */
form {display: flex;margin: 2rem 1.5rem;position: relative;}
input[type=text] {
    width: 100%;
    height: 4.5rem;
    color: #333;
    padding: 0 1.5rem;
    font-size: 1.6rem;
    border-radius: 1.5rem;
    border: 2px solid #e2607c;
}
input[type=text]::placeholder {color: #c2a5ab;}
input[type=submit] {
    position: absolute;
    top: 50%;right: 0;
    height: 4rem;width: 4rem;
    transform: translateY(-50%);
    border-radius: 0 1.5rem 1.5rem 0;
    background: url(../img/search.png) no-repeat center / 2rem;
}


/* ================================= */
#plan {}
#plan .tabs {
    display: flex;
    border-radius: 10rem;
    background-color: #ffefef;
    width: 15rem;
}
#plan .tabs a {
    width: 50%;
    margin: .4rem;
    font-size: 1.8rem;
    color: #b8979e;
    font-weight: bold;
    border-radius: 10rem;
    display: flex;justify-content: center;align-items: center;
    height: 3.5rem;
    position: relative;
}
#plan .tabs a.on {
    color: #e83850;
    background-color: #fff;
    box-shadow: .1rem .1rem .2rem rgba(0, 0, 0, .2);
}
#plan .setting {
    margin: 1.5rem;
    font-size: 1.6rem;
    display: flex;align-items: center;
}
#plan .setting img {width: 3rem;margin-right: .6rem;}




/* ================================= */
#result_count {font-size: 1.4rem;color: #777;line-height: 1.2;padding: 0 1.5rem;text-align: center;margin: 1rem 0;}
#paging {display:flex;justify-content: center;align-items: center;gap: 1rem;margin: .5rem 0 1rem;order: 1;}
#paging a {font-size: 1.8rem;padding: .5rem;color:#ccc;}
#paging a.on {font-weight: bold;color: #444;}
#paging img {
    height: 1.5rem;
}



/* ================================= */
#customSwiper {
    display: flex;
    padding: 1.5rem;
    position: relative;
    border: 1px solid #ccc;
}
#customSwiper .slide {
    padding: 1rem;
    left: 0;top: 0;
    position: absolute;
    border-radius: 1rem;
    width: 100%;height: 10rem;
    border: 1px solid #e8e8e8;
    box-shadow: .1rem .1rem .3rem rgba(0, 0, 0, 0.1);
}
#customSwiper .slide:nth-of-type(2) {transform: translate(100%, 0);}
#customSwiper .slide:nth-of-type(3) {transform: translate(200%, 0);}




/* modal_gongmo */
#modal_gongmo .inner {
    position: fixed;
    left: 50%;
    top: 50%;
    width: calc(100% - 3rem);
    z-index: 999;
    padding: 1.5rem;
    overflow: hidden;
    border-radius: 1rem;
    transform: translate(-50%,-50%);
    background: rgba(255, 255, 255, .97);
    box-shadow: 0 0 2rem rgba(0, 0, 0, .1);
}
#modal_gongmo .bar_wrap {
    padding: 1rem 0 .5rem 0;
    height: 5rem;
    margin-bottom: 2rem;
    font-weight: 300;
    font-size: 1.6rem;
    text-align: center;
    line-height: 1.2;
    color: #5c5c5c;
    border-bottom: 1px solid #eee;
    display: flex;justify-content: space-between;align-items: center;
}
#modal_gongmo .bar_wrap h3 {
    font-size: 1.8rem;
    font-weight: bold;
}
.gogosub {}
.gogosub li {
    display: flex;gap: 1rem;
    margin: 1rem 0;
    padding: 1.5rem 0;
    border-radius: 1.5rem;
    border: 1px solid #e8e8e8;
    box-shadow: .1rem .1rem .3rem rgba(0, 0, 0, 0.1);
}
.gogosub span {
    line-height: 1.2;
    font-size: 1.6rem;
    width: fit-content;
    padding: 0 1rem;
    color: #777;
    display: flex;align-items: center;
}
.gogosub span:nth-of-type(1) {
    width: 6rem;
    justify-content: center;
    text-align: center;
    border-right: 1px solid #777;
}
.gogosub span:nth-of-type(2) {
    min-width: 10rem;
}
#modal_gongmo .close {width: 2rem;height: 2rem;background: url(../img/close.png) no-repeat center / 1.5rem;}
#modal_gongmo .outer {
    top: 0;
    left: 0;
    z-index: 998;
    position: fixed;
    min-width: 100vw;
    min-height: 100vh;
    background: rgba(0, 0, 0, 0.3);
}









/* company */
#company {}
#company p {
    font-size: 1.6rem;
    line-height: 1.4;
    color: #aaa;
}
#company p b {
    line-height: inherit;
    font-weight: 800;
    font-size: inherit;
    color: #111;
}
#company section {
    margin: 1.5rem;
    position: relative;
}
#company section.liner {
    padding-bottom: 4rem;
}
#company section h3 {
    line-height: 1.2;
    font-size: 1.8rem;
    font-weight: bold;
    color: #6a545a;
    margin-top: 2rem;
    display: flex;justify-content: space-between;
}
#company section h3 em {
    line-height: inherit;
    font-weight: inherit;
    font-size: 1.4rem;
    color: #aaa;
}
#company .title {
    padding-bottom: 1rem;
    border-bottom: 1px solid #d7d7d7;
}
#company .title h2 {
    line-height: 1.2;
    font-weight: bold;
    font-size: 2rem;
    color: #140c12;
    gap: .3rem;
    width: calc(100% - 3rem);
    word-break: break-all;
    display: flex;flex-wrap: wrap;align-items: end;
}
#company .title h2 em {
    line-height: inherit;
    font-weight: normal;
    font-size: 1.4rem;
    color: #aaa;
}

#company .flex {
    display: flex;
}
#company ul {
    position: relative;
    margin-top: 1.5rem;
    padding-bottom: 1.5rem;
}
#company .liner::after {
    content: "";
    height: .3rem;
    position: absolute;
    left: -1.5rem;bottom: 0;
    width: calc(100% + 3rem);
    background-color: #f2f2f2;
}
#company ul.grayBox {
    
    padding: 1rem;
    margin: 1.5rem 0;
    position: relative;
    border-radius: 1.5rem;
    border: 1px solid #e8e8e8;
    box-shadow: .1rem .1rem .3rem rgba(0, 0, 0, 0.1);
    
}
#company ul.flex {
    padding: 2rem 1rem;
    margin-bottom: 3rem;
    border-radius: 1.5rem;
    background-color: #f9f9f9;
    border: 1px solid #dddddd;
    display: flex;flex-wrap: wrap;gap: 1rem;
}
#company ul.flex span {width: calc(50% - .5rem);}
#company ul.flex span:last-of-type {width: 100%;}
#company ul.flex li b {min-width: 6rem;width: fit-content;margin-right: .5rem;}
#company ul li {
    line-height: 1.4;
    font-size: 1.6rem;
    font-weight: bold;
    margin: 1rem 0;
    color: #322;
    display: flex;
    word-break: break-all;
    display: flex;flex-wrap: wrap;
    
}
#company ul li b {
    line-height: inherit;
    font-weight: inherit;
    font-size: inherit;
    color: #808080;
    display: block;
    width: 10rem;
}
#company table {
    width: 100%;
    margin: 1.5rem 0 3rem;
    border-radius: 1rem;
    border-collapse: separate;
    /* 변경: separate로 설정하여 테이블 셀 간의 경계를 명확히 함 */
    border: 1px solid #ffefef;
    border-spacing: 0; /* 테이블 셀 사이의 간격을 제거 */
    overflow: hidden; /* 테이블 내부 요소가 테두리를 벗어나지 않도록 설정 */
}
#company table tr th {
    font-size: 1.6rem;
    font-weight: bold;
    line-height: 1.4;
    color: #ea465c;
    width: 25%;
    text-align: left;
    padding: 1rem .8rem;
    word-break: break-all;
    background-color: #ffefef;
    border-bottom: 1px solid #fff;
}
#company table tr td {
    font-size: 1.6rem;
    color: #b59199;
    padding: 1rem;
    word-break: break-all;
    background-color: #fff;
    border-top: 1px solid #ffefef;
    border-right: 1px solid #ffefef;
}
#company table tr td:last-of-type {
    border-right: none;
}
#company table tr:first-of-type td {
    border-top: none;
}
#company table tr:first-of-type td {
    color: #e94057;
    font-weight: bold;
    text-align: center;
}
#company table tr:last-of-type td {}


/* 스크랩 모션 */
.favorite {
    height: 4rem;
    width: 4rem;
    display: block;
    cursor: pointer;
    background: url(../img/like-icon-off.png) no-repeat center / 60%;
}
.favorite.on {
    animation: heart .5s cubic-bezier(0.075, 0.82, 0.165, 1);
    background: url(../img/like-icon-fill.png) no-repeat center / 60%;
}
@keyframes heart {
    0% {background-size: 40%;}
    100% {background-size: 60%;}
}



/* 그래프 */
.graph {
    display: flex;
    height: 20rem;
}










/* 검색페이지 search.php */
header.search form {width: 100%;margin-left: 0;}
header.search input {
    box-shadow: .1rem .3rem .3rem rgba(0, 0, 0, .1);
}
#search .tabs {
    display: flex;
}
#search .tabs .tab {
    width: 50%;
    height: 6rem;
    color: #111;
    font-size: 1.6rem;
    font-weight: bold;
    border-bottom: 2px solid #eee;
    display: flex;justify-content: center;align-items: center;
}
#search .tabs .tab.on {
    border-bottom: 2px solid #333;
}
#search .history {}
#search .history li {
    display: flex;gap: 1rem;
}
#search .content {
    margin-top: 1.5rem;
}
#search .content .top_content {
    margin: 2rem 1.5rem;
    display: flex;justify-content: space-between;align-items: center;
}
#search .content h2 {
    font-size: 1.8rem;
    font-weight: 800;
    color: #654f55;
    line-height: 1.4;
}
#search .content .top_content p {
    font-size: 1.4rem;
    color: #666;
    line-height: 1.4;
}
#search .content ul {}
#search .content ul li {
    margin: 0 1rem;
    position: relative;
    display: flex;align-items: center;
}
#search .content ul li.cheng {margin: 1.5rem;}
#search .content ul li.cheng span {width: 100%;}
#search .content ul li.cheng .favorite {width: 4rem;}
#search .content ul li a {
    line-height: 1.2;
    font-size: 1.6rem;
    width: calc(100% - 8rem);
}
#search .content ul li .del {
    cursor: pointer;
    height: 4rem;width: 4rem;
    transform: translate(0, -50%);
    position: absolute;right: 0;top: 50%;
    background: url(../img/close.png) no-repeat center / 60%;
}
#search .noresult {
    color: #bfbfbf;
    text-align: center;
    font-size: 1.5rem;
}
#search .noresult img {
    display: block;
    margin: 6rem auto 2rem;
    width: 4rem;
}