@charset "utf-8";

* {
	margin: 0;
	padding: 0;
}

hr {
	display:none
}
a {
	text-decoration:none
}

*, :after, :before {
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
}

body {
    color:#333;
    font-size:16px;
	font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif !important;
	overflow-x: hidden;
    letter-spacing: -1px;
    position: relative;
    font-weight: 500;
    word-break: keep-all;
	letter-spacing : -0.23px;
	line-height: 1.3em;
} 
a {
	color: #333;
	text-decoration: none;
}
img {
	border: none;
	vertical-align: top;
}

ul,
ol {
	list-style: none;
}
h1,
h2,
h3,
h4,
h5,
h6,
div,
p,
ul,
li,
ol,
dl,
dt,
dd {
	box-sizing: border-box;
}

x select::-ms-expand {
	display: none;
}

br {
	font-family: dotum;
}

input:focus,
select:focus,
input[type=radio]:focus,
input[type=checkbox]:focus {
	outline: none;
}

input[type="checkbox"] {
	width: 0;
	height: 0;
	opacity: 0; 
	position: absolute; 
}

[type="number"] {
    opacity: 1;
}

input::-webkit-inner-spin-button,
input::-webkit-outer-spin-button {
    opacity: 1;
}

input::-webkit-search-decoration,
input::-webkit-search-cancel-button,
input::-webkit-search-results-button,
input::-webkit-search-results-decoration{
	display:none;
}

select {
    -webkit-appearance: none;
    -moz-appearance: none;
    -o-appearance: none;
}

address {
    font-style: normal;
}

.cf {}

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

button {
	background: inherit ; 
	border:none; 
	box-shadow:none; 
	border-radius:0; 
	padding:0; 
	overflow:visible; 
	cursor:pointer;
	color: #F5F5F5;
	font-size:16px;
	font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif !important;
}

li::marker {
    content: "";
}

.mt10{
	margin-top:10px;
}

.mt30{
	margin-top:30px;
}
.mt40{
	margin-top:40px;
}
.mt50{
	margin-top:50px;
}
.mb5 {
	margin-bottom: 5px;
}
.mb9 {
	margin-bottom: 9px;
}
.mb10 {
	margin-bottom: 10px;
}
.mb15 {
	margin-bottom: 15px;
}
.mb20 {
	margin-bottom: 20px;
}
.mb23 {
	margin-bottom:23px;
}
.mb25 {
	margin-bottom:25px;
}
.mb30{
	margin-bottom:30px;
}
.mb35{
	margin-bottom:35px;
}
.mb40{
	margin-bottom:40px;
}
.mb50{
	margin-bottom:50px;
}
.mb60{
	margin-bottom:60px;
}
.mt50{
	margin-top: 50px;
}
.cursor{
	cursor:pointer;
}
.c-red {
	color: #FF3E3E;
}
.d-flex {
	display: flex;
}
.justify-between {
	justify-content: space-between;
}
.justify-center {
	justify-content: center;
}
.justify-content-between {
	justify-content: space-between;
}
.justify-content-center {
	justify-content: center;
}

.justify-content-end {
	justify-content: end;
}

.align-items-center {
	align-items: center;
}
.gap10 {
	gap: 10px;
}
.gap15 {
	gap: 15px;
}
.gap20 {
	gap: 20px;
}
.gap50 {
	gap: 50px;
}
.gap100 {
	gap: 100px;
}
.bg_red {
	background-color: #FF3E3E;
}
.bg_blue {
	background-color: #183368;
}

.hidden {
    overflow: hidden;
    display: inline-block;
    border: 0;
	clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
}

.absolute {
    position: absolute;
    top: 0;
    left: -9999999999999px;
}

.w-100 {
	width: 100%;
}

::placeholder {
	color: #767676;
	font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif !important;
} 

textarea {
	width: 100%;
	height: 126px;
	border: none;
	resize: none;
	border-radius: 2px;
	background-color: #fff;
	color: #666;
	padding: 14px 16px;
	font-size: 14px;
	overflow-y: scroll;
	border: 1px solid #DBDCDC;
	font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif !important;
}

/* 스크롤바 스타일 */
textarea::-webkit-scrollbar {
	width: 13px;
}

textarea::-webkit-scrollbar-track {
	background: #ECECEC; /* 스크롤바 트랙 색상 */
	border-radius: 2px;
}

textarea::-webkit-scrollbar-thumb {
	background-color: #BCBCBC; /* 스크롤바 색상 */
	border-radius: 2px;
}

textarea::-webkit-scrollbar-thumb:hover {
	background-color: rgb(107, 107, 107); /* 스크롤바 호버 색상 */
}

/* checkbx */
input[type=radio],
input[type=checkbox] {
  width: 12px;
  height: 12px;
}

.checkbox:first-child {
  margin-left: 0;
}

.checkbox:last-child {
  margin-right: 0
}

.checkbox.active {
  background: #e6eef9;
}

.checkbox {
  display: block;
  position: relative;
  vertical-align: middle;
  white-space: nowrap;
}

.checkbox input[type=checkbox] {
  overflow: hidden;
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  clip: rect(0, 0, 0, 0)
}

.checkbox input[type=checkbox]:focus+i {
  outline: 1px dotted #666;
  outline: -webkit-focus-ring-color auto 1px
}

.checkbox span {
  display: inline-block;
  font-size: 12px;
  margin-right: 5px;
}

.checkbox i {
  display: inline-block;
  overflow: hidden;
  position: relative;
  vertical-align: middle;
  width: 14px;
  height: 14px;
  border: 1px solid #B2B2B2;
  background-color: #fff;
  border-radius: 3px;
  top: -1px;
  margin-right: 5px;
}

.checkbox span~i {
  margin-left: 5px
}

.checkbox i:last-child {
  margin-right: 0
}

.checkbox i::before {
  content: "";
  position: absolute
}

.checkbox [type=checkbox]:hover:not(:disabled):not(:checked)+i,
.checkbox [type=checkbox]:focus:not(:disabled):not(:checked)+i {
  border-color: #686868
}

.checkbox :checked~i {
  background-color: #007DC4;
  border: 1px solid #007DC4;
}

.checkbox :checked~i::before {
  display: block
}

.checkbox i::before {
  display: none;
  top: 54%;
  left: 50%;
  width: 8px;
  height: 6px;
  border: 1px solid #fff;
  border-width: 0 0 2px 2px;
  transform: translate(-4px, -5px) rotate(-40deg);
}

/* radio */
.radio:last-child {
  margin-right: 0;
}

.radio:first-child {
  margin-left: 0;
}

.radio {
  display: inline-block;
  position: relative;
  margin: 0 8px;
  white-space: nowrap;
}

.radio input[type=radio] {
  overflow: hidden;
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  clip: rect(0, 0, 0, 0);
}

.radio i:last-child {
  margin-right: 3px;
  margin-top: -1px;
}

.radio i {
  border-radius: 50%;
}

.radio i {
  display: inline-block;
  overflow: hidden;
  position: relative;
  vertical-align: middle;
  width: 14px;
  height: 14px;
  margin-right: 5px;
  border: 1px solid #B2B2B2;
  background-color: #fff;
}

.radio :checked~i::before {
  background-color: #007DC4;
}

.radio i::before {
  top: 50%;
  left: 50%;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background-color: #fff;
  transform: translate(-50%, -50%);
}

.radio i::before {
  content: "";
  position: absolute;
}

/***************************************************************** hearder */
.header {
	width: 100%;
	left: 0;
	background-color: #fff;
	z-index: 2000;
	transition: all 0.5s;
}

.topHeader {
	width: 1400px;
	margin: 6px auto;
	padding: 0 20px;
	height: 79px;
	align-items: center;
	transition: all 0.5s;
}

.topHeader .logo {
	padding: 12px 0;
}

.topHeader .wrap-header-top-right {
	align-items: center;
	gap: 1rem;
	transition: all 0.5s;
}

.topHeader .wrap-header-top-right .header-top-right {
	display: block;
	transition: all 0.5s;
}

.topHeader .wrap-header-top-right .header-top-right ul {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	transition: all 0.5s;
}

.topHeader .wrap-header-top-right .header-top-right ul li {
	display: grid;
	place-items: center;
	transition: all 0.5s;
}

.topHeader .wrap-header-top-right .header-top-right ul li a {
	display: inline-block;
	width: 1.9rem;
    height: 1.9rem;
	transition: all 0.5s;
}

.topHeader .wrap-header-top-right .header-top-right ul li:nth-child(1) a {
	background: url(../images/common/utill_blog.svg) center no-repeat;
	background-size: contain;
}

.topHeader .wrap-header-top-right .header-top-right ul li:nth-child(2) a {
	background: url(../images/common/utill_facebook.svg) center no-repeat;
	background-size: contain;
}

.topHeader .wrap-header-top-right .header-top-right ul li:nth-child(3) a {
	background: url(../images/common/utill_telegram.svg) center no-repeat;
	background-size: contain;
}

.topHeader .wrap-header-top-right .header-langs .langs-content {
	display: flex;
	gap: 10px;
}

