@font-face {
    font-family: 'Suit';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_suit@1.0/SUIT-Bold.woff2') format('woff2');
    font-weight: 700;
    font-display: swap;
}
:root{
	--default-margin:12px;
	
	--color-primary: #33D3D4;
	--color-basic: #000;
	--color-secondary:#515157;
	--color-tertiary:#7d7d81;
	--color-danger:#f00a0a;
	--color-success:#69bc20;
	--color-muted:#a8a8ab;
	--color-basic2: #404040;
	--color-blue:#2562FF;
	
	--color-bordered:#d4d4d5;
	
	--element-height:41px;
	--element-height-small:36px;
	--element-height-mini:20px;
}
*{
	margin:0;
	padding:0;
	box-sizing: border-box;
}
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
}
input:focus{
	outline:0;
}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
	-webkit-appearance: none;
}
input[type="number"] {
	-moz-appearance: textfield;
}
input[type="checkbox"],
input[type="radio"] {
	-webkit-appearance: none; /* 웹킷 기반 브라우저 초기화 */
	-moz-appearance: none; /* 파이어폭스 초기화 */
	appearance: none; /* 기본 스타일 초기화 */
	margin: 0;
	padding: 0;
	outline: none;
	background: none;
	border: none;
	cursor: pointer;
	background-color:#fff;
}
input[type="checkbox"]{
	border:1px solid var(--color-bordered);
	border-radius:4px;
	width:24px;
	height:24px;
}
input[type="checkbox"]:checked{
	background-color:var(--color-primary);
	border-color:var(--color-primary);
	position:relative;
}
input[type="checkbox"]:checked::before{
	content: '';
	display: inline-block;
	position:absolute;
	left:50%;
	top:50%;
	transform:translate(-50%,-50%);
	width: 18px;
	height: 18px;
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23FFFFFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12l5 5L20 7"/></svg>');
	background-size: contain;
	background-repeat: no-repeat;
}
input[type="radio"]{
	border:1px solid var(--color-bordered);
	border-radius:50%;
	width:24px;
	height:24px;
	position:relative;
}
input[type="radio"]:checked{
	border-color:var(--color-primary);
}
input[type="radio"]:checked::before{
	content:'';
	width:14px;
	height:14px;
	position:absolute;
	left:50%;
	top:50%;
	transform:translate(-50%,-50%);
	background-color:var(--color-primary);
	border-radius:50%;
}
select{
	-webkit-appearance: none; /* 웹킷 기반 브라우저 초기화 */
	border:1px solid var(--color-bordered);
	height:var(--element-height);
	border-radius:8px;
	padding:12px 16px;
	font-size:1rem;
	background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23191919" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 9L12 16L19 9"/></svg>') no-repeat calc(100% - 1rem) center;
	background-size:14px 14px;
	padding-right:2.5rem;
}
textarea{
	border:1px solid var(--color-bordered);
	min-height:200px;
	padding:12px 16px;
	font-size:1rem;
	border-radius:8px;
	width:100%;
}

div:after,
section:after,
ul:after{
	content:'';
	display:block;
	clear:both;
}

.bg-white{
	background-color:#fff!important;
}

hr{
	border:0;
	margin:0;
	padding:0!important;
	height:80px;
}
.hr-clear{
	clear:both;
	margin:0;
	padding:0;
	border:0;
	height:1px;
}
.hr-32{
	border:0;
	margin:32px 0;
}
.hr-24{
	border:0;
	margin:24px 0;
}
.hr-20{
	border:0;
	margin:20px 0;
}
.hr-bold-line{
	height:2px;
	background-color:#191919;
}
.hr-light-line{
	height:1px;
	background-color:var(--color-bordered);
}
.hidden,
.flex.hidden{
	display:none!important;
}
.fluid{
	width:100%;
	object-fit:cover;
}

button{
	cursor:pointer;
}
html{
	font-size:14px;
}
body{
	font-family:'Pretendard',sans-serif;
	line-height:24px;
	color:var(--color-basic);
	letter-spacing:-2.5%;
	line-height:1.44;
	-webkit-font-smoothing: antialiased; /* 크롬, 사파리 */
	-moz-osx-font-smoothing: grayscale;   /* 파이어폭스 (MacOS) */
	font-smooth: always;
	background-color:#fff;     
}
body.active{
	overflow:hidden;
}

/*
	Default
*/
a{
	text-decoration:none;
	color:var(--color-basic);
}
a.arrow-right{
	background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23A8A8AB" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 5L16 12L9 19"/></svg>') no-repeat right center;
	padding-right:1rem;
	background-size:.8em;
}
ul{
	list-style:none;
}
ol{
	list-style-position: inside;
}
ol > li{
	line-height:20px;
}

p{
	color:var(--color-tertiary);
	line-height:20px;
	margin-bottom:32px;
	font-size:1rem;
}
.color-basic p{
	color:var(--color-basic);
}
.color-blue{
	color:var(--color-blue)!important;
}
.text-16 p{
	font-size:16px;
	line-height:24px;
}

.pipe{
	color:var(--color-bordered);
	padding:0 8px;
	font-size:.8em;
	display:inline-flex;
	align-items:center;
}
.radius,
.radius-6{
	border-radius:6px!important;
}
.radius-12{
	border-radius:12px!important;
}
.no-bordered{
	border:0!important;
}

/*
	container
*/
[class*=container]{
	/*
	padding-left:1rem;
	padding-right:1rem;
	*/
}
.container{
	width:100%;
	min-width:1152px;
	max-width:1152px;
	margin:0 auto;
}
.container-expand{
	width:100%;
	min-width:1720px;
	max-width:1720px;
	margin:0 auto;
}
.container-small{
	width:100%;
	min-width:480px;
	max-width:480px;
	margin:0 auto;
}
.container-medium{
	width:100%;
	min-width:720px;
	max-width:720px;
	margin:0 auto;
}
.container-980{
	width:100%;
	min-width:980px;
	max-width:980px;
	margin:0 auto;
}
.container-fluid{
	width:100%;
	min-width:100%;
	max-width:100%;
}

