@charset 'utf-8';

/* base */
* { box-sizing:border-box; }
html, body, div, span, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, menu, nav, section, main, summary, time, mark, audio, video { margin:0; padding:0; border:0; outline:0; box-sizing:border-box; background:transparent; }
html, body { width:100%; scroll-behavior:smooth; }
html { font-size:10px; }
body { font-family:'Pretendard', sans-serif; color:#000; text-align:center; }
ul, ol { list-style-type:none; }
a { box-sizing:border-box; color:#333; text-decoration:none; cursor:pointer; }
a:hover, a:active { text-decoration:none; }
button { margin:0; padding:0; box-sizing:border-box; border:0 none; background-color:transparent; vertical-align:middle; color:#333; font-family:'Pretendard', sans-serif; cursor:pointer; outline:none; }
figcaption { display:none; }
img { width:100%; vertical-align:top; }

:root { --tab-left:2.4rem; --tab-width:3.1rem; }

.wrapper { overflow-x:hidden; position:relative; scroll-behavior:smooth; }

.sec h1 { display:flex; align-items:center; justify-content:center; height:6.4rem; font-size:1.8rem; line-height:1.4; font-weight:700; }

.left-util { display:flex; position:absolute; left:0; }
.left-util .prev-page { display:inline-flex; width:5.9rem; height:6.4rem; background-image:url('../img/ico_back.svg'); background-position:center center; background-repeat:no-repeat; }

.tabs { position:relative; overflow-y:auto; -webkit-overflow-scrolling: touch; }
.tabs::-webkit-scrollbar{ display: none; }
.tabs.fixed {position:fixed; top:0; width:100%; max-width:720px; background-color:#FFF; }
.tabs ul { position:relative; width:100%; display:flex; flex-wrap:nowrap; height:4.1rem; box-shadow:inset 0 -1px 0 0 #e5e5e5; }
.tabs ul:before { content:""; display:block; position:absolute; bottom:0; left:var(--tab-left); width:var(--tab-width); height:2px; background-color:#7A2ECD; transition:left .2s linear, width .2s linear; z-index: 2; }
.tabs ul li { display:inline-flex; padding-right:1.2rem; padding-left:1.2rem; }
.tabs ul li a { display:flex; flex:1; justify-content:center; align-items: center; color:#666; font-size:1.8rem; line-height:1.4; font-weight:400; line-height:1; white-space:pre; position:relative; }
.tabs ul li a:after { content:""; position:absolute; bottom:0; width:calc(100% + 2.4rem); height:1px; background-color:#e5e5e5; left:-1.2rem; }
.tabs ul li:first-child { padding-left:2.4rem;}
.tabs ul li:last-child { padding-right:2.4rem;}
.tabs ul li:last-child a:after { width:calc(100% + 3.6rem); }
.tabs ul li.active a { font-size:1.8rem; line-height:1.4; font-weight:700; color:#7A2ECD; }

.list { min-height:calc(100vh - 10.5rem); background:url('../img/bg.png'); background-size:100% auto; padding:2.6rem 2.4rem;}
.list ul li { background-color:#fff; border-radius:1.6rem;  box-shadow:0 .4rem 1rem 0 rgba(0, 0, 0, 0.08); overflow:hidden; padding:1rem 1rem 1.4rem; margin-bottom:2.4rem; }
.list ul li .thumb { border-radius:1.6rem; overflow:hidden;}
.list ul li .info { display:flex; align-items: center;  padding-top:1rem; }
.list ul li .info .icon { overflow:hidden; width:2.8rem; height:2.8rem; border-radius:50%; margin-right:0.8rem;}
.list ul li .info .title { flex:1;font-size:1.3rem; line-height:1.4; font-weight:500; color:#000; text-align:left; text-overflow:ellipsis; overflow:hidden; word-break:break-word; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical; }
.list .banner { border-radius:0; padding:0; box-shadow:0 .4rem 1rem rgba(0, 0, 0, .1); margin:0 -2.4rem 2.4rem;}


.btn_top { display:none; position:fixed; z-index:3; right:2rem; bottom:2rem; width:5.2rem; height:5.2rem; background:url('../img/btn_top.png') no-repeat; background-size:100% auto; color:transparent; font-size:0; text-indent:-9999px; }

.video_modal_popup.reveal { display:flex; position:fixed; top:0; left:0; right:0; bottom:0; flex-direction:column; justify-content:center; align-items:center; z-index:9; }
.video_modal_popup .video-wrapper { position:relative; width:100%; padding-bottom:56%; z-index:10; }
.video_modal_popup .video-wrapper.vertical { padding-bottom:150%; }
.video_modal_popup .video-wrapper iframe { position:absolute; left:0; width:100%; height:100%; border:0; }
.video_modal_popup.reveal .video_modal_popup-closer { position:fixed; top:0; left:0; right:0; bottom:0; max-width:720px; margin:0 auto; background:rgba(0, 0, 0, .5); background-size:100% auto; z-index:9; }
.video_modal_popup.reveal .btn_popup_closer { width:60px; height:60px; background:url("../img/btn_popup_closer.png") no-repeat center / 100% auto; color:transparent; font-size:0; text-indent:-999px; margin-bottom:10px; z-index:10; }


@media (min-width:720px) { 
	.wrapper { overflow-y:scroll; width:720px; height:100%; margin:0 auto; -ms-overflow-style:none; scrollbar-width:none; box-shadow:0 0 20px rgba(0, 0, 0, .2); }
	.wrapper::-webkit-scrollbar { display:none; }
	
	.video_modal_popup .video-wrapper { width:560px; height:315px; padding-bottom:0; }
	.video_modal_popup .video-wrapper.vertical { width:405px; height:720px; padding-bottom:0; }

	.btn_top { right:calc(50% - 360px - 100px); }

}

@media(max-width:359px) {
	html { font-size:calc(4px + 1.66667vw); }
}

@media(min-width:360px)and (max-width:500px) {
	html { font-size:calc(-4.4px + 4vw); }
}

@media(min-width:501px) {
	html { font-size:12px; }
}

@media(min-width:720px)and (hover:hover)and (pointer:fine) {
	html { font-size:14px; }
}