@charset "UTF-8";
/*
    =======================
    20251001: 메인 배너, mainCardSlider 만 유지하고 나머지 삭제. 이후 추가되는 내용은 newMain.css에 작성
    =======================
*/

/* 메인 배너 */
.mainBanner .mainBanner_item{overflow: hidden; position: relative;}
.mainBanner .slick-arrow{display: none!important;}
.mainBanner .mainBanner_img{overflow: hidden;}
.magazineItem_info{position: absolute; bottom:0; left:0; width: 100%; padding:20px 15px; box-sizing: border-box;}
.mainBanner img{transform: scale(1.2); transition-duration: .7s; transition-delay: .4s;}
.mainBanner .slick-active img{transform: scale(1);}
.mainBanner_counter{position: absolute; top: 17px; right: 15px; font-size: 14px; letter-spacing: -0.04em; font-weight: 500; color:#888;}
.mainBanner_counter span{color: #1d1e1e;}
.mainBanner_titArea{width: 100%; padding: 40px 20px; position: relative; box-sizing: border-box; word-break: keep-all; position: absolute; bottom:0; left:0; opacity: 0; transition-delay: .4s; transition-duration: .4s;}
.slick-active .mainBanner_titArea{opacity: 1;}
.mainBanner_tit{font-size: 24px; letter-spacing: -0.04em; font-weight: 700; line-height: 1.4em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; max-height: 2.8em; color:#fff; margin-top: 7px;}
.mainBanner_desc{font-size: 15px; letter-spacing: -0.04em; font-weight: 500; margin-top: 15px; color:#fff; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; max-height: 2.8em; line-height: 1.4;}
.mainBanner_tags{display: none;}
.mainBanner_count{font-size: 14px; font-weight: 500; color: #acadb1; letter-spacing: -0.04em;}
.mainBanner_count span{color:#fff}
.mainBanner .slick-dots{display: none!important;}

/* Card Slider */
.mainCardSlider{width: 100%; overflow: hidden; position: relative;}
.main_cardList{box-sizing: border-box; overflow: visible; padding: 0 28px;}
.swiper-no-swiping .swiper-wrapper{transform: translate3d(0,0,0) !important;}
.main_cardList.swiper-no-swiping {overflow: inherit;}
.main_cardItem{padding: 10px 0 1px;}
.main_cardList .slick-list {margin: 0 -10px; overflow: visible;}
.main_cardList .slick-list .slick-slide{margin: 0 10px}
.mainCard{box-shadow: 0 2px 9px 2px rgb(0 0 0 / 50%); position: relative;}
.mainCard_img p{display: block; padding-top: 168.5%; background-size: cover; background-position: center; background-repeat: no-repeat; position: relative;}
.mainCard_img p::after{content:''; display: block; width: 100%; height: 100%; position: absolute; top:0; left:0; /* gradient fallback img */ background: left bottom / auto 100% url('../images/common/bg/bg_magazineGra.png') repeat-x; background: linear-gradient(rgba(0,0,0,0) 60%,rgba(0,0,0,.5) 90%)}
.mainCard_info{position: absolute; bottom:0; left:0; width: 100%; padding:15px 10px; box-sizing: border-box; }
.mainCard_tit{font-size: 17px; font-weight: 700; letter-spacing: -0.04em; color:#fff; line-height: 1.4em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; height: 2.8em; overflow: hidden; text-overflow: ellipsis; word-break: keep-all;}
.mainCard_tags{font-size: 0; margin-top: 10px; overflow: hidden; max-height: 18px;}
.mainCard_tags li{display: inline-block; vertical-align: top; margin-right: 2.5px;}
.mainCard_tags li:last-child{margin-right: 0;}
.mainCard_tags li a{display: block; font-size: 10px; letter-spacing: -0.04em; color:#fff; font-weight: 500; line-height: 16px; height: 18px; box-sizing: border-box; border: 1px solid #8f8f8f; background: #363332; padding:0 3.5px; border-radius: 1000px;}
.main_con-ivory .mainCard_tags li a{background: #e2dfda;color: #777777;}
.bigCardItem{margin-bottom: 32px;padding-top: 10px;}
.bigCardItem_img p{width: 100%;padding-bottom: 74.5%;background-repeat: no-repeat;background-size: cover;background-position: center;}
.bigCardItem_info{background: #272727;padding: 16px 20px;color: #fff;}
.bigCardItem_date{display: none;}
.bigCardItem_txt{font-size: 19px;font-weight: 600;letter-spacing: -0.05em;line-height: 1.4em; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; max-height: 4.2em; overflow: hidden; text-overflow: ellipsis; word-break: keep-all;}
.bigCardItem_subtxt{font-size: 12px;font-weight: 400;letter-spacing: -0.05em;margin-top: 10px;line-height: 1.4em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; max-height: 2.8em; overflow: hidden; text-overflow: ellipsis; word-break: keep-all;}
.rankingSlider .main_cardList {max-width: none; padding: 0; margin-left: 20px;}
.rankingSlider .main_cardList .main_cardItem {display: flex; width: auto; align-items: baseline;}
.rankingSlider .main_cardList .main_cardItem .mainCard_img p {padding-top: 167.1%;}
.rankingSlider .main_cardList .main_cardItem .rankingNum_wrap {width: 26%; padding-bottom: 8px;}
.rankingSlider .main_cardList .main_cardItem .mainCard_wrap {width: 63.4%;}


/*
    ===================================================================================================================
    PC/TAB
    ===================================================================================================================
*/
/*
    =======================
    MAIN - PC
    =======================
*/
@media all and (min-width: 768px) {
    /* 메인 배너 */
    .mainBanner_img::after{display: none;}
    .mainBanner .slick-arrow{display: block!important; width: 50px; height: 98px; text-indent: -9999px; position: absolute; top:50%; margin-top: -49px; background-size: contain; background-repeat: no-repeat; background-position: center; z-index: 1;}
    .mainBanner .slick-next{background-image: url('../images/common/ico/arwRight_50x98_white.png'); right:5.9%;}
    .mainBanner .slick-prev{background-image: url('../images/common/ico/arwLeft_50x98_white.png'); left:5.9%;}
    .mainBanner_counter{display: none;}
    .mainBanner_titArea{position: absolute; top:50%; left: 16%; width: 42%; transform: translateY(-50%); background: transparent; padding: 0; opacity: 0; margin-top: 20px; bottom: auto;}
    .slick-active .mainBanner_titArea{margin-top: 0; opacity: 1; transition-delay: .6s; transition-duration: .4s; transition-property: opacity, margin;}
    .mainBanner_tit{font-size: 50px; color:#fff; -webkit-line-clamp: 3; max-height: 4.2em;}
    .mainBanner_desc{font-size: 22px; margin-top: 40px; color:#fff;}
    .mainBanner_tags{display: block; margin-top: 30px; font-size: 0; white-space: nowrap}
    .mainBanner_tags li{display: inline-block; height: 40px; line-height: 38px; border: 1px solid #fff; border-radius: 1000px; padding: 0 27px; box-sizing: border-box; color:#fff; font-size: 20px; font-weight: 500; letter-spacing: -0.04em; margin-left: 10px;}
    .mainBanner_tags li:first-child{margin-left: 0;}
    .mainBanner_count{display: none;}
    .mainBanner .slick-dots{display: block!important; position: absolute; bottom:60px; left:50%; transform: translateX(-50%); font-size: 0;} 
    .mainBanner .slick-dots li{display: inline-block; margin-left: 10px;}
    .mainBanner .slick-dots li:first-child{margin-left: 0;} 
    .mainBanner .slick-dots button{width: 16px; height: 16px; text-indent: -9999px; border: 2px solid #fff; border-radius: 9999px; box-sizing: border-box;} 
    .mainBanner .slick-dots .slick-active button{background: #fff;} 

    /* Card Slider */
    .main_cardList{font-size: 0; max-width: 1520px; margin: 0 auto; padding: 0 40px; text-align: center;}
    .main_cardItem{width: calc((100% - 120px) / 4); padding:10px 0 1px; display: inline-block; vertical-align: top; margin-left: 40px;}
    .main_cardList.swiper-container{transform: translateX(185px);}
    .main_cardList.swiper-container.swiper-no-swiping{transform: translateX(0);}
    .main_cardList.swiper-container.swiper-no-swiping .swiper-wrapper{display: block;}
    .main_cardList.swiper-container.swiper-no-swiping .swiper-slide{margin: 0 0 0 40px;}
    .swiper-container .main_cardItem{width: 330px;display: inline-block;vertical-align: top;box-sizing: border-box;padding:10px 0 1px;vertical-align: top;margin-left: 0;}
    .main_cardList .slick-slider{margin: 0 -20px;}
    .main_cardList .slick-list{overflow: visible;}
    .main_cardItem:first-child{margin: 0;}
    .slick-list .main_cardItem{padding: 10px 20px 1px; margin: 0;}
    .main_cardItem{text-align: left;}
    .main_cardList .slick-list .slick-slide{margin: 0;}
    .swiper-container.swiper-no-swiping .main_cardItem:first-child{margin: 0;}
    .mainCard_img p{padding-top: 151.5%;}
    .mainCard_info{padding: 30px 0 30px 20px}
    .mainCard_tit{font-size: 30px;}  
    .mainCard_tags{margin-top: 28px; max-height: 35px;}
    .mainCard_tags li{margin-right: 5px;}
    .mainCard_tags li a{font-size: 16px; font-weight: 700; line-height: 31px; height: 35px;  padding:0 14px;border-width: 2px;}
    .mainCardSlider::before, .mainCardSlider::after{content:''; display: block; position: absolute; top: 0; height: 100%; width: 230px; z-index: 10;}
    .mainCardSlider::before{left: 0;}
    .mainCardSlider::after{right: 0;}
    .main_con-gray .mainCardSlider::before{background: transparent; background: linear-gradient(90deg, rgba(53,53,53,1) 60%, rgba(53,53,53,0) 100%);}
    .main_con-gray .mainCardSlider::after{background: transparent; background: linear-gradient(270deg, rgba(53,53,53,1) 60%, rgba(53,53,53,0) 100%)}
    .main_con-black .mainCardSlider::before{background: transparent; background: linear-gradient(90deg, rgba(29,30,30,1) 60%, rgba(29,30,30,0) 100%);}
    .main_con-black .mainCardSlider::after{background: transparent; background: linear-gradient(270deg, rgba(29,30,30,1) 60%, rgba(29,30,30,0) 100%)}
    .rankingSlider .main_cardList {margin-left: 0;}
    .rankingSlider .main_cardList.swiper-container {transform: translateX(30px);}
    .rankingSlider .main_cardList .main_cardItem {width: 600px!important; align-items: flex-start;}
    .rankingSlider .main_cardList .main_cardItem .rankingNum_wrap {width: 270px; padding-bottom: 0;}
    .rankingSlider .main_cardList .main_cardItem .mainCard_wrap {width: 330px;}
    .rankingSlider .main_cardList .main_cardItem .mainCard_img p {padding-top: 151.6%;}
    .rankingSlider.main_con-black .mainCardSlider::before {background: linear-gradient(90deg, rgba(29,30,30,1) 10%, rgba(29,30,30,0) 100%);}
    .rankingSlider.main_con-black .mainCardSlider::after {background: linear-gradient(270deg, rgba(29,30,30,1) 10%, rgba(29,30,30,0) 100%);}
}
/*
    =======================
    MAIN - 1920 이하
    =======================
*/
@media all and (min-width:1500px) and (max-width: 1750px) {.rankingSlider .main_cardList .main_cardItem {width: 550px!important;}}
@media all and (min-width:1200px) and (max-width: 1499px) {.rankingSlider .main_cardList .main_cardItem {width: 450px!important;}}
@media all and (min-width:950px) and (max-width: 1199px) {.rankingSlider .main_cardList .main_cardItem {width: 350px!important;}}
@media all and (min-width:769px) and (max-width: 949px) {.rankingSlider .main_cardList .main_cardItem {width: 250px!important;}}
@media all and (min-width:1367px) and (max-width: 1900px) {
    .swiper-container .main_cardItem{width: 250px!important;} 
    .main_cardList.swiper-container{transform: translateX(135px);}
    .main_cardList.swiper-container.swiper-no-swiping .swiper-slide{margin: 0 0 0 20px;}
    .main_cardList.swiper-container.swiper-no-swiping .swiper-slide:first-child{margin: 0;}
    .mainCardSlider::before, .mainCardSlider::after{width: 200px}
}
/*
    =======================
    MAIN - Tab
    =======================
*/
@media all and (max-width:1366px) and (min-width: 768px) {
    /* 메인 배너 */
    .mainBanner_titArea{left:75px}
    .mainBanner .slick-arrow{display: none!important;}
    .mainBanner_titArea{top:calc(50% + 45px);}
    .mainBanner_tit{font-size: 28px;}
    .mainBanner_desc{font-size: 16px; margin-top: 20px;}
    .mainBanner_tags{margin-top: 18px;}
    .mainBanner_tags li{height: 27px; line-height: 25px; padding: 0 18px; font-size: 14px; margin-left: 7px;}
    .main_leftTit{font-size: 27px; padding-left: 17px;}
    .main_leftTit::before{height: 20px; margin-top: -10px;}
    .mainBanner .slick-dots{bottom:40px;} 
    .mainBanner .slick-dots li{display: inline-block; margin-left: 7px;}
    .mainBanner .slick-dots button{width: 12px; height: 12px;} 

    /* Card Slider */
    .swiper-container .main_cardItem{width: 200px;}
    .main_cardList.swiper-container{transform: translateX(110px);}
    .main_cardList.swiper-container.swiper-no-swiping .swiper-slide{margin: 0 0 0 20px;}
    .swiper-container.swiper-no-swiping .main_cardItem:first-child{margin: 0;}
    .mainCard_info{padding: 15px 0 15px 10px;}
    .mainCard_tit{font-size: 18px;}  
    .bigCardItem{margin-bottom: 60px;}
    .bigCardItem_img p{padding-bottom: 50%;}
    .bigCardItem_info{padding: 3.3vw 1.6vw 0 2.6vw;}
    .bigCardItem_date{font-size: 1.1vw;margin-bottom: 3.0vw}
    .bigCardItem_txt{font-size: 1.9vw;}
    .bigCardItem_subtxt{font-size: 1.1vw;margin-top: 2.5vw;}
    .mainCardSlider::before, .mainCardSlider::after{width: 100px}
}

/*
    =======================
    MAIN - Tab
    =======================
*/
@media all and (max-width:1023px) and (min-width: 768px) {
    /* Card Slider */
    .swiper-container .main_cardItem{width: 150px;}
    .main_cardList.swiper-container{transform: translateX(85px);}
    .mainCardSlider::before, .mainCardSlider::after{width: 50px}
}