/* page-main.css */
@import url("notosans-cjk-kr.css");
@import url("common.css");
@import url("animate.css");
@import url("effects.css");
@import url("../vendor/slick/slick.css");
@import url("../vendor/slick/slick-theme.css");
@import url("layout.css");
@import url("modal.css");
/*@import url("floating.css");*/
@import url("comps.css");

.wrap-outer {
	min-width: 1200px;
	position: relative;
    display: flex;
    align-items: center;
    justify-self: center;
    overflow-y: auto;
    /* min-height: 100vh; */
	padding-top: 20px;
}

#main_wrap {
	/*position: fixed;
	left: 0%;
	top: 0%;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-self: center;*/
	height: 100%;
}

#main_bg {
	z-index: 0;
	position: fixed;
	left: -10%;
	top: -10%;
	width: 120%;
	height: 120%;
	background-position: 50% 50%;
	background-repeat: no-repeat;
	background-size: cover;
}

#data_lab {
	z-index: 200;
	position: fixed;
	left: 21px;
	top: 19px;
	width: 186px;
	height: 30px;
	padding: 4px 0 4px 16px;
	background-color: rgba(0,0,0,.1);
	border-radius: 15px;
}

#data_lab::after {
	content: '';
	position: absolute;
	right: 11px;
	top: 50%;
	transform: translateY(-50%);
	width: 9px;
	height: 5px;
	background: transparent url('../img/icons/ico-acc-down-wh.png') 50% 50%/100% 100% no-repeat;
}

#data_lab .data-roll-container {
	position: relative;
	width: 170px;
	height: 22px;
	overflow: hidden;
}

#data_lab .data-roll-disp {
	position: relative;
	width: 170px;
}

#data_lab .data-roll-disp li {

}

#data_lab .data-roll-disp li {

}

#data_lab .data-roll-disp li a {
	font: 500 14px/1.5em 'noto';
	color:#fff;
}

#data_lab .data-roll-disp li a em {
	width: 20px;
	padding-right: 10px;
	font-size: 15px;
	font-weight: 900;
	font-style: oblique;
	text-align: right;
}

#data_lab .data-inner {
	position: absolute;
	left:  0;
	top: 0;
	padding: 8px 10px 6px 10px;
	display: none;
	flex-wrap: wrap;
	width: 320px;
	background-color: #fff;
	border-radius: 10px;
    box-shadow: 0px 0px 20px 1px rgb(0 0 0 / 15%);
}

/*#data_lab:hover .data-inner {
	display: flex;
}*/

#data_lab .data-inner {
	display: none;
}

#data_lab .data-inner.toggle {
	display: flex;
}

#data_lab .data-inner .data-inner-top {
	flex-basis: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-left: 5px;
	margin-bottom: 5px;
}

#data_lab .data-inner .data-inner-top > span {
	font: 500 12px/1 'noto';
	color: #6b6b6b;
}

#data_lab .data-inner .data-inner-top > select {
	width: 145px;
	height: 25px;
	padding: 0 16px 0 8px;
	background: transparent url('../img/icons/ico-acc-down-2-bk.png') 90% 50%/7px 5px no-repeat;
	border: 1px solid #e1e1e1;
	border-radius: 5px;
	font: 400 11px/1 'noto';
	color: #9d9d9d;
}

#data_lab .data-inner .data-inner-list {
	flex-basis: 50%;
}

#data_lab .data-inner .data-inner-list li {
	display: flex;
	max-width: 145px;
	padding-left: 4px;
	align-items: center;
	height: 24px;
}

#data_lab .data-inner .data-inner-list.right li  {
	padding-left: 16px;
}

#data_lab .data-inner .data-inner-list li a {
	font: 500 11px/1.4 'noto';
	color: #666666;
	cursor: pointer;
}

#data_lab .data-inner .data-inner-list li a > em {
	display: inline-block;
	width: 14px;
	margin-right: 8px;
	font: 500 11px/1.4 'noto';
	color: #acacac;
	text-align: center;
}

#data_lab .data-inner .data-inner-list li:hover {
	background-color: #71baf8;
	border: 1px solid #47a6ff;
	border-radius: 20px;
}

#data_lab .data-inner .data-inner-list li:hover a,
#data_lab .data-inner .data-inner-list li:hover a > em {
	color: #fff;
	cursor: pointer;
}

#global_fix {
	z-index: 9999;
	position: fixed;
	left: 20px;
	bottom:  20px;
	display: flex;
	width: auto;
	height: 26px;
}

#global_fix > * {
	width: 26px;
	margin: 0 5px;
	border-radius: 26px;
	cursor: pointer;
}

