@charset "utf-8";
/*
body, html { height:100%; min-height:100%; background:#f8f9f9; }
*/
.wrap {
max-width: 420px;
/* height: 100%; */
min-height: 100%;
margin: 0 auto;
border-right: 1px solid #f6f6f6;
border-left: 1px solid #f6f6f6;
background: #fff;
box-shadow: 1px 1px 10px 3px #f5f5f5;
}
.header {
height: 70px;
/* line-height: 70px; */
padding: 0 15px;
box-sizing: border-box;
position: relative;
border-bottom: 1px solid #d4d4d4;
}
.header_fix {
position: fixed;
top: 0;
width: 100%;
max-width: 420px;
background: #fff;
z-index: 1000;
}
.header .btn_menu {
display: inline-block;
margin-top: 22px;
}
.header .btn_back {
display: inline-block;
margin-top: 22px;
}
.header .tit_page {
font-size: 18px;
font-family: sd5;
position: absolute;
left: 50px;
top: 22px;
}
.header .tit_page2 {
font-size: 18px;
font-family: sd5;
position: absolute;
top: 22px;
}
.header h1 a {
position: absolute;
left: 10px;
top: 3px;
}
.header .top_icon_li {
font-size: 0;
position: absolute;
right: 5px;
top: 26px;
}
.header .top_icon_li li img{
vertical-align:bottom;
}
.header .top_icon_li li:nth-child(3) a{
display:block;
height:24px;
line-height:24px;
}
.header .top_icon_li li {
display: inline-block;
margin: 0 7px;
}
.top_nav {
position: relative;
white-space: nowrap;
z-index: auto;
border-bottom: 1px solid #d4d4d4;
}
.top_nav .nav_li {
width: 100%;
height: 50px;
line-height:50px;
}
.top_nav .nav_li>div {
text-align: center;
padding: 0 15px;
height: 50px;
line-height:50px;
box-sizing: border-box;
font-size: 16px;
}
.top_nav .nav_li>div a.on {
display: inline-block;
height: 48px;
border-bottom: 2px solid #25476a;
font-weight: bold;
color: #3d3d3d;
}
.top_nav .nav_li .top_menu_slide {
width: auto !important;
}
section {
padding: 0 15px;
box-sizing: border-box;
}
.banner_01 {
margin-top: 25px;
}
.main_visual {
margin-top: 20px;
position: relative;
}
.main_visual .top_mst_list div[class ^= "top_mst_"]{
height: 250px;
width: 100%;
position:relative;
border-radius: 10px;
background: url(../images/main_top_bg.png) no-repeat;
background-size:cover;
}
.main_visual .top_mst_list div[class ^= "top_mst_"] a img {
position: absolute;
bottom: 0;
left: 0;
max-width:230px;
width: 60%;
z-index: 1;
}
.main_visual .top_mst_list div[class ^= "top_mst_"] img.event_br{
position: unset !important;
width:100%;
max-width:100%;
height:auto;
}
.main_visual .top_mst_list .top_mst_info {
padding: 50px 0 0 220px;
box-sizing: border-box;
}
.main_visual .top_mst_list .top_mst_info p{
color: #fff;
}
.main_visual .top_mst_list .top_mst_info .num {
font-size: 32px;
font-family: sd5;
}
.main_visual .top_mst_list .top_mst_info .name {
font-size: 23px;
font-family: sd4;
margin-top: 0px;
line-height:100%;
width: 150px;
}
.main_visual .top_mst_list .top_mst_info .name span{
font-size: 13px;
}
.main_visual .top_mst_list .top_mst_info ul {
margin-top: 35px;
width: 150px;
}
.main_visual .top_mst_list .top_mst_info ul li {
display:inline-block;
font-size: 12px;
color: #fff;
}
/* 임시버튼 */
.main_visual .btn_roll {
position: absolute;
bottom: 0px;
right: 20px;
}
/*** 메인메뉴수정 **/
.main_menu_icon ul {
font-size: 0;
}
.main_menu_icon ul li {
display: inline-block;
width: calc(1/6 * 100% - 4px);
text-align: center;
margin: 0 2px;
}
.main_menu_icon ul li img {
max-width: 52px;
}
.main_menu_icon ul li a span {
display: block;
font-size: 12px;
letter-spacing: -1px;
margin-top: 10px;
}
.banner_02 {
margin-top:20px ;
}
.bar {
margin: 35px 0;
height: 10px;
background: #f8f8f8;
/*
border-top: 1px solid #e5e5e5;
border-bottom: 1px solid #e5e5e5;
*/
}
.main_tit_area {
position: relative;
}
.main_tit_area h2.tit_01 {
font-size: 20px;
font-family: sd6;
}
.main_tit_area .tit_txt_01 {
font-size: 12px;
color: #787878;
}
.main_tit_area .btn_more_01 {
position: absolute;
right: 0;
bottom: 0;
}
/*
.mst_list {
margin-top: 25px;
}
*/
.main_mst_box {
width: 250px;
border: 1px solid #d4d4d4;
border-radius: 15px;
}
.main_mst_box .mst_tarot01 {
background: url(/images/mst_tarot01.png) no-repeat;
background-size: 100% 100%;
background-position: center top;
text-align: center;
border-radius: 10px 10px 0 0;
}
.main_mst_box .mst_tarot02 {
background: url(/images/mst_tarot02.png) no-repeat;
background-size: 100% 100%;
background-position: center top;
text-align: center;
border-radius: 10px 10px 0 0;
}
.main_mst_box .mst_tarot03 {
background: url(/images/mst_tarot03.png) no-repeat;
background-size: 100% 100%;
background-position: center top;
text-align: center;
border-radius: 10px 10px 0 0;
}
.main_mst_box .mst_tarot04 {
background: url(/images/mst_tarot04.png) no-repeat;
background-size: 100% 100%;
background-position: center top;
text-align: center;
border-radius: 10px 10px 0 0;
}
.main_mst_box .mst_tarot05 {
background: url(/images/mst_tarot05.png) no-repeat;
background-size: 100% 100%;
background-position: center top;
text-align: center;
border-radius: 10px 10px 0 0;
}
.main_mst_box .mst_saju01 {
background: url(/images/mst_saju01.png) no-repeat;
background-size: 100% 100%;
background-position: center top;
text-align: center;
border-radius: 10px 10px 0 0;
}
.main_mst_box .mst_saju02 {
background: url(/images/mst_saju02.png) no-repeat;
background-size: 100% 100%;
background-position: center top;
text-align: center;
border-radius: 10px 10px 0 0;
}
.main_mst_box .mst_saju03 {
background: url(/images/mst_saju03.png) no-repeat;
background-size: 100% 100%;
background-position: center top;
text-align: center;
border-radius: 10px 10px 0 0;
}
.main_mst_box .mst_saju04 {
background: url(/images/mst_saju04.png) no-repeat;
background-size: 100% 100%;
background-position: center top;
text-align: center;
border-radius: 10px 10px 0 0;
}
.main_mst_box .mst_saju05 {
background: url(/images/mst_saju05.png) no-repeat;
background-size: 100% 100%;
background-position: center top;
text-align: center;
border-radius: 10px 10px 0 0;
}
.main_mst_box .mst_photo {
position: relative;
}
.main_mst_box .mst_photo .badge {
position: absolute;
left: 15px;
top: 15px;
}
.main_mst_info {
padding: 15px;
box-sizing: border-box;
min-height: 185px;
}
.main_mst_info .name {
font-size: 17px;
}
.main_mst_info .hash_tag {
font-size: 13px;
color: #b5b5b5;
margin: 5px 0;
width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.main_mst_info .price {
font-family: sd6;
font-size: 17px;
color: #fb9520;
}
.main_mst_info .price .time {
font-family: sd4;
font-size: 12px;
color: #787878;
display: inline-block;
/* margin-left: 5px; */
}
.main_mst_info .btn_tel, .main_mst_info .btn_counsel, .main_mst_info .btn_absent {
margin-top: 20px;
}
.main_mst_info .btn_tel span, .main_mst_info .btn_counsel span, .main_mst_info .btn_absent span {
display: inline-block;
padding-left: 30px;
background: url(/images/icon_tel.png) left center no-repeat;
background-size: 18px;
}
.main_mst_info .data_none{
padding-top: 50px;
box-sizing: border-box;
}
.container {
padding-top: 120px;
}
/* today top 10 */
.container .rank_li .mst_box {
margin-top: 10px;
position: relative;
padding: 0 !important;
border: none !important;
}
.container2 {
padding-bottom: 30px;
}
.container2 .tit_txt_02 {
margin-top: 30px;
font-size: 15px;
}
.rank_li .mst_photo {
width: 140px;
height: 125px;
}
.rank_li .mst_tarot01 {
background: url(/images/mst_tarot01.png) no-repeat;
background-size: 100% 100%;
background-position: center top;
border-radius: 10px;
text-align: center;
}
.rank_li .mst_tarot02 {
background: url(/images/mst_tarot02.png) no-repeat;
background-size: 100% 100%;
background-position: center top;
border-radius: 10px;
text-align: center;
}
.rank_li .mst_tarot03 {
background: url(/images/mst_tarot03.png) no-repeat;
background-size: 100% 100%;
background-position: center top;
border-radius: 10px;
text-align: center;
}
.rank_li .mst_tarot04 {
background: url(/images/mst_tarot04.png) no-repeat;
background-size: 100% 100%;
background-position: center top;
border-radius: 10px;
text-align: center;
}
.rank_li .mst_tarot05 {
background: url(/images/mst_tarot05.png) no-repeat;
background-size: 100% 100%;
background-position: center top;
border-radius: 10px;
text-align: center;
}
.rank_li .mst_saju01 {
background: url(/images/mst_saju01.png) no-repeat;
background-size: 100% 100%;
background-position: center top;
border-radius: 10px;
text-align: center;
}
.rank_li .mst_saju02 {
background: url(/images/mst_saju02.png) no-repeat;
background-size: 100% 100%;
background-position: center top;
border-radius: 10px;
text-align: center;
}
.rank_li .mst_saju03 {
background: url(/images/mst_saju03.png) no-repeat;
background-size: 100% 100%;
background-position: center top;
border-radius: 10px;
text-align: center;
}
.rank_li .mst_saju04 {
background: url(/images/mst_saju04.png) no-repeat;
background-size: 100% 100%;
background-position: center top;
border-radius: 10px;
text-align: center;
}
.rank_li .mst_saju05 {
background: url(/images/mst_saju05.png) no-repeat;
background-size: 100% 100%;
background-position: center top;
border-radius: 10px;
text-align: center;
}
.rank_li .main_mst_info {
position: absolute;
top: 0;
left: 170px;
padding: 0;
}
.rank_li .hash_tag {
width: 97%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.search_rank.rank_li .hash_tag {
width:200px !important;
}
.rank_li .main_mst_info .icon_li li {
display: inline-block;
vertical-align: middle;
font-size: 13px;
color: #787878;
}
.rank_li .main_mst_info .icon_li .icon_star a{
font-size: 13px;
display: inline-block;
padding-left: 25px;
background: url(/images/icon_star.png) 0 2px no-repeat;
background-size:16px ;
}
.rank_li .main_mst_info .icon_li .icon_talk a{
font-size: 13px;
display: inline-block;
padding-left: 25px;
background: url(/images/icon_talk.png) 0 4px no-repeat;
background-size: 17px;
margin-left: 15px;
}
.rank_li.li_02 {
margin-top: 50px;
}
.bg_gray {
background: #f8f8f8;
padding: 30px 15px;
margin-top: 35px;
}
.round_box {
padding: 25px;
background: #fff;
border: 1px solid #d4d4d4;
border-radius: 10px;
box-sizing:border-box;
}
.review_swiper .round_box {
/* height: 357px; */
}
.bg_gray .round_box {
margin-top: 25px;
position: relative;
}
.bg_gray .round_box .btn_more_02 {
position: absolute;
right: 20px;
bottom: 10px;
}
.round_box .main_mst_info {
position: absolute;
top: 30px;
left: 150px;
padding: 0;
}
.round_box .main_mst_info .name {
font-size: 15px;
}
.round_box .main_mst_info .date {
font-size: 13px;
color: #b5b5b5;
}
.writer .icon_star img {
width: 13px;
/* margin: 0 2px; */
vertical-align: middle;
}
.main_mst_info .writer .w_name {
font-size: 13px;
font-family: sd5;
display:inline-block;
padding-left:5px;
}
.round_box .review {
margin-top: 35px;
/* padding-bottom: 20px; */
overflow: hidden;
}
.bg_gray .btn_roll {
margin-top: 20px;
text-align: center;
}
.bg_gray .btn_roll li {
display: inline-block;
}
.bg_gray .btn_roll li img {
width: 8px;
}
.bg_gray .btn_roll li a {
display: inline-block;
padding: 2px;
}
.bg_gray .pd_none{
padding:0 !important;
}
.footer {
margin-top: 10px;
background: #787878;
padding: 20px;
color: #fff;
}
.footer .fr_menu {
width:90%;
margin: auto;
margin-top: 10px;
text-align: center;
font-size:0;
}
.footer .fr_menu li {
display: inline-block;
width:50%;
font-size: 13px;
color: #fff;
margin: 5px 0;
}
.footer .fr_info {
margin-top: 20px;
font-size: 13px;
}
.footer .fr_info .tit {
font-family: sd5;
font-size: 12px;
margin-bottom: 5px;
color: #fff;
}
.footer .fr_info .txt_b {
font-size: 13px;
color: #C9C9C9;
}
.footer .fr_info li {
font-family:sd3;
font-size: 12px;
color: #C9C9C9;
margin-bottom: 0px;
}
/*** 마스터 리스트 ***/
/*
.sub_nav {
margin-top: 20px;
padding: 0 20px;
box-sizing: border-box;
}
.sub_nav li {
display: inline-block;
}
.sub_nav li a {
display: block;
padding: 2px 13px;
position: relative;
}
.sub_nav li a.on{
background: #25476a;
border-radius: 20px;
color: #fff;
}
.sub_nav li a.on span {
position: absolute;
left: 50%;
margin-left: -4px;
bottom: -5px;
display: block;
width: 8px;
height: 8px;
background: url(/images/menu_on_img.png) center no-repeat ;
background-size: 8px;
}
*/
.sub_nav {
margin-top: 20px;
padding: 0 20px 5px 0;
box-sizing: border-box;
}
.sub_nav .sub_m_li div a {
display: block;
padding: 2px 13px;
position: relative;
}
.sub_nav .sub_m_li div a.on{
background: #25476a;
border-radius: 20px;
color: #fff;
}
.sub_nav .sub_m_li div a.on span {
position: absolute;
left: 50%;
margin-left: -4px;
bottom: -5px;
display: block;
width: 8px;
height: 8px;
background: url(/images/menu_on_img.png) center no-repeat ;
background-size: 8px;
}
.sub_nav .sub_m_li.swiper_none div {
display: inline-block;
}
.sub_nav .sub_m_li .top_sub_menu_slide {
width: auto !important;
}
.sub_container {
padding: 70px 0 30px 0;
box-sizing:border-box;
height:100%;
min-height:100%;
}
.sub_container .tit_txt_02 {
margin-top: 30px;
font-size: 15px;
}
section .sort_area {
text-align: right;
margin-top: 20px;
}
section .sort_area a {
font-size: 14px;
color: #989898;
/*
padding-right: 25px;
background: url(/images/icon_sort.png) center right no-repeat;
background-size: 19px;
*/
}
section .sort_area img {
margin-left:5px ;
vertical-align: middle;
}
.mst_list_01 {
margin-top: 15px;
}
.mst_list_01 .mst_box {
width: 100%;
border: 1px solid #d4d4d4;
border-radius: 15px;
overflow: hidden;
}
.mst_list_01 .mst_box .mst_tarot01 {
background: url(/images/mst_tarot01.png) no-repeat;
background-size: 100%;
/*text-align: center;*/
}
.mst_list_01 .mst_box .mst_tarot02 {
background: url(/images/mst_tarot02.png) no-repeat;
background-size: 100%;
/*text-align: center;*/
}
.mst_list_01 .mst_box .mst_tarot03 {
background: url(/images/mst_tarot03.png) no-repeat;
background-size: 100%;
/*text-align: center;*/
}
.mst_list_01 .mst_box .mst_tarot04 {
background: url(/images/mst_tarot04.png) no-repeat;
background-size: 100%;
/*text-align: center;*/
}
.mst_list_01 .mst_box .mst_tarot05 {
background: url(/images/mst_tarot05.png) no-repeat;
background-size: 100%;
/*text-align: center;*/
}
.mst_list_01 .mst_box .mst_saju01 {
background: url(/images/mst_saju01.png) no-repeat;
background-size: 100%;
/*text-align: center;*/
}
.mst_list_01 .mst_box .mst_saju02 {
background: url(/images/mst_saju02.png) no-repeat;
background-size: 100%;
/*text-align: center;*/
}
.mst_list_01 .mst_box .mst_saju03 {
background: url(/images/mst_saju03.png) no-repeat;
background-size: 100%;
/*text-align: center;*/
}
.mst_list_01 .mst_box .mst_saju04 {
background: url(/images/mst_saju04.png) no-repeat;
background-size: 100%;
/*text-align: center;*/
}
.mst_list_01 .mst_box .mst_saju05 {
background: url(/images/mst_saju05.png) no-repeat;
background-size: 100%;
/*text-align: center;*/
}
.mst_list_01 .mst_box .mst_photo {
position: relative;
}
.mst_list_01 .mst_box .mst_photo .badge_02 {
position: absolute;
left: 15px;
top: 15px;
padding:5px 15px;
font-size: 13px;
color:#fff;
background-color: rgba( 0, 0, 0, 0.1 );
border-radius:50px;
}
.main_mst_info {
position: relative;
}
.mst_list_01 .icon_li {
position: absolute;
right: 20px;
bottom: 5px;
}
.mst_list_01 .icon_li_02 {
position: absolute;
right: 20px;
bottom: 85px;
}
.mst_list_01 .icon_li li, .mst_list_01 .icon_li_02 li {
display: inline-block;
vertical-align: middle;
font-size: 14px;
color: #787878;
}
.mst_list_01 .icon_li .icon_star a, .mst_list_01 .icon_li_02 .icon_star a{
font-size: 14px;
display: inline-block;
padding-left: 25px;
background: url(/images/icon_star.png) 0 2px no-repeat;
background-size:16px ;
}
.mst_list_01 .icon_li .icon_talk a, .mst_list_01 .icon_li_02 .icon_talk a {
font-size: 14px;
display: inline-block;
padding-left: 25px;
background: url(/images/icon_talk.png) 0 4px no-repeat;
background-size: 17px;
margin-left: 15px;
}
.mst_list_01 .box_mgt {
margin-top: 25px;
}
/*** 선생님 상세보기 ***/
.detail_area {
padding-bottom: 70px;
}
.mst_photo_area {
position: relative;
}
.detail_area .bg_purple_02{
background: url(../images/mst_bg_purple.png) no-repeat;
background-size: 100% 100%;
text-align: center;
}
.detail_area .bg_green_02{
background: url(../images/mst_bg_green.png) no-repeat;
background-size: 100% 100%;
text-align: center;
}
.detail_area .bg_gray_02{
background: url(../images/mst_bg_gray.png) no-repeat;
background-size: 100% 100%;
text-align: center;
}
/*
.detail_area .mst_tarot02 {
background: url(/images/mst_tarot02.png) no-repeat;
background-size: 100% 100%;
text-align: center;
}
.detail_area .mst_tarot03 {
background: url(/images/mst_tarot03.png) no-repeat;
background-size: 100% 100%;
text-align: center;
}
.detail_area .mst_tarot04 {
background: url(/images/mst_tarot04.png) no-repeat;
background-size: 100% 100%;
text-align: center;
}
.detail_area .mst_tarot05 {
background: url(/images/mst_tarot05.png) no-repeat;
background-size: 100% 100%;
text-align: center;
}
.detail_area .mst_saju01 {
background: url(/images/mst_saju01.png) no-repeat;
background-size: 100% 100%;
text-align: center;
}
.detail_area .mst_saju02 {
background: url(/images/mst_saju02.png) no-repeat;
background-size: 100% 100%;
text-align: center;
}
.detail_area .mst_saju03 {
background: url(/images/mst_saju03.png) no-repeat;
background-size: 100% 100%;
text-align: center;
}
.detail_area .mst_saju04 {
background: url(/images/mst_saju04.png) no-repeat;
background-size: 100% 100%;
text-align: center;
}
.detail_area .mst_saju05 {
background: url(/images/mst_saju05.png) no-repeat;
background-size: 100% 100%;
text-align: center;
}
*/
.detail_area .mst_photo {
position: relative;
height: 265px;
}
.detail_area .mst_photo .badge_01 {
display: inline-block;
padding: 2px 15px;
position: absolute;
left: 15px;
top: 15px;
font-size: 13px;
color:#fff;
border-radius:50px;
border: 1px solid #D0CFDA;
color: #D0CFDA;
}
.detail_area .mst_photo .icon_share{
position: absolute;
right: 15px;
bottom:60px;
}
border-radius: 50px;
border: 1px solid #D0CFDA;
display: inline-block;
padding: 2px 10px;
font-size: 13px;
color: #D0CFDA;
.detail_area .mst_img {
display: block;
height: 265px;
}
.detail_area .name_box {
position: absolute;
bottom: -30px;
left: 50%;
margin-left: -38%;
width: 76%;
/*height: 85px;*/
height: auto;
padding-bottom:10px;
background: #fff;
border-radius: 10px;
text-align: center;
box-shadow: 1px 2px 2px 1px #eaeaea;
}
.detail_area .name_box .name {
font-size: 22px;
padding-top: 10px;
}
.detail_area .name_box .tag {
font-size: 13px;
color: #b5b5b5;
margin-top: 5px;
width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.detail_area .price_area {
padding-top: 55px;
width: 100%;
margin:0 auto;
}
.detail_area .price_area ul {
font-size: 0;
width: 100%;
text-align:center;
}
.detail_area .price_area li {
display: inline-block;
}
/*.detail_area .price_area li:first-child {
width: 55%;
}*/
.detail_area .price_area li{
width: calc(50% - 5%);
}
.detail_area .price_area li:last-child{
padding-left:3%;
box-sizing:border-box;
}
.detail_area .price_area li .tit_g {
font-size: 14px;
font-family:sd5;
color: #b5b5b5;
display: inline-block;
width: 80px;
letter-spacing:-0.5px;
}
.detail_area .price_area li .tit_g.w_none{
width:100% !important;
}
.detail_area .price_area li .tit_o {
font-size: 14px;
color: #fb9520;
display: inline-block;
width: 80px;
}
/*
.detail_area .price_area li .tel_num {
display:inline-block;
font-size:16px;
font-family: sd6;
color:#fff;
margin-bottom:10px;
background:#25476a;
padding:5px 10px;
border-radius:30px;
}*/
.detail_area .price_area li .price {
font-size: 19px;
font-family: sd6;
color: #000;
}
.detail_area .price_area li .price_g {
font-size: 17px;
font-family: sd6;
color: #b5b5b5;
text-decoration: line-through;
}
.detail_area .price_area li .time {
font-size: 12px;
font-family: sd4;
color: #787878;
display: inline-block;
margin-left: 10pxs;
}
.detail_area .icon_area {
margin-top: 30px;
}
.detail_area .icon_area ul {
font-size: 0;
}
.detail_area .icon_area ul li {
display: inline-block;
}
.detail_area .icon_area ul .tit{
font-family: sd5;
}
.detail_area .icon_area ul li.icon_star a {
font-size: 14px;
display: inline-block;
padding-left: 25px;
background: url(../images/icon_star.png) 0 2px no-repeat;
background-size: 16px;
}
.detail_area .icon_area ul li.icon_talk a {
font-size: 14px;
display: inline-block;
padding-left: 25px;
background: url(../images/icon_talk.png) 0 4px no-repeat;
background-size: 17px;
margin-left: 15px;
}
.detail_area .icon_area ul li:nth-child(2) {
margin: 0 15px;
}
.detail_area .graph_area {
margin-top: 40px;
}
.detail_area .graph .graph_bg {
height: 13px;
background: #F5F5F5;
border-radius: 13px;
position: relative;
margin-top: 6px;
}
.detail_area .graph div[class ^="graph_bar_0"] {
height: 13px;
border-radius: 13px;
position: relative;
}
.detail_area .graph .graph_bar_01 {
background:#F9A44A;
}
.detail_area .graph .graph_bar_02 {
background:#F57C60;
}
.detail_area .graph .graph_bar_03 {
background:#4FC1C6;
}
.detail_area .graph .graph_bar_04 {
background:#BEBEBE
}
.detail_area .graph .point {
position: absolute;
top:-8px;
right: -8px;
}
/*
.detail_area .graph_area .graph_bg, .detail_area .graph_area .graph_bg2 {
height: 35px;
line-height: 35px;
background: #fbf8f7;
border-radius:5px;
margin-top: 7px;
position: relative;
}
.detail_area .graph_area .graph_bar {
height: 35px;
line-height: 35px;
border-radius:5px;
}
.detail_area .graph_area .bar_color_01 {
background: #fdc7aa;
}
.detail_area .graph_area .bar_color_02 {
background: #fed3bb;
}
.detail_area .graph_area .bar_color_03 {
background: #fdddcb;
}
.detail_area .graph_area .bar_color_04 {
background: #fdeadf;
}
.detail_area .graph_area .tit {
font-size: 12px;
font-weight:bold;
position: absolute;
left: 15px;
top: 0px;
}
.detail_area .graph_area .point {
display: inline-block;
font-size: 12px;
font-weight: bold;
color: #fba272;
position: absolute;
top: 7px;
right: 10px;
height: 22px;
line-height: 22px;
}*/
/*
.detail_area .graph_area .graph, .detail_area .graph_area .graph2 {
margin-bottom:10px;
}
.detail_area .graph_area ul {
font-size: 0;
}
.detail_area .graph_area ul li {
display: inline-block;
height: 35px;
}
.detail_area .graph_area ul li:first-child{
width: 140px;
}
.detail_area .graph_area ul li:last-child {
width: calc(100% - 140px);
text-align: right;
}
.detail_area .graph_area .graph_bg {
height: 35px;
line-height: 35px;
background: #f5f5f5;
border-radius:20px;
}
.detail_area .graph_area .graph_bar {
height: 35px;
line-height: 35px;
border-radius:0 20px 20px 0;
position: relative;
padding-right: 10px;
box-sizing: border-box;
}
.detail_area .graph_area .bar_blue {
background: #6bbeec;
}
.detail_area .graph_area .tit {
display: block;
width: 100%;
height: 35px;
line-height: 36px;
padding-left: 10px;
box-sizing: border-box;
font-size: 12px;
color: #fff;
background: #6BBEEC;
border-radius:20px 0px 0px 20px;
}
.detail_area .graph_area .point {
display: inline-block;
font-size: 12px;
color: #fff;
width:20px;
height: 20px;
line-height: 20px;
border-radius: 50px;
box-sizing: border-box;
background-color: rgba(255, 255, 255, 0.3);
margin-left:5px;
text-align:center;
}
*/
.detail_area .tab_menu {
margin-top: 40px;
border-bottom: 1px solid #d4d4d4;
}
.detail_area .tab_menu ul {
width: 100%;
font-size: 0;
overflow-x: hidden !important;
white-space: nowrap;
-ms-overflow-style:none;
}
.tab_menu ul::-webkit-scrollbar {
display: none;
}
.detail_area .tab_menu li {
display: inline-block;
padding: 0 15px;
box-sizing: border-box;
font-size: 15px;
color: #9d9d9d;
width: calc(1/4 * 100%);
text-align: center;
}
.detail_area .tab_menu li a {
display: block;
height: 50px;
line-height: 50px;
padding: 0 4px;
box-sizing: border-box;
}
.detail_area .tab_menu li a.on {
border-bottom: 2px solid #25476a;
font-weight: bold;
color: #3d3d3d;
}
.detail_area .mst_info{
margin-top: 40px;
}
.detail_area .mst_info h2.tit {
font-size: 16px;
font-weight: normal;
font-family: 'sd5';
}
.detail_area .mst_info ul{
list-style:disc;
}
.detail_area .mst_info li {
margin-left: 20px;
margin-bottom:5px;
}
.detail_area .mst_info .txt_tit {
font-size:18px;
color: #3D72CE;
margin-top: 20px;
line-height:160%;
}
.btn_bott {
position: fixed;
bottom: 0px;
max-width: 420px;
width: 100%;
background: rgba(255, 255, 255, 0.7);
border-top: 1px solid #d4d4d4;
/* box-shadow: 0px -2px 5px 0px #eaeaea; */
}
.btn_bott ul {
font-size: 0;
padding: 10px 15px;
box-sizing: border-box;
}
.btn_bott ul li {
display: inline-block;
}
.btn_bott ul li:first-child {
width:calc(20% - 10px);
margin-right: 10px;
}
.btn_bott ul li:last-child {
width: 80%;
}
.btn_bott ul li button {
width: 100%;
height: 50px;
line-height: 50px;
}
.btn_bott .btn_heart {
background: #f8f8f8;
border: none;
border-radius: 5px;
}
.btn_bott .btn_heart img {
vertical-align: middle;
}
.btn_bott .btn_counsel_02 {
background: #25476a;
border: none;
border-radius: 5px;
color: #fff;
font-size: 17px;
font-family: sd5;
}
.btn_bott .btn_counsel_ing {
background: #F57C60;
border: none;
border-radius: 5px;
color: #fff;
font-size: 17px;
font-family: sd5;
}
.btn_bott .btn_absent_02 {
background: #B5B5B5;
border: none;
border-radius: 5px;
color: #fff;
font-size: 17px;
font-family: sd5;
}
.event_popup {
position: fixed;
max-width: 420px;
width: 100%;
height:100%;
top: 0;
z-index:1000;
}
.event_popup .box_black {
width: 70%;
margin: 0 auto;
margin-top: 450px;
background-color: rgba( 0, 0, 0, 0.7 );
padding: 20px;
border-radius: 15px;
position: relative;
}
.event_popup .box_black .icon_money {
text-align: center;
margin-top: -40px;
}
.event_popup .box_black .btn_close {
position: absolute;
top: 15px;
right: 15px;
}
.event_popup .box_black .txt, .event_popup .box_black p {
font-size: 20px;
color: #fff;
text-align: center;
margin-top: 15px;
line-height: 160%;
}
.event_popup .box_black .txt .txt_red {
color: #f75d77;
font-weight: bold;
}
/*** 상담하기 팝업 ***/
#layer_poup {
position: relative;
z-index:1;
}
.popup_bg {
position: fixed;
max-width: 420px;
width: 100%;
height:100%;
background-color: rgba(0, 0, 0, 0.7);
top: 0;
z-index:1000;
}
.bott_popup .popup_box {
position: absolute;
max-width: 420px;
width: 90%;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
border-radius: 15px;
background: #f8f8f8;
padding:20px;
box-sizing: border-box;
}
.bott_popup .popup_box .in_box_area {
padding: 0 10px 10px 10px;
box-sizing:border-box;
position: relative;
}
.popup_box .mst_tit {
position: relative;
}
.popup_box .mst_box {
border-radius: 10px;
position: relative;
width: 100%;
height: 117px;
background-size:cover !important ;
}
.popup_box .mst_box .mst_img {
position: absolute;
right: 0;
bottom:0
}
.popup_box .mst_box .mst_info {
position: absolute;
left: 20px;
top: 10px;
}
.popup_box.mst_list_01 .mst_box {
border-radius: 15px 15px 0 0 !important;
border: none !important;
}
.popup_box.mst_list_01 .mst_box .mst_photo {
border:1px solid #737373;
border-radius:15px;
}
.popup_box .mst_tit .name {
display:inline-block;
font-size: 16px;
font-family: sd5;
color:#fff;
padding-top: 3px;
/*position: absolute;
top: 45px;
left: 15px;
padding:5px 15px;
background-color: rgba( 0, 0, 0, 0.1 );
border-radius:50px;*/
}
.mst_tit .mst_badge {
border-radius: 50px;
border: 1px solid #D0CFDA;
display: inline-block;
padding: 2px 10px;
font-size: 13px;
color: #D0CFDA;
margin-top: 10px;
}
.mst_tit .mst_name {
font-size: 17px;
font-family: sd6;
color: #fff;
margin-top: 15px;
}
.popup_box .btn_close {
position: absolute;
top: -35px;
right: 10px;
}
.popup_box .in_box_01 {
background: #fff;
/* box-shadow: 2px 2px 3px 2px #eaeaea; */
box-shadow: 1px 2px 2px 1px #eaeaea;
border-radius: 10px;
margin-top: -25px;
padding:15px;
box-sizing: border-box;
}
.popup_box .counsel_btn {
font-size: 0;
margin-top: 30px;
}
.popup_box .counsel_btn li {
display: inline-block;
}
.popup_box .counsel_btn li:first-child{
width:calc(40% - 5px);
margin-right: 5px;
text-align: center;
}
.popup_box .counsel_btn li:last-child{
width:calc(60% - 5px);
margin-left: 5px;
text-align: center;
}
.popup_box .counsel_btn .price{
font-size:16px;
color:#000;
font-family: sd6;
}
.popup_box .counsel_btn .price span:last-child {
font-size: 12px;
color: #B5B5B5;
font-family: sd4;
letter-spacing: -1px;
}
.popup_box .counsel_btn .price span:first-child{
display: block;
margin-top: 5px;
font-size: 12px;
}
.popup_box .in_box_01.box_blue {
background:#f6fafe;
border:1px solid #b0bcca;
}
.popup_box .in_box_01.box_red {
background:#fef6f7;
border:1px solid #d3bdc1;
}
.popup_box .in_box_01 .tit {
font-size: 15px;
font-family: sd5;
padding:10px 0 0 25px ;
background: url(/images/dot_img.png) 8px 20px no-repeat;
background-size: 6px;
}
.popup_box .in_box_01 .tit span {
color: #fb9520;
}
.popup_box .in_box_01 .tit span.txt_s {
font-size: 12px;
font-family: sd4;
display: inline-block;
/* margin-left: 7px; */
color: #b4b4b4;
}
.popup_box .in_box_01 .tit_txt, .popup_box .in_box_01 .txt_purple_02 {
font-size: 13px;
padding-left: 25px;
}
.popup_box .in_box_01 .tit_txt span {
font-weight: bold;
}
.popup_box .counsel_txt {
margin-top: 30px;
text-align: center;
}
.popup_box .counsel_txt span {
color:#F57C60 ;
font-size: 17px;
font-family: sd6;
}
.popup_box .point_info {
/*padding: 15px;
border-radius: 5px;
border:1px solid #D9D9D9;
box-sizing: border-box;
background: #fff ;*/
margin-top: 15px;
text-align: center;
}
.popup_box .point_info .point_01{
display: inline-block;
width: 100%;
background:url(../images/icon_point_02.png) 15px 25px no-repeat, #F5F5F5;
background-size: 27px;
font-size: 13px;
padding: 30px 15px;
box-sizing: border-box;
text-align: center;
/*border-bottom: 1px solid #D3D3D3 ;*/
}
.popup_box .point_info .point_01 span {
font-size: 17px;
font-family: sd6;
}
.popup_box .point_info .time_txt {
font-size: 12px;
margin-top: 15px;
}
.popup_box .point_info .charge {
display: inline-block;
font-size: 14px;
font-family: sd6;
text-decoration: underline;
margin-left: 15px;
}
.point_info .line {
width: 100%;
max-width:280px;
height:1px;
background:#D3D3D3;
margin:0 auto;
}
/*
.popup_box .point_info {
padding: 20px 0 20px 90px;
background: #f5f5f5 url(/images/icon_point.png) 35px center no-repeat;
background-size: 32px;
border-radius: 5px;
margin-top: 15px;
box-sizing: border-box;
font-size: 14px;
}
.popup_box .point_info span {
font-size: 16px;
font-family: sd6;
margin-right: 20px;
}
.popup_box .point_info .point_02 {
margin-top: 5px;
}
.popup_box .point_info .charge {
display: inline-block;
font-size: 16px;
font-family: sd6;
text-decoration: underline;
margin-top: 5px;
}*/
.btn_line_b .tel_num, .btn_line_p .tel_num {
display:inline-block;
margin-left:10px;
font-size:13px;
}
/*** 로그인 ***/
.login_area section {
text-align: center;
margin-top: 60px;
}
.login_area .txt_01 {
font-size: 18px;
letter-spacing:-1px;
}
.login_area .txt_02 {
display: inline-block;
font-size: 28px;
font-family: sd6;
margin-top: 10px;
position: relative;
}
.login_area .txt_02 .txt {
position: relative;
z-index: 1;
}
.login_area .txt_02 .bg {
display: inline-block;
background: #8de8f1;
height: 20px;
width: 100%;
position: absolute;
left: 0;
bottom: 3px;
}
.login_area .txt_03 {
text-align:left;
width:80%;
margin:0 auto;
font-size:13px;
}
.login_area .txt_03 p {
font-size:14px;
font-weight:bold;
}
.login_area .txt_03 .txt_bold {
color:#fb9520;
font-weight:normal;
}
.login_area .txt_04 {
margin-top:20px;
}
.login_area .txt_04 span {
color:#fa8686;
font-weight:bold;
text-decoration: underline;
}
.info_inp .inp_01{
margin-top: 35px;
}
.info_inp .inp_01 label {
font-size: 15px;
font-family: sd6;
}
.info_inp .inp_01 .input_01 {
height: 50px;
width: 100%;
border: none;
border-bottom: 1px solid #b5b5b5;
}
.info_inp .inp_01 p {
position: relative;
}
.info_inp .inp_01 p .inp_btn {
position: absolute;
right: 0;
bottom:10px;
}
.info_inp .inp_01 ::placeholder {
font-size: 14px;
color: #a5a5a5;
}
.login_info_area .agree_area {
margin-top: 40px;
text-align: center;
}
.agree_chk input[type='checkbox'] {
display: none;
}
.agree_chk input[type='checkbox']+label::before {
content: '';
display: inline-block;
width: 20px;
height: 20px;
vertical-align: middle;
margin:-5px 0 0 0px;
padding-left: 10px;
background: url(../images/check_off.png) no-repeat;
background-size: contain;
}
.agree_chk input[type='checkbox']:checked+label::before {
background: url(../images/check_on.png) no-repeat;
background-size: contain;
}
.agree_link a {
font-size: 14px;
margin: 15px 7px 0 7px;
font-family: sd5;
display: inline-block;
text-decoration: underline;
}
/***회원가입 ***/
.info_inp .btn_select {
margin-top: 20px;
font-size: 0;
}
.info_inp .btn_select li {
display: inline-block;
}
.btn_select li span {
display: block;
width: 100px;
height: 45px;
line-height: 45px;
text-align: center;
border: 1px solid #25476a;
}
.btn_select li:first-child span {
border-radius: 5px 0 0 5px;
}
.btn_select li:last-child span {
border-radius: 0 5px 5px 0;
}
.btn_select li span.on {
background: #25476a;
color: #fff;
}
.info_inp .inp_01 .select_01{
height: 50px;
width: 100%;
border: none;
border-bottom: 1px solid #b5b5b5;
background:#fff;
}
.inp_01 .li_two, .inp_01 .li_three {
font-size: 0;
}
.inp_01 .li_two li {
display: inline-block;
width: calc(1/2 * 100% - 5px);
}
.inp_01 .li_two li:first-child {
margin-right: 5px;
}
.inp_01 .li_two li:last-child {
margin-left: 5px;
}
.inp_01 .li_three li {
display: inline-block;
width: calc(1/3 * 100% - 10px/3 );
}
.inp_01 .li_three li:nth-child(2) {
margin:0 5px;
}
.inp_01 .li_three .inp_year::placeholder{
font-size:14px;
}
/*** 충전하기 ***/
.tab_menu {
border-bottom: 1px solid #d4d4d4;
}
.tab_menu ul {
width: 100%;
font-size: 0;
overflow-x: hidden !important;
white-space: nowrap;
-ms-overflow-style:none;
}
.tab_menu ul::-webkit-scrollbar {
display: none;
}
.tab_menu li {
display: inline-block;
padding: 0 7px;
box-sizing: border-box;
font-size: 15px;
color: #9d9d9d;
}
.tab_menu li a {
display: block;
height: 50px;
line-height: 50px;
padding: 0 4px;
box-sizing: border-box;
}
.tab_menu li a.on {
border-bottom: 2px solid #25476a;
font-weight: bold;
color: #3d3d3d;
}
.charge_area .point_sum, .mypage_area .point_sum{
margin-top: 40px;
padding: 30px 0;
text-align: center;
}
.box_line {
border: 1px solid #d4d4d4;
border-radius: 10px;
}
.point_sum .inbox {
display: inline-block;
width:80%;
height: auto;
line-height: 45px;
padding: 15px 30px;
box-sizing:border-box;
background: #f9f9f9;
border-radius: 10px;
font-size: 14px;
}
.point_sum .inbox .point_txt {
display: inline-block;
font-size: 25px;
font-family: sd6;
padding: 0 10px 0 35px;
background: url(/images/icon_point_02.png) left no-repeat;
background-size: 27px;
vertical-align: middle;
}
.chk_01 input[type='radio'] {
display: none;
}
.chk_01 input[type='radio']+label::before {
content: '';
display: inline-block;
width: 20px;
height: 20px;
vertical-align: middle;
margin:0 15px 0 0;
background: url(../images/radio_off.png);
background-size: contain;
}
.chk_01 input[type='radio']:checked+label::before {
background: url(../images/radio_on.png);
background-size: contain;
}
.charge_area section h3:first-child {
margin-top: 40px;
}
.charge_area section h3.sub_tit {
font-size: 17px;
font-family: sd6;
}
.charge_area .money_li {
margin-top: 25px;
}
.charge_area .money_li li {
background: #fff;
padding: 15px 10px;
margin-bottom: 10px;
box-sizing: border-box;
border: 1px solid #d4d4d4;
border-radius: 10px;
}
.charge_area .money_li li.on {
background: #ebf1fc;
border: 1px solid #dde3ee;
}
.charge_area .money_li li label {
font-size: 14px;
font-family: sd4;
}
.charge_area .money_li li .money {
display: inline-block;
font-size: 16px;
font-family: sd6;
min-width: 90px;
vertical-align: middle;
}
.charge_area .money_li li .time {
display: inline-block;
margin-left: 35px;
}
.charge_area .pay_li {
margin-top: 25px;
font-size: 0;
}
.charge_area .pay_li li {
margin-bottom: 20px;
}
.box_gray {
background: #f9f9f9;
padding: 20px;
border-radius: 10px;
box-sizing: border-box;
}
.charge_area .pay_price {
margin-top: 25px;
}
.charge_area .pay_price .price_01{
margin-top: 15px;
}
.charge_area .pay_price {
position: relative;
}
.charge_area .pay_price .price, .charge_area .pay_price .point {
position: absolute;
right: 20px;
}
.charge_area .pay_price .price_02 span {
font-size: 18px;
font-family: sd6;
color: #fb9520;
}
.charge_area .pay_li .virtual_bank {
padding:10px 10px 10px 35px;
margin-top:10px;
box-sizing:border-box;
font-size:14px;
background:#f9f9f9;
}
.charge_area .pay_li .virtual_bank .bank_list {
margin-left:15px;
}
.charge_area .pay_li .virtual_bank .bank_list select {
height: 30px;
padding:0 15px;
width:auto;
border: 1px solid #B5B5B5;
border-radius:5px;
}
/*** 충전내역 ***/
.charge_area .sort_btn_li {
margin-top: 40px;
font-size: 0;
text-align: right;
}
.charge_area .sort_btn_li li {
display: inline-block;
margin-left: 10px;
}
.charge_area .list_area li .li_tit {
font-family: sd6;
position: relative;
}
.charge_area .list_area li .li_tit span {
position: absolute;
right: 0;
}
.charge_area .list_area li .li_cont{
font-size: 12px;
color:#b5b5b5;
margin-top: 5px;
position: relative;
letter-spacing:-0.5px;
}
.charge_area .list_area li .li_cont span{
font-size:15px;
font-family: sd6;
position: absolute;
right: 0;
}
.charge_area .list_area li {
padding: 25px 0;
border-bottom: 1px solid #d4d4d4;
}
/*
.list_area .btn_more {
margin-top: 25px;
text-align: center;
font-size: 14px;
font-family: sd6;
}
.list_area .btn_more a {
display: inline-block;
padding-right: 25px;
background: url(/images/arr_down.png) right no-repeat;
background-size: 17px;
}*/
.btn_more {
margin-top: 25px;
text-align: center;
font-size: 13px;
font-family: sd6;
}
.btn_more a {
display: inline-block;
padding-right: 25px;
background: url(/images/arr_down.png) right no-repeat;
background-size: 17px;
}
/*** 마이페이지 ***/
.mypage_area .my_name {
text-align: left;
padding: 0 25px;
margin-bottom: 25px;
font-family: sd6;
font-size: 16px;
position: relative;
}
.mypage_area .my_name span {
font-size: 14px;
font-family: sd4;
display: inline-block;
padding-right: 20px;
background: url(/images/btn_arr.png) right no-repeat;
background-size: 15px;
position: absolute;
right: 25px;
}
.mypage_area .point_sum .inbox {
width:80%;
height:auto;
padding: 20px 30px !important;
box-sizing:border-box;
border-radius:10px;
}
.mypage_area .btn_list {
font-size:0;
width:95%;
margin:0 auto;
}
.mypage_area .btn_list li {
display: inline-block;
width:calc(1/3 * 100% - 6px);
margin: 25px 3px 0 3px;
}
.mypage_area .btn_list.li_four li {
display: inline-block;
width:calc(1/4 * 100% - 2px);
margin: 25px 1px 0 1px;
}
.mypage_area .btn_list li button {
font-size: 13px;
letter-spacing:-1px;
overflow:hidden;
}
.mypage_area .box_gray {
margin-top: 25px;
}
.mypage_area .box_gray .my_info {
font-size: 0;
text-align: center;
}
.mypage_area .box_gray .my_info li {
display: inline-block;
width: calc(1/3 * 100%);
text-align: center;
}
.mypage_area .box_gray .my_info li .circle {
display: inline-block;
width: 55px;
height: 55px;
line-height: 55px;
border-radius: 50%;
background: #25476a;
color: #fff;
font-size: 18px;
}
.mypage_area .box_gray .my_info li .txt {
display: block;
margin-top: 10px;
}
.mypage_area .box_gray .menu_li_two, .mypage_area .box_gray .menu_li_three {
font-size: 0;
width:100%;
}
.mypage_area .box_gray .menu_li_two button, .mypage_area .box_gray .menu_li_three button {
font-size: 13px;
letter-spacing:-1px;
}
.mypage_area .box_gray .menu_li_two li{
display: inline-block;
width: calc(50% - 3px);
}
.mypage_area .box_gray .menu_li_two li button {
width: 100%;
text-align: left;
padding-left: 25px;
box-sizing: border-box;
background: url(/images/btn_arr.png) 92% no-repeat;
background-size: 15px;
}
.mypage_area .box_gray .menu_li_two li:first-child {
margin-right: 3px;
}
.mypage_area .box_gray .menu_li_two li:last-child {
margin-left: 3px;
}
.mypage_area .box_gray .menu_li_three li{
display: inline-block;
width: calc(1/3 * 100% - 4px);
margin-top: 20px;
}
.mypage_area .box_gray .menu_li_three li:nth-child(2) {
margin:0 6px;
}
.mypage_area .box_gray .menu_li_three li button {
width: 100%;
text-align: center;
padding: 0;
box-sizing: border-box;
/*background: url(/images/btn_arr.png) 95% no-repeat;*/
background-size: 15px;
font-size: 14px;
letter-spacing:-1px;
}
.receive_list {
margin-top: 60px;
}
.receive_list .agree_01 {
position: relative;
}
.receive_list .btn_blue_r, .receive_list .btn_gray_r {
width: 90px;
position: absolute;
right: 0;
}
.quit_txt {
margin-top: 60px;
text-align: center;
}
.shadow_box{
padding: 20px 10px;
background: #fff;
border-radius: 10px;
box-shadow: 1px 1px 3px 2px #eaeaea;
}
.faq_area .tit_q {
height: 30px;
line-height: 30px;
font-size: 14px;
/*font-family: sd6;*/
padding-left: 45px;
background: url(/images/icon_q.png) no-repeat;
background-size: 30px ;
}
.faq_area .tit_q span, .notice_area .tit_q span {
display: inline-block;
line-height: 140%;
}
.faq_area .cont_a, .notice_area .cont_a {
font-size: 13px;
margin-top: 20px;
padding: 20px 10px 10px 10px;
border-top: 1px solid #d4d4d4;
}
.notice_area .tit_q {
height: 35px;
line-height: 35px;
font-size: 14px;
font-family: sd6;
}
.notice_area .date {
font-size: 12px;
color: #b5b5b5;
font-family: sd4;
}
.q_list_area .date {
font-size: 12px;
color: #b5b5b5;
}
.q_list_area .q_list {
position: relative;
border-bottom: 1px solid #d4d4d4;
padding-bottom: 25px;
}
.q_list_area .q_list .w_name img {
vertical-align: middle;
margin-left:10px;
margin-bottom:4px;
}
/*
.q_list_area .q_list .btn_del img {
width: 28px;
position:absolute;
top:0;
right:0;
}*/
.q_list_area .q_list .btn_li_r {
position: absolute;
right: 0px;
top: 0px;
}
.q_list_area .q_list .btn_li_r li {
display: inline-block;
}
.state_ok {
padding: 0 10px;
height: 27px;
line-height: 27px;
background: #000;
color: #fff;
font-size: 12px;
border-radius: 20px;
}
.state_wait {
padding: 0 10px;
height: 27px;
line-height: 27px;
background: #fdc01c;
color: #fff;
font-size: 12px;
border-radius: 20px;
}
.state_cancle {
width:70px;
height: 27px;
line-height: 27px;
text-align: center;
background: #b5b5b5;
color: #fff;
font-size: 12px;
border-radius: 20px;
}
.q_list_area .state_ok, .q_list_area .state_wait {
position: absolute;
right: 0;
top: 0;
}
.q_list_area .q_txt {
margin-top: 15px;
}
.box_gray {
position: relative;
}
.box_gray .date {
position: absolute;
right: 20px;
top: 20px;
}
.box_gray .a_txt {
margin-top: 15px;
}
/** 상세정보_상담사례 , 후기 , 일대일문의 **/
.detail_area .mst_info_02 .tit_q {
height: 30px;
line-height: 30px;
font-size: 16px;
font-family: sd6;
padding-left: 40px;
background: url(/images/icon_q_02.png) no-repeat;
background-size: 30px ;
}
.detail_area .mst_info_02 .tit_q span {
display: inline-block;
line-height: 140%;
}
.detail_area .writer {
position: relative;
}
.detail_area .review .time {
display: inline-block;
font-size: 12px;
color: #b5b5b5;
margin-left: 10px;
}
.detail_area .review .date {
position: absolute;
right: 0;
font-size: 12px;
color: #b5b5b5;
}
.detail_area .review .box_gray {
position: relative;
}
.detail_area .review .box_gray .date {
position: absolute;
right: 20px;
top: 20px;
}
.detail_area .review .box_gray .a_txt {
margin-top: 20px;
}
.q_notice_li li {
font-size: 13px;
list-style: disc;
padding-left: -10px;
margin-left: 20px;
margin-bottom: 5px;
box-sizing: border-box;
}
.detail_area .q_list {
border-bottom: 1px solid #d4d4d4;
padding-bottom: 25px;
}
.detail_area .q_list .w_name img {
vertical-align: middle;
margin-left:10px;
margin-bottom:4px;
}
.detail_area .date {
font-size: 12px;
color: #b5b5b5;
position: absolute;
right: 0px;
top: 0px;
}
.detail_area .date.left {
position:unset !important;
display: block;
}
.detail_area .date_02 {
font-size: 12px;
color: #b5b5b5;
position: absolute;
right: 20px;
top: 20px;
}
.detail_area .q_list .state_cancle {
position: absolute;
right: 70px;
top: 0;
}
.detail_area .q_list .state_ok, .detail_area .q_list .state_wait{
position: absolute;
right: 0;
top: 0;
}
.detail_area .q_list .q_txt, .detail_area .q_list .a_txt {
margin-top: 15px;
}
/**상담후기**/
.mst_photo.box_160 {
width: 160px;
height: 125px;
}
.mst_photo.box_160.img_small .mst_photo_sm {
width:130px;
}
.mst_tarot01.box_160 {
background: url(/images/mst_tarot01.png) no-repeat;
background-size: 100% 100%;
background-position: center top;
border-radius: 10px;
text-align: center;
}
.mst_tarot02.box_160 {
background: url(/images/mst_tarot02.png) no-repeat;
background-size: 100% 100%;
background-position: center top;
border-radius: 10px;
text-align: center;
}
.mst_tarot03.box_160 {
background: url(/images/mst_tarot03.png) no-repeat;
background-size: 100% 100%;
background-position: center top;
border-radius: 10px;
text-align: center;
}
.mst_tarot04.box_160 {
background: url(/images/mst_tarot04.png) no-repeat;
background-size: 100% 100%;
background-position: center top;
border-radius: 10px;
text-align: center;
}
.mst_tarot05.box_160 {
background: url(/images/mst_tarot05.png) no-repeat;
background-size: 100% 100%;
background-position: center top;
border-radius: 10px;
text-align: center;
}
.mst_saju01.box_160 {
background: url(/images/mst_saju01.png) no-repeat;
background-size: 100% 100%;
background-position: center top;
border-radius: 10px;
text-align: center;
}
.mst_saju02.box_160 {
background: url(/images/mst_saju02.png) no-repeat;
background-size: 100% 100%;
background-position: center top;
border-radius: 10px;
text-align: center;
}
.mst_saju03.box_160 {
background: url(/images/mst_saju03.png) no-repeat;
background-size: 100% 100%;
background-position: center top;
border-radius: 10px;
text-align: center;
}
.mst_saju04.box_160 {
background: url(/images/mst_saju04.png) no-repeat;
background-size: 100% 100%;
background-position: center top;
border-radius: 10px;
text-align: center;
}
.mst_saju05.box_160 {
background: url(/images/mst_saju05.png) no-repeat;
background-size: 100% 100%;
background-position: center top;
border-radius: 10px;
text-align: center;
}
.mst_list .mst_box{
position: relative;
min-height:190px;
border-bottom: 1px solid #d4d4d4;
padding: 35px 0;
box-sizing: border-box;
}
.mst_list .mst_box .mst_info {
position: absolute;
top: 35px;
left: 190px;
padding: 0;
}
.mst_box .mst_info .name {
font-size: 17px;
}
.mst_box .mst_info .name.font_16 {
font-size: 16px;
letter-spacing:-1px;
}
.txt_s_gray {
font-size: 13px;
color: #b5b5b5;
margin: 2px 0;
}
.txt_s_gray.font_12{
font-size:12px !important;
}
.mst_box .mst_photo {
position: relative;
}
.mst_list .mst_box .mst_photo .badge {
position: absolute;
right: 10px;
bottom: 10px;
}
.review .mst_name{
position: relative;
}
/* 작성후기 삭제 이미지
.review .mst_name .btn_del img {
width: 28px;
}
.review .mst_name .btn_del{
position: absolute;
right: 0px;
top: 0px;
}*/
.review .mst_name .btn_li_r li {
display: inline-block;
}
.review .mst_name .btn_li_r {
position: absolute;
right: 0px;
top: 0px;
}
.review .mst_name .name {
vertical-align:middle;
}
.review .mst_name .icon_star img {
width: 13px;
margin: 0 2px;
vertical-align: middle;
}
.box_gray .date {
font-size: 12px;
color: #b5b5b5;
}
.review_w .mst_info {
text-align: center;
}
.circle_bg{
display: inline-block;
width: 75px;
height: 75px;
background: url(/images/mst_tarot01.png) center no-repeat;
border-radius: 50%;
position: relative;
}
.circle_bg img {
width: 75px;
border-radius: 50%;
position: absolute;
bottom: 0;
left: 0;
}
.name {
font-family: sd6;
}
.review_w .star_score .txt, .review_w .word_li .txt {
font-size: 14px;
text-align: center;
}
.review_w .star_score .icon_star {
text-align: center;
}
.review_w .star_score .icon_star img {
width: 28px;
margin: 0 4px;
}
.review_w .word_li ul {
font-size: 0;
text-align:center;
}
.review_w .word_li ul li {
display: inline-block;
/*width: calc(1/3 * 100%) ;*/
margin: auto 4px;
text-align: center;
margin-bottom: 10px;
}
.review_w .word_li ul li button.on {
height: 37px;
line-height: 37px;
font-size: 13px;
padding: 0 15px;
border: none;
background: #25476a;
color: #fff;
border-radius: 20px;
}
.review_w .word_li ul li button.off {
height: 37px;
line-height: 37px;
font-size: 13px;
letter-spacing:-1px;
padding: 0 15px;
border: 1px solid #d4d4d4;
background: #fff;
color:#3d3d3d;
border-radius: 20px;
}
.review_w .mst_info .name {
line-height:25px;
}
h3.sub_tit {
font-size: 17px;
font-family: sd6;
}
.write_box textarea {
width: 100%;
height: 250px;
border: 1px solid #d4d4d4;
border-radius: 10px;
padding: 10px;
box-sizing: border-box;
}
.btn_two ul{
font-size: 0;
}
.btn_two ul li {
display: inline-block;
width: calc(50% - 6px);
}
.btn_two ul li:first-child {
margin-right: 5px;
}
.btn_two ul li:last-child {
margin-left: 5px;
}
.coupon_area .mst_info .name_02 {
font-size: 14px;
font-family: sd6;
}
.coupon_area .mst_info .coupon {
font-family: sd6;
font-size: 18px;
}
.coupon_area .cp_none {
text-align: center;
}
/*** 검색 ***/
.search_area .inp_search {
height: 50px;
line-height: 50px;
border: 1px solid #d4d4d4;
border-radius: 50px;
position: relative;
}
.input_none {
border: none;
width:100%;
height: 50px;
line-height: 50px;
border-radius: 50px;
text-align: center;
margin:0 auto;
background:none;
}
.input_none::placeholder {
color: #b5b5b5;
}
.inp_search .btn_search{
position: absolute;
right: 15px;
top: 12px;
}
.search_area h2.tit_01 {
font-size: 25px;
font-family: sd6;
}
.search_area .tit_txt_01 {
color: #b5b5b5;
}
.search_area .rank_li .mst_box {
margin-top: 10px;
position: relative;
border-bottom: 1px solid #d4d4d4;
padding: 0 0 35px 0;
box-sizing: border-box;
}
.search_area .rank_li .mst_box.last {
border-bottom: none;
}
.search_area .search_txt {
font-size: 18px;
font-family: sd6;
text-align: center;
}
.search_area .srarch_txt_02 {
margin-top: 30px;
padding-top: 40px;
border-top: 1px solid #d4d4d4;
}
.position_r {
position:relative;
}
.msg_txt {
font-size:13px;
line-height:140%;
margin-top:15px;
color:#787878;
}
/*** 운세 ***/
.unse_area h2.tit{
font-size: 18px;
font-weight: normal;
font-family:'sd6';
}
.unse_area .tit_txt {
font-size: 12px;
color: #B5B5B5;
}
.unse_area .unse_li .li_01 {
background: url(/images/unse_img_A027.png) left center no-repeat;
}
.unse_area .unse_li .li_02 {
background: url(/images/unse_img_A104.png) left center no-repeat;
}
.unse_area .unse_li .li_03 {
background: url(/images/unse_img_A103.png) left center no-repeat;
}
.unse_area .unse_li .li_04 {
background: url(/images/unse_img_B030.png) left center no-repeat;
}
.unse_area .unse_li .li_05 {
background: url(/images/unse_img_A213.png) left center no-repeat;
}
.unse_area .unse_li .li_06 {
background: url(/images/unse_img_A200.png) left center no-repeat;
}
.unse_area .unse_li .li_07 {
background: url(/images/unse_img_A205.png) left center no-repeat;
}
.unse_area .unse_li .li_08 {
background: url(/images/unse_img_A214.png) left center no-repeat;
}
.unse_area .unse_li .li_09 {
background: url(/images/unse_img_A202.png) left center no-repeat;
}
.unse_area .unse_li .li_10 {
background: url(/images/unse_img_A209.png) left center no-repeat;
}
.unse_area .unse_li div[class^="li"] {
margin-bottom: 30px;
background-size: 47px;
}
.unse_area .unse_li div[class^="li"] p {
padding-left: 70px;
box-sizing: border-box;
}
.unse_area .unse_li p.unse_name {
font-family:'sd5';
font-size:15px;
}
.unse_area .unse_li p.unse_txt{
font-size: 13px;
}
/***오늘의 운세 ***/
.unse_area h2.res_tit {
font-size: 20px;
font-family: sd6;
}
.result_cont .saju_info {
margin-top: 20px;
}
.result_cont .saju_info p {
font-size: 14px;
}
.result_cont h3{
font-size: 16px;
margin-top: 40px;
padding-bottom: 10px;
border-bottom: 1px solid #d4d4d4;
}
.result_cont .content {
margin-top: 25px;
}
.result_cont .graph_bg {
height: 30px;
background: #ecebeb;
position: relative;
margin-bottom: 20px;
border-radius: 50px;
}
.result_cont .graph_bg .bar_01 {
display: inline-block;
background: #f57c60;
height: 30px;
border-radius: 50px;
}
.result_cont .graph_bg .u_point {
position: absolute;
left: 15px;
top: 2px;
color: #fff;
}
.lottom_num {
font-size: 0;
width:80%;
margin: auto;
text-align: center;
}
.lottom_num li {
display: inline-block;
width: calc(100% * 1/5 - 6px);
margin: 0 3px;
}
.lottom_num li span{
display:block;
width:40px;
height: 40px;
line-height: 40px;
border-radius:20px;
color:#fff;
text-align: center;
}
.lottom_num .num_00 {
background:#fcc43d;
}
.lottom_num .num_01 {
background:#8ec6e7;
}
.lottom_num .num_02 {
background:#f28d81;
}
.lottom_num .num_03 {
background:#a7a1dd;
}
.lottom_num .num_04 {
background:#6bce9f;
}
.result_cont .up_list{
display:inline-block;
}
.result_cont .up_list li {
list-style: disc;
margin-left: 20px;
margin-bottom: 10px;
}
/***토정비결 ***/
.result_cont .month_li .li_01 li:first-child{
width: 100%;
padding-bottom:10px ;
}
.result_cont .month_li .li_01 li:last-child{
width: 100%;
margin-bottom: 30px;
}
.result_cont .month_li .li_01 li:first-child span {
font-family: sd5;
font-size: 16px;
color: #678ac5;
}
/*** 월간종합운세 ***/
.result_cont .result_tit_02, .tarot_cont .result_tit_02 {
margin-top: 0;
/*padding: 0 20px;*/
font-size: 16px;
color: #000;
font-family: sd5;
font-weight: normal;
}
.result_cont .div_day_un {
margin-top:0 ;
}
.result_cont .day_unse_li .li_01 {
list-style: disc;
margin:0 0 20px 20px;
padding-left: -10px;
}
.result_cont .div_day_un .li_cont li:first-child {
margin-bottom: 10px;
}
.result_cont .icon_ex_m {
text-align: center;
margin-top: 20px;
}
.result_cont .icon_ex_m li{
display: inline-block;
margin: 0 10px;
}
.result_cont .icon_ex_m li span{
display: inline-block;
margin-left: 10px;
font-size: 12px;
}
.result_cont .icon_ex_m li img {
vertical-align: middle;
}
.result_cont .calendar_table .table_st01 td {
position: relative;
border-left: none;
}
.result_cont .calendar_table .table_st01 th {
border-left: none;
}
.result_cont .calendar_table .table_st01 td .icon_mark img {
width: 20px;
}
.result_cont .calendar_table .table_st01 td .icon_mark{
position: absolute;
top:30px;
left: 50%;
transform:translateX(-50%)
}
.result_cont .calendar_table .table_st01 td .date {
position: absolute;
top:5px;
left: 50%;
transform:translateX(-50%)
}
/*** 띠별운세 ***/
.result_cont .ani_li ul {
font-size: 0;
text-align: center;
}
.result_cont .ani_li ul li {
display: inline-block;
width: calc(1/3 * 100%);
text-align: center;
margin-bottom: 20px;
}
.result_cont .ani_li ul li span {
display: block;
font-size: 13px;
}
.result_cont .ani_li ul li img {
width: 60px;
}
.result_cont .sel_ani_tit{
margin: 0 20px;
/*width: 80%;
margin: 0 auto;*/
text-align: center;
font-family: sd5;
background: #f9f9f9;
padding: 5px;
box-sizing: border-box;
border-radius: 50px;
}
.result_cont .sel_ani_tit span {
font-size: 15px;
color:#678ac5;
}
.result_cont .cont_li li {
margin-bottom: 10px;
}
/**** 타로 ****/
.result_cont .card_area {
padding: auto 20px;
box-sizing: border-box;
position: relative;
width: 100%;
}
.card_body {
position: relative;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 100%;
height: 100%;
margin: auto;
}
.result_cont .card_area .card_li {
font-size: 0;
text-align: center;
}
.result_cont .card_area .card_li li {
display: inline-block;
width: calc( 1/6 * 100%);
padding:0 4px;
box-sizing: border-box;
margin-bottom: 10px;
}
.result_cont .card_area .card_li li:nth-child(n+19){
margin-bottom: 0;
}
.result_cont .card_three img:first-child {
width: 70px;
opacity: 70%;
vertical-align: bottom;
margin-right: 10px;
}
.result_cont .card_three img:last-child {
width: 70px;
opacity: 70%;
vertical-align: bottom;
margin-left: 10px;
}
/*** 220928 후기스와이프수정추가 ***/
.bg_gray {
position:relative;
padding-bottom:40px !important;;
}
.swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction {
bottom: 10px;
left: 0;
width: 100%;
}
.swiper-pagination-bullet {
margin: 0 4px;
}
.swiper-pagination {
position: absolute;
text-align: center;
-webkit-transition: .3s opacity;
-o-transition: .3s opacity;
transition: .3s opacity;
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
z-index: 10;
}
/*** 20221006 sns공유하기 추가 ***/
.sns_icon_li {
width: 100%;
margin: 0 auto;
font-size: 0;
}
.sns_icon_li li{
width: 25%;
display: inline-block;
text-align: center;
}
.sns_icon_li li span{
display:block;
margin-top:5px;
font-size: 8pt;
color:#999;
}
.url_copy {
width: 90%;
margin: 0 auto;
font-size:0;
}
.url_copy .inp_url {
width:70%;
height: 35px;
line-height: 30px;
padding: 0 10px;
box-sizing: border-box;
background:#f9f9f9;
border: 1px solid #b4b4b4;
font-size: 9pt;
}
.url_copy .btn_copy {
width:30%;
text-align: center;
height: 35px;
line-height: 30px;
border: 1px solid #b4b4b4;
background:#fff;
font-size: 9pt;
margin-left:-1px;
box-sizing: border-box;
}
.bott_popup .popup_box_02 {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
max-width: 420px;
width:90%;
border-radius: 20px;
background: #fff;
padding: 35px 15px;
box-sizing: border-box;
}
.popup_box_02 .btn_close {
position:absolute;
top: 15px;
right: 15px;
}
.popup_box_02 .in_box_01 .tit {
font-size: 18px;
font-family: sd6;
padding-bottom: 10px ;
text-align: center;
}
.popup_box_02 .txt_s {
margin-top: 15px;
text-align: center;
}
.detail_area .btn_area_02 {
padding:0 15px;
box-sizing:border-box;
}
.mst_info_03 .writer .icon_star {
margin-top:-4px;
}
.mst_info_03 .writer .w_name {
font-family: sd6;
}
/*** 221018 가상계좌 결제정보팝업 추가 ***/
.charge_area .virtual_info {
margin-top: 25px;
/*padding-top:15px ;
border-top: 1px solid #b4b4b4;*/
}
.charge_area .virtual_info li {
padding-top: 10px;
font-size: 14px;
}
.charge_area .virtual_info li label {
display: inline-block;
min-width: 100px;
width: 130px;
padding-left: 10px;
box-sizing: border-box;
font-weight: bold;
}
.charge_area .virtual_info li .bold {
font-size: 16px;
font-family: sd6;
}
/**메인운세 타로 베너 수정 **/
.unse_banner .unse_br {
width: 100%;
height: 60px;
line-height: 60px;
background: #fff4f4;
border-radius: 10px;
padding-left: 25px !important;
box-sizing: border-box;
position: relative;
}
.unse_banner ul {
width: 100%;
}
.unse_banner .unse_br .category {
font-size: 13px;
display: inline-block;
line-height: 25px;
padding: 1px 15px;
background: #fff;
border:1px solid #CE8A8A;
border-radius: 25px;
margin-right: 25px;
}
.unse_banner .br_txt {
font-family: sd5;
}
.unse_banner .unse_br .score {
font-size: 17px;
font-weight: bold;
display: inline-block;
margin: 0 5px;
}
.unse_banner .unse_br .btn_go {
font-size: 12px;
color: #787878;
position: absolute;
right: 20px;
text-decoration: underline;
}
.unse_banner .tarot_br {
width: 100%;
height: 60px;
line-height: 60px;
background: #F4FAFF;
border-radius: 10px;
padding-left: 25px !important;
box-sizing: border-box;
position: relative;
}
.unse_banner .tarot_br .category {
font-size: 13px;
display: inline-block;
line-height: 25px;
padding: 1px 15px;
background: #fff;
border:1px solid #7189C1;
border-radius: 25px;
margin-right: 25px;
}
.banner_box_01 {
width: 100%;
height: 60px;
line-height: 60px;
font-family: sd5;
background: #fff4f4;
border-radius: 10px;
text-align:center;
}
.main_btn_area {
font-size:0;
}
.main_btn_area li{
display: inline-block;
width:50%;
}
.main_btn_area li:nth-child(even) {
text-align:right;
}
.main_btn_area li img {
max-width:185px;
width:95%;
}
.main_tit_area .btn_more_02 {
position: absolute;
right: 0;
top: 5px;
}
/** 전체후기 추가 **/
.txt_right {
text-align: right;
}
.review_list {
position: relative;
border-bottom: 1px solid #D4D4D4;
}
.review_list .main_mst_info {
position: absolute;
top: 0px;
left: 110px;
padding: 0;
}
.review_list .main_mst_info .date{
font-size:12px;
color: #b5b5b5;
}
.review_list .review {
margin-top: 35px;
padding-bottom: 40px;
}
/*** 간편결제 카드등록 ***/
.pay_li .card_area {
padding: 20px 5px;
margin-top: 10px;
box-sizing: border-box;
background:#f9f9f9;
border-radius: 7px;
}
.pay_li .card_area .card_img_01 {
width: 100%;
max-width: 320px;
height: 175px;
margin: 0 auto;
background: url(/images/card_img_01.png) no-repeat;
background-size:320px ;
}
.pay_li .card_area .card_img_02 {
width: 100%;
max-width: 320px;
height: 175px;
margin: 0 auto;
background: url(/images/card_img_02.png) no-repeat;
background-size:320px ;
position: relative;
}
.pay_li .card_area .card_img_01 a, .pay_li .card_area .card_img_02 a {
display: block;
width: 100%;
height: 175px;
}
.pay_li .card_area .a_line {
text-decoration: underline;
}
.pay_li .card_area p.txt_01 {
font-size: 13px;
text-align: center;
margin-top: 10px;
}
.pay_li .card_area .card_info {
position: absolute;
bottom: 20px;
left: 35px;
}
.pay_li .card_area .card_info p {
color: #fff;
}
.info_inp .inp_01 .input_02{
height: 50px;
width: 40px;
border: 1px solid #B5B5B5;
text-align: center;
}
.info_inp .inp_01 .input_03{
height: 50px;
width: 70px;
border: 1px solid #B5B5B5;
text-align: center;
}
.bg_gray.bg_white {
background:#fff !important;
padding-top:0 !important;
}
/*** 부재중 알림팝업 작업추가 20221213 ***/
.popup_box .in_box_01 .tit_02 {
font-size:15px;
font-family: sd5;
text-align: center;
padding: 20px 0;
border-bottom: 1px solid #B5B5B5;
word-wrap:break-word;
white-space: normal;
word-break:keep-all;
}
.popup_box .state_msg {
padding: 10px;
word-wrap:break-word;
white-space: normal;
word-break:keep-all;
}
.popup_box .in_box_01 .agree_chk {
margin-bottom: 20px;
}
/*** 상담대기 탭메뉴 ***/
.mst_info_04 .agree_chk.btn_line_r {
margin: 0 auto;
}
/*** 리스트 수정 20221227 ***/
.mst_list_01 .mst_box .mst_tarot01, .mst_list_01 .mst_box .mst_tarot02, .mst_list_01 .mst_box .mst_tarot04 {
text-align: left !important;
}
.popup_box.mst_list_01 .mst_photo {
text-align:center !important;
}
.mst_list_01 .mst_box .mst_photo{
height: 165px;
}
.mst_list_01 .mst_box .mst_photo .mst_img {
display: inline-block;
height: 165px;
line-height: 165px;
}
.mst_list_01 .mst_box .mst_photo .mst_img img {
vertical-align: bottom;
}
.mst_list_01 .mst_box .mst_photo .mst_txt {
position: absolute;
left: 160px;
top: 40px;
padding-right: 5px;
box-sizing: border-box;
}
.mst_list_01 .mst_box .mst_photo .badge_01 {
display: inline-block;
padding:5px 15px;
font-size: 13px;
color:#fff;
background-color: rgba( 0, 0, 0, 0.1 );
border-radius:50px;
position:absolute;
top:15px;
right:10px;
}
.mst_list_01 .mst_box .mst_photo .badge_01 .num {
display: inline-block;
margin-left: 10px;
font-size:14px;
font-weight: bold;
color:#fff;
}
.mst_list_01 .mst_box .mst_photo .mst_txt p {
color:#fff;
}
.mst_list_01 .mst_box .mst_photo .mst_txt p[class ^= "mst_txt"] {
font-size: 13px;
letter-spacing:-0.5px;
font-style: italic;
}
.mst_list_01 .mst_box .mst_photo .mst_txt .mst_txt_01{
font-family: sd4;
margin-top: 20px;
/*background-color: rgba( 0, 0, 0, 0.1 );
border-radius:10px;
padding:10px;
box-sizing:border-box;*/
/*text-shadow: 2px 2px 2px #2a2a2a;*/
}
.mst_list_01 .mst_box .mst_photo .mst_txt .mst_txt_02{
font-family: sd4;
margin-top: 10px;
/*text-shadow: 2px 2px 2px #2a2a2a;*/
}
.mst_list_01 .mst_box .career {
margin-bottom: 5px;
}
.mst_list_01 .mst_box .career li {
font-size:13px;
color:#b5b5b5;
/*list-style:disc;
margin-left: 15px;*/
letter-spacing:-0.5px;
}
.main_tab.tab_menu{
margin:50px 0 40px 0;
}
.main_tab.tab_menu li {
width:calc(1/4 * 100%);
text-align:center;
}
.main_tab.tab_menu li img {
vertical-align: middle;
}
/*** 20230109 앱에들어갈 이벤트 팝업 ***/
.bott_popup .popup_box_03 {
position:absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
max-width: 420px;
width:90%;
border-radius: 15px;
background: #323955;
}
.popup_box_03 .popup_btn_area {
font-size: 0;
width: 100%;
}
.popup_box_03 .popup_btn_area li {
display: inline-block;
width: 50%;
text-align: center;
}
.popup_box_03 .popup_btn_area li button {
width: 100%;
height: 60px;
line-height: 60px;
font-size: 17px;
border: none;
background: #fff;
}
.popup_box_03 .popup_btn_area li .btn_popup_left {
border-radius: 0 0 0 15px;
border-right: 1px solid #323955;
}
.popup_box_03 .popup_btn_area li .btn_popup_right {
border-radius: 0 0 15px 0;
}
/*** 자동결제추가 20230111 ***/
.mypage_area .card_regi {
margin-top: 25px;
padding: 30px 0;
text-align: center;
}
.mypage_area .card_regi .tit {
font-size: 17px;
font-family: sd6;
padding: 0 25px;
text-align:left;
}
.mypage_area .card_regi .card_area .card_img_01 {
width: 90%;
max-width: 320px;
height: 175px;
margin: 0 auto;
margin-top: 20px;
background: url(/images/card_img_01.png) no-repeat;
background-size: 100%;
}
.mypage_area .card_regi .card_area .card_img_02 {
width: 90%;
max-width: 320px;
height: 175px;
margin: 0 auto;
margin-top: 20px;
background: url(/images/card_img_02.png) no-repeat;
background-size: 100%;
position: relative;
}
.mypage_area .card_regi .card_area .card_info {
position: absolute;
bottom: 20px;
left: 35px;
}
.mypage_area .card_regi .card_area .card_info p {
color:#fff;
text-align:left;
}
.chk_02 input[type='radio']{
display: none;
}
.chk_02 input[type='radio']+label::before{
content: '';
display: inline-block;
width: 20px;
height: 20px;
vertical-align: middle;
margin:0 10px 0 0;
background: url(/images/radio_off.png) center;
background-size: contain;
}
.chk_02 input[type='radio']:checked+label::before{
background: url(/images/radio_on.png) center;
background-size: contain;
vertical-align: middle;
}
/***** 쿠폰등록추가 230303 *****/
.info_inp .inp_01 .input_04{
height: 50px;
width: 100%;
border: 1px solid #B5B5B5;
text-align: center;
}
.info_inp .inp_01 .inp_num_04 {
font-size: 0;
}
.info_inp .inp_01 .inp_num_04 li {
display: inline-block;
width: calc(25% - 6px);
margin-right: 5px;
}
.info_inp .inp_01 .inp_num_04 li:last-child{
margin-right: 0;
}
/**** 리스트수정 20230302 *****/
.mst_list_02 .mst_box {
width: 100%;
height: 135px;
position: relative;
border-radius: 10px;
}
.mst_box.bg_purple_02 {
background: url(../images/mst_bg_purple.png) left bottom no-repeat;
background-size:cover;
}
.mst_box.bg_gray_02 {
background: url(../images/mst_bg_gray.png) left bottom no-repeat;
background-size:cover;
}
.mst_box.bg_green_02 {
background: url(../images/mst_bg_green.png) left bottom no-repeat;
background-size:cover;
}
.mst_list_02 .mst_box .mst_img {
position:absolute;
bottom: 0px;
left: 0;
}
.mst_list_02 .mst_box .mst_img img {
width: 174px;
}
.mst_list_02 .mst_box .mst_info {
position: absolute;
left: 170px;
top: 20px;
padding-right: 5px;
box-sizing: border-box;
}
.mst_list_02 .mst_box .mst_name {
border-radius: 50px;
border: 1px solid #D0CFDA;
display: inline-block;
padding: 2px 10px;
font-size: 13px;
color: #D0CFDA;
}
.mst_list_02 .mst_box .mst_name span {
font-weight: bold;
}
.mst_list_02 .mst_box .mst_txt_03{
font-size: 11px;
color: #fff;
margin-top: 15px;
}
.mst_list_02 .mst_info_02 .badge_li {
font-size: 0;
}
.mst_list_02 .mst_info_02 .badge_li li {
display: inline-block;
}
.mst_list_02 .mst_info_02 .badge_li li:first-child{
border: 1px solid #FB963E;
padding: 2px 10px;
font-size: 12px;
color: #FB963E;
border-radius: 20px;
margin-right: 5px;
}
.mst_list_02 .mst_info_02 .badge_li li:last-child{
border: 1px solid #FC5F5F;
padding: 2px 10px;
font-size: 12px;
color: #FC5F5F;
border-radius: 20px;
margin-right: 5px;
}
.mst_list_02 .mst_info_02 .hash_tag_02 {
font-size: 15px;
font-family: sd5;
}
.mst_list_02 .mst_info_02 .icon_li li {
display: inline-block;
vertical-align: middle;
font-size: 14px;
color: #787878;
}
.mst_list_02 .mst_info_02 .icon_li .icon_star a{
font-size: 14px;
display: inline-block;
padding-left: 25px;
background: url(../images/icon_star.png) 0 2px no-repeat;
background-size:16px ;
}
.mst_list_02 .mst_info_02 .icon_li .icon_talk a{
font-size: 14px;
display: inline-block;
padding-left: 25px;
background: url(../images/icon_talk.png) 0 4px no-repeat;
background-size:17px ;
margin-left: 15px;
}
.mst_list_02 .mst_info_02 {
position: relative;
}
.mst_list_02 .mst_info_02 .price {
position: absolute;
right: 0;
bottom: 0;
font-family: sd6;
font-size: 18px;
}
.mst_list_02 .mst_info_02 .price span.time {
font-size: 13px;
font-family: sd4;
}
.mst_list_02 .review_txt {
background: #F7F7F7;
border-radius: 30px;
padding: 10px 20px;
box-sizing: border-box;
font-size: 12px;
position: relative;
}
.mst_list_02 .review_txt p {
width: 80%;
font-size: 12px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.mst_list_02 .review_txt span {
position: absolute;
right: 20px;
bottom: 10px;
color: #ABABAB;
}
.mst_list_02 .btn_area {
width: 50%;
margin:auto;
}
.mst_list_02 .btn_area button {
width: 100%;
height: 35px;
line-height: 35px;
font-family: sd5;
font-size: 12px;
text-align: center;
border-radius: 20px;
}
.mst_list_02 .btn_area .btn_tel_02 {
/*background:#453F6E ;*/
background: #fff;
border:1px solid #453F6E;
color:#453F6E;
}
.mst_list_02 .btn_area .btn_counsel_02 {
/*background:#5D8C6F ;*/
background: #fff;
border:1px solid #5D8C6F;
color:#5D8C6F;
}
.mst_list_02 .btn_area .btn_absent_02 {
/*background:#A4A2AF;*/
background: #fff;
border:1px solid #A4A2AF;
color:#A4A2AF;
}
.mst_list_02 .btn_area button span {
display: inline-block;
padding-left: 25px;
}
.mst_list_02 .btn_area .btn_tel_02 span {
background:url(../images/icon_tel_purple.png) left center no-repeat;
background-size: 16px;
}
.mst_list_02 .btn_area .btn_counsel_02 span {
background:url(../images/icon_tel_green.png) left center no-repeat;
background-size: 16px;
}
.mst_list_02 .btn_area .btn_absent_02 span {
background:url(../images/icon_tel_gray.png) left center no-repeat;
background-size: 16px;
}
/*** 무료상담 230321 ***/
.top_title.tit_box {
padding: 25px;
background:#F8F8F8 ;
position: relative;
}
.top_title .tit_txt{
position: absolute;
left:125px;
top: 20px;
padding-right: 25px;
box-sizing: border-box;
word-break: keep-all;
}
.top_title .tit_txt p:first-child{
font-size: 16px;
font-family: sd6;
color: #000;
margin-bottom: 5px;
}
.free_list, .free_apply {
margin-top: 30px;
}
.free_list .mst_box {
height: 100px;
position: relative;
border-radius: 10px;
}
.free_list .mst_box .mst_img {
position: absolute;
bottom:0;
left:50%;
transform: translateX(-50%);
}
.free_list .mst_info {
font-size: 0;
margin-top: 10px;
}
.free_list .mst_info li{
display: inline-block;
width: 50%;
}
.free_list .mst_info li:first-child{
font-size: 15px;
font-family: sd5;
color: #000;
}
.free_list .mst_info li:last-child{
color: #FC5F5F;
text-align: right;
}
.free_list .notice .title {
background: url(../images/icon_notice.png) left center no-repeat;
height: 40px;
background-size: 30px;
padding-left: 40px;
font-family: sd6;
line-height: 40px;
}
.free_list .notice li {
list-style:disc;
margin-bottom: 5px;
margin-left: 25px;
font-size: 13px;
}
.free_apply .btn_area_r {
text-align: right;
margin-top: 20px;
}
.free_apply .agree_area {
margin-top:50px;
}
.free_apply .agree_area .agree_chk label {
font-weight: bold;
}
.free_apply .agree_area .agree_box {
margin-top: 20px;
border:1px solid #BCBCBC;
padding: 10px;
height: 150px;
overflow-y: scroll;
font-size: 12px;
}
.free_apply .apply_txt {
margin-top: 50px;
text-align: center;
}
/*** 무료상담 230329 ***/
.free_apply .time_sel .date {
text-align: center;
font-size: 16px;
font-family: sd5;
color: #000;
}
.free_apply .time_sel .time {
margin-top: 15px;
font-size: 0;
}
.free_apply .time_sel .time li {
display: inline-block;
/*width: calc(50% - 10px);*/
width:100%;
margin-top: 10px;
position: relative;
}
/*
.free_apply .time_sel .time li:nth-child(odd){
margin-right: 10px;
}
.free_apply .time_sel .time li:nth-child(even){
margin-left: 10px;
}*/
.free_apply .time_sel .time li div {
padding:10px 0;
border: 1px solid #B5B5B5;
border-radius: 10px;
text-align: center;
background: #fff;
}
.free_apply .time_sel .time li div.on {
background: #f2f2f2;
}
.free_apply .time_sel .time .booking_on {
position: absolute;
right: 10px;
top: 9px;
display: inline-block;
padding: 2px 10px;
background: #73A5D2;
font-size: 12px;
color:#fff;
font-weight: bold;
border-radius: 5px;
}
.free_apply .time_sel .time .booking_off {
position: absolute;
right: 10px;
top: 9px;
display: inline-block;
padding: 2px 10px;
background: #ED5E5E;
font-size: 12px;
color:#fff;
font-weight: bold;
border-radius: 5px;
}
.free_apply .time_sel .time li>div>span{
display: block;
font-size: 12px;
color: #ABABAB;
}
.free_apply .date_box {
padding: 15px;
background: #f9f9f9;
text-align: center;
border-radius: 10px;
}
/**** 20230419 예약상담 추가 ***/
.free_apply .pay_li {
margin-top: 25px;
font-size: 0;
}
.free_apply .pay_li li {
margin-bottom: 20px;
}
.free_apply .pay_price {
margin-top: 25px;
}
.free_apply .pay_price .price_01{
margin-top: 15px;
}
.free_apply .pay_price {
position: relative;
}
.free_apply .pay_price .price, .free_apply .pay_price .point {
position: absolute;
right: 20px;
}
.free_apply .pay_price .price_02 span {
font-size: 18px;
font-family: sd6;
color: #fb9520;
}
/**** 무료상담 시간대별 추가 20230508 ***/
.free_list .select_area {
text-align: center;
}
.select_02 {
width: 60%;
height: 40px;
border: 1px solid #BCBCBC;
border-radius: 5px;
color: #ABABAB;
text-align: center;
}
.select_03 {
width: 100%;
height: 30px;
border: 1px solid #BCBCBC;
border-radius: 5px;
color: #ABABAB;
text-align: center;
}
.circle_bg_02 {
display: inline-block;
width: 60px;
height: 60px;
background: url(../images/mst_bg_purple.png) center no-repeat;
border-radius: 50%;
position: relative;
}
.circle_bg_02 img {
width: 60px;
border-radius: 50%;
position: absolute;
bottom: 0;
left: 0;
}
.free_list .box_line.pd {
padding: 10px;
box-sizing: border-box;
}
.free_list .box_line {
position: relative;
}
.free_list .box_line .time_info {
position: absolute;
left: 95px;
top: 10px;
height: 65px;
}
.box_line .time_info .mst_name {
font-size: 15px;
font-family: sd5;
}
.box_line .time_info .time_01, .box_line .time_info .time_02 {
font-size: 12px;
color: #ABABAB;
}
.free_list .box_line .btn_area {
text-align: right;
}
/*** 무료상담2차버젼 ***/
.free_list .notice.gray_box {
padding: 10px;
box-sizing: border-box;
background: #f8f8f8;
border-radius: 10px;
}
.free_list .notice .sub_title {
font-weight: bold;
margin-bottom: 10px 0 10px 0;
}
.free_apply .text_area {
width: 100%;
height: 150px;
border: 1px solid #b5b5b5;
overflow: auto;
padding: 10px;
box-sizing: border-box;
margin-top: 10px;
}
.event_area .event_bg {
background: url(../images/free_event_bg.png) repeat-y;
background-size: 100%;
}
.point_banner {
width: 330px;
padding-top: 30px;
margin-top: 30px;
border-top: 1px solid #d4d4d4;
margin: 30px auto ;
}
.point_banner .br_list{
font-size: 0;
}
.point_banner .br_list li {
display: inline-block;
width: calc(50% - 7px);
}
.point_banner .br_list li:first-child{
margin-right: 7px;
}
.point_banner .br_list li:last-child{
margin-left: 7px;
}
.point_banner .my_point .inbox {
width: 100%;
padding: 20px 30px !important;
box-sizing: border-box;
border-radius: 10px;
background: #f9f9f9;
text-align: center;
}
.point_banner .my_point .point_txt {
display: inline-block;
font-size: 25px;
font-family: sd6;
padding: 10px 10px 10px 35px;
background: url(/images/icon_point_02.png) left no-repeat;
background-size: 27px;
vertical-align: middle;
}
.free_event .box_pink {
background:#fbeeef;
border-radius: 10px;
padding: 20px 25px;
box-sizing: border-box;
margin-top: 25px;
}
.mypage_area .free_event .box_pink .tit {
font-size: 17px;
font-family: sd6;
text-align: left;
}
.mypage_area .free_event .box_pink p.link {
text-align: center;
}
.mypage_area .free_event .box_pink p.link button{
font-size: 13px;
}
.mypage_area .free_event .box_pink p .txt_s {
font-size: 13px;
}
/***출석체크이벤트***/
.event_area_02 .top_area {
text-align: center;
background:#645BA5 ;
padding-top: 20px;
padding-bottom: 40px;
box-sizing: border-box;
position: relative;
}
.event_area_02 .top_area .calendar_bg {
width: 94px;
height: 107px;
background: url(../images/calendar_bg.png) no-repeat;
background-size: 94px;
margin: 15px auto;
}
.event_area_02 .top_area .calendar_bg .month {
padding-top: 40px;
font-size: 13px;
color: #B10017;
font-family: sd6;
box-sizing: border-box
}
.event_area_02 .top_area .calendar_bg .day{
margin-top: -10px;
font-size: 33px;
font-family: sd7;
font-weight: bold;
}
.event_area_02 .top_area .btn_month {
position: absolute;
top: 170px;
left: 50%;
transform: translate(-50%);
}
.event_area_02 .top_area .btn_month .btn_prev {
display: inline-block;
margin-right: 150px;
}
.event_area_02 .top_area .btn_month .btn_next {
display: inline-block;
}
.event_area_02 .top_area .btn_month img {
vertical-align: middle;
}
.event_area_02 .top_area .today_unse {
padding: 5px 20px 5px 15px;
border: none;
border-radius: 5px;
color: #fff;
font-family: sd6;
font-size: 13px;
background: url(../images/icon_arr.png) no-repeat right 10px center,#938DC0;
background-size: 5px;
}
.event_area_02 .top_area .btn_li li {
display: inline-block;
margin-top: 10px;
}
.event_area_02 .top_area .btn_li li:first-child {
margin-right: 15px;
}
.event_area_02 .top_area .btn_li li:last-child {
margin-left: 15px;
}
.event_area_02 .calendar_area {
background: #fff;
border-radius: 20px 20px 0 0 ;
padding: 40px 15px 20px 15px;
margin-top: -15px;
}
.event_area_02 .calendar_area .table_calendar{
border-collapse:collapse;
}
.event_area_02 .calendar_area .table_calendar th{
font-size: 12px;
color: #B6B6B6;
padding-bottom: 10px;
border-bottom: 1px solid #BCBCBC;
}
.event_area_02 .calendar_area .table_calendar .txt_red {
color: #F69292;
}
.event_area_02 .calendar_area .table_calendar .txt_blue {
color: #98CCF3;
}
.event_area_02 .calendar_area .table_calendar td {
height: 50px;
line-height: 50px;
text-align: center;
font-size: 12px;
}
.event_area_02 .calendar_area .table_calendar td a {
display:inline-block;
width: 30px;
height: 30px;
line-height: 30px;
border-radius: 25px;
}
.event_area_02 .calendar_area .table_calendar td a.on {
background: #C2BDE6;
color:#fff;
}
.event_area_02 .notice_li{
margin-top: 20px;
padding: 0 15px;
}
.event_area_02 .notice_li .notice_tit {
font-family: sd6;
font-size: 14px;
}
.event_area_02 .notice_li ul {
margin-top: 15px;
}
.event_area_02 .notice_li ul li {
list-style: disc;
margin-left: 20px;
margin-bottom: 5px;
font-size: 12px;
word-break: keep-all;
}
/*** 룰렛이벤트 수정 240821 / 3차 수정 251017***/
.roulette_bg{
background: url(../images/roulette_bg.png) top no-repeat, #fffae4;
background-size: cover;
max-height: 502px;
padding-bottom: 30px;
}
.roulette_bg .roulette_area {
position: relative;
text-align: center;
width: 95%;
max-width: 370px;
margin: 0 auto;
}
.roulette_bg .roulette_area .roulette_arr {
position: absolute;
top: 0;
left: 50%;
transform: translate(-50%);
z-index: 1;
}
.roulette_bg .roulette_area .roulette_arr img {
width: 30px;
}
.roulette_bg .roulette_area .btn_start img {
max-width: 79px;
width: 100%;
}
.roulette_bg .roulette_area .btn_start{
position:absolute;
left: 50%;
top:50%;
transform: translate(-50%, -50%);
z-index: 1;
}
.roulette_bg .roulette_area .roulette_img img {
max-width: 370px;
width: 100%;
}
/***포인트추가 251020 ***/
.roulette_bg .point_area {
max-width: 275px;
width: 100%;
margin: 0 auto;
padding: 10px 0 20px 0;
box-sizing: border-box;
}
.roulette_bg .point_box {
width: 100%;
display: flex;
gap: 10px;
background: #c2cefb;
border-radius: 10px;
padding: 10px 15px;
box-sizing: border-box;
}
.roulette_bg .point_box .point_img {
width: 38px;
height: 35px;
}
.roulette_bg .point_box .txt {
font-family: one_T;
font-size: 11px;
line-height: 15px;
color: #626262;
letter-spacing: -1px;
}
.roulette_bg .point_box .point {
font-family: one_T;
font-size: 18px;
line-height: 20px;
color: #000;
letter-spacing: -0.5px;
}
.roulette_bg .point_box .btn_area {
margin-left: auto;
}
.roulette_bg .point_box .btn_charge {
padding: 8px 15px;
background: #2e2355;
border: none;
border-radius: 7px;
font-family: one_B;
font-size: 12px;
color: #fff;
letter-spacing: -0.5px;
}
.roulette.coupon_count {
padding: 20px;
box-sizing: border-box;
background: #2e2355;
}
.roulette.coupon_count .tit {
font-family: one_T;
font-size: 17px;
color: #fff;
text-align: center;
}
.roulette.coupon_count .mst_li {
margin-top: 20px;
font-size: 0;
}
.roulette.coupon_count .mst_li li {
width: 20%;
text-align: center;
display: inline-block;
}
.roulette.coupon_count .mst_li li img {
max-width: 50px;
width: 100%;
}
.roulette.coupon_count .mst_li li span {
display: block;
}
.roulette.coupon_count .mst_li li .name {
font-family: one_R;
font-size: 12px;
color: #fff;
margin-top: 5px;
}
.roulette.coupon_count .mst_li li .txt_yellow {
font-weight: bold;
font-size: 15px;
color: #fcdc3d;
margin-top: -5px;
}
.event_popup_02 {
position: fixed;
max-width: 420px;
width: 100%;
/* height:100%;*/
top: 0;
z-index:1000;
}
.event_popup_02 .box_black {
width: 100%;
margin: 0 auto;
/* margin-top: 150px;*/
background-color: rgba( 0, 0, 0, 0.9 );
padding-top: 20px;
border-radius: 15px;
position: relative;
box-sizing: border-box;
z-index:1000;
}
.event_popup_02 .btn_close {
position: absolute;
top: -15px;
right: 0px;
}
.event_popup_02 .select_area {
text-align: center;
}
.event_popup_02 .select_area .tit {
font-family: one_T;
font-size: 20px;
color:#fff;
margin-bottom: 20px;
}
.event_popup_02 .select_img img {
width: 95px;
}
.event_popup_02 .select_img p {
font-family: one_R;
font-weight: bold;
font-size: 15px;
color:#fff;
margin-top: 5px;
}
.event_popup_02 .select_area .txt {
font-family: one_T;
font-size: 16px;
color:#fff;
margin-top: 15px;
line-height: 150%;
}
.event_popup_02 .select_area .txt a {
display: block;
margin-top: 16px;
color: #fff443;
text-decoration: underline;
}
.bg {
display: none;
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100vh;
background-color: #000000;
opacity: 0.3;
z-index: 1000;
overflow: hidden;
}
.bg.show {
display: block;
}
.modal-pop {
display: none;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
max-width: 330px;
width: 100%;
padding: 30px 20px;
box-sizing: border-box;
border-radius: 20px;
background-color: rgba( 0, 0, 0, 0.9 );
text-align: center;
z-index: 10000;
}
.modal-pop.show {
display: block;
}
/* 모바일일 경우....*/
@media screen and (hover: none) and (pointer: coarse) {
.modal-pop {
display: none;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width:100%;
padding: 40px 20px;
border-radius: 20px;
background-color: rgba( 0, 0, 0, 0.9 );
text-align: center;
z-index: 10000;
}
.modal-pop.event-pop {
padding-top: 18.611vw;
padding-bottom: 0;
background-color: #fff;
}
.modal-pop.event-pop {
position: fixed;
width: 100%;
max-width: 100%;
top: auto;
bottom: 0;
left: 0;
transform: translate(0, 100%);
padding: 30px 10px 20px;
border-radius: 20px 20px 0 0;
background-color: rgba( 0, 0, 0, 0.9 );
}
.modal-pop.event-pop.show {
animation: popTrans 0.6s ease both;
}
.modal-pop.event-pop.hidePop {
transform: translate(0, 100%);
display: block;
animation: popTransHide 0.7s ease both;
}
@keyframes popTransHide {
0% {
transform: translate(0, 0);
}
100% {
transform: translate(0, 120%);
display: none;
}
}
@keyframes popTrans {
0% {
transform: translate(0, 100%);
}
100% {
transform: translate(0, 0);
}
}
}
/**** media screen and (max-width:410px) *****/
@media screen and (max-width: 410px){
.bott_popup .popup_box {
/*height: 550px;*/
/*height: 450px;
overflow-y: scroll;*/
}
.round_box .main_mst_info {
left: 130px;
}
.main_visual .top_mst_list div[class ^= "top_mst_"] {
max-height: 210px;
}
.main_visual .top_mst_list div[class ^= "top_mst_"] a {
height: 215px;
}
.main_visual .top_mst_list div[class ^= "top_mst_"] img {
max-width: 250px;
width: 55%;
}
.main_visual .top_mst_list .top_mst_info {
padding-top: 35px;
padding-left: 55%;
box-sizing: border-box;
}
.main_visual .top_mst_list .top_mst_info .name {
margin-top: 10px;
padding-right:10px;
box-sizing:border-box;
line-height:90%;
/*white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;*/
}
.main_visual .top_mst_list .top_mst_info ul {
margin-top: 20px;
padding-right:10px;
box-sizing:border-box;
word-break: break-all;
}
.main_visual .top_mst_list .top_mst_info ul li {
word-break: break-all;
}
.main_visual .top_mst_list .top_mst_info .num {
font-size: 28px;
}
.main_visual .top_mst_list .top_mst_info .name {
font-size: 20px;
}
/**상당후기**/
.mst_photo.box_160.img_small {
width: 110px !important;
height:100px !important;
}
.mst_photo.box_160.img_small .mst_photo_sm {
width: 105px;
}
.mst_list .mst_box .mst_info {
position: absolute;
top: 35px;
left: 130px;
padding: 0;
}
.review_list .main_mst_info {
left: 95px;
}
.review_list .main_mst_info .date{
font-size:12px;
color: #b5b5b5;
}
/**** 리스트수정 20221227 ****/
.mst_list_01 .mst_box .mst_photo .mst_txt p[class ^= "mst_txt"] {
font-size: 12px;
font-family: sd5;
letter-spacing: -1px;
}
.mst_list_01 .mst_box .mst_photo .mst_img img {
width:155px !important;
}
.mst_list_01 .mst_box .mst_photo .badge_01 {
font-size: 13px;
}
.mst_list_01 .mst_box .mst_photo .badge_01 .num {
font-size: 13px;
}
.mst_list_01 .mst_box .mst_photo .mst_txt {
left: 145px;
}
.search_rank.rank_li .hash_tag {
width:150px !important;
}
.mypage_area .btn_list li button {
font-size: 11px;
letter-spacing:-1px;
overflow:hidden;
}
/*** 20230314 추가 ***/
.mst_list_02 .mst_box .mst_img img {
width: 145px;
}
.mst_list_02 .mst_box .mst_info {
left: 150px;
top: 35px;
}
.mst_list_02 .mst_box .mst_txt_03 {
margin-top: 8px;
}
.mst_list_02{
margin-top: 40px !important;
}
.top_title.tit_box {
min-height: 80px;
}
.top_title .tit_txt p:last-child{
font-size: 13px;
}
.top_title .tit_txt {
padding-right: 20px;
box-sizing: border-box;
word-break:break-all;
}
/*** 룰렛이벤트 수정 240821 ***/
.roulette_bg{
padding-bottom: 20px;
}
.roulette_bg .roulette_area .roulette_arr img {
width: 25px;
}
.roulette_bg .roulette_area .btn_start img {
max-width: 60px;
width: 100%;
}
.roulette.coupon_count {
padding: 20px 5px;
}
.roulette.coupon_count .tit {
font-size: 15px;
}
.roulette.coupon_count .mst_li li .name {
font-size: 11px;
letter-spacing: -1px;
}
.roulette.coupon_count .mst_li li .txt_yellow {
font-size: 14px;
}
.event_popup_02 .box_black {
width: 100%;
padding-top: 20px;
/*padding: 20px;*/
border-radius: 15px;
}
}
/**** media screen and (max-width:345px) *****/
/*
@media screen and (max-width: 360px){
.mst_list_01 .mst_box .mst_photo .mst_txt p[class ^= "mst_txt"] {
font-size: 20px;
}
}
*/
/**** media screen and (max-width:345px) *****/
@media screen and (max-width: 345px){
.mst_list_01 .mst_box .mst_photo .mst_txt .mst_txt_01 {
/*width: 160px;*/
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 5;
-webkit-box-orient: vertical;
}
.search_rank.rank_li .hash_tag {
width:120px !important;
}
.info_inp .inp_01 .input_03{
width: 60px;
}
/*** 메인메뉴수정 **/
.main_menu_icon ul li {
display: inline-block;
width: calc(1/3 * 100%);
text-align: center;
margin: 0 0 15px 0;
}
.main_visual .top_mst_list div[class ^= "top_mst_"] {
max-height: 180px;
}
.main_visual .top_mst_list .top_mst_info .num {
font-size: 25px;
}
.main_visual .top_mst_list .top_mst_info .name {
font-size: 20px;
}
.main_visual .top_mst_list div[class ^= "top_mst_"] img {
max-width: 230px;
width: 45%;
}
.popup_box .mst_box {
background-size:cover !important;
}
.top_title .tit_txt p:last-child{
font-size: 13px;
}
.top_title .tit_txt {
padding-right: 15px;
box-sizing: border-box;
word-break:break-all;
}
}