/* Style */

html {
    font-size: 10px;
    background: #020E2D;
}

body {
    overflow-x: hidden;
    font-size: 1rem;
    /* background: #020E2D; */
}

body.hidden {
    position: fixed;
    overflow-y: hidden;
    touch-action: none;
}

main {
    font-size: 1.4rem;
    line-height: 2.1rem;
    display: block;
}

a,
button {
    color: #6d7283;
}

p,
li {
    word-break: keep-all;
}

.clear {
    clear: both;
}

.clear:after {
    content: "";
    display: block;
    clear: both;
}


/* Layout */

.wrapper {
    width: 100%;
    min-width:360px;
    max-width: 750px;
    margin: 0 auto;
}

.wrapper_flow {
    width: 100%;
    max-width: 750px;
    margin: 0 auto;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

.wrapper_result {
    width: 100%;
    max-width: 750px;
    margin: 0 auto;

}

.row {
    padding: 0 20px;
}

.ban1 {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -10px;
}

.col {
    flex-basis: 50%;
    box-sizing: border-box;
    padding: 10px 10px 20px 10px;
}

footer .info {
    margin-top: 20px;
    padding: 30px 20px 30px;
    background-color: #030a1d;
}

footer .info li {
    display: inline-block;
    padding: 5px 0;
    font-size: 1.1rem;
    margin-right: 10px;
}

footer .info,
.copy {
    font-size: 1rem;
    color: #6d7283;
}

/* 백그라운드 */

.main_bg {
    background: #020E2D url(../img/bg/main_bg.jpg) no-repeat top;
    background-size: 100%;


}
.main_bg2 {
    background: #020E2D url(../img/bg/main_bg2.jpg) no-repeat top;
    background-size: 100%;


}
.login_bg {
    background: #ffffff url(../img/bg/login_bg.png) no-repeat top;
    background-size: 100%;
    height: 100vh;

}

.myinfo_bg {
    background: #020E2D url(../img/bg/myinfo.png) no-repeat top;
    background-size: 100%;

}


/* 폰트사이즈 */

.main_tit {
    font-size: 4.6rem;
    font-family: 'Niconne', cursive;
    font-weight: 100;
    color: #FFE7BF;
}

.sub_tit {
    font-size: 1.4rem;
    margin-top: 1.6rem;
    line-height: 2.3rem;
    font-weight: 200;
    color: #fff;
}

.ban_01 {
    font-size: 1.6rem;
    font-weight: 400;
    color: #E6E7F2;
}

.ban_02 {
    font-size: 1.2rem;
    color: #fff;
}

.ban_03 {
    font-size: 1.2rem;
    color: #98A1BD;
}



/* 헤더 */

.header {
    height: 65px;
    padding: 20px 20px 20px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.header2 {
    height: 65px;
    padding: 20px 20px 20px 20px;
    display: flex;
    justify-content:right;
    align-items: center;
}
.login_header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 65px;
    padding: 20px 20px 20px 20px;

}

.header .aside_toggle {
    font-size: 2.8rem;
    color: #fff;
}

.header .aside_toggle2 {
    font-size: 2.8rem;
    color: #fff;
}

.aside_toggle_ar {
    font-size: 2.8rem;
    color: #ffffff;
}

.aside_toggle_ar2 {
    font-size: 2.8rem;
    color: #3E4958;
}

.aside_toggle_home {
    font-size: 2rem;
    color: #3E4958;
}

.aside_toggle_home2 {
    font-size: 2rem;
    color: #fff;
}

.aside_toggle_back {
    font-size: 2.8rem;
    color: #fff;
}


/* 메인 상단 타이틀 */

.top_tit {
    text-align: center;
    padding-top: 74px;
}

/* 메인 배너 */

.top_banner {
    margin: 45px 0 20px 0;
}

.top_banner .banner_l {
    width: 100%;
}

.mid_banner {
    margin: 5px 0 0px 0;
}

.mid_banner .banner_l {
    width: 100%;
}

.ban_list {
    margin-top: 20px;
}

.ban1 {
    display: flex;
    flex-shrink: 0;
}

.banner {}

.banner .banner_s {
    width: 100%;

}

.banner .banner_b {
    width: 100%;

}

/* 메인 배너 타이틀 */


.ti_area {
    display: flex;
    justify-content: space-between;
    line-height: 1.5;
    margin-top: 5px;
}

.ti_area .heart img {
    width: 1.2rem;
    margin-right: 3px;
}

/* 로그인, 회원가입, 아이디/비번 찾기 */

.login h1 {
    text-align: center;
    ;
    font-size: 2.4rem;
    font-weight: 400;
    color: #000;
    margin: 10px 40px 30px;
}

.login .login_area {
    width: 100%;
}

.login .btn_login {
    display: block;
    padding: 18px 90px;
    background: #8E97FD;
    border-radius: 30px;
    color: #fff;
    font-size: 1.8rem;
    text-align: center;
    margin: 0 auto 30px;
}

.login .int_box {
    border: 2px solid #F2F3F7;
    border-radius: 15px;
    background-color: #F2F3F7;
    margin-bottom: 22px;
}

.login .int_box .field {
    width: 100%;
    background-color: transparent;
    font-size: 1.4rem;
    padding: 20px 20px;
}

.login .find_area {
    display: flex;
    justify-content: space-between;
    padding: 25px 20px;
}

.login .find_area>p {
    font-size: 14px;
    color: #3F414E;
}

.login .join_src {
    display: block;
    text-align: center;
    font-size: 14px;
    color: #3F414E;
    margin-top: 40px;
    padding-bottom:50px;
}

.login .join_src span {
    color: #2f3dda;
}

/* 아이디,비밀번호 찾기 결과(팝업) */

.popup .content {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: absolute;
    top: 30%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 40px 30px;
    border-radius: 30px;
    margin: 0 auto;
    width: 80%;
    background: #fff;
    z-index: 30;
}

.popup .content .flex {
    display: flex;
}

.popup .close a {
    position: absolute;
    top: 3px;
    right: 20px;
    font-size: 2.8rem;
    color: #000;
    z-index: 100;
}


.popup .content .popup_tit {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 0 25px 0;
}


.popup .content .popup_tit h2 {
    font-size: 1.8rem;
    font-weight: 400;
    text-align: center;
    line-height: 1;
}

.popup .content .popup_tit img {
    width: 24px;
    margin-bottom: 15px;
}


.popup .content>p {
    width: 100%;
    font-size: 1.8rem;
    text-align: center;
    padding: 7px 8px;
    background: #8E97FD;
    border-radius: 10px;
    margin-top: 10px;
    color: #fff;
    font-weight: 500;
}

.popup .content .btn_heart {
    width: 100px;
    padding: 8px 18px;
    background: #1F265E;
    color: #fff;
    font-size: 1.6rem;
    border-radius: 20px;
    text-align: center;
    margin: 0 5px;
}

.popup .content .btn_cancel {
    display: block;
    width: 100px;
    padding: 8px 18px;
    background: #808080;
    color: #fff;
    font-size: 1.6rem;
    border-radius: 20px;
    text-align: center;
    margin: 0 5px;
}

.popup .overlay {
    z-index: 10;
    background: #000;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;

}


/* 플로우 01 */

.flow_content_tit {
    width: 90%;
    margin: 110px auto 0px;
    text-align: center;
}

.flow_tit {
    font-size: 2.6rem;
    font-weight: 100;
    color: #FFE7BF;
    line-height: 1.5;
}

.flow_sub_tit {
    font-size: 1.7rem;
    margin-top: 1.3rem;
    line-height: 2.3rem;
    font-weight: 200;
    color: #fff;
}

.btn_next_area {
    text-align: center;
}

.btn_next_area .btn_next {
    width:50%;
    font-size: 1.6rem;
    padding: 18px 30px;
    background: #8E97FD;
    color: #fff;
    border-radius: 30px;
    margin: 30px 0 30px;

}

.btn_next_area>a {
    display: inline-block;
}



/* 플로우 02 카드선택 */

.flow02_content_tit {
    width: 90%;
    margin: 0 auto;
    text-align: center;
    padding-top: 75px;
}

.flow02_tit {
    font-size: 2.6rem;
    font-weight: 100;
    color: #FFE7BF;
    line-height: 1.5;
}

.flow02_sub_tit {
    font-size: 1.6rem;
    margin-top: 1.3rem;
    line-height: 2.3rem;
    font-weight: 200;
    color: #fff;
}

.cards_area {
    width: 100%;
    margin: 0 auto;

}

.cards_list {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-gap: 4px;
    margin-top: 26px;
}


.cards_items img {
    width: 100%;
}







/* 플로우 03 카드선택 */

.flow03_content_tit {
    width: 100%;
    position: absolute;
    top: 38%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.icon_tit {
    display: flex;
    justify-content: center;
}

.icon_tit img {
    width: 36px;
    margin-top: 52px;
}

.icon_area img {
    width: 24%;
}

.icon_area {
    display: flex;
    justify-content: center;
}


.flow03_tit {
    font-size: 1.6rem;
    font-weight: 100;
    color: #ffffff;
    line-height: 1.5;
    margin-top: 20px;
}

/* 로딩페이지 */

.loading {
    margin: 30px auto 0;
    width: 236px;
    height: 170px;

}

.loading img {
    width: 100%;
    border-radius: 20px;
}


/* 결과풀이 */

.result_content_tit {
    width: 100%;
    text-align: center;
}

.result_tit {
    font-size: 2.6rem;
    font-weight: 100;
    color: #FFE7BF;
    line-height: 1.5;
    margin-top: 20px;
}

.result_sub_tit {
    font-size: 1.6rem;
    margin-top: 1.3rem;
    line-height: 2.3rem;
    font-weight: 200;
    color: #fff;
}

.btn_ok_area {
    display: flex;
    justify-content: center;
    padding: 50px 0;
}

.btn_ok {
    width:35%;
    font-size: 1.6rem;
    padding: 18px 20px;
    background: #8E97FD;
    color: #fff;
    border-radius: 30px;
    text-align: center;
    margin: 0 10px;
}

.btn_top {
    width: 35%;
    font-size: 1.6rem;
    padding: 18px 20px;
    background: #7c7c7c;
    color: #fff;
    border-radius: 30px;
    text-align: center;
    margin: 0 10px;
}

.btn_c_area {
    text-align: right;
    font-size: 2.8rem;
}

.btn_close {
    color: #fff;
}

.contents_top_card {
    margin: 0 auto;
    width: 100%;
}

.card_list {
    display: flex;
    justify-content: center;
    grid-gap: 15px;
    margin-top: 10px;
}

.card_item {
    width: 20%;
}

.card_item img {
    width: 100%;
}

.card_list2 {
    width: 20%;
}

.card_item2 {
    display: flex;
    justify-content: center;
    grid-gap: 15px;
    margin-top: 50px;
}

.card_list2 img {
    width: 100%;
}


.card_item>p {
    font-size: 1.2rem;
    color: #fff;
    line-height: 1.5;
    text-align: center;
}

.contents_tit {
    margin-top: 53px;

}

.result_ti {
    font-size: 2.2rem;
    font-weight: 300;
    color: #FFE7BF;
}

.result_ti_one {
    font-size: 2.2rem;
    font-weight: 300;
    color: #FFE7BF;
    margin-top: 30px;
}

.result_scrip {
    font-size: 1.5rem;
    margin-top: 1.6rem;
    line-height: 2.5rem;
    font-weight: 200;
    color: #fff;
    text-align: justify;
    word-break: break-all;
    letter-spacing: -0.5px;


}

.result_sub {

    font-size: 1.4rem;
    margin-top: 1.6rem;
    line-height: 2.3rem;
    font-weight: 100;
    color: #fff;
}

.justone_tit {
    margin-top: 53px;
}

.card_story_area {
    margin-top: 53px;
}

.card_story_tit {
    font-size: 3.8rem;
    color: #fff;
    text-align: center;
    margin-top: 45px;
    font-weight: 100;
    font-family: 'Hurricane', cursive;
}

.card_story_ti {
    font-size: 2.2rem;
    font-weight: 300;
    color: #FFE7BF;
    margin-top: 50px;
}

.result_scrip_one {
    font-size: 1.5rem;
    line-height: 2.3rem;
    font-weight: 100;
    color: #fff;
    letter-spacing: -0.5px;
}

.result_bg {
    background: #020E2D;
    padding: 13px 13px;
    border: 1px solid #929397;
    border-radius: 7px;
    margin-top: 1.6rem;
}

.card_item {
    margin-top: 50px;
}


/* 내 정보 */

.myinfo_contents {
    margin-top:95px;
    padding-bottom:50px;
}

.myinfo_header {
    display: flex;

}

.myinfo_header .myinfo_tit {
    color: #FFE7BF;
    font-size: 1.8rem;
    font-weight: 400;
}

.myinfo_header img {
    width: 20px;
    height: 20px;
    margin-right: 9px;
}

.heart_now h2 {
    font-size: 1.6rem;
    color: #fff;
    font-weight: 100;
    margin: 32px 0 20px;
}

.heart_item {
    display: flex;
    justify-content: space-between;
    padding: 20px 25px;
    border: 1px solid #4C57AD;
    border-radius: 20px;
    background: #020E2D;
}

.heart_item2 {

    justify-content: space-between;
    padding: 20px 25px;
    border: 1px solid #4C57AD;
    border-radius: 20px;
    background: #020E2D;
}




.heart_box {
    display: flex;
    align-items: center;
}

.heart_item span {
    color: #fff;
    font-size: 1.6rem;
}
.heart_item2 span {
    color: #fff;
    font-size: 1.6rem;
}

.heart_item img {
    width: 28px;
    padding-right: 5px;
}

.heart_item2 img {
    width: 28px;
    padding-right: 5px;
}


.heart_item .heart_count {
    padding-right: 10px;

}

.heart_item .btn_pay {
    width: 52px;
    height: 52px;
    background: #1F265E;
    border-radius: 50%;
    padding: 15px 15px;
}






.info_area {
    margin-top: 15px;
}

.info_list {
    display: flex;
    flex-direction: column;
}

.info_list .info_item {
    padding: 15px 20px;
    color: #fff;
    font-size: 1.6rem;
    font-weight: 100;
}

.btn_pay {
    font-size: 1.4rem;
    color: #fff;
    font-weight: 100;
}


/* 결제 및 하트사용내역 */

.pay_history_contents {
    margin-top: 95px;
}

.pay_history_header {
    display: flex;

}

.pay_history_tit {
    color: #FFE7BF;
    font-size: 1.8rem;
    font-weight: 400;
}

.pay_history_header img {
    width: 20px;
    height: 20px;
    margin-right: 9px;
}

.pay_history_now h2 {
    font-size: 1.6rem;
    color: #fff;
    font-weight: 100;
    margin: 32px 0 20px;
}

.tb_style {
    font-size: 1.4rem;
    color: #fff;
    font-weight: 100;

}

.pay_box1 {
    font-size: 1.4rem;
    color: #fff;
    font-weight: 100;
    padding: 15px 10px;
}

.box1_1 {
    font-size: 1.4rem;
    color: #fff;
    font-weight: 100;
    padding: 15px 10px;
}

thead {
    border-top: 1px solid #4C57AD;
    border-bottom: 1px solid #4C57AD;
    text-align: center;
    background: #1F265E;
}

tbody {
    border-bottom: 1px solid #4C57AD;
    text-align: center;
    background: #020E2D;
}


/* 다시보기 */

.replay_history_contents {
    margin-top: 95px;
}

.replay_history_header {
    display: flex;

}

.replay_history_tit {
    color: #FFE7BF;
    font-size: 1.8rem;
    font-weight: 400;
}

.replay_history_header img {
    width: 20px;
    height: 20px;
    margin-right: 9px;
}

.replay_history_now h2 {
    font-size: 1.6rem;
    color: #fff;
    font-weight: 100;
    margin: 32px 0 20px;
}

.btn_replay {
    padding: 8px 12px;
    border-radius: 20px;
    border: 1px solid #4C57AD;
    color: rgb(93, 255, 17);
    font-size: 1.2rem;
}

.txt_red {
    color: rgb(250, 102, 34);
}

/* 탈퇴하기 */

.secession_contents {
    margin-top: 95px;
}

.secession_header {
    display: flex;

}

.secession_tit {
    color: #FFE7BF;
    font-size: 1.8rem;
    font-weight: 400;
}

.secession_header img {
    width: 20px;
    height: 20px;
    margin-right: 9px;
}

.secession_now h2 {
    font-size: 1.6rem;
    color: #fff;
    font-weight: 100;
    margin: 32px 0 20px;
}

.secession_form {
    border-top: 1px solid #4C57AD;
}

.secession_01 {
    display: flex;
    align-items: center;
    color: #fff;
    border-bottom: 1px solid #4C57AD;
    background: #020E2D;
}

.id_item1,
.id_item2 {
    padding: 20px 20px;
}

.id_item1 {
    width: 30%;
}


.secession_int_box {
    border: 1px solid#4C57AD;
    border-radius: 15px;
    background-color: #1F265E;
}


.secession_field {
    width: 40%;
    background-color: transparent;
    font-size: 1.4rem;
    padding: 10px 10px;
    color: #fff;
}

.secession_src {
    margin-top: 40px;
}

.secession_src p {
    color: #fff;
    font-size: 1.2rem;
    font-weight: 100;
}

/* 고객센터 */

.customer_contents {
    margin-top: 95px;
}

.customer_header {
    display: flex;

}

.customer_tit {
    color: #FFE7BF;
    font-size: 1.8rem;
    font-weight: 400;
}

.customer_header img {
    width: 20px;
    height: 20px;
    margin-right: 9px;
}

.customer_now h2 {
    font-size: 1.6rem;
    color: #fff;
    font-weight: 100;
    margin: 32px 0 20px;
}

.customer_01 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #fff;
    border: 1px solid #4C57AD;
    background: #020E2D;
    border-radius: 20px;
    margin-bottom: 10px;
}


.customer_item1,
.customer_item2 {
    padding: 20px 20px;
}

.customer_item1 {
    font-size: 1.4rem;
    font-weight: 100;
    color: #FFE7BF;
}

.customer_item2 {
    font-size: 1.6rem;
    font-weight: 100;
    color: #fff;
}

/* 이용약관 개인정보보호방침 */


.policy_contents {
    margin-top: 95px;
}

.policy_header {
    display: flex;

}

.policy_tit {
    color: #FFE7BF;
    font-size: 1.8rem;
    font-weight: 400;
}

.policy_header img {
    width: 20px;
    height: 20px;
    margin-right: 9px;
}

.policy_now {
    padding: 10px 10px;
    background: #020E2D;
}

.policy_now p {
    font-size: 1.2rem;
    color: #fff;
    font-weight: 100;
}

.policy_now div {
    color: #fff;
}

.policy_now font {
    color: #fff;
}

.policy_now span {
    color: #fff;
}


/* 하트상점 */

.heart_shop_contents {
    margin-top: 95px;
}

.heart_shop_header {
    display: flex;

}

.heart_shop_tit {
    color: #FFE7BF;
    font-size: 1.8rem;
    font-weight: 400;
}

.heart_shop_header img {
    width: 20px;
    height: 20px;
    margin-right: 9px;
}

.heart_shop_now h2 {
    font-size: 1.6rem;
    color: #fff;
    font-weight: 100;
    margin: 32px 0 20px;
}

.heart_shop_item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 25px;
    border: 1px solid #4C57AD;
    border-radius: 20px;
    background: #020E2D;
}

