@charset "utf-8";

/* 메인페이지 스크롤 시 헤더 변경 */



/* 메인비주얼 */
#top_slider{position:relative;width:100%;/* height:560px; */overflow:hidden;}
#top_slider .swiper-slide{position:relative;display:flex;justify-content:center;align-items:center;min-width:0;}
#top_slider .swiper-slide::after{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:rgb(0, 0, 0, 0.5);z-index:1;}
#top_slider .swiper-slide img{display:block;width:100%;height:auto;object-fit:contain;object-position:center;}
#top_slider .swiper-button-next,#top_slider .swiper-button-prev{filter:brightness(0) invert(1);color:#fefefe !important;margin:0 20px;z-index:100;}
#top_slider .swiper-button-next::after,#top_slider .swiper-button-prev::after{text-shadow:0 2px 6px #0006}

.sd_txt{position:absolute;left:16em;z-index:1000;}
.sd_txt *{width:400px;color:#fefefe;text-overflow:ellipsis;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;}
.sd_txt h3{line-height:1.3;font-size:2.4rem;font-weight:600;-webkit-line-clamp:2;}
.sd_txt p{font-size:1.2rem;letter-spacing:0.02em;margin:20px 0 40px 0;-webkit-line-clamp:3;*-webkit-line-clamp:3;}
.sd_txt i{max-width:126px;line-height:1;font-size:1.45rem;font-style:normal;font-weight:500;text-align:center;padding:0.75em 0;border:1px solid #fefefe;border-radius:50%;}




/* 공통 소스 */
.pd{padding-left:11em;padding-right:11em;}
.main_title{position:sticky;top:120px;align-self:start;line-height:1;font-size:79.6px;font-weight:800;font-family:'Poppins',sans-serif;letter-spacing:-.03em;color:#212121;z-index:10}




/* TODAY'S POST */
#today_post.mo{display:none}
#today_post,#most_read{display:grid;grid-template-columns:1fr 1.5fr;align-items:start;gap:1.5rem;padding-top:6.2em;padding-bottom:6.2em;background:#f7f7f7;background:#f7f7f7}
.list_post{}
.list_post ul{display:grid;grid-template-columns:repeat(2, 1fr);grid-gap:5rem 6rem;}
.list_post ul li{display:flex;flex-direction:column;}
.list_post ul li strong{font-size:23px;margin:0.6em 0 0.5em 0;}
.list_post ul li p{line-height:1.5;font-size:16px;}

.list_post a .img{display:block;overflow:hidden}
.list_post a .img img{transition-duration:0.3s;}
.list_post a:hover .img img{transform:scale(1.1, 1.1);transition-duration:0.5s;}




/* TAGS */
#tags{display:grid;grid-template-columns:1fr 1.5fr;align-items:start;grid-gap:1.5rem;padding-top:8em;padding-bottom:10em;background:#212121;}
#tags .main_title{color:#fefefe;}
.list_tag{}
.list_tag ul{display:grid;grid-template-columns:repeat(2, 1fr);grid-gap:8rem 1rem;}
.list_tag ul li{}
.list_tag ul li a *{line-height:1;font-weight:600;}
.list_tag ul li a{display:flex;color:#fefefe;border-top:2px solid #ddd;padding-top:1.5em;}
.list_tag ul li a b{font-size:31px;}
.list_tag ul li a span{align-self:flex-start;line-height:1.3;font-size:17px;margin-right:1em;}
.list_tag ul li a:hover{color:#6ca3d1;border-color:#6ca3d1;transition:.3s ease;}




/* MOST READ */
#most_read{margin-bottom:8em;}
.list_board{}
.list_board h2{display:flex;align-items:center;font-size:18.8px;margin:3.6em 0 1.4em 0;}
.list_board h2::before{content:'';display:inline-block;width:32px;height:2px;background:#6ca3d1;margin-right:0.7em;}
.list_board h2:first-child{margin-top:0;}
.list_board ul{}
.list_board ul li{display:flex;flex-direction:column;width:85%;border-top:2px solid #bbb;}
.list_board ul li + li{margin-top:2.1em;}
.list_board ul li a{width:80%;}
.list_board ul li a strong{font-size:24px;margin:0.5em 0 0.6em 0;}
.list_board ul li a p{font-size:16px;}



/* 중앙 광고 배너 */
.banner_fixed{display: grid; grid-template-columns: repeat(3,1fr); gap: 30px;}
.center_banner{padding-top: 60px; background-color: #f7f7f7;}
.center_banner .container > * + *{margin-top: 30px;}
.center_banner img{width: 100% !important; height: auto !important;}


/* 하단 광고 배너 */
/* #btm_banner{display:flex;justify-content:center;align-items:center;overflow:hidden;margin:20px auto 0 auto;} */
.btm_banner .ad{position:relative; width:100%; overflow:hidden;}
.btm_banner .ad a,.btm_banner .ad img{display:block;width:100%;height:100%;}
.btm_banner .ad img{object-fit:contain;object-position:center;}
.btm_banner .swiper{position:relative; width: 100%; overflow: hidden;}
.btm_banner .swiper-slide a,.btm_banner .swiper-slide img{display:block;width:100%;height:100%;}
.btm_banner .swiper-slide img{object-fit:contain;object-position:center;}



/* ========================= 매거진/미디어B ========================= */

/* ========= 헤드라인 좌측 : 슬라이드 ========= */
.headline_section{display: flex; background-color: #111;}
.headline_section > div{flex: 1; max-width: 50%;}

.headline_swiper{width: 100%; height: 100vh; overflow: hidden;}
.headline_swiper .swiper-slide{position: relative; z-index: 1; display: flex; height: 100%; padding: 100px 50px; align-items: flex-end;}

.headline_swiper .swiper-slide .bg_img{display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden; z-index: -1;}
.headline_swiper .swiper-slide .bg_img::after{position: absolute; left: 0; right: 0; top: 0; bottom: 0;  background-color: rgba(0,0,0,0.4); content:""; display: block; z-index: 1;}
.headline_swiper .swiper-slide .bg_img > img{position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: block; width: 100%; height: 100%; object-fit: cover; transition-duration: 800ms;}
.headline_swiper .swiper-slide:hover .bg_img > img{transform: translate(-50%, -50%) scale(1.1);}


.headline_text{width: 100%; font-size: var(--font-size-l); color: #fff;}
.headline_text > * + *{margin-top: 10px;}

.headline_text .tit_box{display: block;}
.headline_text .tit_box > * + *{margin-top: 20px;}
.headline_text .tit{font-size: 2.4em; display: -webkit-box; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.2;}
.headline_text .text{display: -webkit-box; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: 3; -webkit-box-orient: vertical; line-height: 1.6; opacity: 0;}
.headline_text .btm_text{display: flex; font-size: 0.9em; opacity: 0; justify-content: space-between;}
.headline_text .btm_text .view::before{content:""; display: inline-block; width: 0.9em; height: 0.9em; background: url('../img/icon/icon_view.svg') no-repeat center / contain; margin-right: 0.5em; vertical-align: middle;}


.headline_swiper .swiper-slide-active .text{animation-name: fadeInDown; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; opacity: 1;}
.headline_swiper .swiper-slide-active .btm_text{animation-name: fadeInDown; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; animation-delay: 200ms; opacity: 1;}



/* ========= 헤드라인 우측 : 최신뉴스 목록 ========= */
#head_latest{position: relative; padding: 100px 50px 180px 50px; background-color: var(--main-color); overflow-x: hidden !important; z-index: 0;}
.move_text{position: absolute; left: -2%; top: 0; content:"CULTURE & TRENDS"; font-size: 14rem; white-space: nowrap; font-weight: 600; color: var(--move-text-color); animation: flowText 30s linear infinite; animation-delay: 600ms; line-height: 1; font-family: 'Poppins', sans-serif; z-index: -1;}
@keyframes flowText {
	0% { transform: translateX(0); }
	100% { transform: translateX(-50%); }
}

/* 헤드라인 우측 매거진 리스트 */
.head_magazine .magazine_list{grid-template-columns: repeat(2,1fr); gap: 50px;}
.head_magazine .magazine_item .text{color: var(--bg-text);}

.head_magazine .magazine_list > li:nth-child(odd){padding-top: 80px; margin-bottom: -80px;}
.head_magazine .magazine_list > li:nth-child(odd) .profile{top: 100px;}
.head_magazine .magazine_list > li:nth-child(odd) .wow{animation-delay: 200ms;}


/* ========= 태그 ========= */
#main_tag{display: flex; gap: 2.5%; background-color: #111; color: #fff;}

.main_tit{font-size: var(--title-size); font-weight: 800; font-family: 'Poppins', sans-serif; text-align: center; line-height: 1; letter-spacing: -0.02em;}


.tag_title{position: relative; width: 35%; overflow: hidden; padding: 110px 50px;}
.tag_title::before, .tag_title::after{position: absolute; content:""; display: block;}
.tag_title::before{top: -70px; right: 40px; width: 140px; aspect-ratio: 1/1; background-color: var(--sub-title-color); transform: rotate(45deg);}
.tag_title::after{left: 0; right: 0; bottom: 0; height: 65%; background: url('../img/bg/tag_bg.png') no-repeat center top / 100% auto;}
.tag_title .main_title{color: #fff; text-align: center;}


.tag_wrap{flex: 1;}
.tag_list{display: flex; height: 600px; align-items: center;}
.tag_list li{flex: 1; height: 100%; transition-duration: 400ms; font-size: 2rem;}
.tag_list li > a{display: flex; width: 100%; height: 100%; flex-direction: column; justify-content: space-between; padding: 100px 30px;}
.tag_list .num{font-size: 1.4em; font-weight: 700; transform: skewX(-6deg); font-family: 'Poppins', sans-serif;}
.tag_list .name{position: relative; width: fit-content; margin-left: auto; z-index: 1;}
.tag_list .name > span{display: -webkit-box; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: 1; -webkit-box-orient: vertical; text-align: right;}
.tag_list li:hover{flex: 2; font-size: 4rem; background-color: #fff; color: #111;}
.tag_list li:hover > a{padding-left: 50px; padding-right: 50px;}
.tag_list li:hover .name::after{position: absolute; left: -0.6em; top: -0.4em; width: 1em; aspect-ratio: 1/1; background-repeat: no-repeat; background-position: center; background-size: contain; content:""; z-index: -1;}

.tag_list li:nth-child(4n+1):hover .name::after{background-image: url('../img/tag_star1.png');}
.tag_list li:nth-child(4n+2):hover .name::after{background-image: url('../img/tag_star2.png');}
.tag_list li:nth-child(4n+3):hover .name::after{background-image: url('../img/tag_star3.png');}
.tag_list li:nth-child(4n+4):hover .name::after{background-image: url('../img/tag_star4.png');}



/* ========= 일반 콘텐츠 영역 ========= */
#main_contents{background-color: #f7f7f7; padding: 100px 0;}
#main_contents .tab_section + .tab_section{margin-top: 100px;}
#main_contents .magazine_list{display: none; grid-template-columns: repeat(4,1fr); gap: var(--grid-gap);}
#main_contents .magazine_list.on{display: grid;}

.tab_wrap{display: flex; align-items: center; justify-content: space-between; margin-bottom: 30px; align-items: flex-end;}
.tab_wrap .main_tit > a{display: block; color: #111;}
.tab_box{display: flex; gap: 8px; margin-bottom: 10px;}
.tab_item{font-size: 1.3rem; padding: 10px 1em; border: 2px solid #111; background-color: #fff; font-family: 'Poppins', sans-serif; font-weight: 600; color: #111; border-radius: 2em; box-shadow: inset -2px -2px 0 #111; transition-duration: 200ms;}
.tab_item:hover{cursor: pointer; transform: translateY(-8px);}

.tab_item:nth-child(5n+1).on{background-color: var(--pop-purple);}
.tab_item:nth-child(5n+2).on{background-color: var(--pop-pink);}
.tab_item:nth-child(5n+3).on{background-color: var(--pop-blue);}
.tab_item:nth-child(5n+4).on{background-color: var(--pop-yellow);}
.tab_item:nth-child(5n+5).on{background-color: var(--pop-green);}


/* ========= 많이 본 + 에디터 픽 ========= */

.read_wrap{display: flex;}
.read_wrap > section{flex: 1; padding: 100px 50px 150px 50px; background-color: #111; color: #fff;}
.read_wrap > section + section{background-color: var(--bg-complementary); color: #222;}

.read_wrap .main_tit{font-size: var(--title-size); color: var(--sub-title-color); margin-bottom: 50px; text-align: left;}
.read_wrap > section + section .main_tit{color: var(--main-color); animation-delay: 200ms;}
.read_wrap > section + section .text_list > li{border-top: 1px solid rgba(0,0,0,0.08);}

/* 중앙 패럴랙스 이미지 */
.deco_seciton{position: relative; width: 240px; background: url('../img/bg/bg_deco_section3.jpg') no-repeat center / cover; background-attachment: fixed;}
.deco_seciton::after{position: absolute; left: 0; right: 0; top: 0; bottom: 0; background-color: rgba(0,0,0,0.4); display: block; content:""; }


/* 텍스트형 + 웹진형 공통 */
.text_list, .webzine_item{font-size: var(--font-size-m);}
.text_list .tit, .webzine_item .tit{font-size: 1.6em; margin-bottom: 20px; display: -webkit-box; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: 1; -webkit-box-orient: vertical; line-height: 1.4;}
.text_list .category, .webzine_item .category{font-size: 1.4rem; vertical-align: middle;}
.text_list .category + span{vertical-align: middle;}
.text_list +.webzine_item{border-top: 1px solid rgba(255,255,255,0.2);}
.webzine_item + .text_list{margin-top: 30px;}
.text_list +.webzine_item{padding-top: 30px;}

/* 텍스트형 */
.text_list > li{border-top: 1px solid rgba(255,255,255,0.2);}
.text_list > li > a{display: block; padding: 30px 0;}


/* 웹진형 */
.webzine_item .tit{-webkit-line-clamp: 2;}
.webzine_item > a{display: flex; gap: var(--gap); align-items: center}
.webzine_item > a > div{flex: 1;}
.webzine_item .img{aspect-ratio: 3/2; border-radius: 20px; overflow: hidden;}
.webzine_item .img > img{display: block; width: 100%; height: 100%; object-fit: cover;}
.webzine_item .text{line-height: 1.6;}


/* ================================================================ */
@media screen and (max-width: 1700px){
	/* 헤드라인 */
	.headline_swiper .swiper-slide, #head_latest{padding-left: var(--padding); padding-right: var(--padding);}
	.head_magazine .magazine_list{gap: var(--grid-gap);}

	/* 태그 */
	.tag_title::after{background-position: center bottom;}

	/* 일반 콘텐츠 영역 */
	.tab_item{font-size: 1.2rem; line-height: 1;}

	/* 많이 본 + 에디터 픽 */
	.deco_seciton{display: none;}
	.text_list .tit, .webzine_item .tit{font-size: 1.4em;}
	.text_list .category, .webzine_item .category{font-size: 1rem;}
}

@media screen and (max-width: 1280px){
	/* 헤드라인 */
	.headline_section{display: block;}
	.headline_section > div{max-width: initial;}


	/* 최신기사 */
	#head_latest{padding: 100px var(--padding);}
	.move_text{font-size: 12rem;}
	.head_magazine .magazine_list > li:nth-child(odd){padding-top: initial; margin-bottom: initial;}
	.head_magazine .magazine_list{gap: 0;}
	.head_magazine .magazine_list > li:nth-child(odd) .profile{top: 20px;}
	.head_magazine .magazine_list > li:nth-child(odd) .wow{animation-delay: initial;}


	/* 태그 */
	#main_tag{gap: 0;}
	#main_tag > div{padding: 100px var(--padding);}

	.tag_title{width: 45%;}
	.tag_title .main_tit{text-align: left;}
	.tag_title::before{width: 120px; top: -60px;}
	.tag_title::after{height: 50%; background-position: center top;}

	.tag_list{display: block; height: auto;}
	.tag_list li, .tag_list li:hover{font-size: 1.6rem; background-color: transparent; color: #fff;}
	.tag_list li + li{border-top: 1px solid rgba(255,255,255,0.2); padding-top: 20px; margin-top: 20px;}
	.tag_list li > a, .tag_list li:hover > a{padding: 0;}
	.tag_list li > a{flex-direction: initial; align-items: center; gap: 1em;}

	.tag_list .num{position: relative; font-size: 1.1em;}
	.tag_list li .num::after{position: absolute; right: -0.6em; top: -0.2em; width: 0.8em; aspect-ratio: 1 / 1; background-repeat: no-repeat; background-position: center; background-size: contain; content: ""; z-index: -1;}
	.tag_list li:nth-child(4n+1) .num::after{background-image: url('../img/tag_star1.png');}
	.tag_list li:nth-child(4n+2) .num::after{background-image: url('../img/tag_star2.png');}
	.tag_list li:nth-child(4n+3) .num::after{background-image: url('../img/tag_star3.png');}
	.tag_list li:nth-child(4n+4) .num::after{background-image: url('../img/tag_star4.png');}
	.tag_list li:hover .name::after{display: none;}


	/* 일반 콘텐츠 영역 */
	#main_contents .magazine_list{grid-template-columns: repeat(3, 1fr);}
	.tab_wrap{display: block; border-bottom: 2px solid #111;}
	.tab_box{justify-content: center; flex-wrap: wrap; padding: 10px 0; margin-bottom: 0;}
	.tab_item{border: none; box-shadow: none; background-color: transparent !important; color: #999; font-weight: 400; font-size: 1rem;}
	.tab_item:hover{transform: initial;}
	.tab_item.on{color: #111; font-weight: 600;}


	/* 많이 본 + 에디터 픽 */
	.read_wrap{flex-direction: column;}
	.read_wrap > section{padding: 100px var(--padding);}
	.read_wrap > section + section .main_tit{animation-delay: initial;}
	.text_list .tit, .webzine_item .tit{margin-bottom: 10px;}
	.text_list > li > a{padding: 20px 0;}
	.webzine_item + .text_list{margin-top: 20px;}
	.text_list +.webzine_item{padding-top: 20px;}

	.webzine_item{font-size: var(--font-size-l);}
	.webzine_item > a > .img{width: 40%; flex: initial;}

	/* 배너 */
	.center_banner .container > * + *{margin-top: 20px;}
	.banner_fixed{gap: 20px;}
}

@media screen and (max-width: 960px){
	/* 최신기사 */
	.move_text{font-size: 10rem;}
	.head_magazine .magazine_item .text > p{min-height: initial;}

		/* before */
	.head_magazine a{transform: scale(0.9); transition-duration: 100ms;}
	.head_magazine .thumb .tit{font-size: 1.4rem; opacity: 0; transform: translateY(30px); transition-duration: 600ms;}
	.head_magazine .text, .head_magazine .magazine_item .profile{opacity: 0; transition-duration: 400ms;}
		/* after */
	.head_magazine .swiper-slide-active a{transform: scale(1);}
	.head_magazine .swiper-slide-active .thumb .tit{opacity: 1; transform: translateY(0);}
	.head_magazine .swiper-slide-active .text, .head_magazine .magazine_item.swiper-slide-active .profile{opacity: 1;}

	/* 많이 본 + 에디터 픽 */
	.webzine_item .img{border-radius: 14px;}
}


@media screen and (max-width: 768px){
	/* 헤드라인 */
	.headline_swiper .swiper-slide{padding-top: 60px; padding-bottom: 60px;}
	.headline_text{font-size: var(--font-size-m);}
	.headline_text .tit{font-size: 2em;}
	.profile .p_img{width: 40px; height: 40px;}
	.profile .p_name{font-size: 0.9rem;}


	/* 태그 */
	#main_tag{position: relative; padding-bottom: 250px; flex-direction: column;}
	#main_tag .tag_title{position: initial; padding: 60px var(--padding) 30px var(--padding); width: initial;}
	.tag_title::before{display: none;}
	.tag_title::after{left: 50%; bottom: -50px; transform: translateX(-50%); width: 80%; height: 300px; background-size: contain; background-position: center bottom;}
	#main_tag .tag_wrap{padding: 0 var(--padding);}
	.tag_list li, .tag_list li:hover{font-size: 1.4rem;}
	.tag_list li + li{padding-top: 10px; margin-top: 10px;}
	.tag_list li .num::after{width: 0.6em; top: 0; right: -0.4em;}


	/* 최신기사 */
	#head_latest{padding-top: 80px; padding-bottom: 40px;}
	.move_text{font-size: 8rem;}
	.head_magazine .magazine_list .category{font-size: 0.9rem;}
	.head_magazine .thumb{padding: 30px 20px;}
	.head_magazine .magazine_item .profile .p_img{width: 40px; height: 40px;}


	/* 배너 */
	.center_banner + #main_contents{padding-top: 60px;}
	.center_banner{padding-top: 90px;}
	.center_banner .container > * + *{margin-top: 10px;}
	.banner_fixed{grid-template-columns: repeat(2, 1fr); gap: 10px;}


	/* 일반 콘텐츠 영역 */
	#main_contents{padding-top: 110px; padding-bottom: 60px;}
	#main_contents .tab_section + .tab_section{margin-top: 60px;}
	.tab_btns{overflow-x: scroll;-ms-overflow-style: none; scrollbar-width: none;}
	.tab_btns::-webkit-scrollbar{display: none;}
	.tab_box{justify-content: initial; flex-wrap: nowrap; gap: 0;}
	.tab_item{font-size: 0.9rem; white-space: nowrap; padding: 0.5em;}


	/* 많이 본 + 에디터 픽 */
	.read_wrap > section{padding-top: 60px; padding-bottom: 60px;}
	.read_wrap .main_tit{margin-bottom: 30px;}
	.text_list, .webzine_item{font-size: var(--font-size-s);}
	.text_list .category, .webzine_item .category{font-size: 0.8rem;}
	.webzine_item .img{border-radius: 10px;}
}

@media screen and (max-width:600px){
	/* 태그 */
	#main_tag{padding-bottom: 200px;}

	/* 일반 콘텐츠 영역 */
	#main_contents .magazine_list{grid-template-columns: repeat(2,1fr);}
}

@media screen and (max-width:478px){
	/* 헤드라인 */
	.headline_text{font-size: var(--font-size-s);}
	.headline_text .tit{font-size: 1.8em;}
	.headline_text .btm_text{font-size: 0.8em;}

	/* 태그 */
	#main_tag{padding-bottom: 160px;}
	.tag_list li, .tag_list li:hover{font-size: 1.2rem;}
	.text_list, .webzine_item{font-size: 0.9rem;}
	.text_list .tit, .webzine_item .tit{font-size: 1.2em;}
	.webzine_item .t2{-webkit-line-clamp: 1;}

	/* 배너 */
	.banner_fixed{grid-template-columns: repeat(1, 1fr);}
}