.topHeader .wrap-header-top-right .header-langs .langs-content .korea {
	background: url(../images/common/lang_ko.svg) center no-repeat;
	width: 50px;
	height: 30px;
	display: block;
}

.topHeader .wrap-header-top-right .header-langs .langs-content .en {
	background: url(../images/common/lang_en.svg) center no-repeat;
	width: 50px;
	height: 30px;
	display: block;
}

.topHeader .wrap-header-top-right .top_utilwrap .utill {
    display: flex;
    max-width: 1400px;
    align-items: end;
    justify-content: end;
    /*margin: 0 auto !important;*/
    /*padding: 10px 0 !important;*/
}

.topHeader .wrap-header-top-right .top_utilwrap .utill li {
	position: relative;
    margin-right: 20px;
	margin-left: 10px;
}

.top_utilwrap .utill li:last-child {
	margin-right: 0!important;
}

.topHeader .wrap-header-top-right .top_utilwrap .utill li~li>a::after {
    content: "";
    position: absolute;
    left: -16px;
    top: 20%;
    width: 1px;
    height: 12px;
    background: #707070;
}

.topmenu {
	display: flex;
	justify-content: space-between;
	align-items: center;
	background-color: #007DC4;
	height: 50px;
	color: #fff;
}

.topmenu .menu {
	display: flex;
	justify-content: space-between;
    align-items: center;
	gap: 15px;
	list-style: none;
	width: 1400px;
	margin: 0 auto;
	transition: all 0.5s;
}

.topmenu .menu li {
	position: relative;
}

.topmenu .menu li a {
	color: #fff;
	font-size: 18px;
}

.hp-gnb-arrow {
    display: inline-block;
    background: url(../images/common/gnb_arrow.png) center no-repeat;
    width: 14px;
    height: 8px;
    margin-left: 5px;
    margin-bottom: 2px;
}

.menu-toggle {
	display: none;
}

.main-container {
	display: flex;
	margin: 20px;
	gap: 20px;
	transition: all 0.5s;
}

.header .topmenu ul li .submenu {
    width: 200px;
    background: #fff;
    position: absolute;
    top: 36px;
    left: 0;
    box-shadow: 1px 1px 8px 0px rgba(99, 99, 99, 0.2);
	border-radius: 10px;
	z-index: 999;
	display: none;
}

.header .topmenu ul li .submenu li a {
	font-size: 16px;
	color: #000;
	padding: 0.8rem 1rem;
	display: block;
}

.header .topmenu ul li .submenu li a:hover {
	color: #007DC4;
	font-weight: 800;
	background-color: #e8f3ff;
	border-radius: 10px;

}

.header .m_open_btn {
	display: none;
}

.dark {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.45);
	z-index: 997;
}

.header .mobile {
	display: none;
}

.nav.mobile {
    display: none;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    background: #fff;
    z-index: 998;
    transform: translateX(100%);
    transition: transform 0.3s ease;
    width: 70%;
    box-shadow: -12px 0 32px rgba(15, 23, 42, 0.18);
}

.nav.mobile.active {
    transform: translateX(0);
}

.dark.show {
    display: block;
}

.left-content,
.right-content {
	border-radius: 3px;
	width: 100%;
    min-width: 280px;
	flex: 1;
}

.center-content {
	width: 100%;
    min-width: 712px;
}

.banner img {
	width: 100%;
	padding : 0 0 12px;
}

.login {
	border: 1px solid #E6E6E6;
	padding: 20px 15px;
	border-radius: 3px;
}

.login .input_section {
    position: relative;
    display: inline-block;
}

.login .input_section input {
    width: 100%;
    height: 40px;
    margin-bottom: 10px;
    border-color: #D0D0D0;
    border-radius: 3px;
    background-position: center left 10px;
    background-repeat: no-repeat;
    padding: 4px 50px;
	border: 1px solid #DDDDDD;
}

.login .input_section input[type="text"]{
	background-image : url(../images/common/id_ico.svg); 
}
.login .input_section input[type="password"]{
	background-image : url(../images/common/password_ico.svg); 
}
.login .input_section input::placeholder {
	color: #CCCCCC;
	font-size: 14px;
}

/* checkbx */
.login input[type=radio],
.login input[type=checkbox] {
  width: 15px;
  height: 15px;
}

.login .checkbox:first-child {
  margin-left: 0;
}

.login .checkbox:last-child {
  margin-right: 0
}

.login .checkbox.active {
  background: #e6eef9;
}

.login .checkbox {
  display: block;
  position: relative;
  vertical-align: middle;
  white-space: nowrap;
  padding: 5px;
}

.login .checkbox input[type=checkbox] {
  overflow: hidden;
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  clip: rect(0, 0, 0, 0)
}

.login .checkbox input[type=checkbox]:focus+i {
  outline: 1px dotted #666;
  outline: -webkit-focus-ring-color auto 1px
}

.login .checkbox span {
  display: inline-block;
  vertical-align: middle;
  white-space: nowrap;
  font-size: 14px;
}

.login .checkbox i {
  display: inline-block;
  overflow: hidden;
  position: relative;
  vertical-align: middle;
  width: 16px;
  height: 16px;
  margin-right: 5px;
  border: 1px solid #B2B2B2;
  background-color: #fff;
  border-radius: 3px;
  ;
}

.login .checkbox span~i {
  margin-left: 5px
}

.login .checkbox i:last-child {
  margin-right: 0
}

.login .checkbox i::before {
  content: "";
  position: absolute
}

.login .checkbox [type=checkbox]:hover:not(:disabled):not(:checked)+i,
.login .checkbox [type=checkbox]:focus:not(:disabled):not(:checked)+i {
  border-color: #686868
}

.login .checkbox :checked~i {
  background-color: #007DC4;
  border: 1px solid #007DC4;
}

.login .checkbox :checked~i::before {
  display: block
}

.login .checkbox i::before {
  display: none;
  top: 54%;
  left: 66%;
  width: 8px;
  height: 6px;
  border: 1px solid #fff;
  border-width: 0 0 2px 2px;
  transform: translate(-6px, -5px) rotate(-40deg);
}

.login .text_button {
    text-align: center;
    width: 100%;
	padding: 8px 0;
    height: 37px;
    background-color: #007DC4;
    border-radius: 3px;
    color: #fff;
    cursor: pointer;
    transition: all 0.3s;
	font-weight: 600;
	margin-top: 16px;
	font-size: 14px;
}

.login .sns_button {
	text-align: center;
    width: 100%;
	padding: 8px 0;
    height: 37px;
    border-radius: 3px;
    color: #fff;
    cursor: pointer;
    transition: all 0.3s;
	font-size: 13px;
	font-weight: 600;
	position: relative;
}

.login .kakao_login {
	background: #FDDC3F url(../images/common/kakao_login.png) no-repeat left 10px center;
	color: #3A2929;
	margin-bottom: 10px;
}

.login .naver_login {
	background: #06BE34 url(../images/common/naver_login.png) no-repeat left 10px center;
	color: #ffffff;
}

.login .kakao_login::after {
	content: "";
	width: 1px;
	height: 100%;
	background-color: #ECCF43;
	position: absolute;
	left: 43px;
	top: 0;
}

.login .naver_login::after {
	content: "";
	width: 1px;
	height: 100%;
	background-color: #0AAE33;
	position: absolute;
	left: 43px;
	top: 0;
}

.login .button_section {
	text-align: center;
	margin: 16px 0 19px;
}

.login .button_section span {
	color: #767676;
	font-size: 14px;
}

.SellBuyBtn ul li {
	border: 1px solid #E6E6E6;
	padding: 18px 24px;
	border-radius: 3px;
	position: relative;
	width: 100%;
}

.SellBuyBtn ul li a {
	font-size: 16px;
	font-weight: 700;
	padding: 0 0 0 30px;
	color: #1D1D1D;
}

.SellBuyBtn ul li:nth-child(1){
	background: url(../images/common/briefcase.svg) no-repeat left 20px center;
}

.SellBuyBtn ul li:nth-child(2){
	background: url(../images/common/users-group.svg) no-repeat left 20px center;
}
.SellBuyBtn ul li:nth-child(3){
	background: url(../images/common/chart-bar-popular.svg) no-repeat left 20px center;
}

.SellBuyBtn ul li:nth-child(4){
	background: url(../images/common/trending-up.svg) no-repeat left 20px center;
}
.SellBuyBtn ul li:nth-child(5){
	background: url(../images/common/credit-card.svg) no-repeat left 20px center;
}

.SellBuyBtn ul li:nth-child(6){
	background: url(../images/common/message.svg) no-repeat left 20px center;
}

.SellBuyBtn ul li .left-arrow {
	display: inline-block;
    background: url(../images/common/left_arrow.svg) no-repeat center center;
    width: 22px;
    height: 16px;
	position: absolute;
    right: 24px;
	top: 50%;
	transform: translate(0, -50%);
}

.counsel_form {
	background: url(../images/common/counsel_bg.png) no-repeat;
	padding: 27px 21px;
	width: 100%;
}

.counsel_form h3 {
	color: #fff;
	font-size: 24px;
	margin-bottom: 18px;
}