.no-wrap{
	white-space:nowrap;
}

/*
	Margin @ Default Margin = 12px;
*/
.margin-top{
	margin-top:calc(var(--default-margin))!important;
}
.margin-top-x2{
	margin-top:calc(var(--default-margin)  * 2)!important;
}
.margin-top-x3{
	margin-top:calc(var(--default-margin)  * 3);
}
.margin-top-x4{
	margin-top:calc(var(--default-margin)  * 4);
}
.margin-top-4{
	margin-top:4px!important;
}
.margin-top-8{
	margin-top:8px!important;
}
.margin-top-16{
	margin-top:16px;
}
.margin-top-32{
	margin-top:32px;
}
.margin-top-35{
	margin-top:35px;
}
.margin-top-56{
	margin-top:56px;
}
.margin-top-64{
	margin-top:64px;
}

.margin-left-x2{
	margin-left:24px;
}
.margin-left-4{
	margin-left:4px;
}

.margin-bottom{
	margin-bottom:calc(var(--default-margin))!important;
}
.margin-bottom-x2{
	margin-bottom:calc(var(--default-margin)  * 2);
}
.margin-bottom-x3{
	margin-bottom:calc(var(--default-margin)  * 3);
}
.margin-bottom-x4{
	margin-bottom:calc(var(--default-margin)  * 4);
}
.margin-bottom-8{
	margin-bottom:8px;
}
.margin-bottom-16{
	margin-bottom:16px!important;
}
.margin-bottom-32{
	margin-bottom:32px!important;
}
.margin-bottom-56{
	margin-bottom:56px;
}

.padding-left{
	padding-left:var(--default-margin);
}
.padding-24{
	padding:24px!important;
}
.padding-32{
	padding:32px!important;
}

.pl20{
	padding-left:20px!important;
}
.pl26{
	padding-left:26px!important;
}
.pl32{
	padding-left:32px!important;
}
.p0{
	padding:0!important;
}
.pb0{
	padding-bottom:0!important;
}
.pb50{
	padding-bottom:50!important;
}
.mt0{
	margin-top:0!important;
}
.mt3{
	margin-top:3px!important;
}
.mt300{
	margin-top:300px!important;
}
.pt248{
	padding-top:248px!important;
}
.pt300{
	padding-top:300px!important;
}
.mt5{
	margin-top:5px!important;
}
.mt-5{
	margin-top:-5px!important;
}
.mb0{
	margin-bottom:0!important;
}
.mb18{
	margin-bottom:18px!important;
}
.mb40{
	margin-bottom:40px!important;
}
.mt4{
	margin-top:4px!important;
}
.mt13{
	margin-top:13px!important;
}
.mt18{
	margin-top:18px!important;
}
.mt20{
	margin-top:20px!important;
}
.mt29{
	margin-top:29px!important;
}
.mt34{
	margin-top:34px!important;
}
.mt36{
	margin-top:36px!important;
}
.mt38{
	margin-top:38px!important;
}
.ml4{
	margin-left:4px!important;
}
.mr8{
	margin-right:8px!important;
}
.ml8{
	margin-left:8px!important;
}
.ml12{
	margin-left:12px!important;
}
.ml14{
	margin-left:14px!important;
}
.ml24{
	margin-left:24px!important;
}
.ml30{
	margin-left:30px!important;
}
.ml50{
	margin-left:50px!important;
}
.mt4{
	margin-top:4px!important;
}
.mt8{
	margin-top:8px!important;
}
.mt10{
	margin-top:10px!important;
}
.mt16{
	margin-top:16px!important;
}
.mt20{
	margin-top:20px!important;
}
.mt32{
	margin-top:32px!important;
}
.mt40{
	margin-top:40px!important;
}
.mt50{
	margin-top:50px!important;
}
.mt56{
	margin-top:56px!important;
}
.mt60{
	margin-top:60px!important;
}
.mt100{
	margin-top:100px!important;
}
.mt80{
	margin-top:80px!important;
}
.mb16{
	margin-bottom:16px!important;
}
.mb80{
	margin-bottom:80px!important;
}
.mb32{
	margin-bottom:32px!important;
}
.pt24{
	padding-top:24px!important;
}
.pt32{
	padding-top:32px!important;
}
.pb32{
	padding-bottom:32px!important;
}
.pb40{
	padding-bottom:40px!important;
}
.p0{
	padding:0!important;
}

.lh1{
	line-height:1;
}
.mh1000{
	min-height:1000px!important;
	align-items:baseline!important;
}


/*
	Width
*/
.w368{
	width:368px!important;
}
.w388{
	width:388px!important;
}
.w95{
	width:95px!important;
}
.w60{
	width:60px!important;
}
.w80{
	width:100px!important;
}
.w100{
	width:100px!important;
}
.w106{
	width:106px!important;
}
.w160{
	width:160px!important;
	min-width:160px!important;
}
.w200{
	width:200px!important;
	min-width:200px!important;
}
.w50p{
	width:50%!important;
}
.w100p{
	width:100%!important;
}
.w140{
	width:140px!important;
	min-width:140px!important;
}
.w150{
	width:150px!important;
	min-width:150px!important;
}
.w227{
	width:227px!important;
}
.w307{
	width:307px!important;
}
.w310{
	width:310px!important;
}
.w312{
	width:312px!important;
}
.w314{
	width:314px!important;
}
.w344{
	width:344px!important;
}
.w469{
	width:469px!important;
}
.w480{
	width:480px!important;
}
.w537{
	width:537px!important;
}
.width-1198{
	width:1198px!important;
}
.width-971{
	width:971px!important;
}
.width-980{
	width:980px;
}
.width-970{
	width:970px!important;
}
.width-960{
	width:960px!important;
}
.width-800,
.w800{
	width:800px!important;
}
.width-720,
.w720{
	width:720px!important;
}

.fw400{
	font-weight:400!important;
}
.fw600{
	font-weight:500!important;
}
.h80{
	height:80px!important;
}

.dpb{
	display:block!important;
}
.dpib{
	display:inline-block!important;
}