.heart_shop_box {
    display: flex;
    align-items: center;
}


.heart_shop_item span {
    color: #fff;
    font-size: 1.6rem;
}

.heart_item span {
    color: #fff;
    font-size: 1.6rem;
}

.heart_shop_box img {
    width: 28px;
    padding-right: 5px;
}

.heart_shop_count {
    padding-right: 10px;
}

.heart_shop_list {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 25px;
    border: 1px solid #4C57AD;
    border-radius: 20px;
    background: #020E2D;
    margin-bottom: 12px;
}

.heart_shop_list .heart_shop_box span {
    color: #fff;
    font-size: 1.4rem;
}

.heart_shop_list .heart_shop_count {
    color: #fff;
    font-size: 1.4rem;
    font-weight: 100;
}

.heart_shop_list .bonus {
    font-size: 1.2rem;
    padding: 0 8px;
    font-weight: 100;
    color: #fff;
    background: #020E2D;
    border: 1px solid #4C57AD;
    border-radius: 20px;
}

.heart_shop_src {
    font-size: 1.2rem;
    color: #fff;
    font-weight: 100;
    padding: 30px 0 50px;
}

.heart_shop_src span {
    font-size: 1.2rem;
    color: rgb(255, 58, 51);
    font-weight: 100;
}


/* 토글메뉴 */