#global_fix > *:first-child {
	margin-left: 0;
}

#global_fix > *:last-child {
	margin-right: 0;
}

#setting {
	background: rgba(0,0,0,.5) url('../img/icons/ico-setting-grad.png') 50% 50%/14px 14px no-repeat;
}

#opt {
	background: rgba(0,0,0,.5) url('../img/icons/ico-msg-grad.png') 50% 50%/13px 14px no-repeat;
}

#auth {
	background: rgba(0,0,0,.5) url('../img/icons/ico-user-grad.png') 50% 50%/12px 13px no-repeat;
}

.container {
	z-index: 1;
	padding: 0px 0 60px 0;
}

.main-top {
	max-width: 800px;
	text-align: center;
}

.main-top .main-logo h1 {
	display: block;
	width: 140px;
	height: 140px;
	margin: 0 auto;
}

.main-top .main-logo a {
	position: relative;
	display: inline-block;
	width: 100%;
	height: 100%;
	background: transparent 50% 50%/100% 100% no-repeat;
	background-size: contain;
}

/* .main-top .main-logo a::after {
	content: '';
	position: absolute;
	right: -38px;
	top: -7px;
	width: 39px;
	height: 23px;
	background: transparent url('../img/icons/ico-beta-tag.png') 50% 50%/100% 100% no-repeat;
} */

.main-top .main-logo p {
	margin-top: 10px;
	font: oblique 400 15px/1 'noto';
	color: #FFF;
}

.main-top .search {
	position: relative;
	display: flex;
	justify-content: center;
	width: 100%;
	height: 60px;
	padding: 5px 8px 5px 0;
	margin-top: 23px;
	background-color: #fff;
	border-radius: 5px;
	box-shadow: 0px 0px 20px 1px rgb(0 0 0 / 15%);
}

.main-top .search .disp-category {
	position: relative;
	width: 90px;
	height: 100%;
}

.main-top .search .disp-category > .disp-item {
	position: relative;
	display: block;
	width: 34px;
	height: 100%;
	margin: 0 auto;
	background: 50% 50%/34px 34px no-repeat;
	background-image: url('../img/icons/ico-site-category-00-grad.png');
	cursor: pointer;
}

.main-top .search .disp-category > .disp-item[data-disp='00'] {
	background-image: url('../img/icons/ico-site-category-00-grad.png');
}
.main-top .search .disp-category > .disp-item[data-disp='01'] {
	background-image: url('../img/icons/ico-reco-02-wh.png');
}
.main-top .search .disp-category > .disp-item[data-disp='02'] {
	background-image: url('../img/icons/ico-reco-01-wh.png');
}
.main-top .search .disp-category > .disp-item[data-disp='03'] {
	background-image: url('../img/icons/ico-reco-05-wh.png');
}
.main-top .search .disp-category > .disp-item[data-disp='04'] {
	background-image: url('../img/icons/ico-reco-09-wh.png');
}
.main-top .search .disp-category > .disp-item[data-disp='05'] {
	background-image: url('../img/icons/ico-reco-15-grad.png');
}
.main-top .search .disp-category > .disp-item[data-disp='06'] {
	background-image: url('../img/icons/ico-reco-16-wh.png');
}

.main-top .search .disp-category > .disp-item::after {
	content: '';
	position: absolute;
	right: -16px;
	top: 50%;
	transform: translateY(-50%);
	width: 10px;
	height: 6px;
	background: transparent url('../img/icons/ico-acc-down-bk.png') 50% 50%/100% 100% no-repeat;
}

.main-top .search .drop-category {
	z-index: 100;
	display: none;
	position: absolute;
	left: 0;
	top:  70px;
	width: 222px;
	height: auto;
	border-radius: 15px;
	overflow: hidden;
}

.main-top .search .drop-category .drop-item {
	display: flex;
	align-items: center;
	width: 100%;
	height: 50px;
	padding-left: 24px;
	padding-right: 24px;
	background-color: #fff;
	cursor: pointer;
}

.main-top .search .drop-category .drop-item:first-child {
	height: 62px;
	padding-top: 12px;
}

.main-top .search .drop-category .drop-item:last-child {
	height: 62px;
	padding-bottom: 12px;
}