/*
	Flex
*/
.flex{
	display:flex!important;
	justify-content:space-between;
	width:100%;
}
.flex .flex__col{
	flex:1 1 auto;
}
.flex .flex__col:last-child{
	text-align:right;
	display:flex;
	justify-content:flex-end;
}

.flex.v-center{
	align-items:center;
}

.flex.flex-start{
	justify-content:flex-start;
}
.flex.flex-start .flex__col{
	flex:0;
	white-space:nowrap;
}
.flex.flex-start .flex__col:last-child{
	justify-content:normal;
	padding-left:1rem;
}
.flex.flex-start label{
	margin:0;
}

.flex-inline{
	display:inline-flex!important;
}

/*
	Heading
*/
h1,h2,h3,h4,h5,h6{
	font-weight:600;
	display:inline-block;
}

.title{
	font-size:32px;
	line-height:46px;
	margin-bottom:32px;
}
.title1{
	font-size:24px;
	line-height:32px;
	margin-bottom:24px;
}
.title2,
.modal-title{
	font-size:18px;
	line-height:26px;
	margin-bottom:20px;
}
.title3{
	font-size:16px;
	line-height:24px;
}
.title4{
	font-size:14px;
	line-height:20px;
	margin-bottom:8px;
	letter-spacing:-0.35px;
}

.title-underline{
	border-bottom:2px solid #191919;
	display:block;
	padding-bottom:12px;
}

/*
	width
*/
.w100{
	width:100px!important;
	min-width:100px!important;
}
.w120{
	width:120px!important;
	min-width:120px!important;
}
.w800{
	width:800px!important;
	min-width:800px!important;
}

/*
	Text
*/
strong,
.strong{
	font-weight:600;
	display:inline-block;
}
.text-24{
	font-size:24px!important;
	line-height:32px;
}
.text-18{
	font-size:18px!important;
	line-height:26px;
}
.text-16{
	font-size:16px!important;
	line-height:24px;
}
.text-14{
	font-size:14px!important;
	line-height:20px;
}
.text-13{
	font-size:13px!important;
	line-height:18px;
}
.more{
	color:var(--color-tertiary);
	font-size:14px;
}
.color-basic{
	color:var(--color-basic)!important;
}
.color-primary{
	color:var(--color-primary)!important;
}
.color-success{
	color:var(--color-success)!important;
}
.color-danger{
	color:var(--color-danger)!important;
}
.color-secondary{
	color:var(--color-secondary)!important;
}
.color-tertiary{
	color:var(--color-tertiary)!important;
}
.color-muted{
	color:var(--color-muted)!important;
}
.color-light{
	color:#fff!important;
}


.align-left{
	text-align:left!important;
	justify-content:flex-start!important;
}
.align-center{
	text-align:center!important;
	justify-content:center!important;
}
.align-right{
	text-align:right!important;
	justify-content:flex-end!important;
}

.relative{
	position:relative;
}
.prt{
	position:absolute;
	right:1rem;
	top:1rem;
}
.prt0{
	position:absolute;
	right:0rem;
	top:0rem;
}
.prt2{
	position:absolute;
	right:2rem;
	top:2rem;
}

.with-icon{
	display:inline-flex;
	align-items:center;
}
.white-space{
	white-space:nowrap;
}

/*
	Listing
*/
ul > li{
	display:inline-flex;
	align-items:center;
}
.list-block > li{
	display:block;
}
.list-block.gap-16 > li{
	padding-bottom:16px;
}
.list-block.gap-24 > li{
	padding-bottom:24px;
}

.list-block.list-divider > li{
	border-bottom:1px solid #D4D4D5;
	padding-bottom:20px;
	margin-bottom:20px;
}

.list-block.list-gap-24 > li{
	padding-bottom:24px;
}

.list-qa{
	padding:0;
	display:table;
}
.list-qa > li{
	display:table-row;
	width:100%;
	vertical-align:middle;
}
.list-qa > li:last-child{
	padding-bottom:0;
}
.list-qa > li .q,
.list-qa > li .a{
	display:table-cell;	
	padding-bottom:8px;
}
.list-qa > li .q{
	min-width:72px;
	font-weight:600;
	white-space:nowrap;
	padding-right:24px;
}
.list-qa > li .a{
	text-align:left;
	width:100%;
}

.list-qa.pb-4 > li .q,
.list-qa.pb-4 > li .a{
	padding-bottom:4px;
}

.list-qa.pb-12 > li .q,
.list-qa.pb-12 > li .a{
	padding-bottom:12px;
}
.list-qa.pb-16 > li .q,
.list-qa.pb-16 > li .a{
	padding-bottom:16px;
}

.list-qa > li:last-child .q,
.list-qa > li:last-child .a{
	padding-bottom:0;
}

.list-qa.space-between > li .a{
	text-align:right;
}

.list-qa.list-qa-half{
	display:flex;
}
.list-qa.list-qa-half > li{
	display:flex;
	flex-wrap:wrap;
}
.list-qa.list-qa-half > li{
	width:25%;
}
.list-qa.list-qa-half > li .qa-group{
	display:flex;
	margin-bottom:12px;
}
.list-qa.list-qa-half > li .qa-group + .qa-group{
	margin-left:100px;
}
.list-qa.list-qa-half > li .q{
	width:104px;
	min-width:104px;
	flex:0 1 auto;
	background:url('../img/ico_check.svg') no-repeat left 2px;
	background-size:18px;
	padding-left:22px;
	font-weight:400;
	margin-right:12px;
}
.list-qa.list-qa-half > li .q.active{
	color:var(--color-primary);
	background-image:url('../img/ico_check_active.svg');
}
.list-qa.list-qa-half > li .a{
	width:100%;
	padding-left:22px;
	padding-bottom:0;
}

.list-qa .list-qa__5-5{
}
.list-qa .list-qa__5-5 .q{
	width:120px;
	min-width:120px;
}
.list-qa .list-qa__5-5 .a{
	width:137px;
	min-width:137px;
}