.toggle_content {
    background: #000;
    position: absolute;
    top: 0;
    left: 0px;
    right: 0px;
    bottom: 0;
    z-index: 100;
    padding-top: 10px;

}

.toggle_close {
    position: absolute;
    top: 10px;
    right: 20px;
}


.btn_toggle_close {
    padding: 5px;
    font-size: 2.8rem;
    color: rgb(255, 255, 255);
    z-index: 100;
}

.toggle_info {
    padding: 20px 0;
    border-bottom: 1px solid #4C57AD;
    background-color: #000;
}

.toggle_info .login_txt {
    color: #FFE7BF;
    font-size: 1.6rem;
    line-height: 3.8rem;
    font-weight: 400;
    width: 100%;
    text-align: center;
}


.toggle_info .logout_txt {
    color: #FFE7BF;
    font-size: 1.6rem;
    line-height: 3.8rem;
    font-weight: 400;
    width: 100%;
    text-align: center;
}

.toggle_info p {
    color: #fff;
    font-size: 1.4rem;
    font-weight: 100;
    width: 100%;
    text-align: center;
}

.toggle_menu {
    margin: 15px 0  50px;
}

.toggle_menu_txt {
    font-size: 1.6rem;
    color: #fff;
    line-height: 5.2rem;
    font-weight: 100;
}