.main-top .search .drop-category .drop-item.drop-item-01 p {
	background: transparent url('../img/icons/ico-reco-02-wh.png') 0 50%/30px 30px no-repeat;
}
.main-top .search .drop-category .drop-item.drop-item-02 p {
	background: transparent url('../img/icons/ico-reco-01-wh.png') 0 50%/30px 30px no-repeat;
}
.main-top .search .drop-category .drop-item.drop-item-03 p {
	background: transparent url('../img/icons/ico-reco-05-wh.png') 0 50%/30px 30px no-repeat;
}
.main-top .search .drop-category .drop-item.drop-item-04 p {
	background: transparent url('../img/icons/ico-reco-09-wh.png') 0 50%/30px 30px no-repeat;
}
.main-top .search .drop-category .drop-item.drop-item-05 p {
	background: transparent url('../img/icons//ico-reco-15-grad.png') 0 50%/30px 30px no-repeat;
}
.main-top .search .drop-category .drop-item.drop-item-06 p {
	background: transparent url('../img/icons/ico-reco-16-wh.png') 0 50%/30px 30px no-repeat;
}


.main-top .search .drop-category .drop-item p {
	height: 50px;
	padding: 11px 0 10px 45px;
	font: 400 16px/1.6 'noto';
	color: #616161;
}

.main-top .search .drop-category .drop-item:hover {
	background-color: #ebebeb;
}

.main-top .search .drop-category .drop-item:hover p {
	font: 500 16px/1.6 'noto';
	color: #121212;
}

.main-top .search input {
	width: calc(100% - 140px);
	font:  400 18px/1 'noto';
	color: #3b3b3b;
}

.main-top .search button {
	position: relative;
	width: 50px;
	height: 50px;
	background: rgb(67,162,255);
	background: linear-gradient(145deg, rgba(67,162,255,1) 0%, rgba(36,213,115,1) 100%);
	border-radius: 5px;
	border: 1px solid transparent;
}

.main-top .search button span {
	display: block;
	width: 100%;
	height: 100%;
	background: transparent url('../img/icons/ico-search-wh.png') 50% 50%/26px 26px no-repeat;
}

.main-insight {
	display: flex;
	flex-wrap: wrap;
	margin-top: 33px;
}

.main-insight .main-list {
	position: relative;
	flex-basis: 50%;
}

.main-insight .main-list:nth-of-type(1) {
	padding-right: 20px;
	flex-basis: 34.4%;
}

.main-insight .main-list:nth-of-type(2) {
	display: flex;
	flex-wrap: wrap;
	flex-basis: 65.6%;
	max-width: 65.6%;
	padding-left: 18px;
}

.main-insight .main-list:nth-of-type(3) {
	flex-basis: 100%;
	max-width: 100%;
	margin-top: 30px;
}

.main-insight .main-list-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	height: 26px;
	margin-bottom: 14px;
}

.main-insight .main-list:nth-of-type(2) .main-list-top {
	margin-bottom: 0;
}

.main-insight .main-list-top .title span {
	position: relative;
	margin: 0 10px;
	font: 500 18px/1 'noto';
	color: #eff7ff;
	opacity: .8;
}

.main-insight .main-list-top .title span:first-child {
	padding-left: 25px;
	margin-left: 0;
	opacity: 1;
	color: #fff;
}

.main-insight .main-list-top .title span:first-child::before {
	content: '';
	position: absolute;
	left:  0;
	top: 50%;
	transform: translateY(-50%);
	width: 17px;
	height: 17px;
	background: transparent url('../img/icons/ico-symbol-pound-wh.png') 50% 50%/100% 100% no-repeat;
}

/*.main-insight .main-list-top .title span::after {
	content: '';
	position: absolute;
	right: -10px;
	top: 50%;
	transform: translateY(-50%);
	width: 1px;
	height: 8px;
	background-color: #fff;
	opacity: .2;
}
*/
/*.main-insight .main-list-top .title span:last-child::after {
	display: none;
}*/


.main-insight .main-list-top .title span.login-info {
	padding-left: 30px;
	margin-left: 0;
	font: 500 13px/1 'noto';
	color: #fff;
	opacity: 1;
}

.main-insight .main-list-top .title span.login-info::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	width: 20px;
	height: 20px;
	background: transparent url('../img/icons/ico-caution-wh.png') 50% 50%/100% 100% no-repeat;
}


.main-reco-list {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	min-width: 1200px;
}

.main-reco-list .reco-item {
	/* display: flex;
	align-items: center;
	justify-content: flex-start;
	flex-basis: calc(50% - 7px);
	height: 54px;
	margin: 7px 0;
	padding-left: 17px;
	border-radius: 15px;
	background-color: rgba(0, 0, 0, .2); */
	display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-basis: calc(100% - 83%);
    height: 60px;
    margin: 7px 0;
    padding-left: 24px;
    border-radius: 15px;
	background-color: rgb(21 20 20 / 80%);
}

.main-reco-list .reco-item:hover {
	background-color: rgba(0, 0, 0, .8);
}