.counsel_form input,
.counsel_form button,
.counsel_form .counsel-select {
	display: block;
	width: 100%;
	margin-bottom: 10px;
	padding: 8px 10px;
	border: 1px solid #fff;
	border-radius: 3px;
	color: #636363;
}

.counsel_form .counsel-select {
    max-width: 100%;
    background: #fff url(../images/common/sel_icon.svg) no-repeat center right 10px;
}

.counsel_form button {
	background: #007DC4;
	color: #fff;
	border: none;
	cursor: pointer;
}

.rankingBox .tabs {
	width: 300px;
	border: 1px solid #E6E6E6;
	border-radius: 3px;
	background-color: #fff;
	overflow: hidden;
	padding: 0 15px;
}

.rankingBox .tab-buttons {
	display: flex;
	border-bottom: 1px solid #ddd;
	gap: 45px;
	padding: 0 15px;
}

.rankingBox .tab-btn {
	padding: 22px 0 17px;
	text-align: center;
	cursor: pointer;
	border: none;
	outline: none;
	transition: background-color 0.3s;
	font-weight: 800;
	color: #AAAAAA;
}

.rankingBox .tab-btn.active {
	color: #242424;
	position: relative;
}

.rankingBox .tab-btn.active::after {
	width: 100%;
	height: 3px;
	background-color: #007DC4;
	position: absolute;
	bottom: 0;
	left: 0;
	content: "";
	transform: scaleX(1.5);
    transition: 0.3s;
}

.rankingBox .tab-content {
	padding: 15px;
}

.rankingBox .tab-panel {
	display: none;
}

.rankingBox .tab-panel.active {
	display: block;
}

.rankingBox ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

.rankingBox li {
	margin-bottom: 8px;
	transition: background-color 0.3s;
	display: flex;
	gap: 7px;
	align-items: center;
	font-size: 14px;
}

.rankingBox li:last-child {
	margin-bottom: 0px;
}

.rankingBox li span {
	width: 17px;
	height: 17px;
	background-color: #E6E6E6;
	display: block;
	display: flex;
	font-size: 12px;
	justify-content: center;
	align-items: center;
	font-weight: 600;
}

.rankingBox li span.topRanking {
	background-color: #007DC4;
	color: #fff;
}

.recentlyViewed-tabs,
.interest-tabs {
	width: 300px;
	height: 200px;
    border: 1px solid #E6E6E6;
    border-radius: 3px;
    background-color: #fff;
    overflow: hidden;
    padding: 0 15px;
}

.recentlyViewed-tab-buttons,
.interest-tab-buttons {
	display: flex;
    border-bottom: 1px solid #ddd;
    gap: 45px;
    padding: 0 15px;
}

.recentlyViewed-tab-btn,
.interest-tab-btn {
	padding: 22px 0 17px;
    text-align: center;
    cursor: pointer;
    border: none;
    outline: none;
    transition: background-color 0.3s;
    font-weight: 800;
	color: #AAAAAA;
}

.recentlyViewed-tab-btn.is-active,
.interest-tab-btn.is-active {
	color: #242424;
    position: relative;
}

.recentlyViewed-tab-btn.is-active::after,
.interest-tab-btn.is-active::after {
	width: 100%;
    height: 3px;
    background-color: #007DC4;
    position: absolute;
    bottom: 0;
    left: 0;
    content: "";
    transform: scaleX(1.5);
    transition: 0.3s;
} 

.recentlyViewed-tab-content,
.interest-tab-content {
	padding: 20px;
	height: 124px;
	min-height: 124px;
	position: relative;
}

.recentlyViewed-tab-panel,
.interest-tab-panel {
	display: none;
}

.recentlyViewed-tab-panel.is-active,
.interest-tab-panel.is-active {
	display: block;
}

.recentlyViewed-slider,
.interest-slider {
	position: relative;
}

.recentlyViewed-slide-content,
.interest-slide-content {
	display: flex;
	overflow: hidden;
	width: 100%;
}

.recentlyViewed-slide,
.interest-slide {
	min-width: 100%;
	padding: 0 15px;
}

.recentlyViewed-slide p,
.interest-slide p {
	font-size: 14px;
	overflow: hidden; 
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	color: #333333;
	font-weight: 500;
	margin-bottom: 17px;
}

.recentlyViewed-slide span,
.interest-slide span {
	font-size: 12px;
	overflow: hidden; 
	text-overflow: ellipsis;
	display: -webkit-box;
	white-space:nowrap;
	display: block;
	margin-right: 10px;
	color: #858585;
}

.recentlyViewed-slide-btn,
.interest-slide-btn {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	background-color: #ffffff;
	box-shadow: 1px 1px 8px 0px rgba(99,99,99, 0.2);
	border: none;
	padding: 7px 7px;
	cursor: pointer;
	border-radius: 50%;
	color: #000;
	width: 25px;
    height: 25px;
	display: flex;
	justify-content: center;
    align-items: center;
}

.recentlyViewed-prev-btn,
.interest-prev-btn {
	left: -25px;
}

.recentlyViewed-next-btn,
.interest-next-btn {
	right: -25px;
}

.recentlyViewed-tab-panel,
.interest-tab-panel {
	display: none;
}
	
.recentlyViewed-tab-panel.is-active
.interest-tab-panel.is-active {
	display: block;
}

.advisor {
	font-size: 20px;
}

.advisor h3 {
	margin-bottom: 10px;
}

.advisor ul li:first-child {
	border-top: 1px solid #E6E6E6;
}

.advisor ul li {
	display: flex;
	border-bottom: 1px solid #E6E6E6;
	padding: 14px 5px;
	align-items: center;
	gap: 18px;
}

.advisor ul li .advisor_info .advisor_name {
	font-weight: 700;
	font-size: 16px;
}

.advisor ul li .advisor_info span {
	color: #7E7E7E;
	font-size: 14px;
}

/***************************************************************** footer */
.footer {
	background: #333;
	color: #fff;
	text-align: left;
	padding: 40px 0;
}

.footerInner {
	width: 1350px;
	margin: 0 auto;
}

.footerInner p {
	color: #D4D4D4;
}

.flogo {
	margin-bottom: 15px;
	color: #fff !important;
}

.totop,
.kakao_btn {
	position: fixed;
	top: initial;
	bottom: 13rem;
	right: 0.5rem;
	z-index: 5;
}


.totop,
.telgram {
	position: fixed;
	top: initial;
	bottom: 8rem;
	right: 0.5rem;
	z-index: 5;
}


.telgram {
	border-radius: 100%;
	background-color: #fff;
    border: 1px solid #86888B;
    box-shadow: 4px 6px 7px 0px rgba(8, 1, 3, 0.1);
    width: 4rem;
    height: 4rem;
}

.totop,
.onlinecouncel {
	position: fixed;
	top: initial;
	bottom: 18rem;
	right: 0.5rem;
	z-index: 5;
}

.onlinecouncel {
	border-radius: 100%;
	background-color: #fff;
	border: 1px solid #86888B;
	box-shadow: 4px 6px 7px 0px rgba(8, 1, 3, 0.1);
	width: 4rem;
	height: 4rem;
	align-items: center;
	font-size: 0.8rem;
	font-weight: 600;
	color: #333;
	text-align: center;
	line-height: 1.2;
	padding: 0.2rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.onlinecouncel:hover{
	cursor:pointer;
}

.totop {
    display: flex;
    align-items: center;
	justify-content: flex-start;
    flex-direction: column;
    gap: 0.5rem;
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    overflow: hidden;
    box-shadow: 4px 6px 7px 0px rgba(8, 1, 3, 0.1);
    background-color: #007DC4;
    transition: all 0.5s;
    position: fixed;
    top: initial;
    bottom: 3rem;
    right: 0.5rem;
    z-index: 5;
}

.kakao_btn {
	background-color: #fff;
	border: 1px solid #86888B;
	box-shadow: 4px 6px 7px 0px rgba(8, 1, 3, 0.1);
	border-radius: 50%;
	width: 4rem;
    height: 4rem;
}

.totop img {
    transform: translateY(100%);
}

.totop .totop-text {
    display: block;
    color: #fff;
    text-transform: uppercase;
    padding-top : 0.5rem;
}

.modal-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.5);
	z-index: 1000;
}

.modal {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 400px;
	background: white;
	border-radius: 8px;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
	z-index: 1001;
	padding: 20px;
}

.modal-header {
	font-size: 20px;
	margin-bottom: 10px;
}

.modal-content {
	font-size: 16px;
	margin-bottom: 20px;
}

.modal-footer {
	text-align: right;
}

.modal-footer button {
	padding: 10px 20px;
	border: none;
	border-radius: 4px;
	cursor: pointer;
}

.modal-footer .close-btn {
	background-color: #f44336;
	color: white;
}

.modal-footer .close-btn:hover {
	background-color: #d32f2f;
}



/* 데스크톱 스타일 */
@media (min-width: 1399px) {
	.contInner {
		display: flex;
		flex-direction: row;
		width: 1400px;
		margin: 0 auto;
		gap: 16px;
	}

	.left-content {
		order: 1;
	}

	.center-content {
		order: 2;
	}

	.right-content {
		order: 3;
	}
}

