/*  
* 일자        작성자          변경내역
* 2022.08.19  dahoe0304      btn-basic-red 추가
*/

/* login */ 
.loginWrap{
	padding: 50px;
	border: 1px #e0e0e0 solid;
	border-top: 2px #444 solid;
}
.loginWrap > div{
	float: left;
	box-sizing: border-box;
}
.loginWrap .login-box{
	width: 58.33333333%;
	padding-right: 80px;	
}
.loginWrap .login-form{	
	margin-bottom: 20px;
	padding: 40px 50px 30px 50px;
	background: #f7f7f7;
	border: 1px #e0e0e0 solid;
}
.loginWrap .login-form .form-group{
	margin: 0 0 10px 0;
	padding-right: 10px;
}
.loginWrap .login-form input[type=text],
.loginWrap .login-form input[type=password]{
	height: 40px;
}
.loginWrap .btn-login{
	display: block;
	width: 100%;
	height: 90px;
	font-size: 16px;
	line-height: 86px;
}
.loginWrap .login-bottom{
	margin-bottom: 20px; 
	padding: 0 50px;
}
.loginWrap .login-bottom > div:after{display: block; content: ""; clear: both;}
.loginWrap .login-bottom .btn{
	width: 100%;
	margin-top: -5px;
}
.login-banner{
	 width: 41.66666667%;
}
.login-banner img{width: 100%;}
@media(max-width:1230px){
	.loginWrap .login-box{
		padding-right: 20px;
	}	
}
@media (max-width:991px) {
	.loginWrap .btn-login{
		height: 40px;
		font-size: 16px;
		line-height: 30px;
	}
	.loginWrap .login-form .form-group{
		padding-right: 0;
	}
}
@media(max-width:830px){
	.loginWrap .login-box{
		width: 100%;
		padding-right: 0;
	}
	.loginWrap .login-banner{
	 width: 100%;
	}
	.loginWrap .login-bottom .btn{
	margin-top: 0;
}
}
@media(max-width:640px){
	.loginWrap{
		padding: 10px;
	}
	.loginWrap .login-form{
		margin-right: 0;
		padding: 30px;
	}
	.loginWrap .login-bottom{		
		padding: 0 30px;
	}
	.loginWrap .login-form .control-label{
		display: none;
	}
}

/* join */
.join-ico{
	position: absolute;
	top: 55px;
	right: 60px;
	width: 170px;
	height: 170px;
}

.join-ico-phone{
	position: absolute;
	bottom: 50px;
	right: 60px;
	width: 60px;
	height: 85px;
}
.join-ico-ipin{
	position: absolute;
	bottom: 50px;
	right: 60px;
	width: 158px;
	height: 53px;
}
.join-ico-complete{
	display: block;
	width: 100px;
	height: 100px;
	margin: auto;
	margin-bottom: 35px;
}
.join-txt-complete{
	font-size: 30px;
	letter-spacing: -1px;
}
.in-default{
	margin-right: -5px;
	margin-left: -5px;
}
.in-adress{
	padding-right: 5px;
	padding-left: 5px;
}
.file-form .fileDoc{
	float: left;
	width: 250px;
	margin-right: 10px;
}
.file-form .fileDoc.wi{
	width: 280px;
	letter-spacing: -1.5px;
}
.file-form .fileDoc .ld-tit{
	display: inline-block;
	line-height: 30px;
}
.file-form .fileDoc .ld-btn{
	float: right;
}

.fwNomal{
	font-weight: normal;
}

.joinSpanTxt{
	margin-left: 10px;
}
@media(max-width:1230px){
	.join-ico{
		top: 20px;
		right: 40px;
		width: 140px;
		height: 140px;
	}
	.join-ico-phone, .join-ico-ipin{
		bottom: 20px;
	}
	.file-form .fileDoc.wi{
		width: 100%;
		margin-bottom: 10px;
	}
	.file-form .fileDoc.wi .ld-tit{
		float: left;
		margin-right: 20px;
	}
	.file-form .fileDoc.wi .ld-btn{
		float: left;
	}
}
@media(max-width:830px){
	.join-ico{
		top: 20px;
		right: 40px;
		width: 100px;
		height: 100px;
	}
	.join-ico-complete{
		margin-bottom: 20px;
	}
	.join-txt-complete{
		margin-bottom: 15px;
		font-size: 20px;
	}
	.join-ico-phone, .join-ico-ipin{
		display: none;
	}
	
	.file-form .fileDoc, .file-form .fileDoc.wi{
		width: 100%;
		margin-bottom: 10px;
	}
	.file-form .fileDoc .ld-tit{
		float: left;
		margin-right: 20px;
	}
	.file-form .fileDoc .ld-btn{
		float: left;
	}
}

@media screen and (max-width:1023px){
		
	.joinEmailSel{
		width: 140px !important;
	}
	.joinAddr{
		margin-top:5px;
	}
}

@media screen and (max-width:767px){
	.joinId{
		width: 40vw !important;
	}

	.joinId::placeholder{
		font-size: 10px;
	}
	
	.joinW240{
		width: 64vw !important;
	}
	
	.joinVw30{
		width: 30vw !important;
	}
	
	.joinSpanTxt{
		display:inline-block;
		margin:0px;
	}
	
	.joinEmailSel{
		width: 106px !important;
		margin-top: 5px;
	}
	
	.joinPhone{
		width: 18vw !important;
	}
	
	.joinAddr{
		margin-top:5px;
	}
	
	.idCkModal{
		width: 100%;
	}
	
	.join-txt-more{
		display: block;
	}
}