.main-reco-list .reco-item.wait {
	justify-content: center;
	padding-left: 0;
	border: 1px solid rgba(255, 255, 255, .5);
	background-color: transparent;
}

.main-reco-list .reco-item.reco-01 a {
	background: transparent url('../img/icons/ico-reco-01-wh.png') 0 50%/26px 26px no-repeat;
}
.main-reco-list .reco-item.reco-02 a {
	background: transparent url('../img/icons/ico-reco-02-wh.png') 0 50%/26px 26px no-repeat;
}
.main-reco-list .reco-item.reco-03 a {
	background: transparent url('../img/icons/ico-reco-03-wh.png') 0 50%/26px 26px no-repeat;
}
.main-reco-list .reco-item.reco-04 a {
	background: transparent url('../img/icons/ico-reco-04-wh.png') 0 50%/26px 26px no-repeat;
}
.main-reco-list .reco-item.reco-05 a {
	background: transparent url('../img/icons/ico-reco-05-wh.png') 0 50%/26px 26px no-repeat;
}
.main-reco-list .reco-item.reco-06 a {
	background: transparent url('../img/icons/ico-reco-06-wh.png') 0 50%/26px 26px no-repeat;
}
.main-reco-list .reco-item.reco-07 a {
	background: transparent url('../img/icons/ico-reco-07-wh.png') 0 50%/26px 26px no-repeat;
}
.main-reco-list .reco-item.reco-08 a {
	background: transparent url('../img/icons/ico-reco-08-wh.png') 0 50%/26px 26px no-repeat;
}
.main-reco-list .reco-item.reco-09 a {
	background: transparent url('../img/icons/ico-reco-09-wh.png') 0 50%/26px 26px no-repeat;
}

.main-reco-list .reco-item.reco-11 a {
	background: transparent url('../img/icons/ico-reco-11-wh.png') 0 50%/26px 26px no-repeat;
}
.main-reco-list .reco-item.reco-12 a {
	background: transparent url('../img/icons/ico-reco-12-wh.png') 0 50%/26px 26px no-repeat;
}
.main-reco-list .reco-item.reco-13 a {
	background: transparent url('../img/icons/ico-reco-13-wh.png') 0 50%/26px 26px no-repeat;
}
.main-reco-list .reco-item.reco-14 a {
	background: transparent url('../img/icons/ico-reco-14-wh.png') 0 50%/26px 26px no-repeat;
}

.main-reco-list .reco-item.reco-15 a {
	background: transparent url('../img/icons/ico-reco-15-wh.png') 0 50%/26px 26px no-repeat;
}

.main-reco-list .reco-item.reco-16 a {
	background: transparent url('../img/icons/ico-reco-16-wh.png') 0 50%/26px 26px no-repeat;
}

.main-reco-list .reco-item.reco-17 a {
	background: transparent url('../img/icons/ico-reco-17-wh.png') 0 50%/26px 26px no-repeat;
}

.main-reco-list .reco-item.reco-18 a {
	background: transparent url('../img/icons/ico-reco-18-wh.png') 0 50%/26px 26px no-repeat;
}
.main-reco-list .reco-item.reco-19 a {
	background: transparent url('../img/icons/ico-reco-19-wh.png') 0 50%/26px 26px no-repeat;
}
/* 아이피 */
.main-reco-list .reco-item.reco-20 a {
	background: transparent url('../img/icons/ico-reco-20-wh.png') 0 50%/26px 26px no-repeat;
}

/* 서버시간 */
.main-reco-list .reco-item.reco-21 a {
	background: transparent url('../img/icons/ico-reco-21-wh.png') 0 50%/26px 26px no-repeat;
}
/* 자막변환기 */
.main-reco-list .reco-item.reco-22 a {
	background: transparent url('../img/icons/ico-reco-22-wh.png') 0 50%/26px 26px no-repeat;
}
/* 긴말텍스트 */
.main-reco-list .reco-item.reco-23 a {
	background: transparent url('../img/icons/ico-reco-23-wh.png') 0 50%/26px 26px no-repeat;
}

/* 토큰계산기 */
.main-reco-list .reco-item.reco-24 a {
	background: transparent url('../img/icons/ico-reco-24-wh.png') 0 50%/26px 26px no-repeat;
}

/* 타로히어로 */
.main-reco-list .reco-item.reco-25 a {
	background: transparent url('../img/icons/ico-reco-25-wh.png') 0 50%/26px 26px no-repeat;
}
/* 감성 메시지 생성기 */
.main-reco-list .reco-item.reco-26 a {
	background: transparent url('../img/icons/ico-reco-26-wh.png') 0 50%/26px 26px no-repeat;
}
/* 로마숫자 변환기 */
.main-reco-list .reco-item.reco-27 a {
	background: transparent url('../img/icons/ico-reco-27-wh.png') 0 50%/26px 26px no-repeat;
}

