/* --- 공통 CSS -- */
.layout-home .header {
    padding: 0 20px;
    visibility: visible;
}

.layout-home a:hover, .layout-home a:active {
    text-decoration: none;
}

.layout-home .footer {
    padding: 0 20px;
    visibility: visible;
}

.layout-home .main {
    display: flex;
    flex-direction: column;
}

.layout-home {
    background-image: linear-gradient(to bottom, #fff 55%, #f2eeea 45%);
}

.layout-home > .layout {
    padding: 0;
}

/* Beinfait */
.topArrow {
    font-family: 'Prata';
    font-weight: 400;
    font-size: 22px;
    color: #1f1f1f;
}

.layout-home #headerArrow {
    display: none;
}

/* --- 메인 CSS --- */
.layout-home .home {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    z-index: 2;
}

.layout-home .home_main_backcolor {
    position: fixed;
    width: 100%;
    height: 100vh;
    top: 55%;
    bottom: 1px;
    left: 0;
    background: #f2eeea;
    z-index: 1;
}

.layout-home .home_main_letter {
    display: flex;
    flex-direction: row;
    justify-content: center;
    font-family: 'Spoqa Han Sans Neo';
    font-style: normal;
    font-size: 18px;
    line-height: 24px;
}

.layout-home .home_letter {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 20px;
}

/* 스크롤 첫번째 */
.layout-home .weather_current {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.layout-home .current_icon {
    width: 90px;
    height: 90px;
}

.layout-home .weather_today {
    font-family: 'Spoqa Han Sans Neo';
    font-weight: 500;
    font-size: 12px;
    color: #FAF3EC;
    margin: 18px 23px;
}

.measure_target {
    font-family: 'Spoqa Han Sans Neo';
    font-weight: 500;
    font-size: 12px;
    color: #FAF3EC;
}

.layout-home .weather_temp_now {
    position: relative;
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 600;
    font-size: 55px;
    color: #fff5f1;
}

.layout-home .temp_now_dot {
    position: absolute;
    font-family: 'Poppins';
    font-weight: 600;
    font-size: 16px;
    color: #FFFFFF;
}

.layout-home .weather_sky {
    margin: 10px auto;
}

.layout-home .weather_etc {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    font-family: 'Noto Sans KR';
    font-style: normal;
    font-weight: 400;
    margin-top: 10px;
}

.layout-home .uv_now, .layout-home .dust_now {
    margin: 5px auto;
}

.layout-home .weather_etc_uv {
    display: flex;
    align-items: center;
    flex-direction: column;
}

.layout-home .etc_uv, .layout-home .etc_dust {
    font-size: 12px;
}

.layout-home .etc_uv_result {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.layout-home .etc_icon {
    width: 25px;
    height: 25px;
    margin-right: 3px;
}

.layout-home .weather_line {
    width: 1px;
    height: 45px;
    border-width: 0;
    color: #fff5f1;
    background-color: #fff5f1;
    margin: 0 20px;
}

.layout-home .weather_etc_dust {
    display: flex;
    align-items: center;
    flex-direction: column;
}

.layout-home .etc_dust_result {
    display: flex;
    flex-direction: row;
    align-items: center;
}

/* ----- 스크롤 두번째 ----- */
.layout-home .scroll_result_chart {
    margin-top: 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    font-weight: 700;
    line-height: 16px;
}

.layout-home .chart_title {
    color: #fff;
    margin-bottom: 8px;
    margin: 10px 21px;
    font-weight: 700;
    font-size: 15px;
    line-height: 19px;
}

.layout-home .chart_info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
}

.layout-home .info_name {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    font-weight: 700;
    font-size: 13px;
    color: #5f5753;
}

/* 그래프 감싼거 */
.layout-home .info_gage_wrap {
    width: 150px;
    height: 10px;
    background: #dca796;
    border-radius: 20px;
    position: relative;
}

/* 그래프 */
.info_gage_rev {
    background: #c7977b;
    border-radius: 0 20px 20px 0;
    height: 10px;

    position: absolute;
    left: 50%;
    transform: translateX(-100%) rotateY(180deg);
}

.info_gage {
    background: #c7977b;
    border-radius: 0 20px 20px 0;
    height: 10px;

    position: absolute;
    left: 50%;
}


.startP {
    width: 0 !important;
}