/* list accordion */
.list-accordion > li{
	display:block;
}
.list-accordion > li > .q{
	font-size:16px;
	cursor:pointer;
	font-weight:600;
	display:block;
	padding:12px 0;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpolyline points='6,9 12,15 18,9' fill='none' stroke='black' stroke-width='2'/%3E%3C/svg%3E");
	background-repeat:no-repeat;
	background-position:right center;
  background-size: 16px;
}
.list-accordion > li.active > .q{
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpolyline points='6,15 12,9 18,15' fill='none' stroke='black' stroke-width='2'/%3E%3C/svg%3E");
}
.list-accordion > li > .a{
	display:none;
}
.list-accordion > li.active > .a{
	display:block;
	margin-bottom:12px;
}
.list-accordion > li.active > .a [class*=box]{
	border-radius:0;
}



.list{
	display:flex;
	flex-wrap:wrap;
	margin-left:-20px;
}
.list > li{
	padding-left:20px;
	padding-bottom:54px;
}
.list.list-column-3 > li{
	width:33.333%;
}
.list.list-column-4 > li{
	width:25%;
}
.list.list-column-5 > li{
	width:20%;
}
/*
.list.list-column-5 > li:nth-last-child(1),
.list.list-column-5 > li:nth-last-child(2),
.list.list-column-5 > li:nth-last-child(3),
.list.list-column-5 > li:nth-last-child(4),
.list.list-column-5 > li:nth-last-child(5){
	padding-bottom:0;
}*/
.list.list-column-6 > li{
	width:16.6666667%;
}
/*
.list.list-column-6 > li:nth-last-child(1),
.list.list-column-6 > li:nth-last-child(2),
.list.list-column-6 > li:nth-last-child(3),
.list.list-column-6 > li:nth-last-child(4),
.list.list-column-6 > li:nth-last-child(5),
.list.list-column-6 > li:nth-last-child(6){
	padding-bottom:0;
}*/
.list.list-column-7 > li{
	width:14.29%;
}
.list.list-column-8 > li{
	width:12.5%;
}

.list.list-column-12{
}
.list.list-column-12 > li{
	width:8.3333%;
}

.list.list-small > li{
	padding-left:16px;
}
.list.list-mini{
	margin-left:-8px;
}
.list.list-mini > li{
	padding-left:8px;
	padding-bottom:8px;
}
.list.list-mini > li .btn{
	white-space:nowrap;
}
.list.pb0 > li{
	padding-bottom:0!important;
}
.list.list-pl16{
	margin-left:-16px;
}
.list.list-pl16 > li{
	padding-left:16px;
	padding-bottom:16px;
}
.list.list-pl20{
	margin-left:-20px;
}
.list.list-pl20 > li{
	padding-left:20px;
	padding-bottom:20px;
}
.list.list-pb16 > li{
	padding-bottom:16px;
}
.list.list-pb24 > li{
	padding-bottom:24px;
}




.list.pb-32 > li{
	padding-bottom:32px;
}

/* list radius :: list의 item img의 radius일괄 변경 */
.list-radius-8 .item .item__head img{
	border-radius:8px!important
}

.grid.grid-5-5{
	display:flex;
}
.grid.grid-5-5 > .grid__col{
	flex:1 1 auto;
	width:50%;
}
.grid.grid-gap-24{
	margin-left:-24px;
}
.grid.grid-gap-24 > .grid__col{
	padding-left:24px;
}
.grid.grid-gap-32{
	margin-left:-32px;
}
.grid.grid-gap-32 > .grid__col{
	padding-left:32px;
}

.grid.grid-pb0 > .grid__col{
	padding-bottom:0;
}

/*
	Table 
*/
caption{
	display:none;
}
.table{
	width:100%;
	border-collapse:collapse;
}
.table thead tr{
	border-bottom:1px solid var(--color-bordered);
}
.table thead tr th{
	font-weight:600;
	padding-bottom:12px;
	text-align:left;
}
.table tbody tr td{
	padding:12px 0;
}
.table-badge{
	display:inline-flex;
	padding:5px 8px;
	text-align:center;
	border:1px solid var(--color-bordered);
	border-radius:6px;
	height:28px;
	align-items:center;
	justify-content:center;
	font-size:13px;
}
.table-badge.danger{
	color:var(--color-danger);
	border-color:var(--color-danger);
}
.table-badge.primary{
	color:var(--color-primary);
	border-color:var(--color-primary);
}
.table-badge.muted{
	color:#8D8D90;
	background-color:#F8F8FA;
	border-color:#F8F8FA;
}

.ls-25p th,
.ls-25p td{
	letter-spacing:-0.5px!important;
}

/*
	Nav
*/
.nav-tab .nav > ul{
	display:flex;
	justify-content:space-between;
	border-bottom:1px solid var(--color-bordered);
}
.nav-tab .nav > ul > li{
	display:block;
	width:100%;
}
.nav-tab .nav > ul > li > a{
	display:block;
	text-align:center;
	padding:14px 16px;
	color:var(--color-secondary);
	font-size:16px;
}
.nav-tab .nav > ul > li.active > a{
	background-color:var(--color-primary);
	color:#fff;
	font-weight:600;
}

/* Nav Tab :: Underline */
.nav-tab.nav-tab-underline .nav > ul> li > a{
	border-bottom:2px solid transparent;
}
.nav-tab.nav-tab-underline .nav > ul> li.active > a{
	background-color:transparent;
	color:var(--color-basic);
	font-weight:600;
	border-color:var(--color-basic);
}

/* Nav Tab :: 좌측정렬 */
.nav-tab.flex-start .nav > ul{
	justify-content:flex-start;
}
.nav-tab.flex-start .nav > ul > li{
	white-space:nowrap;
	flex:0;
	min-width:164px;
}
.nav-tab.flex-start .nav > ul > li > a{
	padding-left:16px;
	padding-right:16px;
}

/* Nav Block :: 세로메뉴 */
.nav-block > ul > li{
	display:block;
	padding:8px 0;
	list-style:none;
}
.nav-block > ul > li > a{
	display:block;
}