/* 텍스트 비교 */
.main-reco-list .reco-item.reco-28 a {
	background: transparent url('../img/icons/ico-reco-28-wh.png') 0 50%/26px 26px no-repeat;
}

/* 파일 비교 */
.main-reco-list .reco-item.reco-29 a {
	background: transparent url('../img/icons/ico-reco-29-wh.png') 0 50%/26px 26px no-repeat;
}

/* 텍스트 추출 */
.main-reco-list .reco-item.reco-30 a {
	background: transparent url('../img/icons/ico-reco-30-wh.png') 0 50%/26px 26px no-repeat;
}
/* 파비콘생성기 */
.main-reco-list .reco-item.reco-31 a {
	background: transparent url('../img/icons/ico-reco-31-wh.png') 0 50%/26px 26px no-repeat;
}

/*로렘 */
.main-reco-list .reco-item.reco-32 a {
	background: transparent url('../img/icons/ico-reco-32-wh.png') 0 50%/26px 26px no-repeat;
}



.main-reco-list .reco-item.reco-01:hover a {
	background: transparent url('../img/icons/ico-reco-01-grad.png') 0 50%/26px 26px no-repeat;
}
.main-reco-list .reco-item.reco-02:hover a {
	background: transparent url('../img/icons/ico-reco-02-grad.png') 0 50%/26px 26px no-repeat;
}
.main-reco-list .reco-item.reco-03:hover a {
	background: transparent url('../img/icons/ico-reco-03-grad.png') 0 50%/26px 26px no-repeat;
}
.main-reco-list .reco-item.reco-04:hover a {
	background: transparent url('../img/icons/ico-reco-04-grad.png') 0 50%/26px 26px no-repeat;
}
.main-reco-list .reco-item.reco-05:hover a {
	background: transparent url('../img/icons/ico-reco-05-grad.png') 0 50%/26px 26px no-repeat;
}
.main-reco-list .reco-item.reco-06:hover a {
	background: transparent url('../img/icons/ico-reco-06-grad.png') 0 50%/26px 26px no-repeat;
}
.main-reco-list .reco-item.reco-07:hover a {
	background: transparent url('../img/icons/ico-reco-07-grad.png') 0 50%/26px 26px no-repeat;
}
.main-reco-list .reco-item.reco-08:hover a {
	background: transparent url('../img/icons/ico-reco-08-grad.png') 0 50%/26px 26px no-repeat;
}
.main-reco-list .reco-item.reco-09:hover a {
	background: transparent url('../img/icons/ico-reco-09-grad.png') 0 50%/26px 26px no-repeat;
}

.main-reco-list .reco-item.reco-11:hover a {
	background: transparent url('../img/icons/ico-reco-11-grad.png') 0 50%/26px 26px no-repeat;
}
.main-reco-list .reco-item.reco-12:hover a {
	background: transparent url('../img/icons/ico-reco-12-grad.png') 0 50%/26px 26px no-repeat;
}
.main-reco-list .reco-item.reco-13:hover a {
	background: transparent url('../img/icons/ico-reco-13-grad.png') 0 50%/26px 26px no-repeat;
}
.main-reco-list .reco-item.reco-14:hover a {
	background: transparent url('../img/icons/ico-reco-14-grad.png') 0 50%/26px 26px no-repeat;
}

.main-reco-list .reco-item.reco-15:hover a {
	background: transparent url('../img/icons/ico-reco-15-grad.png') 0 50%/26px 26px no-repeat;
}

.main-reco-list .reco-item.reco-16:hover a {
	background: transparent url('../img/icons/ico-reco-16-grad.png') 0 50%/26px 26px no-repeat;
}

.main-reco-list .reco-item.reco-17:hover a {
	background: transparent url('../img/icons/ico-reco-17-grad.png') 0 50%/26px 26px no-repeat;
}

.main-reco-list .reco-item.reco-18:hover a {
	background: transparent url('../img/icons/ico-reco-18-grad.png') 0 50%/26px 26px no-repeat;
}
.main-reco-list .reco-item.reco-19:hover a {
	background: transparent url('../img/icons/ico-reco-19-grad.png') 0 50%/26px 26px no-repeat;
}
.main-reco-list .reco-item.reco-20:hover a {
	background: transparent url('../img/icons/ico-reco-20-grad.png') 0 50%/26px 26px no-repeat;
}
/* 서버시간 */
.main-reco-list .reco-item.reco-21:hover a {
	background: transparent url('../img/icons/ico-reco-21-grad.png') 0 50%/26px 26px no-repeat;
}
/* 자막변환기 */
.main-reco-list .reco-item.reco-22:hover a {
	background: transparent url('../img/icons/ico-reco-22-grad.png') 0 50%/26px 26px no-repeat;
}

