@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;}

.btn-basic {display: block;min-width: 255px;max-width: 255px;min-height: 50px;margin: 0 auto;padding: 13px 36px;border: 1px solid #000;border-radius: 10px;box-sizing: border-box;color: #000;font-size: 15px;position: relative;transition: .35s ease;}
.btn-basic::after {content: '';display: block;height: 100%;aspect-ratio: 1 / 1;border-radius: 8px;background: #000 url(../img/common/ico-btn_arrow.svg) center center / cover no-repeat;position: absolute;top: 0;bottom: 0;right: 0;margin: auto;transition: .35s ease;}
.btn-basic:hover {background: #000;color: #fff;}
.btn-basic:hover::after {filter: invert(1);}

@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 .cont01 {margin-bottom: 120px;}
.msec01 .cont01 ul {display: flex;gap: 56px;}
.msec01 .cont01 ul > li {width: 25%;}
.msec01 .cont01 ul > li > .img {margin-bottom: 20px;}
.msec01 .cont01 ul > li > .img-txt {font-size: 1.10em;font-weight: 600;line-height: 1.3;}
.msec01 .cont02 {display: grid;grid-template-columns: 26.875% 46.25% 26.875%;grid-template-rows: repeat(2, 1fr);min-height: 562px;border-top: 1px solid #7C7C7C;border-bottom: 1px solid #7C7C7C;box-sizing: border-box;}
.msec01 .cont02 > div {display: flex;flex-direction: column;justify-content: center;padding: 20px;box-sizing: border-box;}
.msec01 .cont02 .left-top {grid-column: 1 / 2;grid-row: 1 / 2;border-bottom: 1px solid #7C7C7C;box-sizing: border-box;}
.msec01 .cont02 .left-btm {grid-column: 1 / 2;grid-row: 2 / 3;}
.msec01 .cont02 .right-top {grid-column: 3 / 4;grid-row: 1 / 2;border-bottom: 1px solid #7C7C7C;}
.msec01 .cont02 .right-btm {grid-column: 3 / 4;grid-row: 2 / 3;}
.msec01 .cont02 .img {grid-column: 2 / 3;grid-row: 1 / 3;padding: 0;background: url(../img/main/msec01-img_05.jpg) 70% 100% / cover no-repeat;}
.msec01 .cont02 .img > img {display: none;}
.msec01 .cont02 .ico {margin: 0 auto 20px;}
.msec01 .cont02 .ico-tit {font-size: 1.10em;font-weight: 600;text-align: center;}
.msec01 .cont02 .ico-txt {font-size: .90em;text-align: center;}

@media all and (max-width: 1399px){
    .msec01 .cont01 ul {gap: 30px;}
    .msec01 .cont02 .ico {width: 65px;margin: 0 auto 10px;}
}
@media all and (max-width: 1199px){
    .msec01 .cont01 ul {gap: 20px;}
    .msec01 .cont01 ul > li > .img-txt {font-size: 1.0em;}
    .msec01 .cont02 .ico {width: 65px;margin: 0 auto 10px;}
}
@media all and (max-width: 1024px){
    .msec01 .cont01 ul {flex-wrap: wrap;gap: 40px 20px;}
    .msec01 .cont01 ul > li {width: calc(50% - 10px);}
    .msec01 .cont02 {min-height: 480px;}
    .msec01 .cont02 .ico {width: 60px;}
}
@media all and (max-width: 768px){
    .msec01 .msec-title > .title {font-size: 1.76em;}
    .msec01 .cont02 {grid-template-columns: 1fr 1fr;grid-template-rows: 1fr auto 1fr;}
    .msec01 .cont02 > div {padding: 30px 20px;}
    .msec01 .cont02 .left {padding: 30px 20px;}
    .msec01 .cont02 .left-top {grid-column: 1 / 2;grid-row: 1 / 2;border-bottom: 0;border-right: 1px solid #7C7C7C;}
    .msec01 .cont02 .left-btm {grid-column: 2 / 3;grid-row: 1 / 2;}
    .msec01 .cont02 .right-top {grid-column: 1 / 2;grid-row: 3 / 4;border-bottom: 0;border-right: 1px solid #7C7C7C;}
    .msec01 .cont02 .right-btm {grid-column: 2 / 3;grid-row: 3 / 4;}
    .msec01 .cont02 .img {grid-column: 1 / 3;grid-row: 2 / 3;background: none;}
    .msec01 .cont02 .img > img {display: block;}
    .msec01 .cont02 .ico {width: 50px;}
    .msec01 .cont02 .ico-txt {font-size: 16px;}
}
@media all and (max-width: 640px){
    .msec01 .cont01 {margin-bottom: 80px;}
    .msec01 .cont02 .left-top {border-bottom: 1px solid #7C7C7C;}
    .msec01 .cont02 .left-btm {border-bottom: 1px solid #7C7C7C;}
    .msec01 .cont02 .img {display: none;order: 3;}
    .msec01 .cont02 .ico-tit {font-size: 17px;}    
}
@media all and (max-width: 480px){
    .msec01 .cont01 ul > li {width: 100%;}
    .msec01 .cont02 {display: flex;flex-direction: column;}
    .msec01 .cont02 .left-top {border-right: 0;}
    .msec01 .cont02 .right-top {border-right: 0;border-bottom: 1px solid #7C7C7C;}
}


/* ******************* *
* 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);}

@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 .cinner {max-width: none;width: auto;margin: 0;}
.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-ctrls {gap: 22%;} 
}
@media all and (max-width: 1199px){
    .msec03 .contents .cinner {margin: 0 50px;}
    .msec03 .mart-slide .img {width: 45%;}
    .msec03 .mart-slide .desc {width: 55%;padding: 2% 0 0 3.5%;}
    .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: 1024px){
    .msec03 .contents .cinner {margin: 0 30px;}
}
@media all and (max-width: 768px){
    .msec03 .contents .cinner {margin: 0 20px;}
}
@media all and (max-width: 640px){
    .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: left;}
.msec04 .pic_lt {}
.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 {line-height:145px ;color:#666;text-align:center;padding:0}
.msec04 .pic_lt ul > .empty_li:before {background:none;padding:0}

@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 {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;}
}