.nav-tab .nav-tab-content{
	display:none;
}
.nav-tab .nav-tab-content.active{
	display:block;
}

/*
	Box
*/
.box{
	border:1px solid var(--color-bordered);
	padding:32px;
	border-radius:12px;
	background-color:#fff;
	color:var(--color-basic);
}
.box.box-small{
	padding:16px 20px;	
}
.box.box-small2{
	padding:20px 24px;
}

.box2{
	background-color:#f8f8fa;
	padding:20px 24px;
	border-radius:12px;
}
.box3{
	padding:32px;
	background-color:#fff;
	border-radius:12px;
}
.box4{
	background-color:#f8f8fa;
	padding:12px 16px;
	border-radius:12px;
}
.box4 .btn{
	min-width:53px;
	font-weight:400;
}

.box p:last-child,
.box2 p:last-child,
.box3 p:last-child{
	margin-bottom:0;
}

/*
	25.01.16 추가
*/
.box-guide{
	text-align:center;
	color:var(--color-tertiary);
}
.box-guide p{
	margin:0!important;
	position:relative;
	display:inline-block;
}
.box-guide p span{
	position:absolute;
	left:-3rem;
	top:50%;
	transform:translateY(-50%);
	display: inline-block;
	width: 20px;
	height: 20px;
	background: url("data:image/svg+xml,%3Csvg%20width%3D%2215%22%20height%3D%2218%22%20viewBox%3D%220%200%2015%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cg%20id%3D%22Group%22%3E%3Cpath%20id%3D%22Vector%20(Stroke)%22%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M9.16732%200.667969C9.62756%200.667969%2010.0007%201.04106%2010.0007%201.5013V4.83464H13.334C13.7942%204.83464%2014.1673%205.20773%2014.1673%205.66797C14.1673%206.12821%2013.7942%206.5013%2013.334%206.5013H10.0007C9.55862%206.5013%209.1347%206.32571%208.82214%206.01315C8.50958%205.70059%208.33398%205.27666%208.33398%204.83464V1.5013C8.33398%201.04106%208.70708%200.667969%209.16732%200.667969Z%22%20fill%3D%22%237D7D81%22/%3E%3Cpath%20id%3D%22Vector%20(Stroke)_2%22%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M3.33398%202.33464C3.11297%202.33464%202.90101%202.42243%202.74473%202.57871C2.58845%202.73499%202.50065%202.94695%202.50065%203.16797V14.8346C2.50065%2015.0556%202.58845%2015.2676%202.74473%2015.4239C2.90101%2015.5802%203.11297%2015.668%203.33398%2015.668H11.6673C11.8883%2015.668%2012.1003%2015.5802%2012.2566%2015.4239C12.4129%2015.2676%2012.5007%2015.0556%2012.5007%2014.8346V6.01315L8.82214%202.33464H3.33398ZM1.56622%201.4002C2.03506%200.931361%202.67094%200.667969%203.33398%200.667969H9.16732C9.38833%200.667969%209.60029%200.755766%209.75657%200.912046L13.9232%205.07871C14.0795%205.23499%2014.1673%205.44696%2014.1673%205.66797V14.8346C14.1673%2015.4977%2013.9039%2016.1336%2013.4351%2016.6024C12.9662%2017.0712%2012.3304%2017.3346%2011.6673%2017.3346H3.33398C2.67094%2017.3346%202.03506%2017.0712%201.56622%2016.6024C1.09738%2016.1336%200.833984%2015.4977%200.833984%2014.8346V3.16797C0.833984%202.50493%201.09738%201.86904%201.56622%201.4002Z%22%20fill%3D%22%237D7D81%22/%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
	background-size: 17px 17px;
	text-indent: -9999px;
	overflow: hidden;
	vertical-align: middle;
	margin-right: .5rem;
}

/*
	Badge
*/
.badge{
	min-width:39px;
	height:20px;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	border:1px solid var(--color-primary);
	color:var(--color-primary);
	font-size:12px;
	line-height:16px;
	padding:2px 4px;
	border-radius:2px;
}
.badge + .badge{
	margin-left:4px;
}
.badge.green{
	border-color:#69bc20;
	color:#69bc20;
}
.badge.black{
	border-color:#191919;
	color:#191919;
}
.badge.red{
	border-color:var(--color-danger);
	color:var(--color-danger);
}
.badge.white{
	border-color:var(--color-bordered);
	color:var(--color-basic);
}

.badge-group{
	display:inline-flex;
	align-items:center;
}

/*
	아이콘
*/
.kmark{ /* 증지발급 */
	display:inline-flex;
	align-items:center;
	background:url('../img/ico_k.png') no-repeat left center;
	background-size:20px 20px;
	padding-left:24px;
	color:var(--color-primary);
	height:20px;
	font-size:12px;
}

.btn_like{
	width:32px;
	height:32px;
	display:inline-block;
	background:url('../img/ico_heart.png') no-repeat center center;
	background-size:24px;
	border:0;
	text-indent:-1000em;
}
.btn_like.active{
	background-image:url('../img/ico_heart_active.png');
}

.kryx{
	display:inline-flex;
	align-items:center;
	background:url('../img/ico_kryx.png') no-repeat left center;
	background-size:13px 12.5px;
	color:var(--color-secondary);
	padding-left:17px;
}
.kryx-cert{
	display:inline-flex;
	align-items:center;
	background:url('../img/ico_cert.png') no-repeat left center;
	background-size:13px 12.5px;
	color:var(--color-secondary);
	padding-left:17px;
}

.link_download{
	background:url('../img/ico_download.svg') no-repeat right center #fff;
	padding-right:1.5rem;
	white-space:nowrap;
}


/*
	Btn
*/
.btn{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	background-color:#fff;
	border:0;
	min-width:68px;
	color:var(--color-basic);
	border-radius:20px;
	text-align:center;
	height:calc(var(--element-height));
	font-weight:700;
	padding:8px 12px;
	font-size:20px;
	border:1px solid var(--color-bordered);
	padding: 8px 12px 8px 24px;
	display: flex;
	width: 259px;
	height: 55px;
	padding: 1px 4px 1px 13px;
	justify-content: center;
	align-items: center;
	flex-shrink: 0;
	border-radius: 20px;
background: #33D3D4;
box-shadow: 0 14px 40px 0 rgba(51, 211, 212, 0.33);
}
.btn img{
	height:24px;
}
.btn.btn-small2{
	height:var(--element-height);
}
.btn.btn-small{
	font-size:14px;
	height:var(--element-height-small);
}
.btn.btn-mini{
	height:var(--element-height-mini);
}
.btn.btn-tiny{
	font-size:13px;
	font-weight:400;
	height:28px;
	padding-left:2px;
	padding-right:2px;
}
.btn.btn-fluid{
	width:100%;
	display:flex;
}
.btn.btn-oval{
	border-radius:100px;
}
.btn.btn-wide{
	padding-left:20px!important;
	padding-right:20px!important;
}

.btn.btn-primary{
	border-color:var(--color-primary);
	background-color:var(--color-primary);
	color:#fff;
}
.btn.btn-secondary{
	border-color:var(--color-secondary);
	background-color:var(--color-secondary);
	color:#fff;
}
.btn.btn-muted{
	border-color:#F2F2F2;
	background-color:#F2F2F2;
	color:var(--color-muted);
}
.btn.btn-select{
	border-color:var(--color-bordered);
	color:var(--color-secondary);
	padding:10px 16px;
	font-size:16px;
	font-weight:400;
	border-radius:100px;
}
.btn.btn-outline{
	background-color:#fff;
	border-color:var(--color-bordered);
	color:var(--color-tertiary);
}
.btn.btn-primary.btn-outline{
	border-color:var(--color-primary);
	color:var(--color-primary);
}
.btn.btn-secondary.btn-outline{
	border-color:var(--color-secondary);
	color:var(--color-secondary);
}
.btn.btn-kakao{
	background:url('../img/ico_kakao.png') no-repeat 37% center;
	background-size:16px 16px;
	background-color:#FADB00;
	border-color:#FADB00;
	padding-left:2rem;
	color:var(--color-basic);
}
.btn.btn-arrow-right{
	padding-left:2rem;
}
.btn.btn-arrow-right.btn-wide{
	padding-left:calc(20px + 2rem);
	padding-right:calc(20px + 1rem);
}
.btn.btn-arrow-right span{
	display:inline-block;
	padding-right:2rem;
	background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 5L16 12L9 19"/></svg>') no-repeat calc(100% - .5rem) calc(50% - 1px);
	background-size:15px 15px;
}
.btn.btn-toggle{
	padding-right:2rem;
	background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 9L12 16L19 9"/></svg>') no-repeat calc(102% - 1rem) center;
	background-size: 14px 14px;
}
.btn.btn-primary.btn-toggle {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23225EFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 15L12 8L19 15"/></svg>');
}
.btn.btn-plus span {
  display: inline-block;
  padding-left: 2rem;
  background: url('data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27%3E%3Cline x1=%2712%27 y1=%275%27 x2=%2712%27 y2=%2719%27 stroke=%27%23121212%27 stroke-width=%272%27/%3E%3Cline x1=%275%27 y1=%2712%27 x2=%2719%27 y2=%2712%27 stroke=%27%23121212%27 stroke-width=%272%27/%3E%3C/svg%3E') no-repeat center center;
  background-size:18px 18px;
  vertical-align: middle;
  width:18px;
  height:18px;
}
.btn.btn-close{
	background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23121212" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18" /><line x1="6" y1="6" x2="18" y2="18" /></svg>') no-repeat center center;
	background-size:80%;
	width:18px;
	height:18px;
	text-indent:-1000em;
	border:0;
	min-width:1px;
}

.btn.btn-attachment{
	width:100%;
	text-align:center;
	color:var(--color-tertiary);
	font-weight:400;
	padding:24px;
	height:auto;
}
.btn.btn-attachment span {
  display: inline-block;
  width: 20px; /* 아이콘의 너비 */
  height: 20px; /* 아이콘의 높이 */
  background: url("data:image/svg+xml,%3Csvg%20width%3D%2215%22%20height%3D%2218%22%20viewBox%3D%220%200%2015%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cg%20id%3D%22Group%22%3E%3Cpath%20id%3D%22Vector%20(Stroke)%22%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M9.16732%200.667969C9.62756%200.667969%2010.0007%201.04106%2010.0007%201.5013V4.83464H13.334C13.7942%204.83464%2014.1673%205.20773%2014.1673%205.66797C14.1673%206.12821%2013.7942%206.5013%2013.334%206.5013H10.0007C9.55862%206.5013%209.1347%206.32571%208.82214%206.01315C8.50958%205.70059%208.33398%205.27666%208.33398%204.83464V1.5013C8.33398%201.04106%208.70708%200.667969%209.16732%200.667969Z%22%20fill%3D%22%237D7D81%22/%3E%3Cpath%20id%3D%22Vector%20(Stroke)_2%22%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M3.33398%202.33464C3.11297%202.33464%202.90101%202.42243%202.74473%202.57871C2.58845%202.73499%202.50065%202.94695%202.50065%203.16797V14.8346C2.50065%2015.0556%202.58845%2015.2676%202.74473%2015.4239C2.90101%2015.5802%203.11297%2015.668%203.33398%2015.668H11.6673C11.8883%2015.668%2012.1003%2015.5802%2012.2566%2015.4239C12.4129%2015.2676%2012.5007%2015.0556%2012.5007%2014.8346V6.01315L8.82214%202.33464H3.33398ZM1.56622%201.4002C2.03506%200.931361%202.67094%200.667969%203.33398%200.667969H9.16732C9.38833%200.667969%209.60029%200.755766%209.75657%200.912046L13.9232%205.07871C14.0795%205.23499%2014.1673%205.44696%2014.1673%205.66797V14.8346C14.1673%2015.4977%2013.9039%2016.1336%2013.4351%2016.6024C12.9662%2017.0712%2012.3304%2017.3346%2011.6673%2017.3346H3.33398C2.67094%2017.3346%202.03506%2017.0712%201.56622%2016.6024C1.09738%2016.1336%200.833984%2015.4977%200.833984%2014.8346V3.16797C0.833984%202.50493%201.09738%201.86904%201.56622%201.4002Z%22%20fill%3D%22%237D7D81%22/%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
  background-size: 17px 17px;
  text-indent: -9999px;
  overflow: hidden;
  vertical-align: middle;
  margin-right:.5rem;
}

.btn.btn-download{
	background:url('../img/ico_download.svg') no-repeat 85% center #fff;
	background-size:16px;
	padding-left:1rem;
	padding-right:2.5rem;
}



.btn + .btn{
	margin-left:8px;
}

/* Btn Group */
.btn-group{
	display:flex;
}
.btn-group .btn{	
	width:calc(50% - 2px);
	margin-right:4px;
}
.btn-group .btn:last-child{
	margin-left:4px;
	margin-right:0;
}

/* Btn Group Toggle */
.btn-group-toggle{
	display:flex;
	justify-content:space-between;
	align-items:center;
}
.btn-group-toggle .btn{
	flex:1 1 auto;
	width:100%;
	border:1px solid var(--color-bordered);
	color:var(--color-muted);
	text-align:center;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	height:var(--element-height-small);
	margin:0;
}
.btn-group-toggle .btn:first-child{
	border-top-right-radius:0;
	border-bottom-right-radius:0;
}
.btn-group-toggle .btn:last-child{
	border-top-left-radius:0;
	border-bottom-left-radius:0;
	margin-left:-1px;
}
.btn-group-toggle .btn.active{
	color:var(--color-primary);
	border-color:var(--color-primary);
}
.btn-group-toggle .btn:first-child.active{
	position:relative;
	z-index:2;
}

.btn-group-block{
	display:block;
}
.btn-group-block .btn{
	width:100%;
	display:block;
	margin:0;
	padding-left:0;
	padding-right:0;
}
.btn-group-block .btn:last-child{
	margin-top:4px;
}
.btn-group-block .btn.btn-basic.btn-outline{
	color:var(--color-basic);
}



.btn-group-flex{
	display:flex;
	jusityfy-content:space-between;
}
.btn-group-flex .btn{
	flex:0 1 auto;
	width:inherit;
}


/*
	section
*/
.section{
	padding-bottom:64px;
}

/*
	Form Field
*/
.field{
	clear:both;
	margin-bottom:32px;
	position:relative; /* 250120 수정 */
}
.field label{
	display:block;
	margin-bottom:12px;
	font-size:14px;
	font-weight:600;
}
.field select{
	width:100%;
}

.field__divider{
	display:flex;
	position:relative;
	justify-content:space-between;
}
.field__divider [class*=input-group]{
	width:calc(50% - 1rem);
}
.field__divider [class*=input-group]:last-child::after{
	display:none;
}
.field__divider span.divider{
	width:2rem;
	display:flex;
	align-items:center;
	justify-content:center;
}

/* Input Style */
input[type="text"],
input[type="password"],
input[type="number"],
input[type="email"],
input[type="file"],
.fake_input{
	height:44px;
	padding:14px 16px;
	border:1px solid var(--color-bordered);
	width:100%;
	border-radius:8px;
	font-size:14px;
}
/*
.fake_input::before {
    content: "캐릭터 특성을 선택해 주세요";
    pointer-events: none;
    color:#A9A9A9;
    position:relative;
    top:-2px;
}*/

.fake_input{
	display:flex;
	align-items:center;
}
.fake_input:focus::before{
    content: "";
}

.fake_input .addTag{
	margin-right:12px;
	color:var(--color-tertiary);
	display:inline-flex;
	align-items:center;
}
.fake_input .addTag .x{
	border:0;
	display:inline-block;
	width:16px;
	height:16px;
	margin-left:5px;
	background:url('../img/ico_x.png') no-repeat center center;
	background-size:10px;
	background-color:#fff;
	text-indent:-1000em;
	font-size:0;
}

input.input-ai{
	border:2px solid var(--color-primary);
	height:48px;
}
input.input-ai + .btn{
	height:48px;
}
input.readonly{
	border-color:var(--color-bordered);
	background-color:#f8f8fa;
	color:#B9B9BC;
}

/* Field Error */
/* 25.01.16 추가 및 수정 */
.field.field-error{
	position:relative;
}
.field.field-error input,
.field.field-error .input-group-btn label,
.field.field-error .input-group-side{
	border-color:var(--color-danger);
}
.field-message{
	color:var(--color-danger);
	margin-top:8px;
	display:block;
}
.field-message.primary{
	color:var(--color-primary);
}

.field-error .field-message{
	color:var(--color-danger)!important;
}

/* Input Group */
.input-group{
	display:flex;
}
.input-group select{
	margin-right:8px;
	width:auto;
}
.input-group select + select:last-child{
	margin-right:0;
}
.input-group .btn{
	height:var(--element-height);
	white-space:nowrap;
	margin-left:8px;
	padding-left:16px;
	padding-right:16px;
}
.input-group ~ .input-group{
	margin-top:12px;
}

/* Input Group :: Button */
.input-group-btn{
}
.input-group-btn input{
	display:none;
}
.input-group-btn label{
	margin:0;
	color:var(--color-secondary);
	font-wieght:400;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	border-radius:100px;
	border:1px solid var(--color-bordered);
	padding:10px 16px;
	cursor:pointer;
}
.input-group-btn input:checked + label{
	background-color:var(--color-primary);
	color:#fff;
	border-color:var(--color-primary);
}

/* Input Group :: Check */
.input-group-check{
	display:flex;
	align-items:center;
}
.input-group-check input[type="checkbox"],
.input-group-check input[type="radio"]{
	margin-right:8px;
	width:24px;
	height:24px;
}
.input-group-check label{
	margin:0;
	font-weight:400;
}
.input-group-check + .input-group-check{
	margin-top:18px;
}

.input-group-check label + input{
	margin-left:48px;
}

.input-group-check.gap-large label{
	white-space:nowrap;
}
.input-group-check.gap-large label + input{
	margin-left:50px;
}

/* Input Group :: side */
.input-group-side{
	border:1px solid var(--color-bordered);
	border-radius:8px;
	display:flex;
	align-items:center;
	overflow:hidden;
}
.input-group-side input{
	border:0;
	border-radius:0;
}
.input-group-side input:focus{
	outline:0;
}
.input-group-side span,
.input-group-side .btn{
	padding:0 14px;
	text-align:right;
	border:0;
}
.input-group-side .btn{
	margin-right:1rem;
}
.input-group-side .side{
	display:flex;
	align-items:center;
}

/* Input Group Image Button */
.input-group-imgButton{
	width:120px;
	border-radius:8px;
	overflow:hidden;
	height:44px;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	color:#fff;
	position:relative;
}

.input-group-imgButton label{
	position:relative;
	z-index:4;
	margin:0;
	padding:0;
	width:100%;
	height:100%;
	display:flex;
	align-items:center;
	justify-content:center;
	border:2px solid rgba(0,0,0,.5);
	cursor:pointer;
	overflow:hidden;
	border-radius:8px;
	color:#fff!important;
}
.input-group-imgButton label::before{
	content:'';
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
	z-index:-1;
	padding:12px 16px;
	background-color:rgba(0,0,0,.5);
}
.input-group-imgButton input{
	display:none;
}
.input-group-imgButton img{
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
	object-fit:cover;
}
.input-group-imgButton input:checked + label{
	border-color:var(--color-primary);
}
.input-group-imgButton input:checked + label::before{
	background-color:var(--color-primary);
	opacity:.5;
}

/* input Group List */
.input-group-list{
	margin-left:-7px;
	display:flex;
	flex-wrap:wrap;
}
.input-group-list > li{
	padding-left:7px;
	padding-bottom:7px;
}
.input-group-list > li .input-group-btn label{
	padding:8px 12px;
	white-space:nowrap;
}
.input-group-list > li .input-group-btn input:checked + label{
	background-color:transparent;
	color:var(--color-primary);
}

/* Required Mark */
em.required{
	color:var(--color-primary);
}

input.disabled{
	background-color:#F8F8FA;
	border-color:var(--color-bordered);
	cursor:not-allowed;
}
input.disabled::placeholder{
	color:#b9b9bc;
}

/* input-group-inline */

.input-group-inline{
	display:flex;
	align-items:center;
}
.input-group-inline label{
	padding-right:16px;
}

/*
	Icon
*/
.ico-search{
	text-indent:-1000em;
	overflow:hidden;
	display:inline-block;
	background:url('../img/ico_search.png') no-repeat center center;
	background-size:17px;
	width:20px;
	height:20px;
	font-size:0;
}


/*
	Pagination
*/
.pagination{
	margin-top:80px;
}
.pagination > ol{
	display:flex;
	justify-content:center;
	list-style:none;
}
.pagination > ol > li{
	margin:0 2px;
}
.pagination > ol > li > a{
	display:flex;
	justify-content:center;
	align-items:center;
	width:32px;
	height:32px;
	font-size:13px;
	border-radius:4px;
	color:var(--color-tertiary);
}
.pagination > ol > li.current > a{
	background-color:#111;
	color:#fff;
	font-weight:600;
}
.pagination > ol > li > a.prev,
.pagination > ol > li > a.next{
	background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%237D7D81" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 5L16 12L9 19"/></svg>') no-repeat center center;
	background-size:12px 12px;
	text-indent:-1000em;
}
.pagination > ol > li > a.prev{
	transform: rotate(180deg);
}

/*
	Nothing
*/
.nothing{
	text-align:center;
	background:url('../img/ico_exc_mark.png') no-repeat center 50px;
	background-size:42px 42px;
	padding:120px 0;
}

/*
	Scrollbar Style
*/
.list.infinite {
    display: block;
    white-space: nowrap;
    overflow-x: auto; /* 강제로 가로 스크롤 표시 */
    overflow-y: hidden; /* 세로 스크롤 제거 */
    min-height: 16px; /* 스크롤바를 항상 표시하기 위해 추가 */
}
/* 250116 추가 */
.list.infinite.with-attachment > li .attachment{
	display:inline-flex;
}

/* 크롬, 사파리 및 엣지 */
.list.infinite::-webkit-scrollbar {
    width: 4px;    /* 세로 스크롤바 너비 */
    height: 4px;   /* 가로 스크롤바 높이 */
}

.list.infinite::-webkit-scrollbar-track {
    background: #f1f1f1; /* 스크롤바 트랙 색상 */
}

.list.infinite::-webkit-scrollbar-thumb {
    background-color: var(--color-bordered); /* 스크롤바 핸들 색상 */
    border-radius: 4px; /* 둥근 모서리 */
}

.list.infinite::-webkit-scrollbar-thumb:hover {
    background-color: #555; /* 마우스 호버 시 색상 변경 */
}

/* Youtube */
.youtube-video {
    position: relative;
    width: 100%;
    max-width: 100%; /* 선택적으로 최대 너비 설정 */
}

.video-wrapper {
    position: relative;
    padding-top: 56.25%; /* 16:9 비율 (9/16 * 100) */
    height: 0;
    overflow: hidden;
}

.video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.scroll-overflow-hidden{
	padding-left:14px;
	margin-left:14px;
}
.scroll-overflow-hidden ul{
	margin-left:-24px;
}
.scroll-overflow-hidden ul > li:first-child{
	padding-left:24px;
	margin-left:-24px;
}
.scroll-overflow-hidden > h2,
.scroll-overflow-hidden > h3,
.scroll-overflow-hidden > h4{
	margin-left:-24px;
}

/*
	rotate
*/
/* 회전 애니메이션 정의 */
@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.rotate{
	animation: rotate 4s linear infinite;
}

.only-pc{
	display:block;
}
.only-mb{
	display:none;
}
@media(max-width:767px){
	body{
		font-size:14px;
	}
	.only-pc{
		display:none;
	}
	.only-mb{
		display:block;
	}
}