/* process */
.join-stop{
	width: 700px;
	margin: auto;
	margin-bottom: 30px;
	list-style: none;
	padding:0;
}
.join-stop li{
	float: left;
	position: relative;;
	width: 150px;
	height: 150px;
	margin-left: 100px;
	padding-top: 30px;
	border: 6px #e3e3e3 solid;
	border-radius: 100px;
	box-sizing: border-box;
	text-align: center;
}
.join-stop li:first-child{margin-left: 0;}
.join-stop li .step{display: block; margin-bottom: 10px; color: #b1b1b1;}
.join-stop li .step-tit{display: block; font-size: 17px;}
.join-stop li.on{
	background: #444;
	border: 6px #444 solid;
	color: #fff;
}
.join-stop li::after{
	display: block;
	content: "";
	clear: both;
	position: absolute;
	top: 55px;
	left: 145px;
	width: 90px;
	height: 30px;
	background: url(../images/member/step-arrow-gray.png) no-repeat;	
}
.join-stop li.on::after{
	background: url(../images/member/step-arrow.png) no-repeat;	
}
.join-stop li.on .step{color: #fff;}
.join-stop li:last-child::after{display: none;}
.join-complete{
	padding: 50px 0 70px 0;
}
.b-step img{
	display: inline-block !important;
}

/* list-style */
.list-default{
	margin: 0;
	padding: 0;
	list-style: none;
	word-break: keep-all;
}
.fs18.bul-blue{
	background: url(../images/member/list-bul-blue.png?var=24) no-repeat 0 4px;
	padding-left: 25px;
}
.bul-blue,
.list-bul-blue li{
	clear: both;
	background: url(../images/member/list-bul-blue.png?var=24) no-repeat 0 2px;
	padding-left: 25px;
}
.list-bul-blue li + li {
	margin-top:5px;	
}
.list-bul-line li{
	padding-left: 10px;
	margin-bottom: 3px;	
	background: url(../images/member/list-bul-line.png) no-repeat 0 7px;
	clear: both;
}


/* mypage */

.mo-mypage__wrap{
    position: fixed;
    top: -100%;
    left: 0;
    background: #fff;
    z-index: 99;
    width: 100%;
    border-radius: 0 0px 10px 10px;
	height: 60vh;
}

.mo-mypage{
	padding: 20px;
    overflow: auto;
    height: 93%;
    border-top: 1px solid #eee;
}

.mo-mypage li {
    font-size: 16px;
    padding: 10px;
}

.mo-mypage .has-submenu > a::after {
	content: "";
	width: 24px;
    height: 24px;
    background: url(../images/common/slider_down.svg) no-repeat center center / 14px;
	vertical-align: middle;
    float: inline-end;
    position: static;
}

.mo-mypage li a {
	color: #333;
	text-decoration: none;
    display: block;
    width: 100%;
}

.blue_bold {
  	color: #005AA9;
  	font-weight: bold;
	font-size: 16px;
}

.red_bold {
  	color: #FF4136;
  	font-weight: bold;
	font-size: 16px;
}

.mypageMain-Btn .row {margin:0px -5px;}
.mypageMain-Btn .row > div {padding:5px;}

.mypageTop > div{
	float: left;
	margin-right: -1px;
	min-height: 138px;
}
.mypageTop .my-info{
    border-radius: 8px 0 0 8px;
	width: 35%;
	padding: 15px 30px;

}
.mypageTop .my-money{
    background: #f7f7f7;
	width: 25%;
	padding: 31px 15px;
}
.mypageTop.oldmypage .my-money{
    width: 300px;
    padding: 38px 15px;
}
.mypageTop .memoCnt{
	color: #f53743;
}
.mypageTop .my-menu{
    border-radius: 0 8px 8px 0;
	width: 40%;
	padding: 20px 15px;
}
.mypageTop .inner-txt{
	height: 32px;
	margin-bottom: 10px;
}
.mypageTop {
	clear: both;
}
.inner-btn{
    justify-content: space-between;
    display: flex;
    margin: 0 -5px;	
}
.inner-btn > div{
	width:100%;
    padding: 0 5px;
}
.mypageTop .inner-btn .btn{
	width: 100%;
	font-size: 13px;
	letter-spacing: -1px;
}
.mypageTop .my-menu ul{
	display: table;
	width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
}
.mypageTop .my-menu ul li{
	display: table-cell;
	width: 16.66666%;
}

/* 나의활동 new 아이콘*/
.new-label {
    display: inline-flex;
    align-items: center;
    color: white;
    padding: 2px 8px;
    border-radius: 12px;
    font-family: -apple-system, BlinkMacSystemFont, sans-serif;
    background-color: #fa233b;
    font-size: 11px;
    font-weight: bold;
    margin-left: 8px;
    animation: blink 0.8s infinite;
}

.n-label {
    color: white;
    padding: 3px 6px;
    border-radius: 7px;
    font-family: -apple-system, BlinkMacSystemFont, sans-serif;
    background-color: #fa233b;
    font-size: 13px;
    font-weight: bold;
    margin-left: 8px;
    animation: blink 0.8s infinite;
}

 @keyframes blink {
    0% { opacity: 1; }
    50% { opacity: 0.3; }
    100% { opacity: 1; }
}

@keyframes blinkBackground {
    0% { opacity: 1; }
    50% { opacity: 0.3; }
    100% { opacity: 1; }
}

@media(max-width:830px){
    .mypageTop .my-info{
    border-bottom: none;
    border-radius: 0 0 9px 9px ;
    }   
    .mypageTop .my-menu{
    border-top: none;
    border-radius:9px 9px  0 0 ;
    }
	.mypageTop .my-menu ul{
	/*display: block;*/
    display: flex;
	width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
	}
	.mypageTop.oldmypage .my-menu ul{
		display: block;
	}
	.mypageTop .my-menu ul li{
		float:left;
		width: 33.3333%;
		margin:10px 0;
		
	}
    .mypageTop .my-menu i{
	display: block;
	width: 50px; 
	height: 50px;
    letter-spacing :-0.5px
	}
		
}

.mypageTop .my-menu i{
	display: block;
	width: 60px; 
	height: 60px;
	margin: auto;
	margin-bottom: 10px;
	border: 1px #999 solid;
	border-radius: 100px;
}
.mypageTop .my-menu a{	
	color: #444;
}
.mypageTop .my-menu a.on i{
	background: #989898;
}

.mypageTop .my-menu a > span{	
	line-height: 17px;
	vertical-align: bottom;
}

/* 구버전 아이콘 */
.mypageTop.oldmypage .my-menu li:nth-child(1) i{
	background: url(../images/mypage/ico-mymenu-01.png?var=24) center no-repeat;
    background-size: 30px;
}
.mypageTop.oldmypage .my-menu li:nth-child(2) i{
	background: url(../images/mypage/ico-mymenu-02.png?var=24) center no-repeat;
}
.mypageTop.oldmypage .my-menu li:nth-child(3) i{
	background: url(../images/mypage/ico-mymenu-03.png?var=24) center no-repeat;
}
.mypageTop.oldmypage .my-menu li:nth-child(4) i{
	background: url(../images/mypage/ico-mymenu-04.png?var=24) center no-repeat;
}
.mypageTop.oldmypage .my-menu li:nth-child(5) i{
	background: url(../images/mypage/ico-mymenu-05.png?var=24) center no-repeat;
}


.mypageTop.oldmypage .my-menu li:hover:nth-child(1) i{
	background: #989898 url(../images/mypage/ico-mymenu-on-01.png) center no-repeat;
}
.mypageTop.oldmypage .my-menu li:hover:nth-child(2) i{
	background:#989898 url(../images/mypage/ico-mymenu-on-02.png?var=24) center no-repeat;
}
.mypageTop.oldmypage .my-menu li:hover:nth-child(3) i{
	background:#989898 url(../images/mypage/ico-mymenu-on-03.png?var=24) center no-repeat;
}
.mypageTop.oldmypage .my-menu li:hover:nth-child(4) i{
	background:#989898 url(../images/mypage/ico-mymenu-on-04.png?var=24) center no-repeat;
}
.mypageTop.oldmypage .my-menu li:hover:nth-child(5) i{
	background:#989898 url(../images/mypage/ico-mymenu-on-05.png?var=24) center no-repeat;
}
/* //구버전 아이콘 */

.mypageTop .my-menu li:nth-child(1) i{
	background:url(../images/mypage/myico-mymenu-01.png?var=24) center no-repeat;
    background-size: 30px;
}
.mypageTop .my-menu li:nth-child(2) i{
	background: url(../images/mypage/myico-mymenu-03.png?var=24) center no-repeat;
    background-size: 25px;
}
.mypageTop .my-menu li:nth-child(3) i{
	background: url(../images/mypage/myico-mymenu-04.png?var=24) center no-repeat;
    background-size: 32px;
}
.mypageTop .my-menu li:nth-child(4) i{
	background: url(../images/mypage/myico-mymenu-05.png?var=24) center no-repeat;
    background-size: 21px;
}


.mypageTop .my-menu li:hover:nth-child(1) i{
	background:#444 url(../images/mypage/myico-mymenu-on-01.png) center no-repeat;
    background-size: 30px;
}
.mypageTop .my-menu li:hover:nth-child(2) i{
	background:#444 url(../images/mypage/myico-mymenu-on-03.png?var=24) center no-repeat;
    background-size: 25px;
}
.mypageTop .my-menu li:hover:nth-child(3) i{
	background:#444 url(../images/mypage/myico-mymenu-on-04.png?var=24) center no-repeat;
    background-size: 32px;
}
.mypageTop .my-menu li:hover:nth-child(4) i{
	background:#444 url(../images/mypage/myico-mymenu-on-05.png?var=24) center no-repeat;
    background-size: 21px;
}


.table-infoTop .pull-left p{
	display: inline-block;
	padding-top: 3px;
}

.tatal-list span{
	height: 25px;
}

.mypage-main-cont {
	width: 100%;
}
.mypage-wrap {
	display: flex;
	gap: 20px;
}

.penalty_money{
	display: flex;
	gap: 10px;
	align-items: center;
}

.blue_btn {
    background: #3B5A9B;
    color: #fff;
    padding: 6px 10px;
    border-radius: 10px;
}

.buyProg-state-contain {
    display: flex;
    justify-content: center;
    margin: 40px;
	border-bottom: 1px solid #e9e9e9;
    padding-bottom: 40px;
}
.buyProg-state-wrap {
    margin: 0px 25px;
    display: flex;
    flex-direction: column;
    text-align: center;
    text-decoration: none;
    flex: 1;
	margin-left: 5px;
}
.buyProg-state-wrap:focus {
	text-decoration: none;
}
.buyProg-state-contain > a {
	color: #666;
}
.buyProg-state-wrap.active > span{
	color: #3B5A9B;
	font-weight: bold;
}
.buyProg-state-num {
    font-size: 40px;
}

.buyProg-state-icon {
    height: 40px;
    margin-top: 17px;
}

.buyProg-state-title {
    font-size: 16px;
	white-space: nowrap;
}
.buyProg-state-arrow {
	font-size: 30px;
    color: #999;
    margin-top: 25px;
}
.buyProg-attention-title {
    margin-bottom: 10px;
    font-size: 16px;
}
.buyProg-attention-cont {
    border: 1px solid #dbdbdb;
    border-radius: 10px;
    padding: 10px;
}

.multi-ellipsis{
	display: -webkit-box;
    -webkit-line-clamp: 2; /* 최대 2줄 */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.recv_n {
    display: inline-block;
    padding: 4px 10px;
    font-size: 12px;
    color: white;
    background-color: #fa233b;
    border-radius: 15px;
    text-align: center;
    min-width: 50px;
}
.mypageMoTitle {
	margin-bottom: 30px;
}

.plan-box-wrap {
	display: flex;
	padding: 12px;
	font-family: sans-serif;
	flex-direction: column;
	border: 1px solid var(--color--L-gray);
	border-radius: 10px;
	margin-top: 10px;
}

.plan-line {
	display: flex;
	align-items: center;
}

.plan-line-title {
	font-weight: bold;
	margin-right: 8px;
}

@media(min-width:1201px){
	.mypageMoTitle.mymain{
		display: none;
	}
}
@media(max-width:1200px){
	.mypage-wrap {
	    display: block;
	}
	.mypageMoMenu::after{
		font-family : xeicon;
		content: "\e938";
		display: inline-block !important;
		margin-left: 10px;
		cursor: pointer;
	}
	.mypageMoTitle {
	    display: flex;
	    justify-content: center;
		margin-bottom: 30px;
	}
	.has-submenu.active .depth3_ul {
        display: block;
        margin-top: 12px;
    }
	.buyProg-state-contain{
		margin: 20px 0px;
		border: 1px solid #DBDBDB;
        border-radius: 10px;
        padding: 15px 3px;
	}
	.buyProg-state-wrap{
		margin: 0px 8px;
		width: 100%;
	}
	.buyProg-state-num{
		font-size: 20px;
	}
	.buyProg-state-title{
		font-size: 12px;
		white-space: pre-wrap;
        word-break: keep-all;
	}
	.buyProg-state-icon{
		height: 25px;
        margin-top: 3px;
	}
	.buyProg-state-icon img{
		width: 25px;
	}
	.buyProg-state-arrow {
		font-size: 20px;
    	margin-top: 25px;
	}
}

@media(max-width:1230px){
	.mypageTop .my-info, .mypageTop .my-money, .mypageTop .my-menu, .mypageTop.oldmypage .my-money{
		width: 100%;
	}
    .mypageTop .my-info{
        border-bottom: none;
        border-radius: 9px 9px 0 0;
    }
    .mypageTop .my-menu{
        border-top: none;
        border-radius: 0 0 9px 9px ;
    }
	.mypageTop .inner-btn .btn{
	    margin-bottom: 3px;
	}
	.table-infoTop .pull-left{
		margin-bottom: 5px;
	}
	.table-infoTop .pull-left p{
		display: block;
		padding-top: 0;
		background: none;
	}
}
@media(max-width:640px){
    .mypageTop .my-info{
        border-bottom: none;
        border-radius: 9px 9px 0 0;
    }
    .mypageTop .my-menu{
        border-top: none;
        border-radius: 0 0 9px 9px;
    }
	.mypageTop .my-menu a{
		font-size: 12px;
		letter-spacing: -0.6px;
	}
}

#read-txt.collapse{
	display: block;
	word-break: auto-phrase;
}
@media(max-width:830px){

	#read-txt.collapse{
	display: none
	}
	#read-txt.collapse.in {
    display: block;
	}
}