.toggl_icon_tit {
    display: flex;
    justify-content: center;
    background-color: #000;
}

.toggl_icon_tit img {
    margin-top: 20px;
}

/* 오늘의타로 별점 */

.today_star_list {
    margin-top: 30px;
}

.wrap_star {
    margin-bottom: 30px;
}

.star_rating {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 60%;
    margin-bottom: 10px
}

.star_txt {
    font-size: 1.7rem;
    color: #FFE7BF;
    font-weight: 300;
    flex-grow: 1;

}

.star_item {
    display:flex;
    align-items: center;
    flex-grow: 2;


}


.star_item img {
    width: 30%;
}

.star_src {
    font-size: 1.5rem;
    color: #fff;
    font-weight: 100;
}

/* 모바일 메뉴 */
/* 
.navbar {
    top: 0px;
    width: 100%;
    height: 77px;
    position: relative;
    text-align: left;
    padding-top: 30px;
}


.navbar_m {
    right: 20px;
    top: 0px;
}
*/
/*.navbar_m {position:absolute; right:20px; top:30px;} 오른쪽배치*/
input[id="menuicon"] {
    display: none;
    z-index: 2;
}

input[id="menuicon"]+label {
    display: block;
    width: 30px;
    height: 24px;
    position: relative;
    cursor: pointer;
    z-index: 22;
}