@media (max-width: 1400px) {
	.header {
		width: 100%;
		padding: 0 15px;
		margin: 20px 0;
		height: 60px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		/*border-bottom: 1px solid #E6E6E6;*/
	}

	.login {
		display: none;
	}

	.contInner {
		width: 100%;
		padding: 0 15px;
	}

	.center-content {
		min-width: 100%;
	}

	.main-container {
		margin: 0;
	}

	.SellBuyBtn {
		width: 100%;
		padding-top: 20px;
	}

	.SellBuyBtn ul {
		display: flex;
		gap: 10px;
		justify-content: space-between;
	}

	.counsel_form {
		background: url(../images/common/counsel_bg.png) no-repeat center / cover;
		margin-top: 10px;
	}

	.topmenu {
		display: none;
	}

	.topHeader .wrap-header-top-right {
		display: none;
	}

	.topHeader {
		width: 100%;
		margin: 0;
		padding: 0;
		height: 60px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
	}

	.topHeader .logo {
		padding: 0;
		flex-shrink: 0;
	}

	.header .m_open_btn  {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		margin-left: auto;
		flex-shrink: 0;
	}

	.header .m_open_btn button {
	        background: url(../images/common/ham_bt_b.png) no-repeat center;
	        border: 0;
	        width: 40px;
	        height: 40px;
	        min-width: 40px;
			display: inline-flex;
			align-items: center;
			justify-content: center;
			padding: 0;
	}

	.header  .logo img {
		width: 70%;
	}

	.header .nav.mobile {
        display: block;
        position: fixed;
        top: 0;
        right: 0;
        box-sizing: border-box;
        z-index: 998;
        background-color: #fff;
        height: 100%;
    }

	.header .nav.mobile .closeBtn {
        display: block;
        transition: .2s;
        background: url(../images/common/m_menu_close_b.svg) no-repeat center;
        min-width: 40px;
        height: 40px;
        cursor: pointer;
        position: absolute;
        right: 15px;
        top: 15px;
        border: none;
        z-index: 999;
    }

	.header .nav.mobile .menu {
		position: relative;
		padding: 20px 30px 60px;
		z-index: 11;
		overflow-y: scroll;
        height: 67vh;
	}

	.header .nav.mobile>.menu>li {
		padding: 8px 0;
		width: 100%;
	}

	.header .nav.mobile>.menu>li>.sub_on {
		padding: 10px 0;
		position: relative;
		display: block;
	}

	.header .nav.mobile>.menu>li>.sub_on::after {
		content: "";
        display: block;
        width: 10px;
        height: 10px;
        border-left: 2px solid #666;
        border-bottom: 2px solid #666;
        transform: rotate(-45deg);
        position: absolute;
        top: 13px;
        right: 15px;
        transition: all 0.5s;
	}

	.header .nav.mobile .menu li .submenu {
		display: none;
		background-color: #eee;
		padding: 15px;
	}

	.header .nav.mobile .menu li .submenu li {
		padding: 7px 0;
	}

	.header .nav.mobile .menu li .submenu li:hover a {
		color: #007DC4;
	}

	.header .nav.mobile .menu li .submenu li a {
		font-size: 14px;
		color: #636363;
	}

	.header .nav.mobile .wrap-header-top-right {
		padding: 70px 30px 10px;
	}

	.header .nav.mobile .wrap-header-top-right .header-top-right ul {
		display: flex;
		align-items: center;
		gap: 0.6rem;
	}

	.header .nav.mobile .wrap-header-top-right .header-top-right ul li {
		display: grid;
		place-items: center;
	}

	.header .nav.mobile .wrap-header-top-right .header-top-right ul li a {
		display: inline-block;
		width: 1.9rem;
		height: 1.9rem;
	}

	.header .nav.mobile .wrap-header-top-right .header-top-right ul li:nth-child(1) a {
		background: url(../images/common/utill_blog.svg) center no-repeat;
		background-size: contain;
	}

	.header .nav.mobile  .wrap-header-top-right .header-top-right ul li:nth-child(2) a {
		background: url(../images/common/utill_facebook.svg) center no-repeat;
		background-size: contain;
	}
 

	.header .nav.mobile  .wrap-header-top-right .header-top-right ul li:nth-child(3) a {
		background: url(../images/common/utill_telegram.svg) center no-repeat;
		background-size: contain;
	}

	.header .nav.mobile .wrap-header-top-right .header-langs .langs-content {
		display: flex;
		gap: 10px;
	}

	.header .nav.mobile .wrap-header-top-right .header-langs .langs-content .korea {
		background: url(../images/common/lang_ko.svg) center no-repeat;
		width: 50px;
		height: 30px;
		display: block;
	}

	.header .nav.mobile .wrap-header-top-right .header-langs .langs-content .en {
		background: url(../images/common/lang_en.svg) center no-repeat;
		width: 50px;
		height: 30px;
		display: block;
	}

	.header .nav.mobile .top_utilwrap .utill {
		margin-top: 20px;
	}

	.header .nav.mobile .top_utilwrap .utill li a {
		background-color: #fff;
		border: 1px solid #007DC4;
		padding: 10px 0;
		text-align: center;
		border-radius: 50px;
		cursor: pointer;
		display: block;
		color: #007DC4;
	}

	.header .nav.mobile .top_utilwrap .utill li:first-child a {
		background-color: #007DC4;
		color: #fff;
	}

	.header .nav.mobile .top_utilwrap .utill li:first-child  {
		margin-bottom: 10px;
	}

	.footerInner {
		width: 100%;
		padding: 0 15px;
		font-size: 13px;
	}

}

@media (max-width: 768px) {
	.main-container {
		flex-direction: column;
	}

	.left-content,
	.right-content,
	.center-content {
		flex: 1;
		margin-bottom: 20px;
	}

	.menu-toggle {
		display: block;
		background: transparent;
		border: none;
		font-size: 1.5rem;
		color: white;
		cursor: pointer;
	}

	.navbar .menu {
		display: none;
		flex-direction: column;
		background: #0056b3;
		position: absolute;
		top: 50px;
		right: 0;
		width: 200px;
		padding: 10px;
	}

	.menu.show {
		display: flex;
	}

	.SellBuyBtn ul {
		flex-wrap: wrap;
	}

	.SellBuyBtn ul li {
		width: 48%;
	}

	.counsel_form h3 {
		font-size: 20px;
	}

	.Sellside-Buyside-boards .boards-tabs ul li button,
	.cont_top_tit h2 {
		font-size: 20px !important;
	}

	.Sellside-Buyside-boards .boards-tabs ul {
		gap: 20px !important;
	}

	.Sellside-Buyside-boards .board-content-new,
	.Sellside-Buyside-boards .boards-contents {
		padding: 1rem !important;
	}

	.news-tabs-container .tabs, .column-tabs-container .tabs {
		display: flex;
		gap: 0 20px !important;
		flex-wrap: wrap;
	}

	.news-tabs-container .tab, .column-tabs-container .tab {
		font-size: 16px !important;
	}

	.youtube-cont-video {
		flex-wrap: wrap;
		gap: 10px 0;
	}

	.youtube-cont-video li {
		width: 47%;
	}

	.advisor h3 {
		font-size: 18px;
	} 

	.advisor ul li .advisor_info .advisor_name {
		font-size: 14px;
	}
	
}

@media (max-width: 600px) {
	.frequently-visited ul {
		flex-wrap: wrap;
		gap: 10px 0;
	}

	.frequently-visited ul li {
		width: 33.3333%;
	}

	.news-tabs-container, .column-tabs-container {
		border-bottom: 0 !important;
	}

	.link-board-more, .link-column-more {
		width: 24px !important;
	}

	.header .nav.mobile {
		width: 100%;
	}

	.footerInner {
		text-align: center;
		display: block;
	}

	.footerInner>img {
		margin-top: 20px;
		width: 20%;
	}
}

@media (max-width: 500px) {
	.SellBuyBtn ul li {
		width: 100%;
		margin-bottom: 0;
	}

	.monthly-slide-item img {
		width: 150px !important;
	}

	.advisor ul li img {
		width: 15%;
	}

}

.table-modify-btn {
	background-color: #007DC4;
	border: 1px solid #007DC4;
	color: #fff;
	padding: 8px 15px;
	border-radius: 3px;
  }
/* ----------------------------------- */
/* ----------------------------------- */
/* ----------------------------------- */
/* 25년도 CSS */
/* ----------------------------------- */
/* ----------------------------------- */
/* ----------------------------------- */
.popup-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.5);
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 9999;
}