/* box-style */
.box{
	border: 1px #e0e0e0 solid;
}

.box-bold-line{
	padding: 20px 40px;
	border: 2px #f0f0f0 solid;
}
.box-agree{
	height: 300px;
	padding: 30px !important;
	overflow-y: auto;
}
.box-agree iframe{height: 230px;}
.box-agree-choice{
	margin-top: -1px;
	padding: 20px 30px !important;
	background: #f8f8f8;
}
.my-level-box{
	margin-right: -1px;
	padding-top: 45px;
	padding-bottom: 47px;
}
.my-money-box{
	margin-right: -1px;
	padding: 25px 30px;
	height: 80px;
}
.box-choice-all{
	border-top: 2px solid #e0e0e0;
	padding: 20px;
}

.box-agree-title{
	background-color: #f8f8f8;
	padding: 15px;
}

.box-agree-title > .agreeOpen{
	float: right;
	padding-top: 12px;
}

.box-agree-title > label > .optionalBox{
	margin-left: 22px;
}

.box-agree-title .ckBox{
	margin-left: 5px;
}

.box-agree-title > .optionalEx{
	color: #666666;
	font-size: 13px;
}

.agreeBox{
	border-top: 1px solid #d4d4d4;
}

.agreeCont{
	padding: 20px;
	overflow-y:auto;
}

.agreeCont > iframe{
	height: 250px;
}

.box-phone{
	margin-top: 30px;
	padding: 40px 0px;
	background-color: #f8f8f8;
	border-top: 1px solid #e0e0e0;
	align-items: center;
	display: flex;
	justify-content : center;
}

.box-phone > div{
	margin-left : 30px;
}
.pull-right{
    text-align: center;
}
#phoneAuth{
	width:200px;
}

@media(max-width:640px){
	.box{
		padding: 20px !important;
	}
	.box-agree{
		padding: 20px !important;
	}
	.box-agree-choice > .pull-right{
		float: none !important;
		margin-left: -20px;
	}
	.my-money-box{
		margin-bottom: -1px;
		height: auto;
	}
	.my-money-box .pull-right,
	.my-money-box .pull-left{
		float: none !important;
		text-align: center !important;
	}
	.my-money-box .btn{
		margin-top: 5px
	}
	
	
	.box-agree-title > .optionalEx{
		display:  block;
		font-size: 12px;
	}
	
	#phoneAuth{
		width:140px;
	}
}

.box-txt{
	padding: 30px 40px;
}

.box-gray{
	background: #f8f8f8;
}
.box-login-pop{
	padding: 45px;
}
.box-light-blue{
	background: #edf1f7;
}
.box-light-beige{
	background: #f5f0ef;
}
.box-in-tit{
	margin-bottom: 20px;
	padding-bottom: 10px; 
	border-bottom: 1px #d4d4d4 solid;
	text-align: left;
}