input[id="menuicon"]+label span {
    display: block;
    position: absolute;
    width: 100%;
    height: 2px;
    border-radius: 30px;
    background: #fff;
    transition: all .35s;
}

input[id="menuicon"]+label span:nth-child(1) {
    top: 0;
}

input[id="menuicon"]+label span:nth-child(2) {
    top: 50%;
    transform: translateY(-50%);
}

input[id="menuicon"]+label span:nth-child(3) {
    bottom: 0;
}

input[id="menuicon"]:checked+label span:nth-child(1) {
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
}

input[id="menuicon"]:checked+label span:nth-child(2) {
    opacity: 0;
}

input[id="menuicon"]:checked+label span:nth-child(3) {
    bottom: 50%;
    transform: translateY(50%) rotate(-45deg);
}

div[class="sidebar"] {
    width: 100%;
    height: 100vh;
    background: #173d58;
    position: fixed;
    top: 0px;
    left: -100%;
    z-index: 1;
    transition: all .35s;
    padding-top: 55px;
}

input[id="menuicon"]:checked+label+div {
    left: 0;
}

#sbg {
    background-color: #000;
}

.sidebar {
    background-color: #000;
}

.sidebar ul {
    border-top: 0px solid #3c6889;
    background-color: #000;
    padding-bottom:50px;
}

.sidebar ul li {
    padding: 0 20px;
    line-height: 40px;
    border-bottom: 0px solid #3c6889;
}

/*line-height로 메뉴위아래 간격을 조절*/
.sidebar ul a {
    display: block;
    font-size: 16px;
}