/* 긴말텍스트 */
.main-reco-list .reco-item.reco-23:hover a {
	background: transparent url('../img/icons/ico-reco-23-grad.png') 0 50%/26px 26px no-repeat;
}

/* 토큰계산기 */
.main-reco-list .reco-item.reco-24:hover a {
	background: transparent url('../img/icons/ico-reco-24-grad.png') 0 50%/26px 26px no-repeat;
}

/* 타로히어로 */
.main-reco-list .reco-item.reco-25:hover a {
	background: transparent url('../img/icons/ico-reco-25-grad.png') 0 50%/26px 26px no-repeat;
}

/* 감성 메시지 생성기 */
.main-reco-list .reco-item.reco-26:hover a {
	background: transparent url('../img/icons/ico-reco-26-grad.png') 0 50%/26px 26px no-repeat;
}

/* 로마숫자 변환기 */
.main-reco-list .reco-item.reco-27:hover a {
	background: transparent url('../img/icons/ico-reco-27-grad.png') 0 50%/26px 26px no-repeat;
}

/* 텍스트 비교 */
.main-reco-list .reco-item.reco-28:hover a {
	background: transparent url('../img/icons/ico-reco-28-grad.png') 0 50%/26px 26px no-repeat;
}

/* 파일 비교 */
.main-reco-list .reco-item.reco-29:hover a {
	background: transparent url('../img/icons/ico-reco-29-grad.png') 0 50%/26px 26px no-repeat;
}

/* 텍스트 추출 */
.main-reco-list .reco-item.reco-30:hover a {
	background: transparent url('../img/icons/ico-reco-30-grad.png') 0 50%/26px 26px no-repeat;
}

/* 파비콘생성기 */
.main-reco-list .reco-item.reco-31:hover a {
	background: transparent url('../img/icons/ico-reco-31-grad.png') 0 50%/26px 26px no-repeat;
}

/*로렘 */
.main-reco-list .reco-item.reco-32:hover a {
	background: transparent url('../img/icons/ico-reco-32-grad.png') 0 50%/26px 26px no-repeat;
}

.main-reco-list .reco-item a {
	height: 26px;
	padding-left: 35px;
	font: 500 16px/26px 'noto';
	color: #fff;
	cursor: pointer;
}

.main-reco-list .reco-item.wait a {
	height: auto;
	padding-left: 0;
	font:  500 14px/1 'noto';
	opacity: .6;
	cursor: auto;
}

/*.main-insight .main-list:nth-of-type(2) .infinite-list:nth-of-type(2) {
	width: calc(100% - 75px);
}*/

.infinite-list {
	overflow-x: auto;
	overflow-y: hidden;
	flex-basis: calc(100% - 84px);
	padding: 0 0 0 18px;
	margin: 0 0 0 20px;
}

.infinite-list::-webkit-scrollbar {
	width: 6px;
    height: 6px;
}

.infinite-list::-webkit-scrollbar-thumb {
	/*background-color: #dedede;*/
	background: linear-gradient(180deg, rgba(67,162,255,1) 0%, rgba(36,213,115,1) 100%);
    /*background-clip: padding-box;*/
    /*border: 2px solid transparent;*/
}

.infinite-list::-webkit-scrollbar-track {
	background-color: rgba(255, 255, 255, .2);
    /*border-radius: 10px;*/
    /*box-shadow: inset 0px 0px 3px white;*/
}

.main-bookmark-list {
	display: flex;
	flex-wrap: nowrap;
	/*padding: 6px 0 20px 0;*/
	padding: 6px 0 10px 0;
}

.infinite-list.top {
}

.infinite-list.bottom {
}

.main-insight .main-list:nth-of-type(2) .infinite-list:last-child .main-bookmark-list {
	margin-top: 10px;
	padding-bottom: 10px;
}

#bookmark_folder_add,
#bookmark_marker_guide {
	padding: 6px 0 10px 0;
	width: 62px;
	height: 62px;
	text-align: center;
	cursor: pointer;
}

#bookmark_marker_guide {
	margin-top: 10px;
	cursor: auto;
}

#bookmark_folder_add > div,
#bookmark_marker_guide > div {
	width: 62px;
	margin-bottom: 0 !important;
}

#bookmark_marker_guide > div {
	background-color: transparent !important;
}

.main-bookmark-list .bookmark-item {
	width: 62px;
	min-width: 62px;
	margin: 0 15px;
}

