@charset "UTF-8";
/* 스포카 */
@import url("//spoqa.github.io/spoqa-han-sans/css/SpoqaHanSansNeo.css");
/* 주아 */
@import url("https://fonts.googleapis.com/css2?family=Jua&display=swap");
/* 프리텐다드 */
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css");
  
* {
  font-family: "Pretendard", "Spoqa Han Sans Neo", "sans-serif";
}
:root {
  --white: #fff;
  --grey1: #F2F3F7;
  --grey2: #F5F5F5;
  --grey3: #AFAFAF;
  --border: #DFDFDF;
  --dark: #313131;
  --point_main: #2D4DCC;
  --point_blue: #003982;
  --point_red: #FF0057;
  --point_yellow: #ffae1f;
  --point_navy: #333f55;
  --point_green: #14ddb9;
  --black: #000;
  --padding: 10px;
}

/* reset */
h1 a{display: block;}
a{
  color: inherit;
  text-decoration: none;
}
button{
  background: none;
  border: none;
}
img,
video{
  vertical-align: bottom;
}
.hidden{
  display: none;
}
.ellipsis_1{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ellipsis_2{
  display: -webkit-box;
  -webkit-line-clamp: 2; /* 표시할 줄 수 */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ellipsis_3{
  display: -webkit-box;
  -webkit-line-clamp: 3; /* 표시할 줄 수 */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.word_keep{
  word-break: keep-all;
}
/* layout */
body{
  background-color: var(--white);
  line-height: 1.1em;
  font-family: Pretendard;
}
.container_pc{
  width: 1200px;
  margin: auto;
  padding: 0 5px;
}
li, p, a{
  font-family: Pretendard;
}
ul, ol, dl, dd, dt, p{
  padding: 0;
  margin: 0;
  list-style: none;
}
.d-flex{
  display: flex;
}
.wrap{
  flex-wrap: wrap;
}
.all_center{
  align-items: center;
  justify-content: center;
  align-self: center;
  margin: 0 auto;
}
.sub_btn{
  white-space: nowrap;
  padding: 6px 14px;
  border-radius: 7px;
  background-color: var(--grey3);
  color: var(--white);
  transition: .2s;
  cursor: pointer;
}
.sub_btn:hover{
  background-color:#909090;
}
.cf{
  display: block;
  clear: both;
  content: ' ';
}

.pagination{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1%;
}
.pagination li{
  position: relative;
  font-size: 0.95em;
  line-height: 1em;
  border-radius: 50%;
  padding: 5px 10px;
  color: var(--grey3);
}
.pagination li.active{
  color: var(--point_main);
  font-weight: 800;
}
/* .pagination li.active::before{
  position: absolute;
  width: 30px;
  height: 30px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 5;
  content: "";
  border-radius: 50%;
  border: 1px solid var(--point_main);
  color: var(--point_main);
  font-weight: 600;
} */
.pagination li a{
  display: flex;
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: center;
  gap: 5px;
}
.pagination li a i{
  font-size: 0.85em;
}

.margin_xl{
  padding-bottom: calc(var(--padding)*5);
}
.margin_l{
  padding-bottom: calc(var(--padding)*3.5);
}
.margin_m{
  padding-bottom: calc(var(--padding)*2.5);
}
.margin_s{
  padding-bottom: calc(var(--padding)*1.5);
}

/* TYPOGRAPHY */
.size_xl{
  font-size: 2em;
}
.size_l{
  font-size: 1.4em;
}
.size_m{
  font-size: 1.2em;
}
.size_s{
  font-size: 0.9em;
}
.size_xs{
  font-size: 0.75em;
}

/*COLOR*/
.white{
  color: var(--white);
}
.dark{
  color: var(--dark);
}
.cl_point {
  color: var(--point_main);
}
.cl_red {
  color: var(--point_red);
}
.cl_blue {
  color: var(--point_blue);
}
.cl_yelow {
  color: var(--point_yellow);
}
.cl_navy {
  color: var(--point_navy);
}
.cl_green {
  color: var(--point_green);
}

/* hover */
.cursor{
  cursor: pointer;
}
.user_hover{
  text-decoration: none;
  color: var(--dark);
  transition: .3s;
}
.user_hover:hover{
  color: var(--point_main);
}
.border_s{
  border-radius: 7px;
  overflow: hidden;
}
.border_l{
  border-radius: 10px;
  overflow: hidden;
}
.page_prev{
  color: var(--grey3);
  fill: var(--grey3);
  cursor: pointer;
  line-height: 1em;
  transition: .2s;
}
.page_prev a{
  display: flex;
  align-items: center;
}
.page_prev:hover{
  filter: brightness(75%);
}

.scrollBar::-webkit-scrollbar {
  width: 10px;
}

.scrollBar::-webkit-scrollbar-thumb {
  height: 30%;
  background: #dcdfe6;
  
  border-radius: 10px;
}

.scrollBar::-webkit-scrollbar-track {
  background: rgba(215, 217, 219, 0.1);
}





/* header */
.header_bar{
  position: relative;
  padding: calc(var(--padding)*2.5) 0 calc(var(--padding)*3);
  box-shadow: 5px 5px 6px #A2A2A229;
  min-width: 1200px;
  background-color: var(--white);
  z-index: 2;
}
.T_header{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: calc(var(--padding)*1.5);
}
.T_header .user_page{
  display: flex;
  align-items: center;
  font-size: 0.875em;
}
.T_header .user_page li{
  color: #949494;
}
.T_header .user_page li a{
  display: inline-block;
  padding: 5px 0;
  transition: .2s;
}
.T_header .user_page li a:hover{
  color: #3d3d3d;
}
.T_header .user_page li + li::before{
  content: '|';
  padding: 0 8px;
}
.B_header{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.B_header .user_nav{
  display: flex;
  align-items: center;
  gap: 15px;
}
.search_btn.active{
  background-color: #F3F3F3;
  border-radius: 6px;
  overflow: hidden;
}
.B_header .user_nav .search_btn a{
  display: block;
  padding: 8px;
  transition: .2s;
}
.B_header .user_nav .search_btn a img{
  width: 20px;
  box-sizing: border-box;
  display: block;
}
.B_header .user_nav .search_btn a:hover{
  filter: brightness(75%);
}
.B_header .user_nav .write_page a{
  display: block;
  color: var(--white);
  background-color: #949494;
  border-radius: 50px;
  padding: 8px 14px;
}
.B_header .user_nav .write_page.active a{
  background-color: var(--point_main);
}
[class^="drop_bar"]{
  box-shadow: 5px 5px 6px #A2A2A229;
  background-color: var(--white);
}
[class^="drop_bar"] .bar_grid{
  max-width: 900px;
  margin: auto;
  padding: 35px 0 45px;
}
[class^="drop_bar"] .keyword_title{
  font-size: 1.5em;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: calc(var(--padding)*1.5);
}
[class^="drop_bar"] .keyword_title .xBox{
  padding: 5px 0 5px 5px;
  cursor: pointer;
  transition: .3s;
}
[class^="drop_bar"] .keyword_title .xBox:hover{
  transform: scale(1.05);
}
[class^="drop_bar"] .search_bar{
  width: 100%;
  margin: auto;
  border-radius: 7px;
  border: 1px solid #CFCFCF;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: calc(var(--padding)*.5) calc(var(--padding)*2);
  box-sizing: border-box;
  font-size: 1.2em;
  margin-bottom: calc(var(--padding)*2);
  transition: .2s;
}
[class^="drop_bar"] .search_bar.active{
  border: 1px solid #858585;
}
[class^="drop_bar"] .search_bar .search_click{
  padding: 10px 0 10px 10px;
  cursor: pointer;
  transition: .2s;
}
[class^="drop_bar"] .search_bar .search_click:hover{
  filter: brightness(75%);
  transform: scale(1.025);
}
[class^="drop_bar"] .search_bar input{
  display: block;
  width: 100%;
  height: 100%;
}
[class^="drop_bar"] .rec_top{
  padding-bottom: calc(var(--padding));
}
[class^="drop_bar"] .rec_top .rec_search{
  font-weight: 600;  
}
[class^="drop_bar"] .rec_top .al_cancle::before{
  content: '|';
  padding: 0 10px;
  color: #BEBEBE;
}
[class^="drop_bar"] .rec_top .al_cancle span{
  color: #BEBEBE;
  transition: .15s;
  cursor: pointer;
}
[class^="drop_bar"] .rec_top .al_cancle span:hover{
  color: #868686;
}
.head_standard{
  position: relative;
  width: 100%;
}
.head_standard .head_bg{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
}
.head_standard .head_bg .left_bg{
  height: 100%;
  width: 50%;
  background-color: #ddd;
}
.head_standard .head_bg .right_bg{
  height: 100%;
  width: 50%;
  background-color: #ddd;
}
.stic_banner{
  position: relative;
  z-index: 1;
}
.stic_banner a{
  display: flex;
  justify-content: center;
  align-items: stretch;
  width: 100%;
}

/* footer */
.footer{
  background-color: #E9E9E9;
}
.footer_nav{
  background-color: var(--white);
  padding: 15px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.footer_nav .nav_list{
  display: flex;
  align-items: center;
  gap: 2%;
  font-size: 0.95em;
}
.footer_nav .nav_list li{
  color: #303030;
  transition: .2s;
}
.footer_nav .nav_list li:hover{
  color: var(--black);
}
.footer_nav .nav_list li.bold{
  font-weight: 800;
}
.footer_nav .nav_list li a{
  padding: 5px;
}
.footer_content{
  display: flex;
  justify-content: space-around;
  align-items: start;
  color: #303030;
  font-size: 0.875em;
  padding: calc(var(--padding)*5) 0 calc(var(--padding)*6);
}
.footer_content .del{
  padding-top: 15px;
}
footer .address{
  display: flex;
  flex-direction: column;
  justify-content: start;
  gap: calc(var(--padding));
  padding-bottom: calc(var(--padding)*2);
}
footer .address li span + span::before{
  content: '|';
  color: #C1C1C1;
  padding: 0 10px;
}
footer .warning_info{
  padding-bottom: 5px;
}
footer .copyright{
  font-weight: 700;
}
.select_wrap{
  position: relative;
}
.selectDiv{
  position: absolute;
  width: 80%;
  top: 10px;
  /* bottom: 0; */
  left: 50%;
  transform: translateX(-50%);
  padding: 8px 0;
  border: 1px solid var(--border);
  border-radius: 7px;
  transition: .3s;
  z-index: 9;
  background-color: #fcfcfc;
}
.selectDiv .select_nomal{
  display: flex;
  justify-content: space-between;
  padding: 0 8px;
}
.selectDiv .arrow{
  color: var(--grey3);
  transition: .3s;
}
.option_list{
	display: none;
}
.option_list li{
	margin: 6px 0;
  transition: .2s;
}
.option_list li:last-child{
	margin-bottom: 0;
}
.option_list li:hover{
	color: #5158DD;
  /* font-weight: 500; */
  background-color: var(--grey1);
}
.option_list .proMatch{
	color: #5158DD;
	font-weight: bold;
}
.option_list li a{
  display: block;
  padding: 6px 12px;
}

.option_list{
  position: absolute;
  bottom: 100%;
  left: -1px;
  width: calc(100% + 2px);
  background: #fff;
  border: 1px solid var(--border);
  display: none;
  transform-origin: bottom;
  border-radius: 7px 7px 0 0;
  border-bottom: 0;
  box-sizing: border-box;
  max-height: 150px;
  overflow-y: auto;
  opacity: 0;
  transition: all 0.2s ease-in-out;
}

.selectDiv.active .option_list {
  display: block;
}

.selectDiv.active{
	border-color: var(--border);
	background: none;
	background-color: #fff;
	border-radius: 0 0 7px 7px;
	transition: .3s;
	padding: 8px 0;
	color: #324663;
  top: 10px;
}
.selectDiv.active .select{
	color: #C5C5C5;
	text-align: left;
}
.selectDiv.active .arrow{
  transform: rotate(180deg);
}


.record_list{
  display: flex;
  flex-wrap: wrap;
  justify-content: start;
  align-items: center;
  gap: 10px;
  max-height: 30px;
  overflow: hidden;
}
.record_list li{
  display: flex  ;
  justify-content: center;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  background: #F2F3F7;
  border-radius: 15px;
  color: #949494;
}
.record_list li .reBox{
  position: relative;
  top: -1.5px;
  width: 15px;
  opacity: .3;
  cursor: pointer;
  transition: .3s;
  transform: scale(1.1);
}
.record_list li .reBox:hover{
  opacity: .5;
}
.record_list li .reBox img{
  width: 100%;
}

.header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background-color: var(--white);
}
.drop_bar{
  position: absolute;
  width: 100%;
  display: none; /* 기본 숨김 */
  /* z-index: 999; */
}
.drop_bar_dummy{
  box-shadow: none;
}
.drop_bar.active {
  display: block;
}
/* header */

/* login */
/* .login_on */
main{
  padding: 30px 0;
  min-height: calc(100vh - 131px - 293px);
  /* header + footer - 100% */
}
.yak_flx{
  display: flex;
  justify-content: space-between;
}
.content_l{
  width: 875px;
}
.content_r{
  width: 290px;
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: stretch;
  margin-top: calc(var(--padding)*2.5);
  gap: calc(var(--padding)*3.5);
}
.user_data_info{
  justify-content: space-between;
  padding-bottom: calc(var(--padding));
}
.user_data_info .del{
  width: 60%;
}
.user_login{
  border-radius: 10px;
  overflow: hidden;
  background-color: #F2F3F7;
  padding: 20px;
  box-sizing: border-box;
  /* margin: calc(var(--padding)*2.5) 0 calc(var(--padding)*5); */
}
.login_btn{
  width: 100%;
  background-color: var(--point_main);
  border-radius: 7px;
  padding: 6% 0;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5%;
  color: var(--white);
}
.login_btn img{
  width: 75px;
}
.login_box{
  display: flex;
  justify-content: center;
  align-items: center;
}
.login_box li + li::before{
  content: "|";
  padding: 0 5px;
}
.adv_kind{
  display: inline-block;
  background-color: var(--grey1);
  font-size: 0.8em;
  padding: 2px 8px;
  border-radius: 50px;
}
.adv_title{
  padding: 5px 0;
  font-size: 0.95em;
  font-weight: 600;
}
.adv_phr{
  color: #8E8E8E;
  font-size: 0.9em;
}
.login_on .user_name{
  font-size: 1.1em;
  font-weight: 700;
  color: var(--point_main);
  margin-bottom: calc(var(--padding)*.5);
  display: -webkit-box;
  -webkit-line-clamp: 2; /* 표시할 줄 수 */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.user_ID{
  font-size: 0.875em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.user_data_info .save_setting{
  display: flex;
  align-items: center;
  font-size: 0.8em;
  color: #8d8d8d;
  border: 1px solid var(--grey3);
  padding: 2px 8px;
  border-radius: 50px;
  gap: 2px;
  cursor: pointer;
  transition: .2s;
}
.user_data_info .save_setting img{
  transition: .2s;
}
.user_data_info .save_setting:hover{
  color: #636363;
  border: 1px solid #a0a0a0;
}
.user_data_info .save_setting:hover img{
  filter: brightness(75%);
}
.user_active{
  display: flex;
  background-color: var(--white);
  border-radius: 7px;
  align-items: center;
  justify-content: space-around;
  padding: 12px 0 15px;
  margin-bottom: calc(var(--padding));
}
.user_active .tt{
  color: var(--grey3);
  padding-bottom: 5px;
  font-size: 0.875em;
}
.user_point{
  justify-content: space-between;
  align-items: center;
  width: 95%;
  margin: auto;
  font-weight: 600;
  font-size: 0.85em;
  gap: 20px;
}
.user_point .del, .user_point .sel{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.user_point .del{
  flex: 3;
}
.user_point .sel{
  flex: 2;
}
.user_point .sel::before{
  content: '|';
  display: block;
  position: absolute;
  left: -10px;
  top: 0px;
  font-weight: 400;
  color: #AFAFAF;
}
.user_point .my_point{
  /* font-size: 0.875em;
  font-weight: 400; */
}
.user_active span{
  display: block;
  color: var(--point_main);
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.user_active
.user_point{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.user_point .point_count{
  display: flex;
  align-items: center;
  gap: 3px;
}

.mall_swiper_pagination{
  margin: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 5px;
}

/* Model */
.h2q{
  font-size: 1.125em;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 5px;
}
.h3q{
  display: flex;
  align-items: center;
  font-weight: 600;
  font-size: 0.95em;
  padding-bottom: var(--padding);
  line-height: 18px;
  cursor: pointer;
}
.h3q a{
  display: flex;
  align-items: center;
}
.h3q svg{
  height: 18px;
}
.content_r .href_link a{
  font-size: 1.35em;
}
.href_link a{
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.7em;
  line-height: 1em;
  font-weight: 200;
  transition: .3s;
  position: relative;
  z-index: 1;
}
.href_link a svg{
  height: 18px;
}
.wid_banner{
  max-width: 642px;
}
.wid_banner img{
  width: 100%;
}
.notice, .pharmstar, .thepharm_mall{
  /* margin-bottom: calc(var(--padding)*5); */
}
.notice .top{
  justify-content: space-between;
  align-items: center;
}
.notice .h3q{
  padding: 0;
}
.notice_list{
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-weight: 400;
}
.notice_list li a{
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 3px 0;
  transition: .15s;
}
.notice_list li a:hover{
  color: #4d4d4d;
  transition: .15s;
}
.notice_list li a span{
  padding-right: 10px;
  color: #444444;
  display: inline-block;
  width: 20%;
  font-size: 0.9em;
}
.pharmstar{
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
}
.pharmstar .top{
  justify-content: space-between;
  align-items: center;
}
.pharmstar .h3q{
  padding: 0;
}
.pharmstar .pharmstar_img{
  max-width: 80px;
  max-height: 70px;
  width: 35%;
  overflow: hidden;
  display: flex  ;
  justify-content: center;
  align-items: center;
}
.pharmstar .pharmstar_img img{
  width: 100%;
}
/* thepharm_mall pharm_mall_swiper */
.thepharm_mall{overflow: hidden;}
.thepharm_mall .top{justify-content: space-between; align-items: center;}
.pharm_mall_swiper li{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.u_writ, .u_like, .u_review{
  text-align: center;
  width: 33%;
  border-left: 1px solid #F2F3F7;
}
.u_writ{
  border: none;
}
.pharm_mall_swiper li .item{
  width: 100%;
}
.pharm_mall_swiper li .item a{
  display: block;
}
.pharm_mall_swiper li .item .mall_img{
  max-width: 90px;
  border-radius: 7px;
  border: 1px solid #DFDFDF;
  overflow: hidden;
  box-sizing: border-box;
}
.pharm_mall_swiper li .item .mall_img img{
  width: 100%;
}
.pharm_adv{
  border-radius: 7px;
  border: 1px solid #DFDFDF;
  padding: 8px 5px;
  display: flex;
  justify-content: start;
  align-items: center;
  gap: 10px;
}
.pharm_adv .sel{
  display: block;
  width: 65%;
}
.pharm_mall_swiper li .item .mall_name{
  padding-top: 5px;
  font-size: 0.875em;
  display: -webkit-box;
  -webkit-line-clamp: 2; /* 표시할 줄 수 */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.aside_banner{
  max-width: 290px;
}
.aside_banner img{
  width: 100%;
}



/* 좋아요 댓글 */
.art_state{
  display: flex;
  justify-content: end;
  align-items: center;
  gap: 5px;
  margin-left: auto;
  font-size: 0.85em;
  letter-spacing: -0.5px;
}
.search .art_state{
  justify-content: start;
  margin: 0;
}
.like,.review, .view{
  display: flex;
  justify-content: start;
  align-items: center;
  gap: 5px;
  color: var(--grey3);
  font-weight: 400;
  width: 50%;
}
.like.active{
  color: var(--point_main);
  font-weight: 600;
}
.like.active .like_svg{
  fill: var(--point_main);
}
.like_svg, .review_svg, .view_svg{
  fill: var(--grey3);
}
.like_svg{
  cursor: pointer;
}
.like_svg, .review_svg, .view_svg{
  width: 18px;
}

/* 카테고리 */
.category{
  position: relative;
  font-weight: 600;
  display: flex;
  align-items: center;
  padding-bottom: calc(var(--padding)*2);
}
.category div + div{
  color: var(--point_main);
}
.category div + div::before{
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  margin: 2px 8px;
  border: solid #C6C6C6;
  border-width: 1px 1px 0 0;
  transform: rotate(45deg);
}

.category .save_setting{
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  align-items: center;
  font-size: 0.8em;
  color: #8d8d8d;
  border: 1px solid var(--grey3);
  padding: 2px 8px;
  border-radius: 50px;
  gap: 2px;
  cursor: pointer;
  transition: .2s;
}
.category .save_setting::before{
  display: none;
}

.notc_control{
  width: 100%;
  display: block !important;
}
.notc_control::after{
  clear: both;
  display: block;
  content: '';
}
.page_pr{float: left;}
.next_pr{float: right;}
.page_pr a, .next_pr a{
  display: flex;
  align-items: center;
  color: #AFAFAF;
  gap: 2px;
}
.page_pr a img, .next_pr a img{
  display: block;
  width: 19px;
  filter: opacity(.35);
}
.re_port{
  cursor: pointer;
  position: absolute;
  top: 20px;
  width: 100%;
  font-size: 0.95em;
  width: 75px;
  background-color: white;
  border: 1px solid #E9E9E9;
  border-radius: 6px;
  box-shadow: 3px 3px 6px #B9B9B929;
  text-align: center;
  padding: 6px 0;
  line-height: 1em;
  display: none;
}
.report_togle{
  position: relative;
  width: 15px;
  height: 15px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}
.report_togle.active .re_port{
  display: block;
  transition: .2s;
}
.report_togle.active .re_port:hover{
  background-color: #F2F3F7;
}
.report_togle img{
  display: block;
  transform: rotate(-90deg);
}


/* modal M */
.modal_m{
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  align-items: center;
  justify-content: center;
  z-index: 1000;
}
.modal_m.active{display: flex;}
.modal_m .in_content{
  background: white;
  border-radius: 6px;
  max-width: 530px;
  width: 100%;
  overflow: hidden;
}
.modal_m .in_guide{
  padding: 35px 45px;
}
.modal_m .top_title{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: calc(var(--padding)*1.5);
  border-bottom: 2px solid var(--dark);
}
.modal_m .h2_title{
  font-size: 1.5em;
  line-height: 1em;
  font-weight: 600;
}
.modal_m .close{
  width: 30px;
  height: 30px;
  cursor: pointer;
  transition: .2s;
}
.modal_m .close:hover{
  transform: scale(1.05);
}
.modal_m .close img{
  width: 100%;
}
.modal_m .pol_list{
  padding: calc(var(--padding)*2.5) 0;
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: stretch;
  gap: calc(var(--padding)*1.5);
}
.modal_m .btn_back_bg{
  background-color: #F3F3F3;
  padding: 35px 0;
  display: flex;
}
.modal_m .pr_btn{
  box-sizing: border-box;
  color: var(--white);
  padding: 25px 100px;
  font-size: 1.1em;
  display: inline-block;
  background-color: #949494;
  border-radius: 100px;
  margin: auto;
  cursor: pointer;
}
.modal_m .pr_btn.active{
  background-color: #FF0057;
}
.modal_m .pol_texta{
  border: 1px solid var(--border);
  border-radius: 6px;
  outline: none;
  padding: 10px;
  width: 90%;
  resize: none;
  margin-top: 10px;
  margin-left: 20px;
}
.modal_m .por_finish{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  line-height: 1em;
  padding: 80px 0;
}
.modal_m .por_finish .siren{
  width: 45px;
}
.modal_m .por_finish .siren img{
  width: 100%;
}
.modal_m .por_finish .h2_title{
  margin-bottom: calc(var(--padding)*2.5);
  font-weight: 700;
  line-height: 1.3em;
}

.pol_list li{
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  color: #AFAFAF;
}
.check_design{
  position: relative;
  width: 20px;
  height: 20px;
  border-radius: 3px;
  border: 1px solid #B4B4B4;
}
.pol_list li.on .lab_chk { 
  width: 20px; 
  height: 20px; 
  position: absolute; 
  top: 0; 
  left: 0; 
}
.pol_list li.on .check_design{
  border: 1px solid var(--dark);
}
.pol_list li.on .lab_chk:after {
  content: ""; 
  position: absolute; 
  width: 7px;  
  height: 11px;  
  border: solid #FF0057;  
  border-width: 0 2px 2px 0;  
  -webkit-transform: rotate(45deg);  
  -ms-transform: rotate(45deg);  
  transform: rotate(45deg);  
  position: absolute;  
  left: 6px;  
  top: 2px; 
}
.pol_list li.on .pol_texta{
  border-color: var(--dark);
}
.ask_btn{
  float: right;
  z-index: 1000;
  position: fixed;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  bottom: 5%;
  right: calc(50% - 715px);
  padding: 6px 10px;
  border-radius: 100px;
  border: 1px solid #DFDFDF;
  box-shadow: 5px 5px 6px #A2A2A229;
  cursor: pointer;
  color: #949494;
  background-color: white;
  transition: .2s;
}
.ask_btn .ask_icon{
  position: relative;
  transition: .2s;
}
.ask_btn .ask_icon .dummy{
  position: absolute;
  top: 0;
  left: 0;
  transition: .2s;
}
.ask_btn:hover{
  border: 1px solid #c0c0c0;
  color: var(--dark);
}
.ask_btn:hover .ask_icon .dummy{
  opacity: 0;
}



.spped_game{}
.spped_game .grad_bg{
  padding: 15px 20px;
  background: linear-gradient(to bottom, #2D4DCC, #172766);
  border-radius: 10px;
  color: var(--white);
}
.spped_game .game_tt{
  font-size: 1.1em;
  font-weight: 500;
  padding: 0 0 10px 5px;
  display: flex;
  justify-content: start;
  align-items: center;
  gap: 5px;
}
.spped_game .count{
  position: relative;
  height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.7em;
  border-radius: 10px;
  font-weight: 700;
  text-align: center;
  gap: 5%;
}
.spped_game .box_guide .count{
  background-color: white;
  color: #2D4DCC;
}
.spped_game .count .del, .spped_game .count .sel{
  line-height: 1em;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5px;
  border-radius: 10px;
}
.spped_game .in_game .count .del{
  background-color: var(--white);
  flex: 5;
  color: #AFAFAF;
  font-size: 18px;
  font-weight: normal;
}
.spped_game .in_game .count .del span{
  font-size: 1.7rem;
  color: #2D4DCC;
  font-weight: 700;
  width: 50%;
}
.spped_game .in_game .count .sel{
  flex: 3;
  background-color: #FF0057;
}
.spped_game .in_game .count .sel.active{
  background-color: #AFAFAF;
}
.spped_game .order_true .count, .spped_game .order_flase .count{
  background-color: var(--white);
  justify-content: start;
  padding-left: 15px;
}
.spped_game .order_true .state{
  color: #2D4DCC;
}
.spped_game .order_flase .state{
  color: #FF0057;
}
.spped_game .order_true .csol, .spped_game .order_flase .csol{
  font-size: 0.85rem;
  color: var(--dark);
  text-align: start;
  font-weight: 500;
  line-height: 1.1em;
}
.spped_game .order_true .csol em{
  font-weight: 700;
}
.spped_game .tip{
  font-size: 0.8em;
  padding-top: 10px;
  border-top: 1px solid white;
  margin-top: 10px;
  display: block;
  padding-left: 3px;
}
.spped_game .order_flase .tip{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5px;
  cursor: pointer;
}
.spped_game .box_guide,
.spped_game .in_game,
.spped_game .order_true,
.spped_game .order_flase{
  display: none;
}
.spped_game .box_guide.active, 
.spped_game .in_game.active,
.spped_game .order_true.active,
.spped_game .order_flase.active{
  display: block;
}




.top_nav{

  padding-top: calc(var(--padding)*2);

  display: flex;

  justify-content: space-between;

  align-items: center;

  gap: 5%;

  padding-bottom: calc(var(--padding)*2);

  border-bottom: 1px solid var(--border);

}
.top_nav .array{

  gap: 5px;

}

.top_nav .array select{

  border: none;

  outline: none;

  display: flex;

  align-items: center;

}

.search_list_swiper{

  position: relative;

  width: 100%;

  overflow: hidden;

  padding: 1px;

  
}
.search_list_swiper::before{
  position: absolute;
  content: '';
  display: block;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 70%;
  border-right: 1px solid var(--border);
}

.search_list{

  display: flex;

}

.search_list li{

  font-size: 1em;

  flex: 0 0 auto;

  width: auto;

  padding: 8px 20px;

  border-radius: 50px;

  border: 1px solid var(--grey3);

  transition: .2s;

  cursor: pointer;

}
.search_list li.gotoRollet{
  border: none;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 3px;
  padding: 8px;
  color: var(--point_main);
}

.search_list li:hover{

  color: var(--point_main);

  border-color: var(--point_main);

}

.search_list li.active{

  border: 1px solid transparent;

  background-color: var(--point_main);

  color: var(--white);

  font-weight: 500;

}

.link_blank{
  margin-top: 5px;
  border-radius: 6px;
  overflow: hidden;
}

.rank_table{
  display: flex;
  flex-direction: column;
  align-items: start;
  font-size: 0.85em;
  color: #484848;
}
.rank_table li{
  width: 100%;
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--border);
}
.rank_table .rank{
  flex: 1.5;
  text-align: center;
}
.rank_table .name{
  flex: 3.5;
  margin-left: 15px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 8px 0;
}
.rank_table .bgd .count{
  text-align: center;
  padding: 8px 10px 8px 10px;
}
.rank_table .count{
  flex: 1.3;
  text-align: right;
  padding: 8px 15px 8px 5px;
  border-left: 1px solid var(--border);
  max-width: 100px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rank_table .bgd{
  background-color: #F5F5F5;
  text-align: center;
  border: none;
}
.TOP100 .top{
  justify-content: space-between;
  align-items: center;
  color: var(--grey3);
  padding-bottom: var(--padding);
}
.TOP100 .top .h3q{
  padding: 0;
}
.TOP100 .top .h3q span{
  font-size: 0.8em;
  color: var(--grey3);
  font-weight: 400;
  padding-left: 3px;
}
.TOP100 .top .date{
  font-size: 0.85em;
}
.TOP100 .top .href_link{
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1em;
  font-weight: 200;
  transition: .3s;
  position: relative;
  z-index: 1;
  color: var(--black);
}




.search_gird{

  display: flex;

  align-items: center;

  justify-content: start;

  flex-wrap: wrap;

  padding-bottom: calc(var(--padding)*5);

}

.search_gird li{
  width: 50%;
  border-bottom: 1px solid var(--border);
  padding: 25px 25px 20px 12px;
  box-sizing: border-box;
  transition: .2s;
  height: 200px;
  display: flex;
  flex-direction: column;
  justify-content: start;
}

.search_gird li:hover{

  background-color: #fbfbfc;

}

.search_gird li:nth-child(2n){

  border-left: 1px solid var(--border);

}

.search_gird .sr_type{

  display: flex;

  align-items: center;

  font-size: 0.875em;

  padding-bottom: 5px;

}

.search_gird .sr_type .cl_point{

  font-weight: 600;

}

.search_gird .sr_type .cl_ID{

  color: var(--grey3);

}

.search_gird .sr_type .cl_ID::before{

  content: "ㆍ";

}

.search_gird .sr_title{

  font-size: 1.075em;

  font-weight: 700;

  padding-bottom: calc(var(--padding)*2.5);

}

.search_gird .sr_title a{

  display: block;

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;

}

.search_gird .sr_txt{

  font-size: 0.95em;

  line-height: 1.25em;
  /* margin-bottom: calc(var(--padding)*2); */

}

.search_gird .sr_txt a{
  display: block;
}

.search_gird .sr_info{

  display: flex;

  justify-content: space-between;

  align-items: center;

  font-size: 0.95em;

  margin-top: auto;
}

.search_gird .sr_info .art_time{

  color: var(--grey3);
  font-size: 0.9em;

}

.search_content .pagination{
  padding-bottom: calc(var(--padding)*5)
}

.search .search_gird .art_state{
  width: 30%;
}