.popup-content {
	background: #ffffff;
	border-radius: 8px;
	overflow: hidden;
	width: 90%;
	max-width: 320px;
	text-align: center;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

/* 카카오톡 슬라이드 */
.kakao-slide {
	background: linear-gradient(135deg, #FEE500 0%, #FFEB3B 100%);
	padding: 40px 20px;
	position: relative;
	min-height: 280px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.kakao-slide::before {
	content: '';
	position: absolute;
	top: 20px;
	right: 20px;
	width: 40px;
	height: 40px;
	background: rgba(0, 0, 0, 0.1);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.kakao-slide::after {
	content: '💬';
	position: absolute;
	top: 30px;
	right: 30px;
	font-size: 20px;
}

.kakao-icon {
	width: 80px;
	height: 80px;
	background: #3C1E1E;
	border-radius: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 20px;
	position: relative;
}

.kakao-icon::before {
	content: '';
	width: 35px;
	height: 35px;
	background: #FEE500;
	border-radius: 50%;
	position: relative;
}

.kakao-icon::after {
	content: '😊';
	position: absolute;
	font-size: 20px;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

/* 텔레그램 슬라이드 */
.telegram-slide {
	background: linear-gradient(135deg, #0088CC 0%, #229ED9 100%);
	padding: 40px 20px;
	position: relative;
	min-height: 280px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	color: white;
}

.telegram-slide::before {
	content: '';
	position: absolute;
	top: 20px;
	right: 20px;
	width: 40px;
	height: 40px;
	background: rgba(255, 255, 255, 0.2);
	border-radius: 50%;
}

.telegram-slide::after {
	content: '✈️';
	position: absolute;
	top: 30px;
	right: 30px;
	font-size: 20px;
}

.telegram-icon {
	width: 80px;
	height: 80px;
	background: white;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 20px;
	position: relative;
}

.telegram-icon::before {
	content: '';
	width: 0;
	height: 0;
	border-left: 15px solid #0088CC;
	border-top: 8px solid transparent;
	border-bottom: 8px solid transparent;
	transform: rotate(-10deg);
}

/* 채팅 버블 효과 */
.chat-bubble {
	/*position: absolute;*/
	/*bottom: 10px;*/
	/*right: 10px;*/
	background: rgba(255, 255, 255, 0.9);
	padding: 8px 12px;
	border-radius: 15px;
	font-size: 12px;
	color: #333;
	animation: bounce 2s infinite;
}

.popup-info{
	padding-bottom : 16px;
}

.kakao-slide .chat-bubble {
	background: rgba(60, 30, 30, 0.9);
	color: #FEE500;
}

.telegram-slide .chat-bubble {
	background: rgba(255, 255, 255, 0.9);
	color: #0088CC;
}

@keyframes bounce {
	0%, 20%, 50%, 80%, 100% {
		transform: translateY(0);
	}
	40% {
		transform: translateY(-5px);
	}
	60% {
		transform: translateY(-3px);
	}
}

.popup-slider {
	position: relative;
	overflow: hidden;
}

.popup-slides {
	display: flex;
	transition: transform 0.3s ease;
}

.popup-slides a {
	min-width: 100%;
	display: block;
}

.popup-slides img {
	width: 100%;
	height: 280px;
	object-fit: cover;
	display: block;
}

.popup-prev, .popup-next {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 36px;
	height: 36px;
	font-size: 18px;
	/*background: rgba(255, 255, 255, 0.9);*/
	border-radius: 4px;
	color: #666;
	cursor: pointer;
	z-index: 2;
	transition: all 0.2s ease;
	display: flex;
	align-items: center;
	justify-content: center;
}

.popup-prev:hover, .popup-next:hover {
	background: #4A90E2;
	color: white;
	border-color: #4A90E2;
}

.popup-prev {
	left: 12px;
}

.popup-next {
	right: 12px;
}

.popup-close-wrap{
	width:100%;
	padding: 14px;

}

.popup-close {
	width:100%;
	background: #007DC4;
	padding: 12px;
	color: #ffffff;
	border: none;
	border-radius: 4px;
	font-size: 14px;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.popup-close:hover {
	background: #357ABD;
}

.popup-today-hide {
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 16px 14px;
	font-size: 13px;
	color: #666;
	cursor: pointer;
}

.popup-today-hide input[type="checkbox"] {
	margin-right: 6px;
	width: 16px;
	height: 16px;
}

.popup-indicators {
	position: absolute;
	bottom: 12px;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	gap: 6px;
	z-index: 2;
}

.popup-indicator {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.6);
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.popup-indicator.active {
	background: rgba(255, 255, 255, 1);
}

@media (max-width: 480px) {
	.popup-content {
		width: 95%;
		margin: 20px;
	}

	.popup-prev, .popup-next {
		width: 32px;
		height: 32px;
		font-size: 16px;
	}

	.popup-slides img {
		height: 240px;
	}

	/* 공통 */
	.totop,
	.telgram,
	.kakao_btn,
	.chat-floating-btn {
		position: fixed;
		top: auto;
		right: 12px !important;
		width: 40px !important;
		height: 40px !important;
	}

	.totop {
		bottom: calc(env(safe-area-inset-bottom, 0px) + 16px);
		justify-content: center;
		gap: 0;
	}

	.totop img {
		transform: none !important;
		width: 14px;
		height: 14px;
	}

	.totop .totop-text {
		display: none;
	}

	.telgram {
		bottom: calc(env(safe-area-inset-bottom, 0px) + 64px);
	}

	.kakao_btn {
		bottom: calc(env(safe-area-inset-bottom, 0px) + 112px);
		border:none!important;
	}

	.chat-floating-btn {
		bottom: calc(env(safe-area-inset-bottom, 0px) + 160px);
		z-index: 997 !important;
	}
}

@media (min-width: 768px) {
	.popup-overlay {
		display: none !important;
	}
}

/* ----------------------------------- */
/* M&A 정보 슬라이드 (신규) */
/* ----------------------------------- */
.mna-slide {
	background: linear-gradient(135deg, #007DC4 0%, #007DC4 100%); /* 신뢰의 딥블루 */
	padding: 40px 20px;
	position: relative;
	min-height: 280px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	color: white;
}

.mna-slide::before {
	content: '';
	position: absolute;
	top: 20px;
	right: 20px;
	width: 40px;
	height: 40px;
	background: rgba(255, 255, 255, 0.15);
	border-radius: 50%;
}

.mna-slide::after {
	content: '📈'; /* 성장 지표 아이콘 */
	position: absolute;
	top: 30px;
	right: 30px;
	font-size: 20px;
}

.mna-icon {
	width: 80px;
	height: 80px;
	background: #ffffff;
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 20px;
	position: relative;
	box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

.mna-graphic {
	width: 40px;
	height: 40px;
	display: flex;
	align-items: flex-end;
	gap: 4px;
}

/* 막대 그래프 아이콘 형상화 */
.mna-graphic::before {
	content: '';
	width: 8px; height: 15px; background: #2a5298; border-radius: 2px;
}
.mna-graphic::after {
	content: '';
	width: 8px; height: 30px; background: #007DC4; border-radius: 2px;
	box-shadow: 12px 0 0 #1e3c72; /* 세 번째 막대 */
}

.mna-slide .chat-bubble {
	background: #ffffff;
	color: #555;
	border: 1px solid rgba(255,255,255,0.3);
}

/* 슬라이드가 3개가 되었으므로 화살표 간격 및 인디케이터 중앙 정렬 유지 확인 */
/*모바일 전용 팝업 END*/

.footer-modal-backdrop {
	opacity: 0;
	transition: opacity 0.3s ease;
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background-color: rgba(0, 0, 0, 0.4);
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 9999;
}

.footer-modal-backdrop.show {
	opacity: 1;
}

/* Modal animation effect */
.footer-modal-container {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100%;
}

.footer-modal {
	opacity: 0;
	transform: scale(0.8);
	transition: transform 0.4s ease, opacity 0.4s ease;
	background: #fff;
	max-width: 400px;
	width: 100%;
	padding: 40px 20px;
	border-radius: 8px;
	position: relative;
}

.footer-modal-animate {
	opacity: 1;
	transform: scale(1);
}

.footer-modal-close {
	position: absolute;
	top: 12px;
	right: 16px;
	font-size: 24px;
	font-weight: bold;
	cursor: pointer;
}

.teaser-overlay {
	position: absolute;
	top: 0; left: 0; right: 0; bottom: 0;
	background: rgba(255, 255, 255, 0.7);
	backdrop-filter: blur(2px);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	z-index: 5;
	text-align: center;
	border-radius: 8px;
}


.teaser-title {
	font-size: 16px;
	font-weight: 500;
	color: #222;
	margin-bottom: 6px;
}

.teaser-sub {
	font-size: 14px;
	color: #777;
	margin-bottom: 20px;
	line-height: 1.5;
}

.teaser-btn {
	display: inline-block;
	width: 100%;
	max-width: 300px;
	background-color: #007DC4;
	color: #fff;
	padding: 9px 0;
	font-size: 14px;
	font-weight: bold;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	text-decoration: none;
	transition: background 0.3s;
}

.teaser-btn:hover {
	background-color: #005c99;
}

/* 개선된 버튼 디자인 */
.sample-button {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background: linear-gradient(135deg, #007DC4 0%, #005c99 100%);
	color: white;
	padding: 15px 30px;
	border: none;
	border-radius: 50px;
	font-size: 1.1em;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	transition: all 0.3s ease;
	box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
	position: relative;
	overflow: hidden;
}

.sample-button:hover {
	transform: translateY(-2px);
}

.sample-button:active {
	transform: translateY(0);
}

.sample-button::before {
	content: '';
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
	transition: left 0.5s;
}

.sample-button:hover::before {
	left: 100%;
}

.sample-button-container {
	text-align: center;
	margin: 46px 0;
}

.arrow-icon {
	font-size: 1.2em;
	transition: transform 0.3s ease;
}

.sample-button:hover .arrow-icon {
	transform: translateX(5px);
}

.sample-modal {
	display: none;
	position: fixed;
	top: 0; left: 0; right: 0; bottom: 0;
	background: rgba(0, 0, 0, 0.6);
	z-index: 9999;
	align-items: center;
	justify-content: center;
}

.sample-modal.show {
	display: flex;
}


/*------------------------------------------*/
/*------------------------------------------*/
/*------------------------------------------*/
/*-- 새로운 관리자 채팅 디자인 */
/*------------------------------------------*/
/*------------------------------------------*/
/*------------------------------------------*/

/* 데모 페이지 스타일 */
.demo-container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 2rem;
}

.demo-header {
	text-align: center;
	margin-bottom: 3rem;
}

.demo-header h1 {
	font-size: 2rem;
	font-weight: 700;
	color: #1a1a1a;
	margin-bottom: 1rem;
}

.demo-header p {
	font-size: 1.1rem;
	color: #6b7280;
	margin-bottom: 2rem;
}

.demo-content {
	background: white;
	padding: 2rem;
	border-radius: 12px;
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.demo-content h2 {
	font-size: 1.25rem;
	font-weight: 600;
	margin-bottom: 1rem;
	color: #1a1a1a;
}

.demo-content ul {
	list-style: none;
	color: #6b7280;
}

.demo-content li {
	margin-bottom: 0.5rem;
	position: relative;
	padding-left: 1rem;
}

.demo-content li::before {
	content: "•";
	color: #059669;
	font-weight: bold;
	position: absolute;
	left: 0;
}

/* 채팅 위젯 스타일 */
.chat-widget {
	/*position: fixed;*/
	/*bottom: 24px;*/
	/*right: 24px;*/
	/*opacity: 0;*/

	z-index: 1000;
	transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.chat-floating-btn {
	position: fixed;
	bottom: 290px;
	right: 14px;
	z-index: 997!important;

	width: 56px;
	height: 56px;
	background: #030213;
	color: white;
	border: none;
	border-radius: 50%;
	cursor: pointer;
	box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.3s ease;
}

.chat-floating-btn:hover {
	transform: scale(1.1);
	box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
}

.chat-floating-btn:active {
	transform: scale(0.95);
}

.chat-floating-btn svg {
	width: 24px;
	height: 24px;
}

.chat-card {
	position: fixed;
	bottom: 24px;
	right: 24px;
	z-index: 1000;

	width: 320px;
	height: 420px;
	background: white;
	border-radius: 12px;
	box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
	display: none;
	flex-direction: column;
	transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
	overflow: hidden;
}

.chat-card.visible {
	display: flex;
}

.chat-card.minimized {
	height: 56px;
}

.chat-card.admin-mode {
	position: fixed;
	top: 16px;
	left: 16px;
	right: 16px;
	/*bottom: 16px;*/
	width: auto;
	height: auto;
}

/* 팝업 등장 애니메이션 */
.chat-card.animate-in {
	animation: popupSlideIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.chat-card.animate-out {
	animation: popupSlideOut 0.3s ease-in-out forwards;
}

@keyframes popupSlideIn {
	0% {
		opacity: 0;
		transform: translateY(30px) scale(0.8);
	}
	50% {
		opacity: 1;
		transform: translateY(-10px) scale(1.05);
	}
	100% {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

@keyframes popupSlideOut {
	0% {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
	100% {
		opacity: 0;
		transform: translateY(20px) scale(0.9);
	}
}

/* 관리자 모드 전환 애니메이션 */
.admin-mode-content.slide-in {
	animation: slideInFromRight 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.user-mode-content.slide-in {
	animation: slideInFromLeft 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

@keyframes slideInFromRight {
	0% {
		opacity: 0;
		transform: translateX(40px);
	}
	100% {
		opacity: 1;
		transform: translateX(0);
	}
}

@keyframes slideInFromLeft {
	0% {
		opacity: 0;
		transform: translateX(-40px);
	}
	100% {
		opacity: 1;
		transform: translateX(0);
	}
}

/* 관리자 모드 크기 변화 애니메이션 */
.chat-widget.expanding {
	animation: expandToFullscreen 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.chat-widget.contracting {
	animation: contractToWidget 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

@keyframes expandToFullscreen {
	0% {
		top: auto;
		left: auto;
		right: 24px;
		bottom: 24px;
	}
	100% {
		top: 16px;
		left: 16px;
		right: 16px;
		bottom: 16px;
	}
}

@keyframes contractToWidget {
	0% {
		top: 16px;
		left: 16px;
		right: 16px;
		bottom: 16px;
	}
	100% {
		top: auto;
		left: auto;
		right: 24px;
		bottom: 24px;
	}
}

/* 헤더 */
.chat-header {
	/*background: linear-gradient(135deg, #030213 0%, #1a1a2e 100%);*/
	background: #007DC4;
	color: white;
	padding: 16px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-radius: 12px 12px 0 0;
	box-shadow: 0 2px 10px rgba(3, 2, 19, 0.1);
}

.chat-title {
	font-size: 14px;
	font-weight: 500;
	margin: 0;
}

.chat-controls {
	display: flex;
	gap: 8px;
}

.control-btn {
	width: 24px;
	height: 24px;
	background: transparent;
	border: none;
	color: white;
	cursor: pointer;
	border-radius: 4px;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.3s ease;
	position: relative;
}

.control-btn:hover {
	background: rgba(255, 255, 255, 0.2);
	transform: scale(1.2);
}

.control-btn:active {
	transform: scale(0.9);
}

.control-btn svg {
	width: 16px;
	height: 16px;
}

/* 사용자 모드 콘텐츠 */
.user-mode-content {
	display: flex;
	flex-direction: column;
	height: 370px;
}

.user-mode-content.hidden {
	display: none;
}

.messages-area {
	flex: 1;
	padding: 16px;
	overflow-y: auto;
	background: linear-gradient(to bottom, #fafafa 0%, #f5f5f5 100%);
}

.messages-area::-webkit-scrollbar {
	width: 4px;
}

.messages-area::-webkit-scrollbar-track {
	background: transparent;
}

.messages-area::-webkit-scrollbar-thumb {
	background: #d1d5db;
	border-radius: 2px;
}

.message {
	display: flex;
	gap: 8px;
	margin-bottom: 16px;
	align-items: flex-start;
}

.message.user {
	flex-direction: row-reverse;
}

.message.new-message {
	animation: messageSlideIn 0.4s ease-out;
}

@keyframes messageSlideIn {
	0% {
		opacity: 0;
		transform: translateY(15px) scale(0.95);
	}
	100% {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

.message-avatar {
	width: 32px;
	height: 32px;
	background: linear-gradient(135deg, #e5e7eb, #d1d5db);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	font-weight: 500;
	color: #374151;
	flex-shrink: 0;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.message-content {
	max-width: 200px;
	background: white;
	padding: 12px;
	border-radius: 18px;
	position: relative;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
	border: 1px solid #e5e7eb;
	transition: all 0.2s ease;
}

.message-content:hover {
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.message.user .message-content {
	background: linear-gradient(135deg, #030213, #1a1a2e);
	color: white;
	margin-left: auto;
	border: none;
}

.message-text {
	font-size: 14px;
	line-height: 1.4;
	margin: 0;
	color:black;
	overflow: hidden;
	text-overflow: ellipsis;
}

.message.user .message-text{
	color:#fff;
}

.message-time {
	color:#333;
	font-size: 11px;
	opacity: 0.7;
	margin-top: 4px;
	margin-bottom: 0;
}

.message.user .message-time{
	color:#fff;
}

.message-file {
	background: #f3f4f6;
	border: 1px solid #e5e7eb;
	border-radius: 8px;
	padding: 8px;
	margin-top: 8px;
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 12px;
	transition: all 0.2s ease;
}

.message-file:hover {
	background: #e5e7eb;
}

.message-file svg {
	width: 16px;
	height: 16px;
	color: #6b7280;
}

/* 타이핑 인디케이터 */
.typing-indicator {
	display: flex;
	gap: 8px;
	margin-bottom: 16px;
	align-items: flex-start;
}

.typing-indicator.hidden {
	display: none;
}

.typing-content {
	background: white;
	padding: 12px 16px;
	border-radius: 18px;
	display: flex;
	align-items: center;
	gap: 4px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
	border: 1px solid #e5e7eb;
}

.typing-dots {
	display: flex;
	gap: 3px;
}

.typing-dot {
	width: 6px;
	height: 6px;
	background: #6b7280;
	border-radius: 50%;
	animation: typingPulse 1.4s infinite;
}

.typing-dot:nth-child(2) {
	animation-delay: 0.2s;
}

.typing-dot:nth-child(3) {
	animation-delay: 0.4s;
}

@keyframes typingPulse {
	0%, 60%, 100% {
		transform: scale(1);
		opacity: 0.5;
	}
	30% {
		transform: scale(1.3);
		opacity: 1;
	}
}

/* 입력 영역 */
.input-area {
	padding: 12px;
	border-top: 1px solid #e5e7eb;
	background: white;
	display: flex;
	gap: 8px;
	align-items: center;
}

.input-group {
	flex: 1;
	position: relative;
}

.message-input {
	width: 100%;
	padding: 10px 12px;
	border: 2px solid #e5e7eb;
	border-radius: 20px;
	font-size: 14px;
	resize: none;
	outline: none;
	font-family: inherit;
	background: #f9fafb;
	min-height: 36px;
	max-height: 72px;
	transition: all 0.3s ease;
	height:100%!important;
	overflow-y: auto;!important;
}

.message-input:focus {
	border-color: #030213;
	background: white;
	box-shadow: 0 0 0 3px rgba(3, 2, 19, 0.1);
}

.attachment-btn {
	background: transparent;
	border: none;
	padding: 8px;
	cursor: pointer;
	border-radius: 20px;
	color: #6b7280;
	transition: all 0.3s ease;
	display: flex;
	align-items: center;
	justify-content: center;
}

.attachment-btn:hover {
	background: #f3f4f6;
	color: #374151;
	transform: translateY(-2px);
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.attachment-btn svg {
	width: 18px;
	height: 18px;
}

.send-btn {
	/*background: linear-gradient(135deg, #030213, #1a1a2e);*/
	background: #007DC4;
	color: white;
	border: none;
	padding: 10px;
	border-radius: 20px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.3s ease;
	box-shadow: 0 2px 8px rgba(3, 2, 19, 0.2);
}

.send-btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 16px rgba(3, 2, 19, 0.3);
}

.send-btn:active {
	transform: translateY(0);
}

.send-btn:disabled {
	background: #d1d5db;
	cursor: not-allowed;
	transform: none;
	box-shadow: none;
}

.send-btn svg {
	width: 16px;
	height: 16px;
}

.file-input {
	display: none;
}

/* 관리자 모드 */
.admin-mode-content {
	display: none;
	height: calc(100vh - 120px);
}

.admin-mode-content.visible {
	display: flex;
}

.admin-sidebar {
	width: 320px;
	border-right: 1px solid #e5e7eb;
	background: white;
	display: flex;
	flex-direction: column;
}

.admin-sidebar-header {
	padding: 16px;
	border-bottom: 1px solid #e5e7eb;
	background: linear-gradient(135deg, #f8f9fa, #f1f3f4);
}

.admin-sidebar-header h3 {
	font-size: 16px;
	font-weight: 600;
	margin-bottom: 16px;
	color: #1f2937;
}

.search-input {
	width: 100%;
	padding: 10px 12px 10px 36px;
	border: 2px solid #e5e7eb;
	border-radius: 20px;
	font-size: 14px;
	background: white;
	outline: none;
	transition: all 0.3s ease;
}

.search-input:focus {
	border-color: #030213;
	box-shadow: 0 0 0 3px rgba(3, 2, 19, 0.1);
}

.search-container {
	position: relative;
}

.search-icon {
	position: absolute;
	left: 12px;
	top: 50%;
	transform: translateY(-50%);
	width: 16px;
	height: 16px;
	color: #6b7280;
}

.chat-rooms-list {
	flex: 1;
	overflow-y: auto;
	padding: 8px;
}

.chat-room-card {
	background: white;
	border: 1px solid #e5e7eb;
	border-radius: 12px;
	padding: 12px;
	margin-bottom: 8px;
	cursor: pointer;
	transition: all 0.3s ease;
}

.chat-room-card:hover {
	background: #f9fafb;
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.chat-room-card.active {
	background: linear-gradient(135deg, #f3f4f6, #e5e7eb);
	border-color: #030213;
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(3, 2, 19, 0.1);
}

.room-header {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	margin-bottom: 8px;
}

.room-info {
	display: flex;
	gap: 8px;
	align-items: center;
}

.room-avatar {
	width: 32px;
	height: 32px;
	background: linear-gradient(135deg, #e5e7eb, #d1d5db);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	font-weight: 500;
	color: #374151;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.room-details h4 {
	font-size: 14px;
	font-weight: 500;
	margin: 0 0 2px 0;
	color: #1f2937;
}

.room-time {
	font-size: 11px;
	color: #6b7280;
	display: flex;
	align-items: center;
	gap: 2px;
}

.room-status {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 4px;
}

.status-icon {
	width: 16px;
	height: 16px;
}

.status-icon.waiting { color: #f59e0b; }
.status-icon.active { color: #10b981; }
.status-icon.closed { color: #6b7280; }

.unread-badge {
	background: linear-gradient(135deg, #dc2626, #b91c1c);
	color: white;
	font-size: 10px;
	padding: 2px 6px;
	border-radius: 10px;
	min-width: 16px;
	text-align: center;
	box-shadow: 0 2px 4px rgba(220, 38, 38, 0.3);
	animation: pulse 2s infinite;
}

.room-last-message {
	font-size: 12px;
	color: #6b7280;
	line-height: 1.3;
	margin-bottom: 8px;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.status-badge {
	font-size: 10px;
	padding: 3px 8px;
	border-radius: 12px;
	font-weight: 500;
	transition: all 0.2s ease;
}

.status-badge.waiting {
	background: linear-gradient(135deg, #fef3c7, #fde68a);
	color: #92400e;
}

.status-badge.active {
	background: linear-gradient(135deg, #d1fae5, #a7f3d0);
	color: #065f46;
}

.status-badge.closed {
	background: linear-gradient(135deg, #f3f4f6, #e5e7eb);
	color: #374151;
}

/* 관리자 채팅 영역 */
.admin-chat-area {
	flex: 1;
	display: flex;
	flex-direction: column;
	background: linear-gradient(to bottom, #fafafa, #f5f5f5);
}

.admin-chat-header {
	padding: 16px;
	border-bottom: 1px solid #e5e7eb;
	background: white;
	display: flex;
	justify-content: space-between;
	align-items: center;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.admin-chat-user {
	display: flex;
	gap: 12px;
	align-items: center;
}

.admin-chat-user h4 {
	font-size: 16px;
	font-weight: 500;
	margin: 0 0 2px 0;
	color: #1f2937;
}

.admin-chat-user p {
	font-size: 12px;
	color: #6b7280;
	margin: 0;
	display: flex;
	align-items: center;
	gap: 4px;
}

.no-chat-selected {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #6b7280;
	text-align: center;
}

.no-chat-selected svg {
	width: 48px;
	height: 48px;
	opacity: 0.5;
	margin-bottom: 16px;
}

.selected-chat-room {
	flex: 1;
	display: none;
	flex-direction: column;
}

.selected-chat-room.visible {
	display: flex;
	animation: slideInFromLeft 0.4s ease-out;
	height:100%;
}

.admin-messages-area {
	flex: 1;
	padding: 16px;
	overflow-y: auto;
}

.admin-message {
	display: flex;
	gap: 8px;
	margin-bottom: 16px;
	align-items: flex-start;
}

.admin-message.admin {
	flex-direction: row-reverse;
}

.admin-message.new-message {
	animation: messageSlideIn 0.4s ease-out;
}

.admin-message-content {
	max-width: 70%;
	background: white;
	padding: 12px;
	border-radius: 18px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
	border: 1px solid #e5e7eb;
	transition: all 0.2s ease;
}

.admin-message-content:hover {
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.admin-message.admin .admin-message-content {
	background: linear-gradient(135deg, #030213, #1a1a2e);
	color: white;
	border: none;
}

.admin .message-text,
.admin .message-time {
	color : #fff;
}

.admin-send .message-content.message-text,
.admin-send .message-content.message-time {
	color : #fff;
}


/* 모바일 대응 탭 시스템 */
.mobile-tabs {
	display: none;
	background: white;
	border-bottom: 1px solid #e5e7eb;
	padding: 0;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.mobile-tab {
	flex: 1;
	padding: 12px;
	background: none;
	border: none;
	cursor: pointer;
	font-size: 14px;
	font-weight: 500;
	color: #6b7280;
	transition: all 0.3s ease;
	border-bottom: 3px solid transparent;
	position: relative;
}

.mobile-tab.active {
	color: #030213;
	border-bottom-color: #030213;
	background: linear-gradient(135deg, #f9fafb, #f3f4f6);
}

.mobile-tab:hover {
	background: #f3f4f6;
	transform: translateY(-1px);
}

/* 파일 미리보기 */
.file-preview {
	background: linear-gradient(135deg, #f3f4f6, #e5e7eb);
	border: 1px solid #e5e7eb;
	border-radius: 8px;
	padding: 8px 12px;
	margin: 8px 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 12px;
	transition: all 0.2s ease;
}

.file-preview:hover {
	transform: translateY(-1px);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.file-info {
	display: flex;
	align-items: center;
	gap: 8px;
}

.file-info span{
 	color: black;
}

.remove-file {
	background: none;
	border: none;
	color: #6b7280;
	cursor: pointer;
	padding: 2px;
	border-radius: 4px;
	transition: all 0.2s ease;
}

.remove-file:hover {
	color: #dc2626;
	background: #fef2f2;
	transform: scale(1.1);
}

/* 모바일 대응 */
@media (max-width: 640px) {
	.chat-card.admin-mode {
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		width: 100vw;
		height: 100vh;
		border-radius: 0;
	}

	.admin-mode-content {
		height: calc(100vh - 120px);
		flex-direction: column;
	}

	.mobile-tabs {
		display: flex;
	}

	.admin-sidebar {
		width: 100%;
		border-right: none;
		border-bottom: 1px solid #e5e7eb;
		display: none;
	}

	.admin-sidebar.active {
		display: flex;
		flex: 1;
	}

	.admin-chat-area {
		display: none;
	}

	.admin-chat-area.active {
		display: flex;
		flex: 1;
	}

	.chat-card {
		width: calc(100vw - 32px);
		max-width: 320px;
		right: 16px;
		bottom: 16px;
	}
}

/* 플로팅 버튼 펄스 애니메이션 */
.chat-floating-btn.pulse {
	animation: pulse 2s infinite;
}

@keyframes pulse {
	0% {
		box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15), 0 0 0 0 rgba(3, 2, 19, 0.4);
	}
	70% {
		box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15), 0 0 0 10px rgba(3, 2, 19, 0);
	}
	100% {
		box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15), 0 0 0 0 rgba(3, 2, 19, 0);
	}
}

.hidden {
	display: none !important;
}

.no-data-box {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	border-radius: 10px;
	color: #555;
	text-align: center;
	margin: 20px 0;
	width: 100%;
}

.no-data-text {
	font-size: 14px;
	margin-bottom: 5px;
}

.no-data-subtext {
	font-size: 12px;
	color: #999;
}

/*-----------------------------------*/
/*-----------------------------------*/
/*메인 유튜브*/
/*-----------------------------------*/
/*-----------------------------------*/
.youtube_box {
	width: 100%;
	max-width: 1000px;
	margin: 0 auto;
	padding: 30px 0;
}
.youtube_box_title {
	font-size: 1.5rem;
	font-weight: 600;
	margin-bottom: 20px;
}
.youtube_box_item {
	/*border-radius: 16px;*/
	overflow: hidden;
	/*background: #000;*/
	position: relative;
}

.youtube_box_item img {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	display: block;
}
.youtube_box_iframe_wrap {
	position: relative;
	width: 100%;
	/*padding-top: 56.25%; !* 16:9 비율 *!*/
	padding-top: 80%;
}

.youtube_box_iframe_wrap iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.youtube_box_caption {
	/*padding: 10px;*/
	margin-top: 6px!important;
	/*font-weight: 700!important;*/
	font-size: 16px!important;
	color: #333!important;
	line-height: 1.4!important;
	height: 2.8em!important;
	overflow: hidden!important;
	text-overflow: ellipsis;!important;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.swiper-button-next,
.swiper-button-prev {
	color: #222;
}
.swiper-pagination-bullet-active {
	background: #000;
}

.swiper-slide{
	/*height: 260px!important;*/
	/*width: 226px!important;*/
}
.youtube_box_slider .swiper-slide {
	/*width: calc((100% / 2) - 5px)!important;*/
}
.swiper-wrapper {
	/*right: 0;*/
}

/* 기본 버튼 숨기기 */
.swiper-button-next,
.swiper-button-prev {
	width: 40px!important;
	height: 40px!important;
	background-color: #fff!important;
	border-radius: 50%;
	color: #007DC4!important;
	font-size: 20px;
	display: flex;
	justify-content: center;
	align-items: center;
	top: 50%;
	transform: translateY(-50%);
}

.swiper-button-next:after,
.swiper-button-prev:after{
	font-size : 18px!important;
}

/* 위치 조정 */
.swiper-button-next { right: 10px; }
.swiper-button-prev { left: 10px; }


/*--------------------------------------*/
/*--------------------------------------*/
/*--------------------------------------*/
/*브랜드가 공개된 IM제안서*/

/* ====== FranERP IM Offer styles (unique namespace) ====== */
.franerp-im-wrap {
	box-sizing: border-box;
	margin: 18px 0;
	padding: 16px 0;
	/*border-radius: 12px;*/
	/*background: linear-gradient(180deg, #ffffff 0%, #fbfbff 100%);*/
	/*box-shadow: 0 6px 18px rgba(16,24,40,0.06);*/
	/*border: 1px solid rgba(14, 30, 60, 0.04);*/
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
	color: #0f172a;
}

.franerp-im-header {
	display:flex;
	gap:12px;
	align-items:center;
	margin-bottom:12px;
}
.franerp-im-badge {
	background:#f0f9ff;
	color:#0369a1;
	border-radius:8px;
	padding:6px 10px;
	font-weight:700;
	font-size:13px;
	border:1px solid rgba(3,105,161,0.08);
}
.franerp-im-title {
	font-size:16px;
	font-weight:700;
	line-height:1.2;
}
.franerp-im-desc {
	margin:10px 0 16px;
	font-size:14px;
	color:#334155;
	line-height:1.45;
}

.franerp-im-table {
	width:100%;
	border-collapse:collapse;
	margin-bottom:14px;
}
.franerp-im-table th,
.franerp-im-table td {
	padding:10px 12px;
	/*border:1px solid #eef2f7;*/
	border-bottom: 1px solid #ddd;
	text-align:left;
	font-size:14px;
}
.franerp-im-table th {
	background:#f4f4f4;
	color:#0f172a;
	font-weight:700;
}
.franerp-im-note {
	font-size:13px;
	color:#475569;
	margin-bottom:12px;
}

.franerp-im-accounts {
	display:flex;
	flex-direction:column;
	gap:8px;
	margin-bottom:12px;
}
.franerp-im-account {
	display:flex;
	gap:10px;
	align-items:center;
	justify-content:space-between;
	padding:10px;
	background:#ffffff;
	border:1px solid #eef2f7;
	font-size:14px;
}
.franerp-im-account .acc-info { color:#0f172a; font-weight:600; }
.franerp-im-account .acc-sub { color:#64748b; font-size:13px; }

.franerp-im-actions {
	display:flex;
	gap:8px;
	flex-wrap:wrap;
	margin-top:12px;
}
.franerp-im-btn {
	appearance:none;
	border:0;
	cursor:pointer;
	padding:8px 12px;
	/*font-weight:700;*/
	font-size:14px;
}
.franerp-im-copy { background:#007DC4; color:white; }
.franerp-im-kakao { background:#fee2b8; color:#92400e; }
.franerp-im-mail { background:#e6f4ea; color:#065f46; }
.franerp-im-tel { background:#007DC4; color:white; }

.franerp-im-contact {
	margin-top:14px;
	font-size:13px;
	color:#334155;
	line-height:1.45;
}

/* responsive */
@media (max-width:560px) {
	.franerp-im-table th, .franerp-im-table td { padding:8px; font-size:13px; }
	.franerp-im-title { font-size:15px; }
}
/* mobile floating buttons override start */
@media (max-width: 768px) {
    .kakao_btn,
    .telgram,
    .totop,
    .chat-floating-btn {
        position: fixed !important;
        top: auto !important;
        left: auto !important;
        right: 12px !important;
        margin: 0 !important;
        transform: none !important;
    }

    .kakao_btn,
    .telgram,
    .totop {
        width: 40px !important;
        height: 40px !important;
        z-index: 997 !important;
    }

    .kakao_btn a,
    .telgram a,
    .totop {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .totop {
        bottom: calc(env(safe-area-inset-bottom, 0px) + 16px) !important;
        gap: 0 !important;
    }

    .totop img {
        transform: none !important;
        width: 14px !important;
        height: 14px !important;
    }

    .totop .totop-text,
    .totop .hidden {
        display: none !important;
    }

    .telgram {
        bottom: calc(env(safe-area-inset-bottom, 0px) + 64px) !important;
    }

    .kakao_btn {
        bottom: calc(env(safe-area-inset-bottom, 0px) + 112px) !important;
        border: none !important;
    }

    .chat-floating-btn {
        bottom: calc(env(safe-area-inset-bottom, 0px) + 160px) !important;
        width: 44px !important;
        height: 44px !important;
        z-index: 997 !important;
    }
}
/* mobile floating buttons override end */


/* 2026-08-10: 티저메모 오버레이 - 내용을 전부 가리지 않고 위 3~4줄은 읽히게 두고
   아래로 갈수록 흰색으로 사라지게 한다. 목록 페이지(sellcategory/selllist)는
   .teaser-fade 를 쓰지 않으므로 영향 없음. */
.teaser-overlay.teaser-fade {
	background: linear-gradient(to bottom,
		rgba(255, 255, 255, 0) 0%,
		rgba(255, 255, 255, 0) 34%,
		rgba(255, 255, 255, 0.88) 54%,
		rgba(255, 255, 255, 1) 70%,
		rgba(255, 255, 255, 1) 100%);
	backdrop-filter: none;
	justify-content: flex-end;
	padding-bottom: 14px;
}

.teaser-overlay.teaser-fade .teaser-title {
	font-size: 15px;
	margin-bottom: 10px;
}