.main-bookmark-list .bookmark-item:first-child {
	margin-left: 0;
}

.main-bookmark-list .bookmark-item:last-child {
	margin-right: 0;
}

.main-bookmark-list .bookmark-item a {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: auto;
	cursor: pointer;
}

#bookmark_folder_add .icon-area,
#bookmark_marker_guide .icon-area,
.main-bookmark-list .bookmark-item .icon-area {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 62px;
	margin-bottom: 32px;
    background-color: rgba(0,0,0,.2);
	border-radius: 100px;
	overflow: hidden;
}

.main-bookmark-list .bookmark-item p {
	position: absolute;
    left: 50%;
    top: 60px;
    transform: translateX(-50%);
    width: 140%;
	margin-top: 9px;
	font: 400 14px 'noto';
	color: #fff;
	text-align: center;
}

#bookmark_folder_add p,
#bookmark_marker_guide p {
	margin-top: 9px;
	font: 700 15px/1.2 'noto';
	color: #fff;
}

#bookmark_folder_add .icon-area,
#bookmark_marker_guide .ico-area,
.main-bookmark-list.bookmark-folder .bookmark-item.active .icon-area {
	background-color: #fff;
}

.main-bookmark-list.bookmark-folder .bookmark-item .icon-area span {
	width: 30px;
	height: 26px;
}

#bookmark_folder_add .icon-area span {
	width: 22px;
	height: 22px;
	background: transparent url('../img/icons/ico-acc-plus-grad.png') 50% 50%/ 100% 100% no-repeat;
}

#bookmark_marker_guide .icon-area span {
	width: 29px;
	height: 28px;
	background: transparent url('../img/icons/ico-marker-yl.png') 50% 50%/100% 100% no-repeat;
}

.main-bookmark-list.bookmark-folder .bookmark-item .icon-area span {
	background: transparent url('../img/icons/ico-bookmark-folder-wh.png') 50% 50%/ 100% 100% no-repeat;
}

.main-bookmark-list.bookmark-folder .bookmark-item.active .icon-area span {
	background: transparent url('../img/icons/ico-bookmark-folder-grad.png') 50% 50%/ 100% 100% no-repeat;
}

.main-bookmark-list.bookmark-link .bookmark-item.empty .icon-area {
	border:  1px solid rgba(255,255,255, .15);
}

.main-bookmark-list.bookmark-link .bookmark-item.empty a {
	cursor: auto;
}

.main-bookmark-list.bookmark-link .bookmark-item .icon-area span {
	width: 32px;
	height: 32px;
	border-radius: 100px;
	background-color: #fff;
	background-position: 50% 50%;
	background-repeat: no-repeat;
	background-size: cover;
}

.main-bookmark-list.bookmark-link .bookmark-item.dummy1 .icon-area span {
	background: rgba(0,0,0,.15) url('../img/dummy/ico-bookmark-link-dummy-01.png') 50% 50%/ 100% 100% no-repeat;
}

.main-bookmark-list.bookmark-link .bookmark-item.dummy2  .icon-area span {
	background: rgba(0,0,0,.15) url('../img/dummy/ico-bookmark-link-dummy-02.png') 50% 50%/ 100% 100% no-repeat;
}




.main-topic-list {
	position: relative;
	padding-top: 6px;
	/*padding-bottom: 60px;*/
}

.main-topic-list .topic-item {
	display: inline-block;
	position: relative;
	padding: 0 10px;
}

.main-topic-list .topic-item:first-child {
	margin-left: 0;
}

.main-topic-list .topic-item:last-child {
	margin-right: 0;
}

.main-topic-list .topic-item a {
	display: inline-block;
	position: relative;
	width: 100%;
	height: 100%;
	border-radius: 10px;
	overflow: hidden;
	cursor: pointer;
}

.main-topic-list .topic-item .topic-bookmark {
	display: none;
	z-index: 10;
	position: absolute;
	top: 10px;
	right: 20px;
	width: 34px;
	height: 34px;
	border-radius: 50px;
	background: #000 url('../img/icons/ico-bookmark-flag-false.png') 50% 50%/ 14px 16px no-repeat;
	cursor: pointer;
}

.main-topic-list .topic-item.save .topic-bookmark {
	background: #000 url('../img/icons/ico-bookmark-flag-true.png') 50% 50%/ 14px 16px no-repeat;
}

.main-topic-list .topic-item .img-area {
	height: auto;
}

.main-topic-list .topic-item .img {
	padding-bottom: 54%;
	height: 0;
}