/* button color add */
.btn-dark-gray{background: #666666; color: #fff !important;}
.btn-light-gray{background: #8e8e8e; color: #fff !important;}
.btn-beige{background: #b3a586; color: #fff !important;}
.btn-basic{border: 1px #999 solid; background: #fff; color: #444 !important;}
.btn-basic-green{padding: 4px 5px; border: 1px #2ea5b9 solid; background: #fff; color: #2ea5b9 !important;}
.btn-light-blue{background: #7993b2; color: #fff !important;}
.btn-light-beige{background: #a8928d; color: #fff !important;}
.btn-green{background: #40aa82; border: 1px #40aa82 solid; color: #fff !important;}
.btn-blue-green{background: #2ea5b9; border: 1px #2ea5b9 solid; color: #fff !important;}
.btn-basic-red{padding: 4px 5px; border: 1px #ff0000 solid; background: #fff; color: #ff0000 !important;}		/* 삭제버튼 색상 추가 2022.08.19 */
.btn-basic-black{padding: 4px 5px; border: 1px #444 solid; background: #fff; color: #111 !important;}

.btn-certify{
	width: 180px;
	height: 50px;
	margin-top: 30px;
	line-height: 35px;
}
.btn-tabs{
	min-width: 180px;
	margin-right: 3px;
	padding: 15px 6px;
	background: #fafafa;
	border: 1px #cfcfcf solid;	
}
.btn-tabs:focus,
.btn-tabs.active{
	background: #fff;
	border: 1px #114da5 solid;
	color: #114da5;
	box-shadow: none;
	-webkit-box-shadow: none;
	font-weight: bold;
}
.btn-col-3 .btn{
}

@media(max-width:320px){
	.btn-col-2 .btn{
		width: 100% !important;
		margin-bottom: 5px;
	}
}
@media(max-width:640px){
	.btn-col-3 .btn{
		width: 100% !important;
		margin-bottom: 5px;
	}
}



/* tab-style */
.sub-tabs li a{
	margin-right: -1px;
	font-weight: bold;
}
.sub-tabs li:not(:last-child).active a{
	margin-right: 0px;
/* 	margin-left: -1px; */
}
/* .sub-tabs li:first-child.active{ */
/* 	margin-right: 1px; */
/* 	margin-left: 0; */
/* } */
.sub-tabs.my-tabs li{
	width: 220px;
}

.sub-tabs.my-tabs.flex{
	display: flex;
}

.sub-tabs.my-tabs.flex li{
	width: 100%;
	flex: 1;
}

.nav-tabs.flex{
	border-bottom: none;
}

/*
.sub-tabs.my-tabs li:nth-child(4){
	width: 319px;
} */
.sub-tabs.my-tabs li.long-tab{
	width: 319px;
}
.sub-tabs.my-tabs li.long-tab2{
	width: 538px;
}
.sub-tabs.my-tabs li.active.long-tab2{
	width: 540px;
}

.tab-col-4 li{width: 25%;}
.tab-col-5 li{width: 20%;}
.tab-col-6 li{width: 16.66%;}
.tab-col-7 li{width: 14.28%;}

/* layer popup */
.pop-find{
	width: 800px;
}

.joinAddrPop{
	width: 600px !important;
}

.joinAddrPop  .modal-content .modal-body{
	padding: 0px;
}

.modal-content .modal-body{
	padding: 40px 50px;
}
#kakaoPop .modal-content .modal-body{
	padding:0;
}
#kakaoPop .modal-dialog{
	padding:0;
	width:772px;
	max-width:100%;
	
}
.modal-content .pop-txt{
	padding: 30px 0;
}
.modal-content .modal-body .tab-pane{
	display: none;
}
.pop-find h5{
	margin-bottom: 20px;
}
.pop-find .box-result-id{
	width: 85%;	
	margin: auto;
	margin-top: 90px;
	margin-bottom: 55px;
	padding: 90px 0;
}
.pop-find .box-result-pw{
	margin: 50px 0;
	padding: 20px;
	background: url(../images/member/bg-box-line.png);
	border-top: 1px #e2e2e2 solid;
	border-top: 1px #e2e2e2 solid;
}
.pop-find .box-search-pw{
	padding: 20px 40px;
}
.pop-find .box-search-pw .txt{
	padding-left: 5px;
	font-size: 13px;
	line-height: 2.5;
}
.pop-find .box-search-pw .form-group{
	margin-left: 0;
	margin-right: 0;
}

.pop-lg{
	width: 1000px;
}
.pop-md{
	width: 800px;
}
.pop-top-txt{
	margin-top: 10px;
	padding-left: 26px;
}
@media(max-width:830px){
	.modal-content  .modal-body{
		padding: 15px;
	}
	.pop-find .box-search-pw{
		padding: 20px;
	}
	.pop-find .form-horizontal .control-label {
	    padding-top: 8px;
	    margin-bottom: 0;
	    font-size:13px;
	 }
	 .box{
	 	padding: 20px !important;
	 }
}
@media(max-width:640px){
	.pop-find .box-search-pw .txt{
		display: block;
		clear: both;
		padding-left: 98px;
		line-height: 1.5;
	}
}

.thum-file-list ul li{
	border:1px solid #ddd;
	float:left;
	margin:2.5px 5px 2.5px 0;
	position:relative;

}
.thum-file-list ul li a{
	position:absolute;
	right:0;
	top:0;
	font-size:0;
}


/* table style 異붽��븯嫄곕굹 湲곗〈 �뒪���씪 �닔�젙�빐二쇱꽭�슂 */
.tableDefault > table > thead > tr > th{
	padding:7px 25px;
	vertical-align:middle;
	border-bottom:1px solid #ddd;
	border-left:1px solid #ddd;
	height:45px;
}
.tableDefault.tablePd10 > table > thead > tr > th{
	padding:7px 10px;
}
.tableDefault > table > thead > tr > th:first-child{
	border-left: 0;
}

.tableDefault > table > thead > tr > th{
	background:#f8f8f8;
	color:#444;
	font-weight:bold;
	font-size:15px;
	text-align:center;
	word-break: auto-phrase;
}
.tableDefault > table > tbody >  tr >th.first-tit{background: #e9e9e9}
.tableDefault > table > tfoot > tr > td{padding:10px 25px; border-bottom: 1px #e0e0e0 solid;}

/* table class */
.tableDefault.tableTab > table{
	border-top: 0 !important;
	border: 1px #444 solid;
}
.tableDefault.tableTab > table th{
	background: #eee;
}
.tableDefault.tableTab > table > tbody > tr > th.bd-none,
.tableDefault.tableTab > table > tbody > tr > td.bd-none{
	border-bottom: 0 !important;
}

.tableDefault.tableTab .menu1 a{
	margin-right: 13px;
	padding-right: 13px;
    background:url(../images/common/dott-line2.png) no-repeat right center;
	color: #000;
}

.tableDefault.tableTab .menu1 a:last-child{
	background: none;
	padding-right: 0;
	margin-right: 0;
}
.tableDefault.tableTab .menu2 a{
	color: #000;
	text-decoration: none;
}
.tableDefault.tableTab .menu1 .active,
.tableDefault.tableTab .menu2 .active{
	color: #222;
	font-weight: bold;
}
.tableDefault.re-padding > table > thead > tr > th{
	padding: 5px 12px;
}
.tableDefault.re-padding > table > tbody > tr > th,
.tableDefault.re-padding > table > tbody > tr > td{
	padding: 18px 12px;
	text-align: center;
	word-break: keep-all;
}
.tableDefault.re-padding > table > tbody > tr > td a{color: #333;}

.tableDefault.table-link > table > thead > tr > th + th{
	height: 65px;
}
.col-md-6.rightTable .tableDefault.table-link > table,
.col-md-4.rightTable .tableDefault.table-link > table{
	border-left: 1px #e0e0e0 solid;
}
@media(max-width:830px){
	.col-md-6.rightTable .tableDefault.table-link > table,
	.col-md-4.rightTable .tableDefault.table-link > table{
	border-left: 0;
	}
}
.table-link td:hover{
	background: #444;
	color: #fff !important;
}
.table-link td:hover a{
	color: #fff !important;
}
.table-data{
	width: 100%;
	border-collapse: collapse;
}
.table-data thead th{	
	background: #fafafa;
	border: 1px #dfdfdf solid;
	text-align: center;
}
.table-data thead th a{
	display: block;
	padding: 20px;
	text-decoration: none;
	color: #000;
}
.table-data thead th a.active,
.table-data thead th a:hover {	
	background: #444;
	color: #fff;
}
.table-data tbody th{
	padding: 15px 30px;
	border: 1px #dfdfdf solid;
	text-align: right;
	font-weight: normal;
}
.table-data tbody td{
	padding: 15px 30px;
	border: 1px #dfdfdf solid;
	text-align: left;
	font-weight: bold;
}
.table-vertical td:first-child{border-left: 1px #e0e0e0 solid !important;}
.table-vertical td .radio-inline,
.table-vertical td .checkbox-inline{
	margin-right: 20px;
}
.table-vertical td .radio-inline:last-child{margin-right: 0;}

@media(max-width:830px){
	.table-data tbody th,
	.table-data tbody td{
		padding: 15px 15px;
	}
}

/* sub-menu(LNB) */
.sub-menu ul{
	list-style: none;
	margin:0;
	padding: 0;
	padding-left:1px 
}
.sub-menu ul:after{
	display: block;
	content: "";
	clear: both;;
}
.sub-menu ul li{
	float: left;
}
.sub-menu a{
	display: block;	
	height: 60px;
	margin-left: -1px;
	border: 1px #cfcfcf solid;
	background: #fafafa;	
	text-align: center;
	color: #464646;
	font-size: 15px;
		line-height: 56px;
	text-decoration: none;
}
.sub-menu a:hover,
.sub-menu a.active{
	background: #222;
	color: #fff;
}

/* 공통추가 */
.page-subTitle{
	font-size: 22px;
	font-weight: bold;
}
.dot-line{
	display: inline-block;
	margin-right: 13px;
	padding-right: 13px;
    background:url(../images/common/dott-line2.png) no-repeat right center;
}
.btn-ico-date{
	display: inline-block;
	width: 24px;
	height: 28px;
	margin-left: 10px;
	border: none;
	background: url(../images/common/ico-date.png) no-repeat;
}
.tb-form-set .form-inline .form-group{
	display: inline-block !important;
	margin-bottom: 0;
	vertical-align: middle;
}
.tb-form-set .btn{padding: 6px 10px !important;}
.link-nomal a{color: #333;}

@media(max-width:640px){
	h3.subTitle.multi{
		background-size: auto 45% !important;
		background-position: 0 0;
	}
	h3.subTitle.multi .s-txt{
		margin-left: 0 !important;
	}
}


/* �빟愿� */
.guide-wrap{
}
.guide-wrap h4{
	font-size: 22px; font-weight: bold;
}
.guide-wrap h5{
	font-size: 18px; font-weight: bold;
}
.guide-wrap h6{
	font-size: 15px; font-weight: bold;
}
.guide-wrap > .row{
	margin-bottom: 20px;
}
.guide-wrap > .row > ul{
	margin: 0;
	padding: 0;
	list-style: none;
}
.guide-wrap > .row > ul >li{
	margin-bottom: 5px;
}
.guide-wrap > .row .list-decimal{
	list-style: decimal;
}
.guide-wrap > .row .last-depth{
	margin: 5px 0;
}

/* 커뮤니티 - 갤러리형 게시판 */
.community_wrap {
    display: flex;
	gap: 30px;
}

.main_commu_cont {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.imgBoardList{
	display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
	width: 100%;
    float: right;
}

.imgBoardList .board-item{
	background-color: #FAFAFA;
    padding: 15px;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
}

.board-item img{
	width: 100%;
    height: 220px;
    object-fit: contain;
    border-radius: 8px;
}

.board-item .board-subject{
    font-weight: 500;
    font-size: 16px;
	margin: 10px 0px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2em;
    height: 2.4em;
}


/* 커뮤니티 & 고객센터 사이드메뉴*/

/*body layout*/
.body_wrap { position: relative; margin:0 auto; max-width: 1200px; } 
.lnb_wrap { display: flex; justify-content:flex-start; top: -243px !important; width:224px; z-index: 12 !important;    box-sizing: border-box;}
.lnb_wrap .lnb_title { overflow: hidden; position: relative;  text-align: left; z-index: 10;  box-sizing: border-box; } 
.lnb_wrap .lnb_title span { display: block; margin: 2px 0 0; font-size: 16px; color:#fff; } 
.lnb_wrap .lnb_title strong { display: block; color:#fff; font-size: 37px; line-height: 1; font-family: "Noto Sans KR", "sans-serif"!important; letter-spacing: -1px; font-synthesis:style; font-weight: bold; } 
.lnb_wrap .depth2_ul {background-color: #FBFBFB;margin-bottom: 13px; } 
.lnb_wrap .depth2_ul li { border:none; } 
.lnb_wrap .depth2_ul li a {border:none; font-size: 16px;  letter-spacing: -1px; position: relative; width:100%; display:inline-block; box-sizing:border-box; border-top:0; border-bottom:0;  color:#444;text-align:left; line-height:22px; padding:14px 28px; } 
.lnb_wrap .depth2_ul li a span { line-height: 22px; } 
.lnb_wrap .depth2_ul li.on a span { font-weight: 700; color:#222;} 

.lnb_wrap .depth2_ul > li > a{text-decoration: none;}
.lnb_wrap .depth2_ul > li > a:hover{font-weight: 600;}
.lnb_wrap .depth2_ul > li > a:focus, .lnb_wrap .depth2_ul > li.on > a {  /*font-weight: 700; color: #222;*/ }
.lnb_wrap .depth2_ul > li > a:hover:before, .lnb_wrap .depth2_ul > li > a:focus:before, .lnb_wrap .depth2_ul > li.on > a:before {  background: #333; opacity: 1; }
.lnb_wrap .depth2_ul > li.on > a{font-weight:700; background: #eee;}
.contents_wrap { max-width:940px; margin: 0 0 150px 280px;} 
.contents_wrap .title_wrap { height:25px; margin-bottom:40px; border: none; } 
.contents_wrap .title_wrap .title_box { display: inline-block;} 
.contents_wrap .title_wrap .title_box h2 { font-size: 30px; font-family: "Noto Sans KR", "sans-serif" !important; letter-spacing: -1px; font-synthesis: weight; font-weight: 500; line-height: 1; } 
.lnb_wrap, .lnb_wrap .title_wrap{ width:228px;}/* 2차메뉴 넓이 */
.lnb_wrap .title_wrap{ height:110px;}
.lnb_wrap{display:inline-block; float:left;}
.lnb_wrap .depth2txt{
    width: 100%;
    display: inline-block;
    box-sizing: border-box;
    border-top: 0;
    border-bottom: 0;
    position: relative;
    font-weight: 500;
    font-size: 16px;
    color: #fff;
    text-align: left;
    line-height: 22px;
    padding: 16px 24px;
    background-color: #111;
}
.lnb_wrap .depth2txt:before{
    font-weight: bold;
    display: block;
    content: "";
    width: 16px;
    height: 2px;
    position: absolute;
    top: 50%;
    right: 15px;
    transform: translate(-50%, 0);
    transition: all .3s;
    border-radius: 2px;
    background: #fff;
    opacity: 1;
}
.lnb_wrap .depth2_ul{ width:100%; display:inline-block;}
.lnb_wrap .depth2_ul li{ width:100%; display:inline-block; float:left;}
.lnb_wrap .depth2_ul li:nth-child(8){ margin-top:20px; border-top: 1px solid #eee;}

@media (max-width:1023px){
	.layout { padding:0 15px; } 
	.lnb_wrap { display:none; } 
	.contents_wrap .title_wrap {margin-bottom: 24px;} 
	.contents_wrap .title_wrap .title_box h2 { font-size:30px; font-weight: 500; color: #1d1d1d; text-align: left; display: block; float: none; width: 100%; position:relative; word-break: keep-all;} 
	.contents_wrap { width:100%; max-width:100%; margin: 0 0 100px; } 
	.contents_wrap .title_wrap .title_box { display:block; width:100% } 
    .community_wrap {flex-direction: column;}
}

@media (max-width:830px) {
	.contents_wrap {
			width: 100%;
			margin: 0 auto;
	        margin-bottom: 30px;
			}
	.contents_wrap .title_wrap {
		position: relative;
        margin: 0 auto;
        width: 100%;
		height: 55px;
		margin-bottom: 18px;
	}

}

@media (min-width:831px) {
	.f_date{
		width: 180px !important;
	}
}


/* 마이페이지 사이드메뉴 start */
.lnb_wrap2 { display: flex; justify-content:flex-start; top: -243px; width:224px; z-index: 12;    box-sizing: border-box;} 
.lnb_wrap2 .lnb_title { overflow: hidden; position: relative;  text-align: left; z-index: 10;  box-sizing: border-box; } 
.lnb_wrap2 .lnb_title span { display: block; margin: 2px 0 0; font-size: 16px; color:#fff; } 
.lnb_wrap2 .lnb_title strong { display: block; color:#fff; font-size: 37px; line-height: 1; font-family: "Noto Sans KR", "sans-serif"!important; letter-spacing: -1px; font-synthesis:style; font-weight: bold; } 
.lnb_wrap2 .depth2_ul {background-color: #FBFBFB;margin-bottom: 13px; } 
.lnb_wrap2 .depth2_ul li { border:none; } 
.lnb_wrap2 .depth2_ul li a {border:none; font-size: 16px;  letter-spacing: -1px; position: relative; width:100%; display:inline-block; box-sizing:border-box; border-top:0; border-bottom:0;  color:#444;text-align:left; line-height:22px; padding:14px 28px; } 
.lnb_wrap2 .depth2_ul li a:hover{font-weight: 600;} 
.lnb_wrap2 .depth2_ul li a span { line-height: 22px; } 
.lnb_wrap2 .depth2_ul li.on a span { font-weight: 600; color:#222;} 

.lnb_wrap2 .depth2_ul > li > a{text-decoration: none;}
.lnb_wrap2 .depth2_ul > li > a:hover:before, .lnb_wrap2 .depth2_ul > li > a:focus:before, .lnb_wrap2 .depth2_ul > li.on > a:before {  background: #333; opacity: 1; }
.lnb_wrap2 .depth2_ul > li.on > a{font-weight:700; background: #eee;}
.contents_wrap .title_wrap { height:25px; margin-bottom:40px; border: none; } 
.contents_wrap .title_wrap .title_box { display: inline-block;} 
.contents_wrap .title_wrap .title_box h2 { font-size: 30px; font-family: "Noto Sans KR", "sans-serif" !important; letter-spacing: -1px; font-synthesis: weight; font-weight: 500; line-height: 1; } 
.lnb_wrap2, .lnb_wrap2 .title_wrap{ width:228px;}/* 2차메뉴 넓이 */
.lnb_wrap2 .title_wrap{ height:110px;}
.lnb_wrap2{display:inline-block; float:left;}
.lnb_wrap2 .depth2txt{
    width: 100%;
    display: inline-block;
    box-sizing: border-box;
    border-top: 0;
    border-bottom: 0;
    position: relative;
    font-weight: 500;
    font-size: 16px;
    color: #fff;
    text-align: left;
    line-height: 22px;
    padding: 16px 24px;
    background-color: #111;
}
.lnb_wrap2 .depth2txt:before{
    font-weight: bold;
    display: block;
    content: "";
    width: 16px;
    height: 2px;
    position: absolute;
    top: 50%;
    right: 15px;
    transform: translate(-50%, 0);
    transition: all .3s;
    border-radius: 2px;
    background: #fff;
    opacity: 1;
}
.lnb_wrap2 .depth2_ul{ width:100%; display:inline-block;}
.lnb_wrap2 .depth2_ul li{ width:100%; display:inline-block; float:left;}
.lnb_wrap2 .depth2_ul li:nth-child(8){ margin-top:20px; border-top: 1px solid #eee;}

.depth3_ul {
    padding-left: 20px;
    display: block;
    transition: max-height 0.3s ease-out;
    max-height: 0;
    overflow: hidden;
}

.depth3_ul > li > a {
    text-decoration: none;
    display: block;
}
.lnb_wrap2 .has-submenu.active > a {
    background-color: #eee;
    font-weight: 700;
}
.has-submenu > li.active > a > span{
       font-weight: 600;
}
.depth3_ul > li > a:hover {
    font-weight: 600;
   /* background-color: #f0f0f0;*/
}
.has-submenu.active .depth3_ul {
    display: block;
}
        

.has-submenu > a::after {
    content: "";
    display: inline-block;
    position: absolute;
    right: 18px;
    width: 24px;
    height: 24px;
    background: url(../images/common/slider_down.svg) no-repeat center center/14px;
    transition: transform 0.3s ease;
}

.has-submenu.active > a::after {
    transform: rotateX(180deg);
}

.has-submenu.no-depth > a::after {
    transform: rotate(-90deg); 
}

.mypageMenu.on {
	font-weight: 700;
}

.mypageListImg {
	width: 150px;
	height: 150px;
	object-fit: contain;
}

@media screen and (max-width: 768px) {
    .mobilePd{}
    .sidemobwrap{
        position: relative;
        display: block;

        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.6); 
        z-index: -5; 
    }
    .lnb_wrap2 {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 80vh; 
        z-index: 10;
        border-radius: 0 0 14px 14px;
        background-color: #fff;
        box-shadow: none;
        transition: transform 0.3s ease;
        overflow-x: hidden;
        overflow-y: auto;        
    
    }
  .lnb_wrap2::-webkit-scrollbar {
        display: none; 
    }
    .lnb_wrap2.open {
        transform: translateX(0);
    }
    .lnb_wrap2.closed {
        transform: translateX(-100%);
    }

    .lnb_wrap2 .depth2_ul {
        width: 100%;
        display: block; 
        background-color: #fff; 
    }

    .lnb_wrap2 .depth2_ul li a {
        padding: 14px 20px;
        font-size: 16px;
        color: #333;
        text-align: left;
    }

    .lnb_wrap2 .depth2txt {
        display: none;
        font-size: 18px;
        padding: 10px 20px;
        background-color: #111;
        color: #fff;
    }

}


/* 마이페이지 사이드메뉴 end */

/*마이페이지 버전토글 strat*/
.toggle-wrap {
    width: 100%;
    border-bottom: 1px solid #333; 
    position: relative;
}

.toggle-container {
    padding: 0px;
    width: 100%;
    max-width: 600px;
}

/* 탭 스타일 */
.tabs {
    display: flex;
    gap:4px;
    position: relative;
    margin-bottom: -1px;
}

.tab {
    flex: 1;
    text-align: center;
    padding: 10px;
    cursor: pointer;
    font-size: 16px;
    font-weight: 500;
    color: #333;
    background-color: #FAFAFA;
    border: 1px solid #ddd;
    border-bottom: 1px solid #333;
    transition: background-color 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.tab.active {
    background-color: #fff;
    border: 1px solid #333;
    border-bottom: 1px solid white; /* 흰색 선으로 toggle-wrap의 선을 가림 */
    z-index: 2;
    color: #333;
}

/* 드롭다운 */
.service-ending-message {
    font-size: 14px;
    color: #ff0000;
    margin-top: 4px;
    display: none;  
    position: absolute;
    top: 100%;
    left: 18%;
    transform: translateX(-11%);
    background-color:  rgba(255, 255, 255, 0.8);;
    padding: 9px;
    border: 1px solid #ddd;
    border-radius: 5px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    z-index: 10;
}


.service-ending-message::after {
    content: '';
    position: absolute;
    top: -9px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 9px solid transparent;
    border-right: 9px solid transparent;
    border-bottom: 9px solid #ddd;
}


.service-ending-message::before {
    content: '';
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 8px solid #fff;
    z-index: 1; 
}

.tab .service-ending-message {
    display: block;
}

/* 탭 내용 */
.version-content {
    transition: all 0.3s ease;
    opacity: 1;
    transform: translateY(0);
    width: 100%;
}

.version-content.hidden {
    display: none;
}

@media (max-width: 768px) {
    .toggle-wrap {
    	border-bottom: none;
    }
    .toggle-container {
        width: 100%;
    }
    .tabs {gap:0;}
    .version-content{
        padding: 0;
    }
    .toggle-label {
        font-size: 14px;
    }

    .version-content {
        margin: 0;
    }
}
/*마이페이지 버전토글 end*/
                
 
 /* 마이페이지 내용 start*/               
 .containerwrap {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: auto; 
	height: 100%;
	gap: 0px 20px;
}

.sectioninfo {
	border:1px solid #e0e0e0;    
	border-radius: 8px;    
	padding: 30px 20px;
	margin: 20px 0px 0px 0px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
}

.sectioninfo:nth-child(1),
.sectioninfo:nth-child(2) {
    grid-column: span 1; /* 각각 한 칸씩 차지 */
}
.sectioninfo:nth-child(3) {
    grid-column: span 1; /* 한 칸 차지 */
    grid-row: span 2; /* 두 줄 차지 */
}
.sectioninfo:nth-child(4) {
    grid-column: span 1;
}

.sectioninfo:nth-child(5) {
    grid-column: span 1;
    margin-top: 10px;
}

.penaltyBtnMain{
	background-color: #3B5A9B;
	color: #fff;
	border: none;
	padding: 6px 7px;
	font-size: 12px;
	border-radius: 5px;
	position: absolute;
	right: 20px;
}

.mgmt-group {
	display: flex;
	gap: 10px;
}

.mgmt {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 15px;
	background-color: #f5f5f5;
	border:1px solid #f5f5f5;    
	color: #1d1d1d;
	cursor: pointer;
	border-radius: 5px;
	width: 100px;
	box-sizing: border-box;
}

.txtmgmt{
	font-weight: 500;
    margin-bottom: 3px;
	word-break: keep-all;
    text-align: center;
}

.imgicon img{
    height:30px;
    margin-bottom: 10px;
}


.table{margin-bottom: 0;}

.table th, .table td {
	border: 1px solid #ddd;
	padding: 8px;
	text-align: center;
}

.table tr:first-child td:first-child,
.table tr:nth-child(2) td:first-child,
.table tr:nth-child(3) td:first-child,
.table tr:nth-child(4) td:first-child,
.table tr:nth-child(5) td:first-child,
.table tr:nth-child(6) td:first-child {
      border-right: none;
      background-color: #f8f8f8;
      font-weight: 500;
      border-right: 1px solid transparent;
}
    

.myactbtn-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    width: 100%;
	text-align: center;
}

.myactbtn {
	border: 1px solid #888;
	padding: 8px;
	color: #333;
}
    
.myactbtn:hover{
	color: #333;
}
     
.mrlr {
    margin:0 20px!important;
}   
                
@media (max-width: 768px) {
     
	.containerwrap {
	    grid-template-columns: 1fr;
	    grid-template-rows: auto;
	    height: auto;  
	    gap:0;
	}
	.sectioninfo {
	margin: 16px 0px 0px 0px;
	}

}
.mgmt-group {
	flex-direction: row;
	gap: 15px;
	width: 80%;
}
.mgmt {
	padding: 7px;  
	width: 100%;
}
.myactbtn-container{
	max-width: 600px;
}

.sectioninfo:nth-child(4),.sectioninfo:nth-child(5) {
	height: 170px;
}
     
 .mrlr {
     margin:0 0px!important;
}   
 /* 마이페이지 내용 end*/      




/* 문단스타일 */
.txt-h2{font-size: 15px; line-height: 28px; word-break: keep-all;}
.subTitle2{background:url(/kobay/images/subTitle-bullet.png) no-repeat left center;background-size: auto 18px !important;padding-left: 24px;font-weight: bold; margin-bottom: 30px;font-size: 20px;margin-top: 60px;}
.list-1st>dd,.list-1st>li,.txt_bul{padding-left:24px; color:#666;}
.list-1st li{background:url(/kobay/images/guide/check.png) no-repeat 0 9px; line-height: 34px;min-height: 34px; font-size: 15px;}
.list-2st{display: flex;}
.list-2st > img{margin: 40px 10px 12px;}
.btn-detail{position:absolute; right:0px; background: #666; width: 128px; height: 38px; text-align: center; font-size:12px; font-weight: 400; color:#fff; opacity: 0.9;transition: 0.35s; border-radius: 4px;}
.btn-detail a{color:#fff;}
.btn-detailL:hover{color:#222;font-weight: 400;}
.btn-detail:after {
    content: '\e90b';
    font-family: xeicon;
    margin-left: 5px;
    display: inline-block;
    transition: 0.35s;
    color: #fff;}
.btn-detail:hover:after {
    color: #fff;
    font-weight: 500;
    transform: translateX(5px);}

.btn-detailbox{
    display: inline-block;
    padding: 6px 12px;
    margin-bottom: 0;
    font-size: 12px;
    font-weight: normal;
    line-height: 1.42857143;
    transition: 0.35s; 
    border-radius: 4px; 
    border:1px solid #999;
    text-align: center;}

.btn-detailbox:hover{background: #eee; border:1px solid #999; color:fff;}
.btn-detailbox a:hover{color:#444;}
.list-3st li{font-size: 15px;}


.list-3st button{width:96px; font-size: 12px;border-radius: 26px; border:1px solid #999; padding:6px 18px;margin-top:22px; line-height: 18px; transition: 0.35s;}
.list-3st button a{color:#777;}

.list-3st button a:hover{color:#444;}
.list-3st button:hover{background: #eee; border:1px solid #999; color:fff;}
@media(max-width:1023px){
	.list-2st > img {
		margin: 10px;
		width: 85%;}
}

@media (max-width:830px) {
	h3{font-size: 18px;margin-top: 10px;}
	.subTitle2{background:url(/kobay/images/subTitle-bullet.png) no-repeat left center;background-size: auto 18px !important;padding-left: 24px;font-weight: bold;margin-bottom: 30px;font-size: 20px; margin-top: 46px;}
	.list-1st li{display: inline-block; background:url(/kobay/images/guide/check.png) no-repeat 0 9px; line-height: 34px;min-height: 34px; font-size: 15px;}
	.list-1st .list-2st{margin-left:-20px;}
	.list-2st{display:block;}
	.list-2st img {padding:10px 0 10px; margin:0; vertical-align: top;width: 98%;}
	.list-3st > li, .txt_bul3{list-style: none; font-size: 14px; text-align: center;}
	.ui-summary{text-align: center;}
    .btn-detail {
    position: absolute;
    right: 15px;
    background: #666;
    width: 128px;
    height: 38px;
    text-align: center;
    font-size: 12px;
    font-weight: 400;
    color: #fff;
    opacity: 0.9;
    transition: 0.35s;
}
}
/* 문단스타일 End */


/* 테이블 */
.table-sm td,.table-sm th{padding-top:.6rem;padding-bottom:.6rem;}
.table td.text-left{text-align:left;}
.table td.text-center{text-align:center;}
.table td.text-right{text-align:right;}
.table th[scope="row"]{text-align:center !important;}
.table td{padding:12px 9px;}
.table thead th{background-color:#f4f6f6;color:#222;font-size:15px;font-weight:600;}
.table tbody th{background-color:#f6fafb;color:#222;}
.table tfoot,.table tfoot th{background:#f6f6f6;font-weight:700;}
.table .tfoot{background:#f6f9f9;font-weight:500;}
.table td[rowspan],.table th[rowspan]{border-right:1px solid #d2d2d2;}
.table td:first-child,.table th:first-child{border-left:none;}
.table td:last-child,.table th:last-child{border-right:none;}
.table-bordered{border-top:2px solid #333;border-bottom:1px solid #ccc;}
.table td,.table th{border-left:1px solid #dbdbdb;border-bottom:1px solid #dbdbdb;border-top:1px solid #dbdbdb;color:#666;}
.table thead th{background-color:#F5FAFF;color:#2d2d2d;font-weight:bold;}
.table tbody th{background-color:#f9f9f9;color:#666;font-weight:bold;}
.table td[rowspan],.table th[rowspan]{border-right:1px solid #dbdbdb;}
.table-bordered1{border-top:2px solid #666;border-bottom:1px solid #dbdbdb;}

.table thead tr th{background: #e3e3e3;}
/* 테이블 End */

/*라운드박스*/
.vlist__column{display:flex;margin:0 -12px; gap:22px;/*flex-wrap:wrap;justify-content: space-around;*/}
.vlist__column .inner{margin:0 12px 15px;width:calc(100% - 24px); background:#f9f9f9;border-radius: 14px;}

.vlist__column .inner .item{min-height:auto;padding:37px 20px 42px;border:none;text-align:center;}
.vlist__column .inner a{margin:0 0 19px;}

.vlist__column .inner .circle {margin:0 auto 10px;width:86px;height:86px;background-color:#f1f9ff;margin-bottom:15px;position:relative;border-radius:14px;}

.vlist__column .inner .ui-summary{color:#666;font-size:16px;letter-spacing:-1px;}
.vlist__column .inner .ui-summary strong{display:block;margin: 22px 0 6px;font-size:18px;font-weight:bold;color:#333;text-align:center;}
.vlist__column.col3 .inner{width:calc(33.33% - 24px);}
.vlist__column.type02 .inner .item{padding:45px 20px 42px;}
.vlist__column.type02 .inner .item ul.list-1st{display:inline-block;margin:0;}
.vlist__column.type02 .inner{margin:15px 0 0;}
.vlist__column.type02 .inner{color:#fff;}

@media (min-width: 1230px) {
	.container { width: 1210px!important;}
}
	@media(max-width:1023px){
		.vlist__column.col2 .inner,
		.vlist__column.col3 .inner,
		.vlist__column.col4 .inner,
		.vlist__column.col5 .inner,
		.vlist__column.col6 .inner{width:calc(50% - 24px);}
	}
	@media(max-width:830px){
		.vlist__column{display:flex;flex-wrap:wrap;margin:0 -12px;}
		.vlist__column.col2 .inner,
		.vlist__column.col3 .inner,
		.vlist__column.col4 .inner,
		.vlist__column.col5 .inner,
		.vlist__column.col6 .inner{width:calc(100% - 24px);margin: 10px auto;}
		.vlist__column .inner .item,
		.vlist__column.type02 .inner .item{padding:25px 30px;}
	}

/*고객센터*/
.customer-latest > div {padding: 0 0 0 20px !important;}
.sub-search-box-new{border: 1px solid #eaeaea;background: #f7f7f7;padding: 36px 140px;}
.sub-search-box-new > div{margin-bottom: 20px;}
.input-group-new{display:flex; margin-bottom: 10px;}
.form-control-new{width: 84%; padding:6px 12px 6px 12px; border:1px solid #DBDBDB;}
.info_bt_wrap{display: flex;}
.info_bt_lt{display: flex; width: 45.22%; margin-right: 5%; align-items: center; justify-content: space-between; }
.info_bt_lt .item .inner a img{padding-right: 4px;}
.info_bt_rit{width: 47.333%;margin-left: 20px;}
.item_box{border:1px solid #ddd; border-radius: 4px; margin:0 auto; padding:16px; margin-bottom:10px;}
.item_box2{border:1px solid #ddd; border-radius: 4px; margin:0 auto; padding:4px 16px;}
.item_box2 img{padding:2px 4px;}
.inner_wrap {text-align: center;}
.item_circle{display: flex; align-items: center; justify-items: center ; justify-content: center;}
.circle_cs{  position: relative; cursor: pointer; }
.circle_cs img{display: table; width:50px; height: 50px; padding:4px; margin:4px auto;}
.circle_cs span{
	width: 186px;	
	position: absolute;
	background-color: #444;
	color: #fff;
	border-radius: 3px;
	padding: 5px;
	text-align: center;
	top: -58px;
	left: 50%;
	transform: translateX(-50%);
	/* display: none; */
	opacity: 0;
	visibility: hidden;
	transition: 0.3s;
}
.circle_cs span:after {   
	content: '';
	position: absolute;
	width: 10px;
	height: 10px;
	background-color: #444;
	bottom: -5px;
	left: 50%;
	transform: translateX(-50%) rotate(45deg);
}
/* Hover Function */
.circle_cs:hover span {
	/* display: block; */
	opacity: 1;
	visibility: visible;
}

@media(max-width:1023px){
		.sub-search-box-new {
			width: 760px;}
		.info_bt_wrap {
			width: 86%;		
			display: flex;}
		.input-group-btn:last-child > .btn, .input-group-btn:last-child > .btn-group {
			z-index: 2;		
			margin-left: -10px;}


}
@media (max-width:830px) {
	.customer-latest > div { padding: 0px 0px !important;}
	.sub-search-box-new{ width:100%; border: 1px solid #eaeaea;background: #f7f7f7;padding: 15px;}
	.sub-search-box-new > div{margin-bottom: 20px;}
	.input-group-new{display:flex; margin-bottom: 10px;padding-right:20px;}
	.form-control-new{border:1px solid #DBDBDB;}
	.form-control-new{width: 80%; padding:6px 12px 6px 12px; border:1px solid #DBDBDB;}
	.info_bt_lt{display:none; border:none; text-align: center; margin-bottom:20px;}
	.info_bt_lt .item .inner a img{padding-right: 4px; width: 100%;}
	.info_bt_rit{display:block; width:100%;}
	.item_box{border:1px solid #ddd; border-radius: 10px; margin:0 auto; padding:12px;}
	.item_box2{display:none;}
	.circle_cs {width:100px; height:100px; background-color:#dbdbdb;margin-right: 5px; border-radius: 50%;}
	.circle_cs span{font-size: 14px; line-height: 18px; }
	.info_bt_rit{width: 100%;margin-left: 0;}
	.imgBoardList{grid-template-columns: repeat(1, 1fr);
    }
}
/*고객센터 End*/


/* 결제 페이지 */
.payContainer {
	display: grid;
    grid-template-columns: 1.7fr 1fr;
    gap: 10px;
}

.payBlock {
    border: var(--color--L-gray) 1px solid;
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 10px;
}

.payHeader {
    display: flex;
    justify-content: space-between;
    font-size: 16px;
	border-bottom: var(--color--L-gray) 1px solid;
    padding: 5px 0px 15px 0px;
}

.payNumBtns {
	display: flex;
    justify-content: space-around;
    gap: 3px;
}

.payNumBtns button {
	background: var(--color--L-gray);
    width: 80px;
    height: 32px;
    border-radius: 8px;
	white-space: nowrap;
}

.emoneyInput {
	display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    font-size: 16px;
}

.emoneyInput span:first-child {
    flex: 1;
}

.emoneyInput span:nth-child(2),
.emoneyInput span:nth-child(3) {
    display: flex;
    align-items: center;
    gap: 10px;
}

.emoneyInput .input-container {
    position: relative;
    display: flex;
    align-items: center;
}

.emoneyInputMsg {
	display: none;
    position: absolute;
    top: 100%;
	right: 75px;
    font-size: 14px;
    color: #FF4136;
    margin-left: 10px;
    white-space: nowrap;
}

.payBody {
	display: flex;
    justify-content: space-between;
	font-size: 16px;
	align-items: center;
	padding: 12px 0;
	border-bottom: var(--color--L-gray) 1px solid;;
}

.payBody:last-child, .payHeader.last {
	border-bottom: none;
}

.payBody .input-container {
	position: relative;
	display: flex;
	align-items: center;
}

.payContainer input[type=text] {
	font-size: 14px;
}

.paysubmitBtn {
    width: 100%;
    background: #ed6c44;
    color: #fff;
    font-size: 14px;
    border-radius: 8px;
    height: 40px;
    order: 4;
    animation: blink_v2 2.5s ease-in-out infinite;
}

@keyframes blink_v2 {
  0%   { opacity: 1; }
  70%  { opacity: 1; }
  75%  { opacity: 0.3; }
  80%  { opacity: 0; }
  85%  { opacity: 0.3; }
  90%  { opacity: 0.7; }
  100% { opacity: 1; }
}

.payMethodContainer label{
	font-size: 15px;
}

.payMethodWrap {
	padding: 12px 4px;
}

.payMethodWrap:not(:last-child) {
    border-bottom: var(--color--L-gray) 1px solid;
}

.tooltip-container {
    position: relative;
	margin-left: 5px;
	padding-top: 7px;
}

.tooltip-container i {
	font-size: 15px;
}

.tooltip-text {
    visibility: hidden;
    background-color: #efefef;
    color: #000;
    padding: 15px 20px;
    border-radius: 5px;
    position: absolute;
    top: 50%;
    left: 30px;
    transform: translateY(-50%);
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
	width: max-content;
	font-size: 12px;
	z-index: 10;
	border: 1px solid #999;
	word-break: keep-all;
}

.tooltip-text::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 100%;
  transform: translateY(-50%);
  border-width: 8px;
  border-style: solid;
  border-color: transparent #999 transparent transparent;
}

.tooltip-container:hover .tooltip-text {
    visibility: visible;
    opacity: 1;
    transition-delay: 0.3s;
}

@media(max-width:1200px){
	.payContainer {
    	grid-template-columns: 1fr;
    	gap: 0;
	}
	.payHeader
	, .payBody
	, .payMethodContainer label{
		font-size: 15px;
	}
	
	.payBlock{
		padding: 16px;	
	}
	
    .tooltip-text {
        top: 110%;
        left: 50%;
        transform: translateX(-45%);
        margin-top: 8px;
        z-index: 10;
        min-width: 300px;
		width: min-content;
    }

    .tooltip-text::after {
        top: -16px;
        left: 45%;
        right: auto;
        transform: translateX(-50%);
        border-color: transparent transparent #999 transparent;
    }
    
    .tooltip-text.v2{
    	transform: translateX(-35%);
    }
    
    .tooltip-text.v2::after{
    	left: 35%;;
    }
    
    .emoneyInput {
        flex-direction: column;
        align-items: flex-start;
        font-size: 15px;
    }
    .emoneyInput span:first-child {
        width: 100%;
        margin-bottom: 10px;
    }

    .emoneyInput .input-container {
        display: flex;
        width: 100%;
    }
    
    .payNumBtns {
		flex-wrap: wrap;
		justify-content: flex-start;
    }
    
    .payBlock.order-3{
    	order: 3;
    }
	
}

/* 결제 페이지 End */

/* 입금신청서 배송정보 */
.packContainer {
    display: grid;
    grid-template-columns: 1.7fr 1fr;
    gap: 10px;
    margin-top: 20px;
	margin-bottom: 50px;
}

.packContainer label
, .payContainer label {
	font-weight: normal;
	margin-bottom: 0;
	cursor: pointer;
	display: inline-flex;
    gap: 5px;
    align-items: flex-start;
}

span.label-align {
    display: flex;
    align-items: normal;
}

.packContainer input[type=text]
, .packContainer textarea {
	font-size: 14px;
}


.packLeft {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.packLeft a{
	color: #333;
}

.packUser {
	display: flex;
    border: var(--color--D-gray) 1px solid;
    border-radius: 8px;
    padding: 10px 16px;
	flex-direction: column;
}

.packUserContainer {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	width: 100%;
}

.packUserid {
	font-weight: bold;
	font-size: 16px;
	align-self: center;
}

.packUser-right-group {
	display: flex;
	align-items: flex-start;
	gap: 5px;
}

.packUser-right-wrap {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
}

.packUser-row-top{
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 5px;
}

.packUser-row-bottom {
	display: flex;
	gap: 5px;
}

.packUser .sm-text{
	flex-basis: 100%;
	display: flex;
    justify-content: end;
}

.packItem {
	grid-column: 1;
	border: var(--color--L-gray) 1px solid;
    border-radius: 8px;
    padding: 16px 16px 4px 16px;
}

.packItemCont {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.ali-center {
	display: flex;
    align-items: center;
    gap: 10px;
}

.packItemCont.line {
	border-top: var(--color--L-gray) 1px solid;
	padding: 12px 0px;
}

.packDelivery {
    display: flex;
    flex-direction: column;
    gap: 12px;
	border: var(--color--L-gray) 1px solid;
	padding: 16px;
    border-radius: 8px;
	align-self: start;
}

.packDeliveryForm1{
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 10px;
}

.packDelivery .input-title{
	font-size: 15px;
	width: 110px;
}

.packItemname {
    position: relative;
    margin-bottom: 12px;
}

.packItemname .item-name {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    white-space: normal;
    word-break: break-word;
    max-width: 100%;
    position: relative;
	margin-top: 8px;
	font-weight: bold;
	font-size: 16px;
	line-height: 1.5em;
/*     height: 3em; */
    text-overflow: ellipsis;
}

.packItemname .more-btn {
    display: none;
    cursor: pointer;
	float: right;
}

.payBlock.leftBlock {
	grid-column: 1;
}

.payBlock.rightBlock {
	grid-column: 2;
}

.payBlock hr {
    margin-top: 10px;
    margin-bottom: 0;
    border-top: var(--color--L-gray) 1px solid;
}

.packItem, .packDelivery, packService {
    overflow: hidden;
    transition: max-height 0.3s ease-in-out;
}

.packItem.hidden, .packDelivery.hidden, packService.hidden {
    max-height: 0 !important;
}

.foldPack {
	display: none;
}

.pay-cash {
	font-size: 16px;
}

.pay-cash label{
	display: flex;
	gap: 5px;
    align-items: baseline;
}

.pay-cash.line {
	border-bottom: var(--color--L-gray) 1px solid;
    padding-bottom: 10px;
}

@media(max-width:1200px){
	.packContainer {
    	grid-template-columns: 1fr;
		margin-bottom: 25px;
	}
	
	.foldPack {
		display: inline-block;
		margin-left: 4px;
		align-items: center;
		align-self: center;
	}
	
	.packUserid {
		font-size: 14px;
	}

	.packDelivery {
		padding: 12px 16px 16px 16px;
	}
	
	.packDelivery .input-title{
		font-size: 14px;
	}
	
	.packItemCont.column {
		flex-direction: column;
	}
	
	.packItemname .item-name {
		font-size: 15px;
	}
	
	.delveryOpt {
	    display: flex;
	    flex-wrap: wrap;
	    flex: 1;
	    min-width: 30px;
	    justify-content: end;
	}
}

/* 판매자입점 */
.sell-exTitle {
	display: flex;
	justify-content: space-between;
	background-color: #E9E9E9;
	align-items: center;
	padding: 0px 20px;
	border-radius: 10px;
}

.Ttxt2 {        
  padding: 40px 0px 0px 0px;
  font-weight: 600;
  font-size: 28px;
  line-height: 1.5;
  padding: 20px;
}    

.Tbtn > a{
	background-color: #ffffff;
	color: #333;
	border: 1px solid #ccc;
	border-radius: 10px;
	padding: 6px 14px;
	font-size: 14px;
	font-weight: 500;
}

.Ttxt-list {
  padding: 0px 0px 20px 0px;
  font-weight: 600;
  font-size: 20px;
}    

/* 섹션 스타일 */
.sel-section {
  border-bottom: 1px solid #E9E9E9;
  padding: 30px 0;
}

.sel-section:last-child {
  border-bottom: none;
}

.sel-box,
.sel-box2 {
  display: flex;
  flex-direction: row;
  gap: 20px;
  align-items: flex-start;
  flex-wrap: wrap;   
}

/* 판매자 정보 영역 */
.sel-info {
  display: flex;
  align-items: center;
  flex: 1 1 340px;
  max-width: 380px;
  border: 1px solid #E9E9E9;
  padding: 20px;
  border-radius: 8px;
  box-sizing: border-box;
}

.sel-info .sel-thumb {
  width: 78px;
  height: 78px;
  background: #ddd;
  border-radius: 50%;
  margin: 10px 16px 10px 0;
  flex-shrink: 0;
}

.sel-info .sel-thumb img {
  width: 100%;
  height: 100%;
  background: #ddd;
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);  
  object-fit: cover;   
}

.sel-box2 .sel-slide-image{
  	max-width: 150px;
}

.sel-box .sel-slide-image{
  	max-width: 250px;
}

.sel-wrap {
  flex: 1;
  min-width: 0;
  font-size: 17px;    
}

.sel-wrap-info {  
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  min-width: 0;
  font-size: 17px;
}

.top-row {
  display: flex;
  align-items: flex-start;
  flex-wrap: nowrap;
  gap: 6px;
  justify-content: space-between;    
}

.name-id-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  min-width: 0;
}

.sel-name {
  font-weight: bold;
  white-space: nowrap;
}

/* ID 색상 옵션 - 기본값과 변형 */
.sel-id {
  display: flex;
  color: #555; /* 기본 색상 */
  white-space: nowrap;
  margin-right: 12px;
}

.sel-id.variant {
  color: #666; /* 변형 색상 */
}

.sel-id span {
  justify-items: center;
  font-weight: 700;    
}

.sel-desc {
  margin-top: 6px;
  font-size: 14px;
  color: #333;
  word-break: break-word;
}

.sel-info .sel-desc {
  font-size: 15px;
  color: #a9a9a9;
  margin-top: 8px;    
}

/* 등급 배지 (모든 등급 지원) */
.grade-badge {
  text-align: center;
  width: 64px;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 12px; 
  color: #fff;
  font-weight: 700;
} 

.VIP {
  background-color: #7044D5;
}    

.GOLD {
  background-color: #C79867;
}

.SILVER {
  background-color: #B5B8C4;
}

.NORMAL {
  background-color: #134899;
}    

/* 컨텐츠 래퍼 */
.sel-content-wrapper {
  display: contents; 
}

/* 스와이퍼 영역 */
.sel-section .swiper-prd {
  width: 100%;
  flex: 3;
  min-width: 0;
  overflow: hidden;
  touch-action: pan-y pinch-zoom;      
} 

.sel-section .swiper-wrapper {
  width: 100%;
}

.sel-section .swiper-slide {
  cursor: pointer !important;        
  text-align: left;
  font-size: 14px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 0 4px;
  box-sizing: border-box;
}


.sel-section .sel-slide-image {    
  width: 100%;
  aspect-ratio: 4/4;
  background: #eee;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
  border: 1px solid #E9E9E9;
  overflow: hidden;
  position: relative;
}

.sel-section .sel-slide-image img {   
  width: 100%;
  height: 100%;
  object-position: center center;
  object-fit: contain;
  border-radius: 6px;
  transition: transform 0.3s ease;
  padding: 5px;
}

/* 구형 브라우저 지원을 위한 대체 방법 */
@supports not (aspect-ratio: 4/4) {
  .sel-section .sel-slide-image {
    height: 0;
    padding-bottom: 100%; /* 1:1 비율 = 100% */
    min-height: unset;
  }
  
  .sel-section .sel-slide-image img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
}

.sel-section .sel-slide-image:hover img {
  transform: scale(1.1);
}

.sel-section .sel-slide-title {
  font-size: 14px;
  color: #333;
  display: -webkit-box;  
  -webkit-box-orient: vertical; 
  overflow: hidden;            
  -webkit-line-clamp: 2; 
  text-overflow: ellipsis; 
  margin-bottom: 2px;
}

/* 스와이퍼 활성화 효과 (옵션) */
.sel-section .swiper-slide,
.sel-section .swiper-wrapper,
.sel-section .swiper-container {
  overflow: visible !important;
}

.sel-section .swiper-slide.swiper-slide-active {
  transform: scale(1.03);
  z-index: 10;
  position: relative;
}

.sel-section .swiper-slide.active .sel-slide-image {
  position: relative;
  border-radius: 12px;
  background: #111;
  background-size: 400% 400%;
  animation: gradientShift 3s ease infinite;
  padding: 4px;
}

.sel-section .swiper-slide .sel-slide-image img {
  border-radius: 9px;
}

@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.sel-section .swiper-slide.active  .sel-slide-title {
  font-weight: 600;
}

/* 전체보기 링크 */
.sel-more-link {
  display: flex;
  flex-direction: column;
  text-align: center;
  gap: 8px;
  align-items: center;
  flex-shrink: 0;
  align-self: center; 
}

.sel-more-link a {
  display: flex;
  text-decoration: none;
  color: #777;
  font-size: 14px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4px;
}

.sel-more-link a:hover {
  color: #555;
}   

/* 모바일용 더보기 슬라이드 (JS에서 동적 생성) */
.more-slide {
  cursor: pointer;
  text-align: left;
  font-size: 14px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 0 4px;
  box-sizing: border-box;
}

.view-all-image {
  width: 100%;
  aspect-ratio: 4/4;
  min-height: 120px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
  transition: all 0.3s ease;
}

.view-all-content a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: #777;
  font-size: 12px;
  font-weight: 500;
}

.view-all-content a:hover {
  color: #555;
}   

/* 태블릿 */
@media (max-width: 1024px) {
  .sel-info {
    flex: 1 1 100%;
    max-width: 380px;
  }
}

/* 모바일 */
@media (max-width: 768px) {
  .sell-exTitle{
	flex-direction: column;
	padding: 0px 20px 25px 20px;
  }
  
  .Ttxt2 {        
    padding: 35px 0px 20px 0px;
    font-weight: 600;
    font-size: 26px;
    line-height: 1.4;
  }     

  .Ttxt-list {
    padding: 25px 0px 20px 0px;
    font-weight: 600;
    font-size: 18px;
  }            

  .sel-box,
  .sel-box2 {
    flex-direction: column;
    gap: 20px;
    width: 100%;
  }

  /* .sel-box2 전용 스타일 */
  .sel-box2 {
    gap: 0px;
  }

  .sel-info {
    flex-direction: row;
    width: 380px;
    max-width: 100%;
    align-items: center;
    padding: 20px;
  }

  .sel-info .sel-desc {
    margin-top: 2px;    
  }

  .sel-wrap {
    font-size: 15px;
  } 

  .sel-wrap-info {
    font-size: 15px;
  } 

  .sel-info .sel-thumb {
    width: 60px;
    height: 60px;
    margin: 0 15px 0 0;
  }

  .sel-content-wrapper {
    display: flex;
    flex-direction: row;
    gap: 10px;
    align-items: center;
    width: 100%;
  }

  .swiper-prd {
    flex: 1;
    width: 100%;
    overflow: hidden;
  }

  .sel-slide-image {
    font-size: 12px;
  }

  .sel-slide-title {
    font-size: 14px;
  }

  .sel-more-link {
    display: none;
  }

  .sel-more-link.slide-version {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    padding: 0 4px;
    box-sizing: border-box;
  }

  .sel-more-link.slide-version .view-all-image {
    width: 100%;
    height: 122px;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border: 2px dashed #dee2e6;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;
    transition: all 0.3s ease;
    aspect-ratio: unset; /* 모바일에서는 고정 높이 사용 */
  }

  .sel-more-link.slide-version .view-all-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: #6c757d;
    font-size: 12px;
    font-weight: 500;
  }

  .sel-more-link.slide-version .view-all-title {
    font-size: 14px;
    color: #333;
    display: -webkit-box;  
    -webkit-box-orient: vertical; 
    overflow: hidden;            
    -webkit-line-clamp: 2; 
    text-overflow: ellipsis;
  }
}

/* 소형 모바일 */
@media (max-width: 480px) {
  .sel-section {
    padding: 20px 0;
  }

  .sel-id {
    font-size: 0.95em;
  }

  .sel-info .sel-desc {
	font-size: 0.9em;
  }

  .sel-slide-title {
    font-size: 13px;
  }

  .sel-slide-image {
    min-height: 100px;
  }
}

/* //판매자입점 */