@charset "utf-8";
/**
* import
*/
@import url("../../resource/css/style.css?after");
@import url("../../resource/css/reset.css?after");
@import url("../../resource/css/common.css?after");
@import url("../../resource/css/graph.css?after");
@import url("../../resource/css/ui.css?after");
@import url("../../resource/css/layer.css?after");
@import url("../../resource/css/select.css");
@import url("../../resource/css/sms.css");
@import url("../../resource/css/datepicker.css");
@import url("../../resource/css/clone.css");
@import url("../../resource/css/calendar.css");
@import url("../../resource/css/auto_list.css");
@import url("../../resource/css/fonts/pretendard.css?after");


*{box-sizing: border-box;font-family: 'Pretendard', dotum, Helvetica, sans-serif;letter-spacing:-0.2px;}

.pc-hidden{display: none;}
.inner{width: 128rem; box-sizing: border-box; margin: 0 auto}

.txt-primary{color:#7300FF;}
.bg-primary{background-color:#7300FF; color: yellow;}
.bg-primary-line{border: 1px solid #7300FF;}
.btn-primary{background-color:#7300FF; color: yellow; border-color:#7300FF;}
.btn-primary:hover{background-color:#fff; color: #7300FF;}

html {width:100%; font-size:10px; }
body{font-size: 16px; font-family: "Pretendard", sans-serif; }

#wrap{overflow:hidden; position: relative; z-index: 0; width: 100%;}
#container {margin: 0 auto;  background: #fff; padding-top: 10rem;}
#wrap.adm #container{padding: 14rem 0 0rem;}

#header{
    border-bottom: 0.1rem solid #ddd;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 10;
    display: block;
    background-color: transparent;/* 투명도 있는 배경색 */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px); /* 사파리 대응 */
    box-sizing: border-box;
}
h1,
h2{
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}
#header div.header_wrap > div.flex{width: 128rem; margin: 0 auto; box-sizing: border-box}
#header .logo{width: 120px; height: 50px;}
#header .logo a{
    display: block;
    width: 100%;
    height: 100%;
    background: url('./img/pepper_logo.svg') center center no-repeat;
    background-size: contain;
}

#header div.header_wrap div.header-top{border-bottom: 0.1rem solid #ddd; width: 100%; padding: 1rem 6%; box-sizing: border-box;}
#header div.header_wrap div.header-top ul li{position: relative; margin-left: 2rem; padding-left: 2rem; font-size: 1.4rem;}
#header div.header_wrap div.header-top ul li:before{position:absolute; left: 0; top: 50%; transform: translateY(-50%);  display: block; content: ""; width: 0.1rem; height: 1rem; background: #ddd;}
#header div.header_wrap div.header-top ul li:first-of-type:before{display: none;}
#header div.header_wrap div.header-top ul li a{display: flex; align-items: center; width: 100%; height: 100%;}
#header div.header_wrap div.header-top ul li a i{font-size: 1.6rem; margin-right: 1rem;}
#header div.header_wrap div.header-top ul li a:hover{color: #7300FF;}

/* 햄버거 버튼 */
.more-menu{display: none; position: relative; width: 3rem; height: 2rem; transition: all 0.2s; margin-left: 2rem;}
.more-menu span{position: absolute; top: 0; left:0; display: block; width: 100%; height: 0.3rem; background: #222; transition: all 0.2s;}
.more-menu span:nth-child(2){top:50%;}
.more-menu span:last-child{top:100%;}

.more-menu.on span{transform: rotate(45deg); top: 50%;}
.more-menu.on span:nth-child(2){display: none;}
.more-menu.on span:last-child{transform: rotate(-45deg);}

/* 알람 */
.alarm{margin-left: 2rem;}
.alarm .btn{
    position: relative;
    display: block;
    width: 4rem;
    height: 4rem;
    line-height: 4.2rem;
    text-align: center;
    border-radius: 50%;
    border:0.1rem solid #ddd;
    margin-left: 1rem;
    padding: 0;
    font-size: 1.8rem;
    box-sizing: border-box;
}
.alarm .btn b.new-bell{position: absolute; right: 0; top: 0; display: block; width: 0.9rem; height: 0.9rem; border-radius: 50%; background: red;}
.alarm .btn span{
    position: absolute;
    bottom: 3rem;
    left:50%;
    transform: translateX(-50%);
    display: none;
    width: max-content;
    padding:0.5rem 0.8rem;
    line-height: 1;
    background: #222;
    color: #fff;
    border-radius: 0.7rem;
    box-sizing: border-box;
    z-index: 10;
    font-size: 1.4rem;
}
.alarm .btn:hover span{display: block;}

/* 알림 리스트 & 체크 리스트 */
.no-data{text-align: center; padding: 10rem 0; border-bottom: 0.1rem solid #ddd;}
div.box-list ul{}
div.box-list ul li{position: relative; margin-bottom: 1rem;}
div.box-list ul li a{display: block; border-radius: 0.9rem; box-sizing: border-box; border: 0.3rem solid #f5f5f5; overflow: hidden;}
div.box-list div.box{padding: 1.5rem 2rem;}
div.box-list div.box div.goto-page{position: absolute; top: 2rem; right:2rem;}
div.box-list ul li:hover{background: #f5f5f5;}
div.box-list .no-data{border:0 !important; }

/* 알림 리스트 */
div.box-list.alarm-list div.box p.tit{font-size: 1.4rem; color: #222; font-weight: 600;}
div.box-list.alarm-list div.box p.tit span{display: inline-block; margin-left: 1rem;}
div.box-list.alarm-list div.box p.sub{font-size: 1.2rem; color: #666; margin-top: 0.5rem;}
div.box-list.alarm-list .chak{background: #f5f5f5;}
div.box-list.alarm-list .chak div.box p{color: #999 !important;}

/* gnb */
#gnb{}
#gnb > ul{display: flex; width: 100%;}
#gnb > ul > li{position: relative; margin-left: 20px;}
#gnb > ul > li:first-child{margin-left: 0;}
#gnb > ul > li > a{display: block; height: 100px; line-height: 100px; padding: 0 20px; text-align: center; font-weight: 600;}
#gnb > ul > li > ul{display: none; position:absolute; width: 100%; z-index: 100;}
#gnb > ul > li > ul > li > a{display: block; padding: 1.5rem 0; text-align: center; background: #fff; border-top: 1px solid #ddd;}

/* hover 효과 */
#gnb > ul > li:hover > a{color: #7300FF; font-weight: 600; }
#gnb > ul > li:hover > ul{display: block;}
#gnb > ul > li > ul > li:hover > a{background: #ddd;}


/* footer */
#footer{position: relative; background: #333; padding: 50px 0; box-sizing: border-box; }
.footer_wrap{width: 128rem; margin: 0 auto;}
ul.f-nav{margin-top: 2rem;}
ul.f-nav li{margin-right: 1.5rem; padding-right: 1.5rem; border-right: 0.1rem solid #ddd; line-height: 1;}
ul.f-nav li:last-of-type{border-right: 0;}
ul.f-nav li a{display: block; width: 100%; color: rgba(255,255,255,0.5);}
ul.f-nav li.on a{color: #fff; font-weight: 700;}
div.f-info{margin-top: 2rem;}
div.f-info p{color: rgba(255,255,255,0.5); line-height: 1.5; padding-right: 3rem;}

.bottom-fixed{position: fixed; bottom: 20px; right: 20px;}
.bottom-fixed ul li{margin-top: 1rem;}
.bottom-fixed ul li a,
.bottom-fixed ul li button{position: relative; width: 50px; height: 50px; border-radius: 50%; box-shadow: rgba(0,0,0,0.3) 5px 5px 5px; }
.kakaotalk{text-align: center; background: #ffc000;}
.kakaotalk i{line-height: 50px; font-size: 3rem; }
.kakaotalk:hover{}
.goto-top{ background: #fff;}
.goto-top:hover{background: #666; color: #fff;}

.f-logo{width: 120px; height: 50px;}
.f-logo a{display: block; width: 100%; height: 100%; background: url('./img/pepper_logo.svg') 0 0 no-repeat; background-size: contain; background-position: center center; filter: contrast(0.1);}
.copy{font-size: 14px; color: rgba(255,255,255,0.4); margin-top: 20px;}

.bloop{
    width: 80px;
    height: 80px;
    background: url('./img/img-bloop.png') no-repeat center/contain;
    animation: bounce 1s infinite alternate ease-in-out;
    position: fixed;
    top:calc(100vh - 100px);
    right: 4%;
    transition: transform 0.3s ease;
    cursor: pointer;
}

@keyframes bounce {
    0%   { transform: translateY(0); }
    100% { transform: translateY(-20px); }
}

.bloop.hovered {
    transform: translateX(50px); /* 옆으로 밀리는 효과 */
    animation: none; /* 튀는 애니메이션 멈춤 */
}



#search_area{display: none}
div.alarm-check div.list-line > div {filter: grayscale(1); opacity: 0.6;}
div.app-header {position: fixed;top:0; max-width: 720px;width: 100%; height: 56px; background-color: #fff; border-bottom: 1px solid #f5f5f5; z-index: 99;}
.app-header .alarm > .xi-bell-o{position: relative;}
.app-header .alarm.on > .xi-bell-o:after{position: absolute; top: -3px;right: -5px; width: 6px; height: 6px; background-color:#3b82f6; border-radius: 50%; display: block; content: "";}


.tab-bar{position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 720px; z-index: 10; background-color: #fff; border-top: 1px solid #f5f5f5;}
.tab-bar > div.flex > div{width: 25%;}
.tab-bar > div.flex > div > .tab-abj {padding:6px 2px 8px; display: flex; flex-direction: column; justify-content: center; align-items: center; color:#c3c3c3; font-weight: 500; }
.tab-bar > div.flex > div > .tab-abj > i {padding-bottom:4px; font-size:20px;}
.tab-bar > div.flex > div > .tab-abj.on {color:#52525b; }

.search-top-info .btn{  flex: 0 0 auto;}

.reservation-step{padding: 30px 0 20px;}
.reservation-step ul > li{position: relative; width: 100%; display: flex; flex-direction: column; align-items: center;}
.reservation-step ul > li:before{position: absolute; top: 50%; right: 0; width: 100%; content: ""; width: 100%; height: 3px; background:#dbeafe;}
.reservation-step ul > li > .ronund{position: relative; margin: 4px 0 6px; width: 30px; height: 30px; background-color: #fff; border-radius: 100px;text-align: center; border: 5px solid #dbeafe; box-sizing: content-box;}
.reservation-step ul > li > .ronund > i {line-height: 30px; color:#dbeafe;}
.reservation-step ul > li > p {font-size: 14px;}
.reservation-step ul > li.on:before{background-color: #3b82f6;}
.reservation-step ul > li.on > .ronund{border-color: #3b82f6; background-color:#fff; }
.reservation-step ul > li.on > .ronund > i{color: #3b82f6;}
.reservation-step ul > li.on > p {color: #3b82f6; font-weight: bold;}

.menu-title-sticky{border-top: 1px solid #f5f5f5;border-bottom: 1px solid #f5f5f5; position: sticky; z-index: 2; top: 56px; background-color: #fff;}
.menu-title-sticky > ul > li {text-align: center; width: 100%; position: relative;padding: 1.4rem 2rem;color: #999;}
.menu-title-sticky > ul > li.on {color: #222;font-weight: 600;}
.menu-title-sticky > ul > li.on:after {width: 100%;height: 2px;background-color: #222;display: block;content: "";position: absolute;left: 0;bottom: 0;}
/*.menu-title-sticky > ul > li > a{width: max-content;text-align: center;}*/

/* 메뉴 */
.menu-title-sticky > ul > li.on:after {width: 0;height: 0;}
.x-scroll.slider_bar {
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.x-scroll.slider_bar::-webkit-scrollbar {
    display: none;
}

div.goto-page a{display: block; width: 100%; height: 100%;}
div.goto-page span{display: block; width: fit-content; font-size: 1.4rem; font-weight: 200; padding-right: 2rem; box-sizing: border-box; background: url("./img/icon-togo.png") center right no-repeat; background-size: 1.7rem; transition: all 0.2s; line-height: 1}

/* input */
input[type='checkbox']{width: 0; height: 0; display: none;}
input[type='checkbox'] + label{position: relative; padding-left: 3rem; font-size:1.8rem; }
input[type='checkbox'] + label:before{
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    display: block;
    content: "";
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.5rem;
    border: 0.1rem solid #ddd;
    box-sizing: border-box;
}
input[type='checkbox'] + label:after{
    position: absolute;
    left:0.3rem;
    top: 50%;
    transform: translateY(-50%);
    display: block;
    content: '\e928';
    font-family: xeicon;
    font-size: 2rem;
    color: #999;
}
input[type='checkbox']:checked + label:before{border-color: #7300FF; background: #7300FF;}
input[type='checkbox']:checked + label:after{color: yellow}

input[type='radio']{width: 0; height: 0; display: none;}
input[type='radio'] + label{position: relative; padding-left: 3rem; font-size:1.8rem; }
input[type='radio'] + label:before{
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    display: block;
    content: "";
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    border: 0.1rem solid #ddd;
    box-sizing: border-box;
}
input[type='radio'] + label:after{
    position: absolute;
    left:0.5rem;
    top: 50%;
    transform: translateY(-50%);
    display: block;
    content: '';
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    background: #f5f5f5;
    box-sizing: border-box;
}
input[type='radio']:checked + label:before{border-color: #7300FF;}
input[type='radio']:checked + label:after{background: #7300FF;}


/* 개인정보처리방침 */
#privacy{}
#privacy p.tit{font-size: 2rem; font-weight: 600; margin-bottom: 2rem;}
#privacy div.box.bg-gray-50{padding: 2rem; box-sizing: border-box;}
#privacy > ul > li{margin-top: 3rem; font-size: 1.4rem;}
#privacy > ul > li > p{font-weight: 600; font-size: 1.8rem; }
#privacy > ul > li p.sub{font-weight: 400; font-size: 1.4rem; margin-top: 1rem;}
#privacy > ul > li p.txt-red{padding: 1rem; background: #f5f5f5; border-radius: 0.5rem;  font-size: 1.4rem; margin-top: 1rem;}
#privacy > ul > li ol{padding-left: 1.5rem;}
#privacy > ul > li ol li{list-style: auto;  margin-top: 1rem;}
#privacy > ul > li ol li ul{padding-left: 1.5rem;}
#privacy > ul > li ol li ul li{list-style: circle}
#privacy table{width: 100%; border-top: 0.1rem solid #ddd; border-bottom: 0.1rem solid #ddd; border-spacing:0; margin-top: 1rem;}
#privacy table th,
#privacy table td{padding: 1rem; box-sizing: border-box; border-right: 0.1rem solid #ddd;}
#privacy table th:first-of-type,
#privacy table td:first-of-type{border-left: 0.1rem solid #ddd;}
#privacy table th{background: #f5f5f5}
#privacy table td{border-top: 0.1rem solid #ddd;}

/* 서브 페이지 공통 */
#section-wrap{margin:5rem 0 0;}
#section-wrap .page-tit{font-size: 2.6rem; font-weight: 800; line-height: 4rem; }
#section-wrap .page-location span{display: inline-block; padding: 0 1rem; margin-bottom: 4rem;}

/* 게시판 공동 */
.search{border-bottom: 0.3rem solid #f5f5f5; padding:0 0 3rem; box-sizing: border-box; margin-bottom: 3rem;}
.search .btn{line-height: 1; font-size: 1.4rem; font-weight: 500;}

.search .input-box{border-bottom: 0.2rem solid #f5f5f5; margin-right: 2rem; height: 4rem; box-sizing: border-box}
.search .input-box input{line-height: 4rem; font-size: 1.6rem}
.search form fieldset dl dt{width: 9%; min-width: 8rem; font-size: 1.4rem;}
.search form fieldset dl dd{width: 91%;}

.search .btn.btn-search{ margin-right: 1rem; background:#333; color: #fff}
.search .btn.btn-reset{background: #f5f5f5; color: #666}

.category-tab li{margin-right: 1rem;}
.category-tab li a{display: block; background: #f5f5f5; color: #999; font-size: 1.6rem; padding: 0.8rem 1.5rem; border: 0.1rem solid #ddd; border-radius: 4rem; width: max-content; box-sizing: border-box;}
.category-tab li a:hover,
.category-tab li.on a{background: #fff; color: #1e3682; border-color: #1e3682;}

input.datetime{border-bottom: 0.1rem solid #ddd; box-sizing: border-box; padding-right: 4rem;}
input.datetime + label.btn-datetime{border-bottom: 0; margin-left: -4rem;}
.search input.datetime{line-height: 4rem;}
.search .btn.btn_period{line-height: 4rem;    padding: 0 1rem;}

.select-area{
    position: relative;
    box-sizing: border-box;
    margin-right: 1rem;
    border-radius: 0.5rem;
    width: fit-content;
}
.select-area:before{
    position: absolute;
    right: 1rem;
    line-height: 4rem;
    content: "\e942";
    font-size: 1.6rem;
    font-family: xeicon;
}
.select-area select{
    appearance: none; /* 기본 스타일 제거 */
    -webkit-appearance: none; /* WebKit 브라우저 (Chrome, Safari) */
    -moz-appearance: none; /* Firefox */
    padding: 0 4rem 0 1rem;
    line-height: 4rem;
    height: 4rem;
    background: none;
}


.list{}
.list-top{margin-bottom: 3rem;}
.list-top .left{width: fit-content;}
.list-top .right{}
.list-header{}
.list-header > ul > li{text-align: center}
.list-body{font-size: 1.8rem; margin-top: 1rem; border-top:0.1rem solid #222; border-bottom: 0.1rem solid #222;}
.list-body > ul > li > a{display: block; width: 100%; height: 100%; border-bottom: 0.1rem solid #ddd}
.list-body > ul > li:last-of-type > a{border-bottom: 0}
.list-body > ul > li > a > ul > li{padding: 3rem 0; box-sizing: border-box; text-align: center}

.pagination{display: flex; justify-content: center}
.pagination ul li{border-radius: 0;}

.view{}
.view-box{border-bottom:0.3rem solid #f5f5f5;}
.view-box .view-info{ padding-bottom: 3rem}
.view-box .view-info p{font-size: 4.6rem; font-weight: 600;}
.view-box .view-info p span{display: block; font-size: 1.8rem; margin: unset;}
.view-box .view-info dl{font-size: 1.6rem; margin-top: 2rem; align-items: center}
.view-box .view-info dl dt{color: #666; padding:0.5rem 1rem; border-radius: 0.5rem; background: #f5f5f5; font-size: 1.4rem;}
.view-box .view-info dl dd{padding: 0 2rem 0 1rem;}
.view-box div.view-content{border-top: 0.3rem solid #f5f5f5;  padding-top: 3rem; min-height: 15rem;}

.view .view-file{padding:1rem 0; box-sizing: border-box; border-top: 0.3rem solid #f5f5f5; }
.view .view-file p{font-size: 1.2rem;}
.view .view-file ul{}
.view .view-file ul li{}
.view .view-file ul li a{text-decoration: underline;}
.view .view-file ul li a strong{}
.view .view-file ul li a span{}
.view .around{}
.view .around ul{display: flex; border-bottom: 0.3rem solid #f5f5f5; margin-bottom: 2rem;}
.view .around ul li{width: 50%;}
.view .around ul li a,
.view .around ul li span{display: flex; width: 100%; padding: 1rem 0rem 1rem; box-sizing: border-box; }
.view .around ul li em{font-style: unset; color: #222}

.view .around ul li.prev{}
.view .around ul li.prev em{margin-right: 1rem;}
.view .around ul li.next a,
.view .around ul li.next span{text-align: right; flex-direction: row-reverse; }
.view .around ul li.next em{margin-left: 1rem;}

.view .around ul li.prev span,
.view .around ul li.next span{color: #999}

.view-footer{display: flex; justify-content: space-between}
.view-footer .left .btn.btn-modify{margin-right: 1rem;}
.view-footer.ver2{padding-top: 3rem; border-top: 0.1rem solid #ddd;}
.view-footer.ver2 .btn:not(:first-of-type){margin-left: 1rem;}



@media screen and (max-width:1279px){
    /* 노트북 */
    .inner{width: 100%; min-width: 28rem; padding: 0 4%; box-sizing: border-box;}
    .pc-hidden{display: block}
    .m-hidden{display: none;}

    #header{}
    #header div.header_wrap > div.flex{position: relative; width: 100%; padding:1rem 4%; box-sizing: border-box}
    #header div.header_wrap > div.flex:last-of-type{height: 8rem;}
    #header .logo {width: 12rem; height: 100%;}

    #container{padding-top: 8rem;}

    .more-menu{display: block}

    #gnb {
        display: block;
        position: absolute;
        width: 100%;
        top: 8rem;
        height: calc(100vh - 8rem);
        background: #fff;
        right: -100%;
        border-top: 0.1rem solid #ddd;
        padding: 0 4% 7rem;
        box-sizing: border-box;
        overflow: scroll;
        transition: all 0.2s;
    }
    #gnb > ul{display: block;}
    #gnb > ul > li{border-bottom: 0.1rem solid #ddd; margin-left: 0;}
    #gnb > ul > li > a{text-align: left; padding: 2rem 4%; height: auto; line-height: 1.3}
    #gnb > ul > li > ul{display: block; position: unset}
    #gnb > ul > li > ul > li > a{text-align: left; padding: 1.5rem 6%;}

    #header.open:before{display: none;}
    #header.open #gnb{right: 0;}

    .footer_wrap{width: 100%; padding: 0 4%; box-sizing: border-box}

    #section-body{padding:0 4%}
    .lnb{}
    .lnb .inner{padding: 0;}
    .lnb .home{display: none}
    .lnb > .inner > ul:first-of-type{display: none;}
    .lnb > .inner > ul:last-of-type{width: 100%; border-right: 0}
    .lnb > .inner > ul > li a{width: 100%; border-right: 0}
    .lnb ul li ul{width: 100%;}


}
@media screen and (max-width:1203px){


    div.f-info > div.flex{display: block;}
    div.f-info > div.flex p{margin-top: 1rem; word-break: keep-all}
}
@media screen and (max-width:839px){
    ul.f-nav{flex-wrap: wrap}
    ul.f-nav li{width: calc(100%/3); padding-right: 0; margin-right: 0; box-sizing: border-box; border-top: 0.1rem solid #999; border-bottom: 0.1rem solid #999;}
    ul.f-nav li a{text-align: center; padding: 1rem; box-sizing: border-box}
    ul.f-nav li:nth-child(odd){}

    .list-header{display: none}
    .list-header > ul.flex,
    .list-body > ul > li ul.flex{flex-wrap: wrap;}
    .list-body > ul > li > a{padding:2rem 1rem; box-sizing: border-box}
    .list-body > ul > li > a > ul > li{padding: 0; text-align: left !important;}
    .list-body > ul > li > a > ul > li.row-no{width: 10% !important;}
    .list-body > ul > li > a > ul > li.row-title{width: 90% !important;}
    .list-body > ul > li > a > ul > li:nth-child(n+3){padding:0.5rem 1rem !important; background: #f5f5f5; border-radius: 0.5rem; margin-top: 1rem; margin-right: 2rem; width: fit-content !important; font-size: 1.2rem !important;}

}
@media screen and (max-width:599px){
    #header .logo{width: 10rem}

    #section-wrap{margin: 1rem 0;}

    ul.f-nav{display: block;}
    ul.f-nav li{width: 100%; border-bottom:0; border-right: 0;}
    ul.f-nav li:last-of-type{border-bottom: 0.1rem solid #999;}
    ul.f-nav li a{text-align: left}

    /* 게시판 view */
    .view-box .view-info dl{flex-wrap: wrap;}
    .view-box .view-info dl dt{width: 30%; margin-bottom: 1rem;}
    .view-box .view-info dl dd{width: 70%; margin-bottom: 1rem;}
    .view .around ul{flex-wrap: wrap;}
    .view .around ul li{width: 100%;}
    .view .around ul li a,
    .view .around ul li span{padding: 1rem;}
    .view .around ul li.next{border-top: 0.1rem solid #ddd;}
    .view .around ul li.next a,
    .view .around ul li.next span{flex-direction: unset}
    .view .around ul li.next em{margin-left: 0; margin-right: 1rem;}

    input[type='radio'] + label{font-size: 1.4rem;}
}

@media screen and (max-width:300px) {
    .f-logo {width: 100%;}
    ul.f-nav li a {font-size: 1.4rem;}
}