.main-topic-list .topic-item .img.dummy1 {
	background-image: url('../img/dummy/th-topic-dummy-01.png');
}
.main-topic-list .topic-item .img.dummy2 {
	background-image: url('../img/dummy/th-topic-dummy-02.png');
}
.main-topic-list .topic-item .img.dummy3 {
	background-image: url('../img/dummy/th-topic-dummy-03.png');
}
.main-topic-list .topic-item .img.dummy4 {
	background-image: url('../img/dummy/th-topic-dummy-04.png');
}

.main-topic-list .topic-item .text {
	padding: 10px 25px 10px 15px;
	background-color: #fff;
}

.main-topic-list .topic-item .text p {
	font: 400 13px/1.5em 'noto';
	color: #3b3b3b;
}

.main-list .acc {
	display: flex;
	border-radius: 50px;
}

.main-list .acc > * {
	position: relative;
	width: 26px;
	height: 26px;
	cursor: pointer;
}

.main-list .acc .add,
.main-list .acc .search {
	width: auto;
	padding-left: 32px;
	background-color:  transparent;
	font: 500 15px/1 'noto';
	color: #fff;
}

.main-list .acc .search {
	margin-right: 18px;
}

.main-list .acc .add::before,
.main-list .acc .search::before {
	content: '';
	z-index: 1;
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 26px;
	height: 26px;
	background: rgba(0,0,0,.5) url('../img/icons/ico-acc-plus-grad.png') 50% 50%/12px 12px no-repeat;
	border-radius: 10px;
}

.main-list .acc .search::before {
	background: rgba(0,0,0,.5) url('../img/icons/ico-search-grad.png') 50% 50%/14px 14px no-repeat;
}

.main-list .acc .left {
	background: rgba(0,0,0,.5) url('../img/icons/ico-acc-left-grad.png') 50% 50%/8px 12px no-repeat;
}
.main-list .acc .right {
	background: rgba(0,0,0,.5) url('../img/icons/ico-acc-right-grad.png') 50% 50%/8px 12px no-repeat;
}

.main-list .acc .left::after {
	content: '';
	z-index: 1;
	position: absolute;
	right: 0;
	top: 0;
	width: 1px;
	height: inherit;
	background-color: rgba(255, 255, 255, .2);
}

#footer {
	position: fixed;
	right: 20px;
	bottom: 25px;
	width: auto;
}

@media (min-width: 768px) { /* PC 버전 */
    .main-reco-list,
	.wrap-outer {
        min-width: 1200px; /* PC에서만 최소 너비 유지 */
    }
}


@media (max-width: 480px) {
	.main-top .main-logo a {
		width: 79%;
		height: 79%;		
	}
	.main-top .search {
        width: 85%;
		padding: 5px 5px 5px 5px;
        margin-top: 0px;
        height: 55px;
    }
	.main-top .search .disp-category > .disp-item {
		width: 41px;
		margin: 0;		
	}
	.main-top .search input {
		width: calc(100% - 35px);
		font: 400 15px / 1 'noto';	
	}
	.main-top .search button {
		width: 63px;	
	}
	.main-top .main-logo h1 {
		height: 116px;	
	}
	.main-top .search button {	
		height: 46px;	
	}

	.wrap-outer {
        min-width: auto !important;  /* 모바일에서는 min-width 제거 */
        width: 100% !important;     /* 화면 크기에 맞게 자동 조정 */
        flex-wrap: wrap;             /* 요소들이 화면 크기에 맞게 자동으로 줄바꿈 */
    }

	

	.main-reco-list {
        min-width: auto !important;  /* 모바일에서는 min-width 제거 */
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important; /* 한 줄에 2개 */
        gap: 10px !important; /* 간격 추가 */
        width: 97% !important;
		margin: 20px;
    }

    .main-reco-list .reco-item {
        width: 165px !important;
        max-width: none !important;
        /* background-color: #333 !important; */
        color: #fff !important;
        border-radius: 10px !important;
        /* text-align: center !important; */
        padding: 15px 0 !important;
        display: block !important;
    }

	.main-insight .main-list-top {
		margin-left: 30px;
	}	

	.main-insight .main-list-top .title span:first-child {
		font-size: 20px;
		font-weight: 700;
	}
	.main-reco-list .reco-item a {	
		margin-left: 15px;
	}	

	.main-reco-list .reco-item.wait {
		background-color: transparent;
		font-size: 24px;
        text-align: center;
	}
}

@media (max-width: 480px) {
	.en .main-reco-list .reco-item a {
		padding-left: 32px;
		font: 500 13px / 30px 'noto';		
	}
	.ja .main-reco-list .reco-item a {
		padding-left: 32px;
		font: 500 14px / 30px 'noto';		
	}
}