@charset "utf-8";

/* ******************* *
* 공통
* ******************* */
.msec-title {margin-bottom: 50px;}
.msec-title .title {font-size: 2.25em;font-weight: 600;text-align: center;line-height: 1.3;}



@media all and (max-width: 768px){
    .msec-title .title {font-size: 2.0em;}
}


/* ******************* *
* MVIS
* ******************* */
.mvis {width: 100%;height: 570px;}
.main-visual {width: 100%;height: 100%;background: url(../img/main/mvis-img_01.jpg) center center / cover no-repeat;}
.main-visual .cinner {height: 100%;position: relative;}
.main-visual__txt {display: flex;flex-direction: column;padding: 44px 40px;box-sizing: border-box;background: rgba(0,0,0,.65);color: #fff;backdrop-filter: blur(20px);position: absolute;right: 0;bottom: 80px;}
.main-visual__txt > .title {margin-bottom: 5px;font-size: 1.65em;font-weight: 700;}
.main-visual__txt > .txt {margin-bottom: 50px;font-size: .90em;font-weight: 500;}
.main-visual__txt > a {align-self: flex-end;padding-bottom: 4px;/* border-bottom: 1px solid #fff; */color: #fff;font-size: 14px;font-weight: 500;position: relative;}
.main-visual__txt > a::after {content: '';display: block;width: 100%;height: 1px;background: #fff;transition: transform .5s ease;}
.main-visual__txt > a:hover::after {animation: ani_underbar .35s ease;}
.main-visual__txt > a > span {padding-right: 14px;position: relative;}
.main-visual__txt > a > span:before,
.main-visual__txt > a > span:after {content: '';display: block;width: 8px;height: 2px;background: #fff;position: absolute;top: 0;bottom: 0;right: 0;margin: auto;}
.main-visual__txt > a > span:after {transform: rotate(90deg);}

@keyframes ani_underbar {
    0% {transform: scaleX(0);}
    100% {transform: scaleX(1);}
}

@media all and (max-width: 640px){
    .mvis {height: 480px;}
}
@media all and (max-width: 480px){
    .main-visual__txt {padding: 34px 30px;}
    .main-visual__txt > .txt > .line-br {display: inline;}
}



/* ******************* *
* MSEC01
* ******************* */
.msec01 {padding: 90px 0 0;}
.msec01 .msec-title > .title {font-size: 2.0em;}
.msec01 .pic_lt ul {display: flex;gap: 66px;}
.msec01 .pic_lt ul > li {width: 25%;}
.msec01 .pic_lt ul > li > a > .img {margin-bottom: 15px;}
.msec01 .pic_lt ul > li > .info > .title {margin-bottom: 15px;font-size: 18px;font-weight: 500;line-height: 1.3;display: -ms-flexbox;display: -webkit-box;text-overflow: ellipsis;-webkit-box-orient: vertical;overflow: hidden;-webkit-line-clamp: 2;}
.msec01 .pic_lt ul > li > .info > .title:hover {text-decoration: underline;text-underline-offset: 4px;}
.msec01 .pic_lt ul > li > .info .fa-heart {color:#ff0000}
.msec01 .pic_lt ul > li > .info .fa-lock {display:inline-block;line-height:14px;width:16px;font-size:0.833em;color:#4f818c;background:#cbe3e8;text-align:center;border-radius:2px;font-size:12px;border:1px solid #cbe3e8;vertical-align:middle}
.msec01 .pic_lt ul > li > .info .new_icon {display:inline-block;width:16px;line-height:16px;font-size: 12px;color: #fff;background: #111;text-align:center;border-radius:2px;margin-left:2px;font-weight:bold;vertical-align:middle}
.msec01 .pic_lt ul > li > .info .hot_icon {display:inline-block;width:16px;line-height:16px;font-size:0.833em;color:#ff0000;background:#ffb9b9;text-align:center;border-radius:2px;vertical-align:middle}
.msec01 .pic_lt ul > li > .info .fa-caret-right {color:#bbb}
.msec01 .pic_lt ul > li > .info .fa-download {display:inline-block;width:16px;line-height:16px;font-size:0.833em;color:#daae37;background:#ffefb9;text-align:center;border-radius:2px;vertical-align:middle}
.msec01 .pic_lt ul > li > .info .fa-link {display:inline-block;width:16px;line-height:16px;font-size:0.833em;color:#b451fd;background:#edd3fd;text-align:center;border-radius:2px;vertical-align:middle}
.msec01 .pic_lt ul > li > .info > .date {color: #898989;font-size: 17px;}
.msec01 .pic_lt ul  .empty_li {width: 100%;line-height:145px;}
.msec01 .pic_lt ul > .empty_li:before {background:none;padding:0}
.msec01 .pic_lt .btn-basic {width: 200px;margin-top: 80px;}

@media all and (max-width: 1399px){
    .msec01 .pic_lt ul {gap: 40px;}
}
@media all and (max-width: 1199px){
    .msec01 .pic_lt ul {gap: 30px;}
}
@media all and (max-width: 1024px){
    .msec01 .msec-title {margin-bottom: 30px;}
    .msec01 .pic_lt ul {gap: 20px;}
    .msec01 .pic_lt ul > li > .info > .title {font-size: 17px;}
}
@media all and (max-width: 768px){
    .msec01 .msec-title > .title {font-size: 1.76em;}
    .msec01 .pic_lt ul {flex-wrap: wrap;gap: 40px 20px;}
    .msec01 .pic_lt ul > li {width: calc(50% - 10px);}
}
@media all and (max-width: 480px){
    .msec01 .pic_lt ul {gap: 20px 10px;}
    .msec01 .pic_lt ul > li {width: calc(50% - 5px);}
}


/* ******************* *
* MSEC02
* ******************* */
.msec02 {padding: 120px 0;}
.msec02 .contents .list {margin-bottom: 10px;}
.msec02 .contents .item-sizer,
.msec02 .contents .item {width: calc(20% - 40px);}
.msec02 .contents .item {margin-bottom: 50px;}
.msec02 .contents .item .img {margin-bottom: 10px;overflow: hidden;}
.msec02 .contents .item .img > img {transition: .35s ease;}
.msec02 .contents .item .desc > .artist {font-size: 17px;font-weight: 500;display: -ms-flexbox;display: -webkit-box;text-overflow: ellipsis;-webkit-box-orient: vertical;overflow: hidden;-webkit-line-clamp: 1;}
.msec02 .contents .item .desc > .info {margin: 5px 0;}
.msec02 .contents .item .desc > .info > p {color: #898989;font-size: 15px;line-height: 1.5;}
.msec02 .contents .item .desc > .price {font-weight: 700;}
.msec02 .contents .item > a:hover .img > img {transform: scale(1.05);}
.msec02 .contents .btn-basic {width: 255px;}

@media all and (max-width: 1199px) {
    .msec02 .contents .item-sizer,
    .msec02 .contents .item {width: calc(25% - 22.5px);}
}
@media all and (max-width: 1024px) {
    .msec02 .contents .item-sizer,
    .msec02 .contents .item {width: calc(33.333% - 13.44px);}
}
@media all and (max-width: 640px) {
    .msec02 .contents .item-sizer,
    .msec02 .contents .item {width: calc(50% - 10px);}
    .msec02 .contents .item {margin-bottom: 30px;}
}



/* ******************* *
* MSEC03
* ******************* */
.msec03 {padding: 110px 0 120px;background: #F6F6F6;}
.msec03 .msec-title .title {text-align: left;}
.msec03 .contents {position: relative;}
.msec03 .btn-admin {display: block;padding: 3px 10px;background: #E04545;color: #fff;font-size: 14px;font-weight: 500;position: absolute;right: 0;bottom: calc(100% + 20px);}
.msec03 .mart-slide .swiper-slide {display: flex;align-items: flex-start;}
.msec03 .mart-slide .img {width: 56%;}
.msec03 .mart-slide .img > img {opacity: .2;}
.msec03 .mart-slide .desc {width: 44%;padding: 3.3% 0 0 5.5%;box-sizing: border-box;}
.msec03 .mart-slide .desc > .title {margin-bottom: 24px;font-size: 1.50em;font-weight: 500;line-height: 1.4;}
.msec03 .mart-slide .desc > .txt-cont .txt {color: #404040;font-size: 17px;}
.msec03 .mart-slide .desc > .txt-cont .txt:not(:last-child) {margin-bottom: 20px;}
.msec03 .mart-slide .desc > .txt-cont .gray {color: #999;}
.msec03 .mart-slide .swiper-slide-active .img > img {opacity: 1;}

.msec03 .mart-slide-ctrls {display: flex;justify-content: flex-end;gap: 26%;max-width: 1445px;width: 76%;margin-top: 40px;}
.msec03 .mart-slide-ctrls .data-nav {display: flex;gap: 20px;align-items: center;left: 47%;bottom: 32px;z-index: 1;}
.msec03 .mart-slide-ctrls .data-nav > button {color: #111;font-size: 12px;font-weight: 600;position: relative;}
.msec03 .mart-slide-ctrls .data-nav > button.swiper-button-disabled {opacity: .5;}
.msec03 .mart-slide-ctrls .data-nav > .btn-prev {padding-left: 15px;}
.msec03 .mart-slide-ctrls .data-nav > .btn-next {padding-right: 15px;}
.msec03 .mart-slide-ctrls .data-nav > .btn-prev::before,
.msec03 .mart-slide-ctrls .data-nav > .btn-next::after {content: '';display: block;width: 10px;height: 10px;border-style: solid;border-color: #111;transform: rotate(45deg);position: absolute;top: 0;bottom: 0;margin: auto;}
.msec03 .mart-slide-ctrls .data-nav > .btn-prev::before {border-width: 0 0 2px 2px;left: 0;}
.msec03 .mart-slide-ctrls .data-nav > .btn-next::after {border-width: 2px 2px 0 0;right: 0;}
.msec03 .mart-slide-ctrls .data-nums {width: auto;color: #B0B0B0;font-family: var(--font-Inter);font-size: 17px;font-weight: 500;/* position: absolute; */left: 72%;bottom: 20px;z-index: 1;}
.msec03 .mart-slide-ctrls .data-nums .swiper-pagination-current {color: #111;font-size: 1.80em;font-weight: 700;}

@media all and (max-width: 1699px){
    .msec03 .mart-slide-ctrls {gap: 24%;}
}
@media all and (max-width: 1499px){
    .msec03 .mart-slide-ctrls {gap: 23%;}
}
@media all and (max-width: 1399px){
    .msec03 .mart-slide .desc {width: 44%;padding: 2.3% 0 0 3.5%;box-sizing: border-box;}
    .msec03 .mart-slide-ctrls {gap: 22%;} 
}
@media all and (max-width: 1199px){
    .msec03 .mart-slide .img {width: 45%;}
    .msec03 .mart-slide .desc {width: 55%;padding: 1% 0 0 3%;}
    .msec03 .mart-slide .desc > .title {margin-bottom: 15px;font-size: 1.30em;}
    .msec03 .mart-slide .desc > .txt-cont .txt {font-size: 16px;}
    .msec03 .mart-slide .desc > .txt-cont .txt:not(:last-child) {margin-bottom: 10px;}
    .msec03 .mart-slide-ctrls {justify-content: space-between;width: 55%;margin-left: auto;padding: 0 0 0 3.5%;gap: 0;}
}
@media all and (max-width: 768px){
    .msec03 .mart-slide .swiper-slide {flex-direction: column;}
    .msec03 .mart-slide .img {width: 100%;}
    .msec03 .mart-slide .desc {width: 100%;padding: 30px 15px;}
    .msec03 .mart-slide-ctrls {width: 100%;margin-top: 20px;padding: 0 15px;}
}



/* ******************* *
* MSEC04
* ******************* */
.msec04 {padding: 120px 0;}
.msec04 .msec-title .title {text-align: center;}
.msec04 .pic_lt ul {display: flex;gap: 66px;}
.msec04 .pic_lt ul > li {width: 25%;}
.msec04 .pic_lt ul > li > a > .img {margin-bottom: 15px;}
.msec04 .pic_lt ul > li > .info > .title {margin-bottom: 15px;font-size: 18px;font-weight: 500;line-height: 1.3;display: -ms-flexbox;display: -webkit-box;text-overflow: ellipsis;-webkit-box-orient: vertical;overflow: hidden;-webkit-line-clamp: 2;}
.msec04 .pic_lt ul > li > .info > .title:hover {text-decoration: underline;text-underline-offset: 4px;}
.msec04 .pic_lt ul > li > .info .fa-heart {color:#ff0000}
.msec04 .pic_lt ul > li > .info .fa-lock {display:inline-block;line-height:14px;width:16px;font-size:0.833em;color:#4f818c;background:#cbe3e8;text-align:center;border-radius:2px;font-size:12px;border:1px solid #cbe3e8;vertical-align:middle}
.msec04 .pic_lt ul > li > .info .new_icon {display:inline-block;width:16px;line-height:16px;font-size: 12px;color: #fff;background: #111;text-align:center;border-radius:2px;margin-left:2px;font-weight:bold;vertical-align:middle}
.msec04 .pic_lt ul > li > .info .hot_icon {display:inline-block;width:16px;line-height:16px;font-size:0.833em;color:#ff0000;background:#ffb9b9;text-align:center;border-radius:2px;vertical-align:middle}
.msec04 .pic_lt ul > li > .info .fa-caret-right {color:#bbb}
.msec04 .pic_lt ul > li > .info .fa-download {display:inline-block;width:16px;line-height:16px;font-size:0.833em;color:#daae37;background:#ffefb9;text-align:center;border-radius:2px;vertical-align:middle}
.msec04 .pic_lt ul > li > .info .fa-link {display:inline-block;width:16px;line-height:16px;font-size:0.833em;color:#b451fd;background:#edd3fd;text-align:center;border-radius:2px;vertical-align:middle}
.msec04 .pic_lt ul > li > .info > .date {color: #898989;font-size: 17px;}
.msec04 .pic_lt ul  .empty_li {width: 100%;line-height:145px;}
.msec04 .pic_lt ul > .empty_li:before {background:none;padding:0}
.msec04 .pic_lt .btn-basic {width: 200px;margin-top: 80px;}

@media all and (max-width: 1399px){
    .msec04 .pic_lt ul {gap: 40px;}
}
@media all and (max-width: 1199px){
    .msec04 .pic_lt ul {gap: 30px;}
}
@media all and (max-width: 1024px){
    .msec04 .msec-title {margin-bottom: 30px;}
    .msec04 .pic_lt ul {gap: 20px;}
    .msec04 .pic_lt ul > li > .info > .title {font-size: 17px;}
}
@media all and (max-width: 768px){
    .msec04 .pic_lt ul {flex-wrap: wrap;gap: 40px 20px;}
    .msec04 .pic_lt ul > li {width: calc(50% - 10px);}
}
@media all and (max-width: 480px){
    .msec04 .pic_lt ul {gap: 20px 10px;}
    .msec04 .pic_lt ul > li {width: calc(50% - 5px);}
}



/* ******************* *
* MSEC05
* ******************* */
.msec05 {padding: 120px 0;background: url(../img/main/msec05-img_bg.jpg) center center / cover no-repeat;}
.msec05 .msec-title {margin-bottom: 74px;color: #fff;}
.msec05 .msec-title .title {margin-bottom: 34px;font-size: 1.75em;}
.msec05 .msec-title .txt {font-size: 17px;text-align: center;line-height: 1.7;}
.msec05 .contents .btn-basic {width: 225px;border-color: #fff;color: #fff;}
.msec05 .contents .btn-basic::after {filter: invert(1);}
.msec05 .contents .btn-basic:hover {background: #fff;color: #000;}
.msec05 .contents .btn-basic:hover::after {filter: invert(0);}

@media all and (max-width: 1024px){
    .msec05 {padding: 100px 0;}
}
@media all and (max-width: 768px){
    .msec05 {padding: 80px 0 100px;}
}
@media all and (max-width: 640px){
    .msec05 .msec-title .txt > .line-br {display: inline;}
}