/* 
    : DESC
    - 신규 콘텐츠 리스트 관련 css ( 2022.04.13 )
*/

.archive-new {position: relative; display: flex; display: -webkit-box; display: -ms-flexbox; width: 100%; height: calc(100vh - 125px); padding-left: calc((100vh - 125px)*0.5631);}

/* 이미지 롤링 영역 */
.archive-new .main-visual-banner-wrap.main-visual-wrap {position: absolute; left: 0; -webkit-box-flex: 0; -ms-flex: 1 0 calc((100vh - 125px)*0.5631);  flex: 1 0 calc((100vh - 125px)*0.5631); width: calc((100vh - 125px)*0.5631); height: 100%; margin: 0; border-right: 1px solid #000;} 
.archive-new .main-visual-banner-wrap.main-visual-wrap .main-visual-inner {position: relative; height: 100%;}
.archive-new .main-visual-banner-wrap.main-visual-wrap .ratio-img-wrap .img-viewer { display: block; padding-top: 0%;  width: 100%; height: 100%; background-color: #000; background-size: cover;}
.archive-new .main-visual-banner-wrap.main-visual-wrap .banner-info-wrap { position: absolute; left: 30px; bottom: 90px; color: #fff; z-index: 1;}
.archive-new .main-visual-banner-wrap.main-visual-wrap .banner-info-wrap .banner-title { display: block; max-width: 260px; font-size: 4rem; line-height: 5.5rem; word-break: keep-all; }
.archive-new .main-visual-banner-wrap.main-visual-wrap .banner-info-wrap .banner-sub { display: block; padding-top: 10px; font-size: 2.4rem; line-height: 3.6rem; word-break: keep-all; }
.archive-new .main-visual-banner-wrap.main-visual-wrap .btn-swiper-arrow-wrap {position: absolute; right: 0; bottom: 0; z-index: 1;}
.archive-new .main-visual-banner-wrap.main-visual-wrap.disabled .swiper-wrapper {transform: translate3d(0px, 0, 0) !important; }
.archive-new .main-visual-banner-wrap.main-visual-wrap.disabled .btn-swiper-arrow-wrap { display:none; }
.archive-new .main-visual-banner-wrap.main-visual-wrap a:hover { cursor: pointer; }

/* 컨텐츠 그룹 영역 */
.archive-new .archive-content-wrap {-webkit-box-flex: 1; -ms-flex: 1; flex: 1; height: 100%; width:100%;}
.archive-new .archive-content-wrap .archive-content-inner {height: 100% !important;}
.archive-new .content-group-swiper-wrap {position: fixed; z-index: 3; padding: 0 30px; width: calc(100% - ((100vh - 125px)*0.5631)); min-width:864px; height: 115px;background-color: rgba(255, 255, 255, 0.75);}
/* .archive-new .content-group-swiper-wrap {position: fixed; z-index: 3; padding: 0 30px; height: 115px;background-color: rgba(255, 255, 255, 1);} */
.archive-new .content-group-swiper-wrap .swiper-wrapper {align-items: center;}
.header-wrap.sps-blw ~ .contents-wrap .archive-new .content-group-swiper-wrap {top: 85px;}
.archive-new .content-group-swiper-wrap .swiper-wrapper .select-item {position: relative; display: inline-block; width: auto; height: 55px; border: 1px solid #f2f2f2; background-color: #fff; border-radius: 38px; z-index: -1;}
.archive-new .content-group-swiper-wrap .swiper-wrapper .select-item .brand-info {margin: 0 20px 0 5px;}
.archive-new .content-group-swiper-wrap .swiper-wrapper .select-item .brand-info::before,
.archive-new .content-group-swiper-wrap .swiper-wrapper .select-item .brand-info::after {display: inline-block;-webkit-transition:opacity .23s ease-out;transition: opacity .23s ease-out;position: absolute;content: "";}
.archive-new .content-group-swiper-wrap .swiper-wrapper .select-item .brand-info::before {width:100%;height:100%;background:rgba(0,0,0,1);border-radius: 38px;opacity: 0;left: 0;top: 0;}
.archive-new .content-group-swiper-wrap .swiper-wrapper .select-item .brand-info .brand-img {position: relative; display: inline-block; margin-top: 4.4px; width: 45px; height: 45px; border-radius: 50%; overflow:hidden; background-size: 100%;}
.archive-new .content-group-swiper-wrap .swiper-wrapper .select-item.new .brand-info .brand-img::after {content: ""; position: absolute; width:15px;height:15px;background:#ff0000;border-radius:50%;right:0;bottom:0;box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);}
.archive-new .content-group-swiper-wrap .swiper-wrapper .select-item .brand-info .brand-name {display: inline-block; margin-left: 15.4px; line-height: 5rem; vertical-align: top; color: #000;}
.archive-new .content-group-swiper-wrap .btn-swiper {width: 60px; height: 115px; background: rgba(255, 255, 255, 0);}
.archive-new .content-group-swiper-wrap .btn-swiper:hover {background: rgba(255, 255, 255, 1);}
.archive-new .content-group-swiper-wrap .btn-swiper .icon {width: 45px; height: 45px; background: url('../images/ui/button/ui_btn_swiper_arrow2.png') no-repeat 0 0;}
.archive-new .content-group-swiper-wrap .btn-swiper.next .icon {background-position: -45px 0;}

.archive-new .content-group-swiper-wrap .swiper-wrapper .select-item input[type=radio] {display: none;}
.archive-new .content-group-swiper-wrap .swiper-wrapper .select-item input[type=radio]:checked+label .brand-info::before {opacity: 1; z-index: -1;}
.archive-new .content-group-swiper-wrap .swiper-wrapper .select-item input[type=radio]:checked+label .brand-info::after {opacity: 1;}
.archive-new .content-group-swiper-wrap .swiper-wrapper .select-item input[type=radio]:checked+label .brand-info .brand-name {color: #fff;}

/* 컨텐츠 목록 */
.archive-new .content-list-wrap {padding: 135px 30px 30px;}
.archive-new .content-list-wrap .contnet-date {margin-bottom: 30px; font-size: 4.5rem; line-height: 6rem;}
.archive-new .content-list-wrap .content-item {position: relative; display: inline-block; margin-bottom: 75px; margin-left: 30px; vertical-align: top;height: auto;}
.archive-new .content-list-wrap .content-dday {position: absolute; top: 0; left: 0; padding: 4px 10px; color: #fff; font-size: 1.3rem; line-height: 1.6rem; z-index: 2;}
.archive-new .content-list-wrap .content-dday::before {content: ""; position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; background-color: #000; z-index: -1;}
.archive-new .content-list-wrap .content-item-wrap .content-item .content-group {margin: -55px 0 0 -10px;}
.archive-new .content-list-wrap .content-item-wrap .content-item .content-group .select-item { position: relative;}
.archive-new .content-list-wrap .content-item-wrap .content-item .content-group .select-item .brand-img {position: relative; width: 40px; height: 40px; border-radius: 50%;  background-position: center; box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16); background-size: 100%;}
.archive-new .content-list-wrap .content-item-wrap .content-item .content-group .select-item .brand-img span,
.archive-new .content-list-wrap .content-item-wrap .content-item .content-group .select-item .brand-img img { position:relative !important; width:40px  !important; height:40px  !important; border-radius: 50%; }
.archive-new .content-list-wrap .content-item-wrap .content-item .content-img ,
.archive-new .content-list-wrap .content-item-wrap .content-item .content-img a,
.archive-new .content-list-wrap .content-item-wrap .content-item .content-img span { position:relative !important; width: 100%; height: auto;}
.archive-new .content-list-wrap .content-item-wrap .content-item .content-img img {position:relative  !important; width: 100%  !important; height: 100%  !important;}
.archive-new .content-list-wrap .content-item-wrap .content-item .content-info {margin-top: 30px;}
.archive-new .content-list-wrap .content-item-wrap .content-item .content-info .content-title {max-width:310px; font-size: 2.4rem; line-height: 3.2rem; word-break: keep-all; word-wrap: break-word;}
.archive-new .content-list-wrap .content-item-wrap .content-item .content-info .content-txt {margin-top: 5px; font-size: 1.4rem; line-height: 2.1rem; word-break: keep-all;  word-wrap: break-word;}
.archive-new .content-list-wrap .content-item-wrap .content-item .content-info .content-tag {padding-top: 15px;}
.archive-new .content-list-wrap .content-item-wrap .content-item .content-info .content-tag span {display: inline-block; padding: 6px 10px; background-color: #fff; border: 1px solid #f2f2f2; border-radius: 15px; color: #000; font-size: 1.3rem; text-align: center;}

.archive-new .content-list-wrap .content-item-wrap .content-item .content-info .content-title span:hover,
.archive-new .content-list-wrap .content-item-wrap .content-item .content-info .content-txt:hover,
.archive-new .content-list-wrap .content-item-wrap .content-item .content-info .content-tag span:hover,
.archive-new .content-list-wrap .content-item-wrap .content-item .content-img a:hover { cursor: pointer;}

/* media query */
@media screen and (min-width: 1950px) { 
    .archive-new .content-list-wrap .content-item-wrap .content-item {width: calc(20% - 24px);}
    .archive-new .content-list-wrap .content-item:nth-child(5n+1) {margin-left: 0;}

}

@media screen and (min-width: 1501px) and (max-width: 1949px) { 
    .archive-new .content-list-wrap .content-item-wrap .content-item {width: calc(25% - 22.5px);}
    .archive-new .content-list-wrap .content-item:nth-child(4n+1) {margin-left: 0;}

}

@media screen and (max-width: 1500px) { 
    .archive-new .content-list-wrap .content-item-wrap .content-item {width: calc(33.3% - 20px);}
    .archive-new .content-list-wrap .content-item:nth-child(3n+1) {margin-left: 0;}
}